WordPress tem sido o sistema de gerenciamento de conteúdo para desenvolvedores e não-desenvolvedores para rapidamente construir e criar sites incríveis.

Usando uma arquitetura de microserviço, onde o backend de gerenciamento de conteúdo é separado do frontend, permite o máximo controle de ambos os “fins” Este problema de separação é o que os sistemas de gerenciamento de conteúdo headless, incluindo soluções WordPress Headless, tentam resolver.

Com uma abordagem Headless, as empresas têm um controle mais granular sobre o backend do gerenciamento de conteúdo. Eles também são livres para usar qualquer frontend de sua escolha, incluindo Reagir, Vue, Angular, etc.

Este guia irá explorar em detalhes o WordPress Headless, e do que se trata, quando e porque você deve considerar usá-lo. Finalmente, vamos explorar a criação de um ambiente WordPress Headless, construindo o frontend com o Vue.js, e implantando o WordPress Headless usando a Kinsta.

O que é WordPress Headless?

WordPress é um aplicativo monolítico onde o backend e as partes frontend estão bem unidas. O backend é onde o gerenciamento entra, onde você pode criar, editar, adicionar e excluir conteúdo, incluindo a mudança de configurações de aparência. Em contraste, o frontend é responsável por exibir o conteúdo para o usuário.

WordPress Headless é o termo usado para descrever o WordPress desacoplado. A parte backend (gerenciamento) é separada da parte frontend do CMS do WordPress. Você pode desenvolver e gerenciar o frontend como um aplicativo autônomo com qualquer framework de frontend de sua escolha.

Vantagens e desvantagens do WordPress Headless

Em seguida, vamos explorar os prós e os contras do WordPress Headless para dar a você uma melhor compreensão do conceito.

Vantagens

Primeiro, vamos começar por explorar os profissionais.

Desempenho super-rápido

Nesta era de aplicativos super-rápidas, seu site não deve levar mais do que alguns segundos para carregar e evitar perder visitantes. Como o frontend é separado do WordPress e pode ser desenvolvido com alto desempenho e escalabilidade em mente usando ferramentas modernas de frontend, empregar uma abordagem Headless do WordPress é de grande benefício para a experiência geral do usuário do seu site.

Controle granular

Optar por uma arquitetura Headless lhe dá mais controle sobre o layout do seu design, apresentação do conteúdo e como os usuários interagem com o frontend do seu aplicativo. Ele também permite que seu conteúdo backend seja protegido e acessado de um local central.

Aumento da escalabilidade

Dimensionar o WordPress pode ser complicado às vezes porque você não tem o controle completo de todos os componentes e códigos que alimentam o WordPress, principalmente se você não é um desenvolvedor. Mas com o desacoplamento do WordPress, é fácil escalar cada parte isoladamente, e você pode facilmente detectar qual parte precisa ser escalada.

Segurança reforçada

Nós não podemos enfatizar os benefícios de segurança do WordPress Headless o suficiente, já que o WordPress desacoplado tem benefícios de alta segurança contra hackers e ataques DDoS. A abordagem do WordPress Headless torna difícil para os hackers acessar seus dados sensíveis do backend, uma vez que ele está separado do seu frontend, o site voltado para o usuário.

Design leve

Você terá mais controle sobre a estrutura e o layout do seu projeto frontend. Além disso, você pode trabalhar no frontend com mais liberdade e design personalizado; graças às chamadas REST API, você será capaz de tirar vantagem das modernas ferramentas web e implantá-las no frontend.

Publicação de conteúdo multicanal

Como o WordPress Headless usa um sistema baseado em API para comunicar seu conteúdo ao frontend, você pode exibir seu conteúdo em qualquer lugar e em qualquer plataforma, incluindo desktop, site, aplicativos móveis e quiosque de tela sensível ao toque. Também é possível fazer pleno uso dos dispositivos de Realidade Aumentada, Realidade Virtual e Internet das Coisas para exibir e apresentar seu conteúdo vindo do sistema baseado em API.

Desvantagens

Vamos explorar as desvantagens de não ter o headless em mais profundidade à medida que formos avançando, mas suas principais desvantagens são:

  1. Separar o backend e o frontend lhe dá uma carga extra ao gerenciar diferentes instâncias do site.
  2. A implementação pode ser cara, uma vez que precisa de membros adicionais em sua equipe e capital extra para gerenciar diferentes instâncias.
  3. Tornar seu conteúdo disponível em diferentes plataformas pode causar uma experiência inconsistente para seus usuários se o conteúdo não for apresentado de forma consistente em todas as plataformas.

Quando o WordPress Headless pode não ser a melhor opção

Como o WordPress Headless é uma incrível inovação com grandes benefícios, há algumas coisas que você usa para ter em mente ao decidir se você deve ou não ir com ele.

  1. O WordPress Headless é muito caro de se manter. Você irá manter duas instâncias diferentes de um site desde infraestrutura até múltiplos desenvolvedores.
  2. O WordPress Headless não suporta todos os recursos do WordPress. Por exemplo, excelentes recursos do WordPress como o editor WYSIWYG e a visualização em tempo real não funcionarão quando se usar um frontend separado.
  3. É mais caro configurar um WordPress Headless. Portanto, tenha sempre em mente o seu custo aumentado.

Quem deve usar o WordPress Headless?

Abaixo estão os casos mais adequados que você pode requerer o uso do WordPress Headless:

  1. Você deve estar usando o WordPress Headless se a segurança do seu site é a sua maior preocupação e fundamental para a sua empresa.
  2. Em seguida, se o seu site não precisar de atualizações regulares, será um ótimo sinal de que você precisa usar uma configuração Headless.
  3. Em seguida, se você quiser ter um design personalizado que um tema WordPress não seja fácil de fazer, você quer apimentar o frontend do seu site com um design único. Então, o WordPress Headless é sua próxima opção.
  4. Finalmente, se você está construindo um site de curta duração ou um site de demonstração para apresentações e tutoriais, então você pode experimentar a abordagem headless.

Quem deve evitar o uso do WordPress Headless

Aqui estão vários casos em que o uso do WordPress Headless não é uma boa opção:

  1. Quando seu site depende apenas de plugins e funcionalidades específicas que controlam e funcionam melhor com o frontend do seu aplicativo, você deve ficar com o WordPress a menos que os plugins ofereçam opções baseadas em API para consumir os dados.
  2. Suponha que você não esteja interessado em codificar seu site, ou seu site requer manutenção diária, e você não está contratando um profissional para manutenção de rotina devido ao seu baixo orçamento. Nesse caso, o WordPress é uma opção adequada para você.
  3. Se você não é um desenvolvedor experiente e quer criar e gerenciar seu site sozinho, você deve estar usando o WordPress.

Como criar o WordPress Headless (Construir um aplicativo)

Esta seção irá explorar a construção e desenvolvimento de um blog de notícias com o WordPress Headless para o backend e Vue 3 como o frontend voltado para o usuário.

Configurando o WordPress Headless com o Devkinsta

Vamos desenvolver o WordPress Headless com DevKinsta, um popular ambiente de desenvolvimento local WordPress para projetar, desenvolver e implantar sites WordPress a partir do conforto de sua máquina local.

DevKinsta é grátis para sempre e oferece a você grandes benefícios e conforto no desenvolvimento e construção do WordPress com ele.

Você pode baixar e instalar o DevKinsta no site oficial e seguir as instruções na documentação para começar.

Como já temos o DevKinsta instalado, vamos abri-lo e seguir o passo abaixo para configurar o nosso primeiro WordPress Headless.

No painel do DevKinsta, crie um novo site WordPress usando Nginx, MySQL, e qualquer versão WordPress disponível. Além disso, você pode importar uma instância WordPress existente ou criar uma instância WordPress personalizada a partir do painel de controle.

Em seguida, dê um nome, nome de usuário e senha à sua instância WordPress recém-criada, depois clique em Create e copie os detalhes enquanto DevKinsta cria uma nova instância WordPress na sua máquina local.

A seguir, clique em Open Site para abrir sua instância WordPress recém-criada no seu navegador padrão.

Finalmente, você pode entrar no painel de administração acessando o link http://headless-wordpress-news-blog.local/wp-admin e digitando as credenciais de login de administrador que você digitou ao criar a nova instância.

Note que nós configuramos nosso WordPress Headless localmente com a URL http://headless-wordpress-news-blog.local com o frontend é hospedado localmente em http://news-blog.local, e nós o usaremos durante todo o tutorial.

Configurando nosso WordPress Headless

Em seguida, após fazer login com sucesso no seu painel do WordPress, você pode ir em frente para instalar quaisquer plugins e configurações de sua escolha.

Nós desativaremos o tema inteiramente para este tutorial e só acessaremos o conteúdo através do endpoint baseado no WordPress REST API instalando o plugin Simple site Redirect e configurando-o.

Vá para Plugins > Adicionar novo e procurar pelo Site Simples Redirecionar, instalá-lo e ativá-lo:

Instalação do plugin do WordPress
Instalação do plugin do WordPress

Em seguida, clique no plugin Settings e insira sua URL baseada no frontend (por exemplo http://news-blog.local), clique nas opções Advanced setting e adicione os seguintes caminhos – /wp-admin, /wp-login.php, e /wp-json – à seção Exclude Paths.

Finalmente, ative o Plugin selecionando Ativado no menu suspenso Redirecionar Status:

Simple Website Redirecionar configurações de plugin
Configurações do plugin Simple Website Redirect

…e é isso!

Além disso, se o seu JSON API não estiver habilitado quando você visitar http://headless-wordpress-news-blog.local/wp-json por padrão, você pode habilitá-lo abrindo seus Permalinks em Configurações do WordPress e selecionando Post Name ou qualquer outro de sua escolha, exceto Plain:

Configurações do WordPress Permalink.
Configurações do WordPress Permalink.

Agora, quando você visitar seu http://headless-wordpress-news-blog.local/wp-json, ele deve apresentar-lhe os dados do JSON como abaixo:

{
  "name": "Headless WordPress News Blog",
  "description": "Just another WordPress site",
  "url": "http://headless-wordpress-news-blog.local",
  "home": "http://headless-wordpress-news-blog.local",
  "gmt_offset": "0",
  "timezone_string": "",
  "namespaces": [
    "oembed/1.0",
    "wp/v2",
    "wp-site-health/v1"
  ],
  "authentication": [
    
  ],
  "routes": {
    "/": {
      "namespace": "",
      "methods": [
        "GET"
      ],
      "endpoints": [
        {
          "methods": [
            "GET"
          ],
          "args": {
            "context": {
              "default": "view",
              "required": false
            }
          }
        }
      ],
...

Configurando o Vue.js (Frontend)

Nós estaremos usando a ferramenta de desenvolvimento web Vite para criar nosso aplicativo Vue 3 para conectar com o WordPress Headless. Você pode ler mais sobre a Vue 3 e as ferramentas de desenvolvimento Vite.

Neste artigo, nós estaremos construindo um blog de notícias. Todo o gerenciamento de conteúdo backend do projeto será desenvolvido e hospedado com nosso WordPress Headless usando Devkinsta.

Digite junto com estes comandos simples:

npm init @vitejs/app news-blog
cd news-blog
npm install
npm run dev

Se você está tendo problemas com espaços em seu nome de usuário, tente usar:

npx create-vite-app news-blog

Note que nós configuramos nosso aplicativo Vue 3 para ouvir http://news-blog.local, mas você pode ficar com o padrão http://localhost:3000.

Finalmente, abra sua base de código Vue 3 com qualquer editor de código de sua escolha. Nós iremos com VSCode, e vamos sujar nossas mãos com códigos.

Consumindo o WordPress API

Nós desenvolvemos a parte restante do aplicativo Vue para economizar seu tempo de leitura, mas você pode ir em frente para clonar o repositório do meu GitHub.

Exibir o componente Post do aplicativo

O trecho de código abaixo mostra como nós implementamos o WordPress REST API com nossa instância Vue para exibir todos os artigos do WordPress Headless:

<template>
  <section>
    <div class="padding-top">
      <div class="container inner-padding-top">
        <div class="row">
          <div class="col-md-12 col-sm-12-col-xs-12 text-center">
            <h2 class="lead-title text-uppercase">
              Latest Backend Dev. Articles
            </h2>
            <h3 class="article-subtitle">
              Latest Backend Dev. Articles curated daily by the community.
            </h3>
          </div>
        </div>
        <div class="row mb-1 mt-5">
          <post v-for="(post, i) in posts" :key="i" :post="post" />
        </div>
      </div>
    </div>
    <div class="col-md-12 col-sm-12-col-xs-12 text-center mb-5">
      <Button link="/posts" class="col p-3">More Articles</Button>
    </div>
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      posts: (state) => {
        return [...state.post.posts].slice(0, 22)
      },
    }),
  },
}
</script>

Exibição de um único componente do artigo

O trecho de código mostra como recuperamos um único artigo com o WordPress REST API com o WordPress Headless e o exibimos em nossa instância Vue:

<template>
  <div class="card single">
    <div class="card-head pl-3 pr-3 pt-3">
      <h1 class="title">{{ post.title || '' }}</h1>
      <div class="d-flex">
        <div class="author d-flex pr-3 pb-4">
          <div class="profile mr-2"></div>
          <a :href="'/authors/' + post.author.slug" class="subtitle is-6">
            {{ post.author.name }}
          </a>
        </div>

        <div class="date_created">
          <small class="text-muted">
            <li class="fa fa-calendar"></li>
            <time
              :datetime="$moment(post.date).format('MMMM Do YYYY, h:mm:ss a')"
              >{{ $moment(post.date).format('MMMM Do YYYY') }}</time
            >
          </small>
        </div>
      </div>
    </div>
    <div class="block-image pl-3 pr-3 pt-2 mb-3">
      <img
        v-lazy-load
        :data-src="image"
        class="card-img-top img-fluid"
        :alt="post.title"
      />
    </div>

    <div class="tags absolute">
      <a
        v-for="category in post.categories"
        :key="category.id"
        :href="'/categories/' + category.slug"
        class="btn-tag"
      >
        {{ category.title }}
      </a>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'SinglePost',
  props: {
    post: {
      type: [Object, Array],
      default: () => {},
    },
  },
}
</script>

Abaixo está a loja que faz as chamadas API para o WordPress API Headless para o conteúdo do backend:

export const actions = {
  async getPosts({ commit }, { page, count = 22 }) {
    try {
      const response = await fetch(
        `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts`
      )
      const data = await response.json()
      if (data) {
        commit('setPosts', data)
      }
      return data
    }
  },
  
 async getPost({ commit }, id) {
    try {
      const response = await fetch(
        `http://headless-wordpress-news-blog.local/wp-json/wp/v2/posts/${id}`
      )
      const data = await response.json()
      if (data) {
        commit('setPost', data)
      }
      return data
    }
  },
 }

Implementando o WordPress Headless com a Kinsta

Finalmente, a implantação do seu WordPress Headless é muito fácil com DevKinsta usando o serviço de hospedagem Kinsta.

Para enviar seu WordPress Headless para Kinsta, clique no botão Mover para o ambiente de teste em seu painel DevKinsta e faça login na Kinsta com suas credenciais de login.

Você pode aprender como mover as mudanças no ambiente de teste para implantar seus serviços de hospedagem WordPress Headless para Kinsta com um único clique.

Finalmente, você pode implantar sua instância Vue.js em qualquer provedor de hospedagem em nuvem de sua escolha. Certifique-se de atualizar seu ponto final WordPress Headless de acordo para testar seu aplicativo em um ambiente de teste.

Resumo

O WordPress Headless e os benefícios que ele traz estão aqui para ficar por um tempo. Sua popularidade só continuará a crescer à medida que mais desenvolvedores e proprietários de sites passarem a entender os aspectos positivos de uma opção Headless.

Neste guia, apresentamos os benefícios, prós e contras do WordPress Headless e mostramos como construir e implementar seu primeiro WordPress Headless com o DevKinsta. Agora você está no caminho certo para ter sua implementação do WordPress Headless.

Quais são suas dicas para implantar um site WordPress Headless? Por favor, compartilhe-as na seção de comentários!

Solomon Eseme

Sou um Engenheiro de Software e Criador de Conteúdo voltado para a construção de produtos de alta performance e inovadores, seguindo as melhores práticas e padrões da indústria. Também adoro escrever sobre isso no Masteringbackend.com. Siga-me no X, LinkedIn e About Me.