O que é WordPress sem cabeça? Como criar um? [Tutorial]

Quais são os prós e os contras do CMS sem cabeça do WordPress?

O Headless WordPress vem com muitas vantagens e desvantagens, cada uma das quais pode afetar seu trabalho em diferentes cenários. Para ter uma ideia clara, vamos comparar seus prós e contras no formato de tabela de comparação.

O WordPress sem cabeça é bom?

Se você ignorar as limitações mencionadas anteriormente, há certos cenários em que o uso do WordPress headless pode ser benéfico para você.

• Se a segurança do seu site é uma prioridade máxima e o tratamento de dados é muito sensível ou crítico.
• Se você gosta de design personalizado e possibilidades ilimitadas, sem as restrições das opções limitadas de temas do WordPress, e está procurando um design de front-end exclusivo, opte pelo Headless WordPress.
• Se você gosta de manter seu site isolado com as atualizações e upgrades frequentes do WordPress.
• Se você deseja preparar seu site ou aplicativo para o futuro e se adaptar às novas tecnologias, tendências e comportamentos do usuário sem ter que revisar toda a sua infraestrutura, considere o WordPress headless.
• Uma configuração Headless pode ser uma boa opção se você estiver procurando sites de demonstração, projetos pequenos ou de curto prazo ou tutoriais.

Como funciona o WordPress sem cabeça?

Ao falar sobre o WordPress padrão, ele vem com uma interface amigável e um painel de administração fácil de usar, por meio do qual você pode facilmente editar, criar e excluir conteúdo, bem como gerenciar o site.

Para o front-end, ele oferece milhares de opções de temas combinando temas integrados e temas de terceiros para criar um site visualmente atraente na tela.

Mas ao dissociar o WordPress, você pode aproveitar o melhor dos dois mundos. Para tornar isso possível, o WordPress possui uma API chamada WordPress REST API.

É uma interface de programação que permite aos desenvolvedores acessar e interagir com os dados do site WordPress usando métodos HTTP padrão.

Ele permite que os desenvolvedores recuperem, criem, atualizem e excluam conteúdo do WordPress remotamente, o que facilita a integração do WordPress com outras plataformas de aplicativos ou outras tecnologias front-end como React.js, Angular.js, etc. para criar um site personalizado.

Como faço para tornar o WordPress sem cabeça? (Tutorial de WordPress sem cabeça)

Pode haver várias maneiras de dissociar o WordPress padrão, dependendo da tecnologia que você usará, dos recursos, das linguagens preferidas e das estruturas. Não importa o método usado, você deve estar confortável com as linguagens front-end, bem como com a API Rest do WordPress.

Mas por enquanto vamos escolher o método mais simples já que a maioria dos indivíduos são iniciantes. Confira as etapas abaixo:

Etapa 1: configurar o WordPress

A primeira coisa que você precisa fazer é criar um site WordPress como faria normalmente em seu servidor. Isso significa que o site deve estar ativo, ter seu domínio e uma conta de hospedagem na web adequada.

Mas escolher a plataforma de hospedagem WordPress certa é em si uma tarefa muito difícil e é até uma etapa crucial ao configurar o WordPress e criar um CMS headless.

É muito importante porque, mesmo que o front-end e o back-end estejam dissociados, o back-end ainda precisa residir em um servidor que requer hospedagem.

O servidor não apenas fornece um local para armazenar todo o conteúdo do seu site, mas seu desempenho, segurança e confiabilidade também são cruciais para entregar o conteúdo do site sem problemas ao front-end, independentemente da tecnologia usada.

Portanto, torna-se essencial escolher um host que ofereça desempenho extremamente rápido e segurança reforçada.

Considerando isso, você pode escolher a WPOven, uma das empresas de hospedagem WordPress totalmente gerenciadas mais rápidas e líderes que oferece uma combinação de velocidade, segurança de nível empresarial e suporte de concierge, garantindo que sua jornada WordPress sem cabeça seja mais tranquila.

• Especificamente, a WPOven fornece hospedagem gerenciada no provedor de nuvem de primeira linha Linode , garantindo desempenho de alta velocidade e escalabilidade.
• A plataforma oferece instalação pré-WordPress, tornando a configuração do WordPress e de outras ferramentas descomplicada.
• Além disso, com o sistema de cache avançado integrado e a rede de entrega de conteúdo (CDN) da Cloudflare, seu conteúdo é entregue mais rapidamente, independentemente da localização do usuário.
• Além disso, o WPOven garante segurança robusta de nível empresarial por meio de firewalls de proteção da web integrados e instalação SSL, ajudando a proteger seus dados e interações de back-end.
• Backups automatizados e opções fáceis de restauração 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 ampla base de conhecimento da WPOven garantem que quaisquer problemas sejam resolvidos rapidamente, permitindo que você se concentre na construção e no gerenciamento de seu CMS headless sem complicações relacionadas à hospedagem.

Etapa 2: ativar a API REST

A próxima coisa que você precisa fazer é certificar-se de que a API REST do WordPress está habilitada. Por padrão, está habilitado em todas as novas instalações do WordPress.

Mesmo assim, você precisa verificar se ele está habilitado em seu site ou não. Você pode fazer isso simplesmente fazendo uma solicitação de API inserindo o seguinte URL em seu navegador,

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

Altere ‘example.com” pelo seu nome de domínio real e se a API estiver habilitada, ela exibirá uma resposta JSON com algumas informações sobre as postagens do seu site.

Alternativamente, você pode obter a ajuda de um plugin como o plugin WP REST API.

Leia: A API REST do WordPress: Guia de primeiros passos

Etapa 3: buscar dados de postagem via API

Se você deseja buscar dados de postagem, siga estas etapas:

• Abra o painel do WordPress > Configurações > Links permanentes e selecione Nome da postagem.

• Depois disso, você precisa baixar a ferramenta de teste da API Postman.
• Agora, dentro da ferramenta Postman API, insira o URL conforme o formato fornecido abaixo.

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

Isso irá buscar os dados da postagem dentro do seu site WordPress.

Etapa 6: configurar o aplicativo React

Agora que terminamos o backend, é hora de começar a trabalhar no front-end. Primeiro, criamos um aplicativo React executando o código fornecido a seguir no Terminal.

npm create vite@latest my-blog-app
cd my-blog-app
npm install

Este comando criará um novo aplicativo React usando Vite e também instalará bibliotecas ou pacotes externos necessários.

Além disso, você também precisa incluir o Axios para lidar com solicitações HTTP. Para isso execute o seguinte comando para instalá-lo.

npm install axios

Agora, você pode iniciar um servidor de desenvolvimento local para seu aplicativo executando o comando npm run dev em seu terminal ou prompt de comando.

Ao executar este comando, ele iniciará um servidor em sua máquina local e disponibilizará seu aplicativo na URL https://127.0.0.1:5173 .

A próxima coisa que você precisa fazer é abrir seu projeto no editor de código (o que você quiser, Visual Studio Code, Subkline Text, Atom, etc.) e também remover arquivos desnecessários, como index.css, app.css, etc.

Etapa 7: recuperar postagens do WordPress

Em seu arquivo App.jsx , na parte superior, importe o gancho useState da biblioteca React. Isso permite que você use o estado em seu componente funcional.

import React, { useState } from 'react';

Dentro do seu componente funcional App , inicialize uma parte do estado chamada posts usando o gancho useState . Este estado conterá uma série de postagens. useState([]) inicializa posts com um array vazio como valor inicial.

const [posts, setPosts] = useState([]);

Depois de inicializar o estado posts com um array vazio usando useState([]) , você precisa adicionar código para buscar postagens da API REST do WordPress. Isso envolve fazer uma solicitação HTTP ao endpoint da API que fornece os dados das postagens.

Você precisa adicionar o código necessário para buscar os dados das postagens após a declaração do estado. Este código normalmente envolverá o uso de um método como fetch() ou uma biblioteca como Axios para fazer uma solicitação HTTP GET para o endpoint da API do WordPress que fornece dados de postagens.

Em seguida, adicione o código a seguir após a declaração de estado para recuperar dados de postagens da API REST do WordPress e atualizar as postagens de acordo.

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

Este código busca postagens da API REST de um site WordPress quando o componente é montado e atualiza o estado do componente com os dados buscados usando a função setPosts do gancho useState .

Etapa 8: Criando um componente de blog e renderizando-o

Agora crie uma nova pasta chamada “components” dentro da pasta src e crie dois novos arquivos Blog.jsx e blog.css (dentro dos componentes).

Em seguida, adicione primeiro o seguinte código ao arquivo 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>
);
}

Este componente busca e exibe o título, a data, o trecho e a imagem em destaque de uma postagem de blog passada como acessório.

Depois disso, adicione o seguinte estilo ao arquivo blog.css,

@import url("https://fonts.googleapis.com/css?display=swap&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;
}

Por fim, insira o seguinte trecho de código dentro da instrução return do arquivo App.jsx . É aqui que você define a estrutura da UI do seu componente usando a sintaxe JSX.

<div>
{posts.map((item) => (
<Blog post={item} />
))}
</div>;

Here's the final version of your "App.jsx":
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("https://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 seu navegador. Agora você poderá ver as postagens do blog renderizadas na tela.

Exemplos de WordPress sem cabeça

Para sua referência e para aumentar a confiança, aqui estamos fornecendo alguns exemplos de WordPress sem cabeça:

1. Techcrunch

Se você é um entusiasta de tecnologia, deve estar familiarizado com o TechCrunch. que é um meio de comunicação de tecnologia e site de notícias líder. Eles redesenharam o front-end do site para fornecer uma experiência de usuário perfeita.

Para conseguir isso, eles optaram pela abordagem Headless WordPress e usaram o aplicativo React para criar o front-end e o WordPress headless para o back-end.

2. Centro de recursos de marca do Facebook

Facebook agora popularmente conhecido como Meta, um gigante da mídia social usa essa abordagem Headless WordPress em seu site Brand Resource Center como um guia de estilo para seus ativos de marca.

O site usa uma combinação única de web design exclusivo e elegante com uma experiência de usuário tranquila. Se o Facebook/Meta, como um grande gigante da tecnologia, puder. confie no WordPress headless, você também pode.

Conclusão

Concluindo, além de certas limitações, contras ou desvantagens. Uma abordagem headless pode fazer maravilhas se implementada corretamente. Especialmente, pode ser altamente vantajoso para desenvolvedores ou criadores de conteúdo que gostam de criar aplicativos da web sem cabeça.

Sem dúvida, desacoplar o WordPress padrão pode abrir um mundo de possibilidades, como ganhar a liberdade de projetar a UI de um site usando React e também gerenciar o conteúdo usando WordPress.

Essa tecnologia permite que você aproveite todo o poder de cada tecnologia junto com os benefícios de flexibilidade, escalabilidade e otimização de SEO.

Ao longo deste blog, tentamos responder a todas as dúvidas genéricas sobre WordPress headless e também fornecemos algumas etapas sobre como criar um WordPress headless para sua referência. (No entanto, pode haver várias maneiras de dissociar o WordPress, então siga a que achar mais fácil para você).

perguntas frequentes

Raul

Rahul Kumar é um entusiasta da web e estrategista de conteúdo especializado em WordPress e hospedagem na web. Com anos de experiência e o compromisso de se manter atualizado com as tendências do setor, ele cria estratégias online eficazes que direcionam o tráfego, aumentam o engajamento e aumentam as conversões. A atenção de Rahul aos detalhes e a capacidade de criar conteúdo atraente fazem dele um recurso valioso para qualquer marca que busca melhorar sua presença online.