O WordPress é um dos sistemas de gerenciamento de conteúdo (CMS) mais populares, usado por 810 milhões de pessoas, ou seja, 41% de toda a Internet! É a escolha ideal para quem deseja criar um site rapidamente porque é simples, fácil de usar, oferece uma ampla variedade de opções de personalização e também tem um forte ecossistema de plugins e outros recursos.
Uma maneira de você aproveitar ao máximo o WordPress é usar o headless.
Um CMS headless, também conhecido como sistema headless, é um tipo de CMS de backend usado exclusivamente para gerenciar conteúdo. Isso ajuda você a integrar o conteúdo a qualquer sistema ou site, bastando chamar as APIs do CMS headless.
No entanto, isso deixa o frontend para você gerenciar separadamente. É aí que entra uma API.
As APIs permitem que dois ou mais aplicativos diferentes troquem dados. Nesse caso, a API está sendo usada para transferir os dados do CMS para um site de frontend, proporcionando mais flexibilidade e desempenho mais rápido.
Neste artigo, exploraremos o que é um CMS headless, como criar e configurar no WordPress.
O que é WordPress headless?
Um site WordPress Headless é um tipo de site que usa principalmente o WordPress como um CMS, ou sistema de gerenciamento de conteúdo, e usa outras tecnologias de frontend, como React ou Vue, para o frontend.
As bibliotecas e frameworks JavaScript são usadas para exibir o conteúdo do site. Portanto, um WordPress headless tem um frontend e um backend separados, e uma API é usada para comunicação.
Em termos mais simples, uma arquitetura headless significa que o CMS é usado somente para armazenar e gerenciar seu conteúdo e não se preocupa com o frontend do site.
Por outro lado, o trabalho principal do frontend é exibir o conteúdo, e ele, por sua vez, não se preocupa com onde o conteúdo está armazenado ou gerenciado, desde que consiga acessá-lo.
Um WordPress headless tem melhor desempenho, pois as solicitações do frontend são tratadas por tecnologias mais rápidas, como o React, e somente o backend é gerenciado pelo WordPress. A separação do frontend e do backend permite que você dimensione os componentes de forma independente.
Prós e contras do WordPress headless
Como acontece com todas as opções de desenvolvimento, há vantagens e desvantagens em optar por uma solução WordPress headless. É importante que você entenda ambos antes de tomar uma decisão.
Prós do WordPress headless
Alguns dos principais benefícios de uma implementação do WordPress headless são os seguintes:
- Flexibilidade: O WordPress headless permite que os desenvolvedores criem experiências personalizadas no frontend sem serem restringidos pelo sistema tradicional de temas do WordPress. Isso significa que você pode criar interfaces de usuário e experiências exclusivas para necessidades específicas.
- Desempenho: Separar o frontend do backend de um site WordPress pode fazer com que seu site carregue mais rápido e aumente o desempenho, pois o servidor só fornece dados por meio de uma API, em vez de renderizar HTML para cada solicitação.
- Segurança: Ao separar o frontend do backend, o WordPress headless pode oferecer uma camada extra de segurança, limitando o acesso à base de código e ao banco de dados subjacentes do WordPress.
Contras do WordPress headless
As desvantagens do WordPress headless podem incluir:
- Falta de temas: Como o WordPress headless não depende de temas pré-criados, você precisará criar seus próprios temas personalizados. Isso pode consumir muito tempo e exigir recursos adicionais.
- Custo: O desenvolvimento de um site WordPress headless pode ser mais caro do que um site WordPress tradicional, por exigir mais conhecimento técnico e recursos para configurar e manter.
- Limitações de plugins: Alguns plugins de WordPress podem não funcionar com o WordPress Headless, pois dependem de temas de WordPress para funcionar corretamente.
O que é API REST do WordPress?
A API REST do WordPress é usada como uma interface entre o backend e o frontend. Com a API, os dados podem ser enviados ou recuperados do site com facilidade, pois a API tem acesso de controle aos dados do site. Ela também garante que somente usuários autorizados possam interagir com ela.
A API pode suportar uma ampla variedade de formatos de dados, inclusive JSON, facilitando a interação com o sistema.
A API REST do WordPress é uma ferramenta poderosa para que os desenvolvedores criem, atualizem ou excluam dados, além de criar funcionalidades personalizadas para sites ou integrar-se a outro serviço. Além disso, há plugins disponíveis que ampliam a funcionalidade da API, como a integração de métodos de autenticação adicionais.
O que é React?
React é uma biblioteca JavaScript para criar interfaces de usuário. É uma biblioteca de frontend de código aberto, reutilizável e baseada em componentes, que permite aos desenvolvedores criar componentes de interface de usuário (UI) usando sintaxe declarativa.
O React cria uma interface do usuário (UI) interativa e renderiza os componentes quando os dados são alterados. A biblioteca é muito popular entre os desenvolvedores que desejam criar componentes complexos e reutilizáveis, gerenciar o estado com eficiência e atualizar facilmente a interface do usuário em tempo real.
A forte comunidade de desenvolvedores do React criou um conjunto de ferramentas, bibliotecas e recursos para aprimorar a funcionalidade da biblioteca. Muitas organizações e empresas estão adotando o React como sua tecnologia para construir aplicativos web complexas, dinâmicas e de alto desempenho.
Por que usar React?
O React oferece muitos benefícios que o tornam uma excelente escolha para o desenvolvimento de aplicativos web complexas e dinâmicas.
Aqui estão algumas das principais vantagens de usar o React:
- Sintaxe declarativa: O React usa uma abordagem declarativa para criar componentes da interface do usuário, facilitando a criação de componentes reutilizáveis e altamente eficientes.
- Grande comunidade e ecossistema: O React tem uma comunidade grande e ativa de desenvolvedores, o que levou à criação de uma ampla gama de ferramentas e bibliotecas para aprimorar sua funcionalidade.
- DOM virtual: O React usa o DOM virtual para atualizar a interface do usuário em tempo real. Isso significa que, quando o estado muda, ele atualiza apenas os componentes que precisam ser alterados, em vez de renderizar novamente a página inteira.
- Reusabilidade: O React.js oferece componentes reutilizáveis que podem ser usados em diferentes aplicativos, reduzindo significativamente o tempo e o esforço de desenvolvimento.
Como criar um site WordPress headless com React
Agora é hora de colocar a mão na massa e aprender a criar e implantar um site WordPress headless com o React.
Continue lendo para você se aprofundar no assunto.
Pré-requisitos
Antes de começar este tutorial, verifique se você tem:
- Uma boa compreensão do React
- Node.js v14 ou superior instalado em sua máquina
Etapa 1: Configure um site WordPress
Vamos começar configurando o site do WordPress, pois ele servirá como fonte de dados para o aplicativo React. Se você já tiver um site do WordPress configurado, pode pular esta seção; caso contrário, siga em frente.
Neste tutorial, usaremos o DevKinsta, um ambiente de desenvolvimento local rápido e confiável amplamente utilizado para criar, desenvolver e implantar sites do WordPress. Você pode usá-lo de forma totalmente gratuita – basta fazer o download no site oficial e instalá-lo em seu sistema.
Quando a instalação estiver concluída, abra o painel do DevKinsta e clique em Novo site WordPress para criar um novo site WordPress.
Preencha as informações necessárias e clique no botão Criar site para continuar.
Isso pode levar alguns minutos, mas depois que seu site for criado, você poderá acessar o painel de controle clicando em Abrir site” ou nas opções WP Admin, respectivamente.
Em seguida, para ativar a API JSON, você precisará atualizar os permalinks do seu site.
No painel de controle do WordPress, clique em Settings, em seguida Permalinks. Escolha a opção Post name e clique em Save Changes.
Você também pode usar ferramentas como o Postman para testar e enviar facilmente solicitações às APIs REST do WordPress.
Etapa 2: Configure um aplicativo React
Agora que temos nosso site WordPress configurado, podemos começar a trabalhar no frontend. Conforme mencionado acima, neste tutorial, usaremos o React para o frontend do nosso aplicativo.
Para começar, execute o código abaixo em seu terminal para criar um aplicativo React.
npm create vite@latest my-blog-app
cd my-blog-app
npm installOs comandos acima criarão um aplicativo React e instalarão as dependências necessárias.
Também precisamos instalar o Axios, uma biblioteca JavaScript para fazer solicitações HTTP. Execute o comando abaixo para instalá-la.
npm install axiosAgora, para iniciar o servidor de desenvolvimento, você pode executar npm run dev no terminal. O servidor deverá então inicializar o aplicativo em http://127.0.0.1:5173.
Em seguida, abra seu projeto em seu editor de código favorito e exclua todos os arquivos desnecessários que você não precisa, como a pasta assets, index.css e app.css.
Você também pode substituir o código dentro de main.jsx e App.jsx pelo código a seguir:
// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)// App.jsx
import React from 'react'
export default function App() {
return (
<App />
)
}Etapa 3: Busque artigos do WordPress
Agora é hora de buscar os artigos em nosso site WordPress.
Dentro do App.jsx, adicione o estado abaixo e importe <code>useState</code> do React:
const [posts, setPosts] = useState([])useState é um hook interno do React usado para adicionar estados para um componente, um estado que se refere a dados ou a uma propriedade.
posts é usado para obter os dados do estado, e setPosts é usado para adicionar novos dados à postagem. Também passamos uma array vazia para o estado por padrão.
Em seguida, adicione o seguinte código após o estado para buscar os artigos da API REST do WordPress:
const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])O código acima está executando a função fetchPosts() no carregamento da página. Dentro da função fetchPosts(), enviamos uma solicitação GET para a API do WordPress usando Axios para recuperar artigos e, em seguida, salvá-los no estado que declaramos anteriormente.
Etapa 4: Crie um componente de blog
Dentro do diretório raiz, crie uma nova pasta chamada components e, dentro dela, crie dois novos arquivos: blog.jsx e blog.css.
Primeiro, adicione o seguinte código ao blog.jsx:
import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";
export default function Blog({ post }) {
const [featuredImage, setFeaturedimage] = useState();
const getImage = () => {
axios
.get(post?._links["wp:featuredmedia"][0]?.href)
.then((response) => {
setFeaturedimage(response.data.source_url);
});
};
useEffect(() => {
getImage();
}, []);
return (
<div class="container">
<div class="blog-container">
<p className="blog-date">
{new Date(Date.now()).toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</p>
<h2 className="blog-title">{post.title.rendered}</h2>
<p
className="blog-excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
<img src={featuredImage} class="mask" />
</div>
</div>
);
}No código acima, criamos um componente de cartão que usa a propriedade posts que contém as informações sobre a publicação do blog da API do WordPress.
Na função getImage(), usamos o Axios para buscar a URL da imagem em destaque e, em seguida, salvamos essas informações no estado.
Em seguida, adicionamos um hook useEffect para chamar a função getImage() assim que o componente for montado. Também adicionamos a instrução de retorno na qual estamos renderizando os dados do artigo, o título, o snippet e a imagem.
Em seguida, adicione os estilos abaixo ao arquivo blog.css:
@import url("https://fonts.googleapis.com/css?family=Poppins");
.blog-container {
width: 400px;
height: 322px;
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
img {
width: 400px;
height: 210px;
object-fit: cover;
overflow: hidden;
z-index: 999;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.blog-title {
margin: auto;
text-align: left;
padding-left: 22px;
font-family: "Poppins";
font-size: 22px;
}
.blog-date {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #c8c8c8;
line-height: 18px;
padding-top: 10px;
}
.blog-excerpt {
text-align: justify;
padding-left: 22px;
padding-right: 22px;
font-family: "Poppins";
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
margin-bottom: 13px;
}Em seguida, no arquivo App.jsx, adicione o seguinte código na instrução return para renderizar o componente do blog:
<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;Por fim, é assim que seu App.jsx deve se parecer:
import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("http://my-awesome-website.local/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}
useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Blog
post={item}
/>
))}
</div>
)
}Salve o arquivo e atualize a página navegador. Agora você poderá ver os artigos do seu blog renderizados na página.
Resumo
O WordPress Headless oferece uma ótima maneira de criar sites de alto desempenho com uma arquitetura escalável. Com o uso do React e da API REST do WordPress, é mais fácil do que nunca criar sites dinâmicos e interativos com o WordPress como sistema de gerenciamento de conteúdo.
Tão importante quanto a velocidade é o local onde você hospeda seu site WordPress. A Kinsta está especialmente preparada para fornecer uma experiência de hospedagem WordPress extremamente rápida com máquinas do Google C2 em sua rede de nível premium, além de integração com o Cloudflare para proteger seu site contra perda de dados e ataques maliciosos.
Você já construiu – ou está planejando construir – um site WordPress headless com React? Comente abaixo e nos informe o que você acha! Queremos ouvir sua opinião!
Suhail é um desenvolvedor de software especializado em desenvolvimento de aplicativos web e mobile full-stack. Ele é um colaborador ativo em projetos de código aberto e gosta de construir aplicativos Web3.
Deixe um comentário