Como utilizar o WordPress com React para criar um CMS sem cabeça para a tua aplicação Web

O Headless WordPress surgiu como uma abordagem transformadora para o desenvolvimento web, revolucionando a forma como o conteúdo é gerido e apresentado online. O Headless WordPress separa as capacidades do sistema de gestão de conteúdos (CMS) do WordPress da camada de apresentação front-end, permitindo que os programadores utilizem uma flexibilidade e criatividade sem paralelo na criação de experiências de utilizador.

Com os rápidos avanços nas tecnologias de desenvolvimento Web, o acoplamento tradicional de backend e frontend impede frequentemente a adoção de novas ferramentas e estruturas. O WordPress sem cabeça garante que o conteúdo permaneça acessível e adaptável às tendências e tecnologias emergentes.

O Headless WordPress representa uma mudança no CMS e no desenvolvimento web, oferecendo flexibilidade e escalabilidade ao mesmo tempo. Ao dissociar o CMS backend da camada de apresentação frontend, o Headless WordPress permite que os programadores criem experiências digitais dinâmicas, interactivas e altamente personalizáveis que transcendem as limitações das configurações tradicionais do WordPress.

O que é o Headless WordPress?

Um sítio Web WordPress sem cabeça é um sítio que utiliza principalmente o WordPress para a gestão de conteúdos e utiliza qualquer outra tecnologia para construir o front-end e apresentar o conteúdo aos visitantes do sítio Web.

A API Rest permite que os programadores interajam com interfaces de várias tecnologias, desde que ambas falem a mesma linguagem JSON. A API de repouso do WordPress envia dados no formato JSON, que é compreensível por um grande número de tecnologias Web. JSON é uma representação baseada em texto de objectos JavaScript que contém dados em pares chave-valor.

"amigos": [

  {

  "id": 0,

  "nome": "Harriet Stanley"

  },

  {

  "id": 1,

  "nome": "Benton Odom"

  },

  {

  "id": 2,

  "nome": "Jackie Edwards"

  }

  ],

Hoje, vou demonstrar o poder da API Rest do WordPress, usando-a com o React e o WordPress como um CMS sem cabeça para a minha aplicação web básica.

API WordPress sem cabeça 5X mais rápida

Nossa pilha oferece tempos de resposta de API de 200 ms para front-ends React/Next.js, com endpoints autoescalonados e cache JAMstack integrado para desempenho contínuo.

Lança o Headless CMS →

CMS sem cabeça vs CMS desacoplado – Aprende a diferença

O Headless CMS e o Decoupled CMS são duas abordagens arquitectónicas aos sistemas de gestão de conteúdos que oferecem mais flexibilidade e agilidade em comparação com as configurações tradicionais de CMS monolíticos. Apresentamos-te uma análise das diferenças entre os dois:

Aspeto	CMS sem cabeça	CMS desacoplado
Flexibilidade de front-end	Oferece a máxima flexibilidade para o desenvolvimento de front-end.	Oferece alguma flexibilidade, mas está vinculado a uma tecnologia de front-end específica.
Independência do backend	Separa completamente o backend (gestão de conteúdos) do frontend.	Desacopla a camada de apresentação do frontend, mas ainda depende do CMS para a funcionalidade do backend.
Tecnologia agnóstica	Permite a utilização de qualquer tecnologia de front-end, por exemplo, React, Angular, Vue.js.	Muitas vezes, vem com tecnologias ou estruturas de front-end predefinidas.
Desempenho	Normalmente oferece um melhor desempenho, uma vez que o conteúdo é servido diretamente para o frontend sem sobrecarga de renderização do CMS.	Pode sofrer estrangulamentos de desempenho devido ao forte acoplamento entre o backend e o frontend.
Escalabilidade	Altamente escalável, uma vez que te permite escalar o frontend e o backend de forma independente.	A escalabilidade pode ser limitada devido ao acoplamento entre o backend e o frontend.
Velocidade de desenvolvimento	Acelera o processo de desenvolvimento, permitindo que as equipas front-end e back-end trabalhem em simultâneo.	O desenvolvimento pode ser mais lento devido às dependências entre as equipas front-end e back-end.
Sindicação de conteúdos	Permite a sindicação de conteúdos através de múltiplas plataformas e canais facilmente.	A distribuição de conteúdos pode ser mais difícil devido à arquitetura acoplada.

Como configurar o ReactJS com o Headless WordPress

Configurar o ReactJS com uma configuração do WordPress sem cabeça envolve desacoplar o front-end (ReactJS) do back-end (WordPress) e usar o WordPress apenas como um sistema de gerenciamento de conteúdo (CMS).

Passo 1: Escolhe o fornecedor de alojamento

Escolher a plataforma de alojamento WordPress correta é o primeiro e crucial passo para configurar o WordPress e criar um CMS sem cabeça.

O alojamento desempenha um papel fundamental no WordPress sem cabeça porque, embora a “cabeça” (o front end) seja separada numa abordagem sem cabeça, o “corpo” (o back end) continua a residir num servidor que necessita de alojamento.

O desempenho, a segurança e a fiabilidade do servidor são fundamentais para garantir que o conteúdo é entregue sem problemas ao front end, independentemente da tecnologia utilizada.

Portanto, escolher um host que ofereça um ótimo desempenho do servidor e segurança aprimorada ajuda. Considerando isso, eu recomendaria o Cloudways porque ele oferece a combinação perfeita de velocidade, segurança e suporte, garantindo que a tua jornada no WordPress sem cabeça seja tranquila.

Especificamente, a Cloudways fornece hospedagem web totalmente gerenciada em provedores de nuvem de primeira linha, como AWS, Google Cloud e DigitalOcean, garantindo desempenho e escalabilidade de alta velocidade. A plataforma oferece instalações com um clique, tornando a configuração do WordPress e de outras ferramentas sem complicações. Também tens a opção de selecionar Cloudways Autonomous, que é uma alta disponibilidade WordPress servidor de hospedagem.

React Frontend + WordPress Backend = Combinação perfeita

Implementa sites sem cabeça com acesso SSH/Git, uma API REST do WordPress isolada e um CDN Cloudflare Enterprise gratuito para velocidade global.

Constrói o meu site sem cabeça

Além disso, com caches avançados incorporados e uma rede de distribuição de conteúdos (CDN), o teu conteúdo é entregue mais rapidamente, independentemente da localização do utilizador.

Além disso, a Cloudways garante segurança robusta por meio de patches de segurança regulares, um firewall dedicado e instalação de SSL, ajudando a proteger seus dados e interações de back-end. Backups automatizados e opções de restauração fáceis fornecem uma camada adicional de proteção de dados e tranquilidade.

Além disso, o suporte ao cliente 24 horas por dia, 7 dias por semana e a extensa base de conhecimento da Cloudways garantem que quaisquer problemas que encontres sejam rapidamente resolvidos, permitindo que te concentres na criação e gestão do teu CMS sem cabeça sem quaisquer problemas relacionados com o alojamento.

Passo 2: Ativar a API Rest do WordPress

• Primeiro, transfere o ficheiro zip do plugin WP-Rest API a partir do git.
• Carrega a pasta zip dentro da tua pasta de plugins do WordPress.
• Depois de carregado o ficheiro, ativa o plugin para ativar a API Rest do WordPress.

Passo 3: Obtém os dados do lançamento

Para obter os dados do posto, segue estes passos:

• Vai a Definições → Permalinks e seleciona Nome do post ou Estrutura personalizada.

• Uma vez que estamos a trabalhar com chamadas API, transfere a extensão do Chrome para o Postman.
• Dentro do Postman, introduz o URL no seguinte formato:

https://example.com/wp-json/wp/v2/posts

• O URL acima vai buscar os dados dos posts dentro do teu site WordPress.

Passo 4: Criar tipos de posts personalizados

Para criar tipos de post personalizados:

• Transfere o plugin Custom Post Type UI para criar tipos de publicação personalizados.

• Instala e ativa o plugin e adiciona um novo tipo de publicação.
• Para este tutorial, vou criar um tipo de post personalizado para Livros.

• No Slug do tipo de publicação, escreve o nome da tua publicação personalizada.

• Certifica-te de que a caixa de verificação Mostrar na API REST está definida como verdadeira e que o slug de base da API REST também está definido. Isto é obrigatório se quiseres utilizar o WordPress como CMS sem cabeça.

• Assinala todas as caixas relativas às informações que pretendes obter da API REST.

• Depois de guardares as alterações, vais reparar que uma nova opção é preenchida na barra lateral. Clica nela para adicionares o novo Livro ao teu tipo de publicação personalizado.

• Criei o meu primeiro livro introduzindo os dados de amostra e um excerto da minha publicação.

Nós tratamos do WordPress, tu tratas do React

Concentra-te no teu código front-end enquanto nós optimizamos o WordPress como CMS, protegemos os pontos finais da API e dimensionamos automaticamente os recursos para picos de tráfego.

Experimenta o Headless Hosting Free

Passo 5: Verifica e confirma

• Para verificar se os dados estão disponíveis através da API, vai em frente e carrega no URL dentro do Postman.
• Agora, o URL deve ser algo parecido comhttps://exampe.com/wp-json/wp/v2/books.
• Também podemos adicionar outros campos, como Publisher, utilizando os plug-ins ACF e ACF to RestAPI.

• Instala e ativa ambos os plugins.

• Por defeito, o ACF não fala com a API REST do WordPress. Por isso, tens de descarregar também o plugin ACF REST API.

• Utilizando o plugin de campos personalizados, vou adicionar o campo Editor para os meus livros.

• Certifica-te de que seleccionas o tipo de publicação pretendido na lista. Depois disso, carrega em “Publicar“.

Um novo campo é preenchido dentro do meu tipo de post personalizado, onde posso definir a editora do meu livro. Isso é tudo que precisamos fazer para configurar nosso WordPress para enviar nossos dados para nossa aplicação web ReactJS.

O teu Frontend, as tuas regras

Emparelha o WordPress com React, Next.js ou Vue utilizando políticas CORS pré-configuradas e monitorização de API em tempo real para um controlo criativo total.

Começa a programar agora

O que é o React e como configurá-lo

O JavaScript é uma ferramenta poderosa para o desenvolvimento Web e o React é uma biblioteca JavaScript para a Web mantida pelo Facebook e pela comunidade de programadores.

O ReactJS é utilizado principalmente para desenvolver aplicações de página única que são rápidas, robustas e dinâmicas.

Pré-requisitos

Certifica-te de que tens as seguintes dependências instaladas no teu computador antes de criares aplicações React.

• NodeJS e NPM.
• Editor de texto, como o Sublime ou o Visual Studio Code.
• Git para controlo de versões (opcional)

Como criar um projeto com ReactJS

• Depois de configurar o ambiente, abre a linha de comandos e executa o seguinte código para criar o projeto com o ReactJS.

npx create-react-app frontend

• Depois de a aplicação ter sido criada, cd (mudar de diretório) para a pasta da aplicação e escreve o seguinte comando para instalar o pacote Axios para chamadas API.

npm i axios

• Agora, abre a pasta no teu editor de texto preferido. Estou a utilizar o Visual Studio Code.
• Lança a aplicação executando o comando npm start.
• Estamos prontos para construir a nossa aplicação web com React usando o WordPress como CMS sem cabeça se tudo funcionar corretamente.
• Cria uma nova pasta ‘components‘ dentro da pasta src, e dentro da pasta ‘components‘, cria um novo ficheiro ‘Books.js‘.

Como renderizar dados de postagem no ReactJS

Dentro do ficheiro Book.js, vamos buscar os dados à API Rest do WordPress.

Abaixo está o código que solicita o ponto de extremidade da API Rest – que no meu caso é ‘/books‘ – e exibe os dados no formato JSON:

importa React, { Component } de 'react'
importa axios de 'axios';
exporta class Books extends Component {
  estado = {
  livros: [],
  isLoaded: false
  }
  componentDidMount () {
  axios.get('https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/books/')
  .then(res => this.setState({
  livros: res.data,
  isLoaded: verdadeiro
  }))
  .catch(err => console.log(err))
  }
  renderiza() {
  consola.log(este.estado);
  devolve (

) } }

exportar livros por defeito

• O código acima mostrará o array de dados no console, que é então utilizado dentro do bloco de renderização.
• Agora, dentro do ficheiro App.js, chama o componente Books como se mostra abaixo.

importa React de 'react';
importa './App.css';
importa Books de './components/Books';
função App() {
devolve (
<div className="App">
<Livros/>
</div>
);
}

exporta a App;

O App.js é o ponto de entrada da nossa aplicação Web. Por isso, é importante referenciar os componentes “Books” dentro deste ficheiro.

Como exibir dados de postagem no ReactJS

Eis como podes apresentar dados de publicação no ReactJS

• Adiciona o código abaixo dentro do método de renderização:

renderiza() {
  const {books, isLoaded} = this.state;
  devolve (

{books.map(book =>

{livro.título.renderizado}

)} ); }

 

• Em vez de apresentarmos os dados aqui, vamos criar um novo componente e dar-lhe o nome de ‘BookItems.js‘, pois quero mantê-lo separado do componente principal.
• Altera o método de renderização dentro de Bookk.js para algo como:

renderiza() {
  const {books, isLoaded} = this.state;
  devolve (

{books.map(book => {book}/> )} ); }

• Agora, em vez disso, precisamos de renderizar o componente BookItems.
• Dentro do BookItems.js, adiciona o seguinte código:

importa React, { Component } de 'react'
importa axios de 'axios';
importa PropTypes de 'prop-types';
exporta class BookItems extends Component {
  renderiza() {
  const { title } = this.props.book = this.props.book;
  devolve (

 

{title.rendered}

) } }

exporta BookItems por defeito

• No código acima, estou a fazer referência ao suporte do livro para obter o título e outras informações.

Nota: Certifica-te de que referencias o componente BookItems dentro do componente “Books”.

A minha versão final do BookItems.js é mais ou menos assim:

importa React, { Component } de 'react'
importa PropTypes de 'prop-types';
importa axios de 'axios';
exporta class BookItems extends Component {
  estado = {
  imgUrl: '',
  autor: '',
  isLoaded: false
  }
  static propTypes = {
  livro: PropTypes.object.isRequired
  }
  componentDidMount () {
  const {featured_media, author} = this.props.book;
  const getImageUrl = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/media/${featured_media}`);
  const getAuthor = axios.get(`https://wordpress-179008-1030625.cloudwaysapps.com//wp-json/wp/v2/users/${author}`);
     
  Promete.all([getImageUrl, getAuthor]).then(res => {
  consola.log(res);
  this.setState({
  imgUrl: res[0].data.media_details.sizes.full.source_url,
  autor: res[1].data.name,
  isLoaded: true
  });
  });
  }
  renderiza() {
  const { title, excerpt } = this.props.book;
  const {author, imgUrl, isLoaded} = this.state;
  devolve (

 

{title.rendered}

{imgUrl} alt={title.rendered}/> {author}</strong><br/>

) } }

exporta BookItems por defeito
E o resultado no browser tem o seguinte aspeto:

Não é o mais bonito, certo? Bem, isso é porque o estilo está fora do âmbito deste tutorial.

CMS WordPress sem cabeça – Vantagens e desvantagens

Agora que já sabes como criar o CMS WordPress sem cabeça, tens de conhecer as potenciais vantagens e desvantagens de o ter.

Benefícios de usar o Headless WordPress

A primeira e mais importante vantagem que tens com a utilização do CMS wordpress headless é a flexibilidade que oferece. Com a abordagem headless, tens a liberdade de escolher e conceber qualquer face (ou front-end) que queiras, utilizando tecnologias modernas. Torna o teu sítio Web mais rápido, mais reativo e precisamente adaptado às necessidades dos teus utilizadores.

Além disso, o teu sítio Web é mais seguro , porque quando a parte da frente está separada da parte de trás, há poucas hipóteses de os maus actores mexerem no teu conteúdo.

Desvantagens de usar o Headless WordPress

Quanto aos inconvenientes considerados, o CMS wordpress sem cabeça é complexo. As configurações tradicionais do WordPress permitem-te utilizar temas e plugins que se integram facilmente.

Além disso, passar a ser headless significa que podes perder algumas destas funcionalidades integradas e que terás de fazer um esforço adicional para reinventar as funcionalidades.

E para as equipas mais pequenas e para os principiantes, gerir dois sistemas separados pode ser cansativo, uma vez que te obriga a tratar de actualizações, verificações de compatibilidade e correcções tanto para o CMS como para o front end.

Terminar!

Em conclusão, a utilização do WordPress com o React para criar um CMS sem cabeça para a tua aplicação Web abre um mundo de possibilidades tanto para os programadores como para os criadores de conteúdos. Ao dissociar o front-end e o back-end, ganhas a flexibilidade de conceber uma interface de utilizador com as poderosas funcionalidades do React, ao mesmo tempo que geres o conteúdo sem problemas através do WordPress.

Ao longo deste blogue, acompanhámos-te através dos passos essenciais, das melhores práticas e de dicas úteis para integrar estas duas tecnologias robustas, garantindo um processo de desenvolvimento suave e eficiente.