search

FGF-College-Work / Forum

:beer: Espaço dedicado a discussões e tira dúvida sobre disciplinas e conteúdo tecnológico.
MIT License
13 stars 4 forks source link

Use o WordPress como um headless CMS #147

Open marcialwushu opened 5 years ago

marcialwushu commented 5 years ago

Use o WordPress como um headless CMS

O que é um headless CMS? Como isso pode ajudar você a construir um site mais robusto e escalável? Vamos descobrir.

Eu ouvi pela primeira vez sobre a abordagem headless CMS em uma palestra que assisti no Twin Cities Drupal. Gostei da ideia de uma separação de interesses entre conteúdo de autoria e visualizá-lo.

Eu já tinha experimentado a facilidade com que um servidor pode cair, tirando todos os sites, levando a minutos ou horas de pânico de parar o coração (havia 24 no meu). Eu também tinha visto como um site monolítico baseado em CMS poderia sofrer um comprometimento de segurança e ter muito esforço para reparar (o que me levou mais de dois dias de trabalho não remunerado).

Eu tinha visto os benefícios das CDNs (redes de distribuição de conteúdo) que podem armazenar seus arquivos de imagem, áudio e vídeo em servidores otimizados para entrega rápida e podem duplicar esses arquivos em todo o mundo para uma entrega rápida para essas regiões, se necessário. E se todo o seu site pudesse se beneficiar dessa abordagem?

VOCÊ PRECISARÁ DE…

Começando

O WordPress sai da caixa com a API REST e é isso que vamos usar para consultar seus dados. Então, nós realmente não precisamos de mais nada! Nosso site de exibição é totalmente separado do nosso site de conteúdo, portanto, não precisaremos de temas do WordPress ou de qualquer outra personalização fora de alguns plug-ins (opcionais). Embora, claro, você pode adicionar estes se você quiser.

A exceção é se você precisar de campos meta personalizados para áreas de conteúdo extra. Você provavelmente está usando Advanced Custom Fields para fazer isso; você pode adicionar esses dados à API do WordPress instalando este plug-in .

Use um gerador de site estático

A tela inicial padrão do Gatsby

Agora que temos nossa fonte de conteúdo, vamos buscar os dados e exibi-los usando um gerador de site estático. Minha arma de escolha neste reino é o Gatsby , um excelente gerador de site estático que é construído com JavaScript.

Se você está procurando uma boa maneira de desenvolver suas habilidades em JavaScript e aprender Reagir ficando preso em algum código, eu recomendo fortemente que o Gatsby faça isso. Eu aprendi muito sozinho jogando com ele.

Primeiro, vamos instalar uma ferramenta de linha de comando que nos permita criar sites Gatsby:

npm install -global gatsby-cli

Agora, navegue até a pasta onde você deseja manter seu site e execute este comando:

gatsby new blog

Isso criará uma nova pasta chamada 'blog' e instalará o Gatsby e suas dependências nessa pasta. Abra esta pasta no seu editor de texto favorito. Pode parecer que há muitos arquivos lá. Não se preocupe, nós só estaremos editando diretamente os arquivos gatsby-config.js , gatsby-node.js e a pasta src , que é onde nossos modelos vivem.

Obtendo nosso conteúdo

O primeiro passo que queremos dar é buscar nosso conteúdo da API do site WordPress.

Para fazer isso, vamos instalar o gatsby-source-wordpress , um plugin pré-escrito para WordPress. Isso ilustra um dos principais motivos pelos quais eu amo o Gatsby - você pode obter seus dados de várias fontes diferentes. Muitos geradores de sites estáticos estão restritos ao uso de arquivos Markdown, mas o Gatsby é muito flexível.

O ecossistema de plugins do Gatsby é muito maduro. Existem muitas maneiras pré-escritas de obter seus dados e muitas outras funcionalidades inteligentes que são úteis também.

Para instalar o plug-in, primeiro altere o diretório para o novo site do Gatsby usando este comando: cd blog .

Agora execute este comando: npm install --save gatsbysource-wordpres s.

Feito isso, é hora de abrir o arquivo gatsby-config.js. Você verá que já existe uma configuração básica que o Gatsby nos fornece por padrão. Vamos construir sobre isso para configurar nosso plugin aqui:

module.exports = {
 siteMetadata: {
  title: 'Gatsby Default Starter',
 },
 plugins: [
  'gatsby-plugin-react-helmet',
  {
   resolve: "gatsby-source-wordpress",
   options: {
    baseUrl: "my-wordpress-site.com",
    protocol: "https",
    hostingWPCOM: false,
    useACF: true,
    searchAndReplaceContentUrls: {
     sourceUrl: "https://my-wordpress-site.com",
     replacementUrl: "https://my-static-site.com",
    }
   },
  },
 ],
}

Funcionou?

Você pode verificar abrindo seu terminal, digitando gatsby develop e veja o que acontece. Esteja avisado! Mesmo se você tiver suas configurações corretas, você receberá alguns avisos de qualquer maneira - isso pode ser o Gatsby procurando por conteúdo que você não tenha escrito ainda.

Agora você pode visualizar o padrão gatsby-starter no navegador.

http://localhost:8000/

Visualize o GraphiQL, um IDE no navegador, para explorar os dados e o esquema do seu site.

http://localhost:8000/___graphql

Observe que a compilação de desenvolvimento não é otimizada. Para criar uma construção de produção, use o gatsby build.

Se o iniciador padrão do Gatsby (à direita) não for o que você está obtendo, verifique se o site do WordPress não está em um subdomínio, se está usando HTTPS ou HTTP e se você tem o mesmo em suas configurações.

Agora podemos ir para http: // localhost: 8000 / e ver nosso site Gatsby!

Podemos consultar nossos dados?

Você deve ter notado que não há conteúdo WordPress aqui. Isso porque ainda não contamos ao Gatsby o que fazer com ele. Antes de fazermos isso, vamos verificar se disponibilizamos nosso conteúdo para o Gatsby. Para fazer isso, acesse este URL:

http://localhost:8000/___graphql

Esta ferramenta interna é chamada GraphiQL e é outro poder secreto do Gatsby.

O GraphQL é semelhante ao REST: é uma maneira de consultar dados. Mas com o GraphQL, você pode interagir com seus dados com muito mais facilidade. O GraphiQL (um IDE visual para GraphQL) pode nos mostrar alguns desses truques. No painel esquerdo, tente digitar o seguinte:

{
 allWordpressPost {
  edges {
   node {
    id
    slug
    status
    template
    format
   }
  }
 }
}

Isso pode parecer um pouco com JSON, mas não é. É uma nova linguagem de consulta que, um dia, acho que substituirá o REST como uma maneira de se comunicar com APIs.

O que você conseguiu quando pressionou ctrl + enter no GraphiQL? Espero que você tenha visto suas postagens e páginas do WordPress no lado direito da tela.

Na verdade, vamos usar essa consulta em nossa próxima etapa, então mantenha-a à mão! Você pode querer ver que outros dados você pode obter com o GraphiQL enquanto estiver aqui. Se você quiser fazer isso, tente mover o cursor e digitar ctrl + space e / ou ctrl + enter. Isso revelará outros grupos de conteúdo.

Então, agora temos conteúdo em Gatsby. Em seguida, precisamos exibi-lo.

Página 404 de desenvolvimento do Gatsby mostrando todos os nossos posts do WordPress

Para a próxima etapa, vamos usar o arquivo gatsby-node.js .

O gatsby-node.js é um arquivo que você pode usar para interagir com a "API do Node" do Gatsby. Aqui você pode controlar como seu site é gerado e criar páginas, postagens e muito mais.

Vamos escrever algumas instruções aqui para dizer ao Gatsby o que fazer com nossos dados:


const path = require(`path`);

exports.createPages = ({ graphql, boundActionCreators })
=> {
 const { createPage } = boundActionCreators
 return new Promise((resolve, reject) => {
  graphql(
   `
   {
    allWordpressPost {
     edges {
      node {
       id
       slug
       status
       template
       format
      }
     }
    }
   }
  `
 ).then(result => {
   if (result.errors) {
    console.log(result.errors)
    reject(result.errors)
   }

   const postTemplate = path.resolve(`./src/templates/
post.js`)

   result.data.allWordpressPost.edges.forEach(edge => {
    createPage({
     path: `/${edge.node.slug}/`,
     component: postTemplate,
     context: {
      id: edge.node.id,
     },
    })
   })
   resolve()
  })
 })
}

Esse código cria páginas de nossa consulta GraphQL e, para cada página, ele usa um modelo que definimos ( /src/templates/post.js ). Então, em seguida, precisamos criar esse arquivo!

Criar modelo de postagem

Dentro da / pasta / src, crie uma pasta chamada modelos e um arquivo dentro que é chamado post.js . Adicione a este código:


import React from 'react'
import Helmet from 'react-helmet'

class postTemplate extends React.Component {
 render() {
  const post = this.props.data.wordpressPost;
  const slug = this.props.data.wordpressPost.slug;

  return (
   <div>
   <Helmet title={`${titleString} | ${siteTitle}`} />
   <h1 dangerouslySetInnerHTML={{ __html: post.title }} />
   <div dangerouslySetInnerHTML={{ __html: post.content }} />
   </div>
  )
 }
}

export default pageTemplate

export const query = graphql`
 query currentPost($id: String!) {
  wordpressPost(id: { eq: $id }) {
   title
   content
   slug
  }
  site {
   siteMetadata {
    title
   }
  }
}

Isso usa uma consulta GraphQL diferente para obter dados sobre a postagem específica que foi alimentada pelo arquivo gatsbynode.js e, em seguida, usa o React para renderizar isso no navegador.

Se você quiser ver rapidamente uma lista de todas as suas postagens, você pode digitar http: // localhost: 8000 / a na barra de endereços do seu navegador. Isso levará você a uma página de desenvolvimento 404, que lista todas as suas postagens. Clique em um para visitá-lo!

Próximos passos

Nós riscamos a superfície de como usar o WordPress como um headless CMS e espero ter apresentado a você alguns conceitos e ferramentas interessantes que você pode usar e experimentar no futuro.

Há muito mais nessa história e meus colegas e eu escrevemos extensivamente sobre isso na Indigo Tree . Eu também escrevi mais no meu blog pessoal, Delicious Reverie .

Por favor, mantenha contato comigo através desses canais e no Twitter para ouvir desenvolvimentos mais emocionantes no mundo do CMS sem cabeça!

Este artigo foi originalmente publicado na edição 308 da net , a revista mais vendida do mundo para desenvolvedores e web designers.

Artigo Original