A API de Rest do WordPress é uma das muitas ótimas funcionalidades que o WordPress oferece. Ela permite que os desenvolvedores criem plugins e temas fascinantes e os permita alimentar aplicativos de terceiros com o CMS do WordPress.

O sistema de gerenciamento de conteúdo também é desenvolvido para gerenciar o conteúdo do site em aplicativos web modernos. Isso pode adicionar uma carga adicional para os desenvolvedores. Com tantas possibilidades que a API Rest oferece, também é possível pensar em usar o WordPress com React como um Headless CMS para seus aplicativos web baseados em JavaScript.

Tabela de conteúdos

• O que é Headless Wordpress
• Os benefícios de usar o Wordpress como Headless CMS
• Como configurar um site Wordpress para ReactJS
• Iniciando com ReactJS
• Como consumir dados do Post no ReactJS
• Como exibir dados do Post no ReactJS

O que é Headless Wordpress

Um site WordPress Headless é um site que principalmente usa WordPress para gerenciamento de conteúdo e usa qualquer outra tecnologia para construir a interface e exibir o conteúdo para os visitantes do site.

A API Rest permite que os desenvolvedores interajam com interfaces de tecnologias cruzadas desde que ambos falem a mesma linguagem de JSON. A API Rest do WordPress fornece dados no formato JSON, que é compreensível por uma grande variedade de tecnologias web. O JSON é uma representação baseada em texto de objetos JavaScript que contém dados em pares chave-valor.

Os benefícios de usar o Wordpress como Headless CMS

Sendo uma plataforma open-source, o WordPress oferece grande flexibilidade para criar qualquer site. Usando o WordPress como um Headless CMS, você pode criar a interface do seu aplicativo web usando qualquer tecnologia web e gerenciar seu conteúdo usando um dos CMS mais populares.

Você pode se deparar com a situação em que precisa adicionar um recurso de blog em um aplicativo web existente construído com React ou Angular. Em vez de codificar o sistema de gerenciamento de conteúdo completo no framework nativo, use o Headless CMS WordPress para gerenciar o conteúdo usando a API Rest.

Como configurar um site Wordpress para ReactJS

Vamos começar configurando o site WordPress, pois ele atuará como uma fonte de dados para nosso aplicativo React front-end.

Baixe o arquivo zip do plugin WP-Rest API do git e faça upload da pasta zip dentro da pasta de plugins do seu WordPress. Depois que o arquivo for carregado, ative o plugin. Isso habilitará a API Rest do WordPress dentro do seu site WordPress.

Vá para Configurações → Permalinks e selecione Post name ou Estrutura Personalizada.

Como estamos trabalhando com chamadas de API, faça o download da extensão do Chrome para o Postman. Dentro do Postman, digite a URL no seguinte formato:

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

A URL acima buscará os dados de postagens dentro do seu site WordPress.

Faça o download do plugin Custom Post Type UI para criar tipos de postagem personalizados. Este post personalizado será exibido quando usarmos o WordPress com React na próxima etapa.

Instale e ative o plugin e adicione um novo tipo de post. Para este tutorial, eu criarei um tipo de post personalizado para Books.

Dentro do Slug do tipo de post, digite o nome do seu post personalizado.

Certifique-se de que a caixa de seleção Show in REST API esteja configurada como True e também o REST API base slug. Isso é obrigatório se você deseja usar o WordPress como Headless CMS.

Marque todas as caixas para as informações que você deseja obter da API REST.

Depois de salvar as alterações, você notará que uma nova opção é populada no menu lateral. Clique nele para adicionar um novo Book dentro do seu tipo de post personalizado.

Eu criei meu primeiro book colocando dados de exemplo e um resumo para minha postagem.

Para verificar se os dados estão disponíveis via API, vá em frente e acesse a URL no Postman.

Agora, a URL deve parecer algo como https://exampe.com/wp-json/wp/v2/books.

Também podemos adicionar outros campos, como Editora, usando os plugins ACF e ACF to RestAPI.

Instale e ative ambos os plugins.

Por padrão, o ACF não se comunica com a API Rest do WordPress. Portanto, precisamos baixar o plugin ACF REST API também.

Usando o plugin de campos personalizados, adicionarei o campo Editora para meus books.

Certifique-se de selecionar o tipo de post desejado na lista. Depois disso, clique em "Publicar".

Um novo campo é populado dentro do meu tipo de post personalizado, onde posso definir o editor do meu livro. Isso é tudo o que precisávamos fazer para configurar nosso WordPress para enviar nossos dados para nosso aplicativo web ReactJS.

Iniciando com ReactJS

O que é o ReactJS?

React é uma biblioteca JavaScript para a web mantida pelo Facebook e pela comunidade de desenvolvedores. O JavaScript é uma ferramenta poderosa para o desenvolvimento web e existem várias bibliotecas escritas em JavaScript para aumentar a funcionalidade dos sites. O ReactJS é principalmente usado para desenvolver aplicativos de página única(single-page applications) que são rápidos, robustos e dinâmicos.

Configurando o App React

Para construir aplicativos React, é necessário ter as seguintes dependências instaladas no seu computador.

• NodeJS & NPM.
• Editor de texto como Sublime ou Visual Studio Code.
• Git para controle de versões (Opcional)

Depois de configurar o ambiente, abra o prompt de comando e execute o seguinte código para criar o projeto com ReactJS:

npx create-react-app frontend

Uma vez criado o aplicativo, use o comando cd (mudar diretório) para a pasta do aplicativo e digite o seguinte comando para instalar o pacote Axios para chamadas de API:

npm install axios

Este comando instalará o pacote axios e as suas dependências, permitindo fazer chamadas API facilmente.

Agora, abra a pasta no seu editor de texto favorito. Estou usando o Visual Studio Code.

Inicie o aplicativo executando o comando npm run dev.

Estamos prontos para construir nosso aplicativo web com React usando o WordPress como Headless CMS, se tudo funcionar corretamente.

Crie uma nova pasta "components" dentro da pasta src e, dentro da pasta "components", crie um novo arquivo "Books.js".

Como consumir dados do Post no ReactJS

Dentro do arquivo Books.js, vamos buscar os dados da API Rest do WordPress. Abaixo está o código que requisita o ponto final da API Rest - que no meu caso é '/books' - e exibe os dados no formato JSON.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function Books() {
    const [books, setBooks] = useState([]);

    useEffect(() => {
        axios.get('https://example.com/wp-json/wp/v2/books')
            .then(res => {
                setBooks(res.data);
            })
        console.log(books);
    }, [])

    return (
        <div>
            
        </div>
    )
}

export default Books;

O código acima mostrará o array de dados no console, que é então utilizado dentro do bloco de renderização.

Agora, dentro do arquivo App.js, chame o componente Books como mostrado abaixo:

import Books from './components/Books';

function App() {
  return (
    <div className="App">
      <Books />
    </div>
  );
}

export default App;

O App.js é o ponto de entrada do nosso aplicativo web. Portanto, é importante referenciar o componente "Books" dentro deste arquivo.

Como exibir dados do Post no ReactJS

Os dados podem ser exibidos adicionando o código dentro do método return.

return (
        <div>
            {
                books.map((book, index) => {
                    return <div key={index}>{book.title.rendered}</div>
                })
            }
        </div>
    )

Em vez de exibir os dados aqui, criaremos um novo componente e o chamaremos de "BookItems.js" pois quero mantê-lo separado do componente pai, então dentro da pasta components em src crie o novo arquivo com nome BookItems.js.

Altere o método return dentro de Books.js para algo como:

return (
        <div>
            {
                books.map((book, index) => (
                    <BookItems key={index} book={book} />
                ))
            }
        </div>
    )

Agora, precisamos renderizar o componente BookItems.

Dentro do BookItems.js, adicione o seguinte código:

import React from 'react';

function BookItems({ book }) {

    return (

        <div>

            <h2>{book.title.rendered}</h2>

        </div>

    )

}

export default BookItems;

No código acima, estou referenciando a propriedade book para obter os dados.

Nota: Certifique-se de referenciar o componente BookItems dentro do componente "Books".

Minha versão final do BookItems.js fica assim:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function BookItems({ book }) {
    const { title, excerpt } = book
    const [imgUrl, setImgUrl] = useState('')
    const [author, setAuthor] = useState('')
    const [isLoaded, setIsLoaded] = useState(false)

    useEffect(() => {
        const {featured_media, author} = book;
        const getImageUrl = axios.get(`https://example.com/wp-json/wp/v2/media/${featured_media}`);
        const getAuthor = axios.get(`https://example.com/wp-json/wp/v2/users/${author}`);

        Promise.all([getImageUrl, getAuthor]).then(res => {
           console.log(res);
           
           setImgUrl(res[0].data.media_details.sizes.full.source_url)
           setAuthor(res[1].data.name)
           setIsLoaded(true)
           
       });
    }, [])

    return (

        <div>
            <h2>{title.rendered}</h2>
            <img src={imgUrl} alt={title.rendered}/>
            <strong>{author}</strong><br/>
            <div dangerouslySetInnerHTML={{__html: excerpt.rendered}}></div>
        </div>

    )

}

export default BookItems;

E o resultado no navegador será algo como:

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

Resumindo!

Hoje, mostrei como usar o WordPress com o React como um Headless CMS para o seu aplicativo web. No entanto, não está limitado ao React. Você também pode experimentar com VueJS, Angular ou qualquer framework JavaScript. Há toneladas de coisas que você pode fazer com a API Rest do WordPress. O limite é o céu, então vá em frente e use o WordPress para seu próximo projeto web.