Aprenda a criar um site WordPress sem cabeça com Vue.js

O WordPress tem sido o sistema de gerenciamento de conteúdo para desenvolvedores e não desenvolvedores para construir e criar rapidamente sites impressionantes.

O uso de uma arquitetura de microsserviço, onde o back-end de gerenciamento de conteúdo é separado do front-end, permite o controle máximo de ambos os “ends”. Esse problema de separação é o que os sistemas de gerenciamento de conteúdo sem cabeça, incluindo soluções WordPress sem cabeça, tentam resolver.

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

Este guia irá explorar em detalhes o WordPress sem cabeça, e do que se trata, quando e por que você deve considerar usá-lo. Por fim, exploraremos a criação de um ambiente WordPress sem cabeça, construindo o frontend com Vue.js e implantando o WordPress sem cabeça usando Kinsta.

O que é WordPress sem cabeça?

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

Headless WordPress é o termo usado para descrever o WordPress desacoplado. A parte de back-end (gerenciamento) é separada da parte de front-end do WordPress CMS. Você pode desenvolver e gerenciar o front-end como um aplicativo independente com qualquer estrutura de front-end de sua escolha.

Prós e contras do WordPress sem cabeça

Em seguida, exploraremos os prós e contras do WordPress sem cabeça para lhe dar uma melhor compreensão do conceito.

Os prós

Primeiro, vamos começar explorando os prós.

Desempenho super rápido

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

Controle granular

Optar pela arquitetura headless oferece mais controle sobre seu layout de design, apresentação de conteúdo e como os usuários interagem com o frontend do seu aplicativo. Ele também permite que seu conteúdo de back-end seja protegido e acessado a partir de um local central.

Maior escalabilidade

Escalar o WordPress pode ser complicado às vezes porque você não tem controle total de todos os componentes e códigos que alimentam o WordPress, principalmente se você não for um desenvolvedor. Mas com a dissociação do WordPress, é fácil dimensionar cada parte isoladamente e você pode detectar facilmente qual parte precisa ser dimensionada.

Segurança mais rígida

Não podemos enfatizar os benefícios de segurança do WordPress sem cabeça o suficiente, já que o WordPress desacoplado tem benefícios de alta segurança contra hackers e ataques DDoS. A abordagem headless do WordPress dificulta o acesso de hackers aos seus dados confidenciais de back-end, pois eles são separados do seu front-end, o site voltado para o usuário.

Design Leve

Você terá mais controle sobre a estrutura e o layout do seu design de front-end. Além disso, você pode trabalhar no frontend com mais liberdade e design personalizado; graças às chamadas da API REST, você poderá aproveitar as ferramentas modernas da 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 de dispositivos de Realidade Aumentada, Realidade Virtual e Internet das Coisas para exibir e apresentar seu conteúdo proveniente do sistema baseado em API.

Os contras

Exploraremos os contras do headless com mais profundidade à medida que avançamos, mas suas principais desvantagens são:

1. Separar o back-end e o front-end oferece uma carga extra ao gerenciar diferentes instâncias do site.
2. A implementação pode ser cara, pois precisa de membros adicionais em sua equipe e capital extra para executar diferentes instâncias.
3. Disponibilizar seu conteúdo 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 sem cabeça pode não ser a melhor opção

Como o WordPress sem cabeça é uma inovação incrível com grandes benefícios, há algumas coisas que você deve ter em mente ao decidir se deve ou não usá-lo.

1. O WordPress sem cabeça é muito caro para manter. Você manterá duas instâncias diferentes de um site da infraestrutura para vários desenvolvedores.
2. O WordPress sem cabeça não suporta todos os recursos do WordPress. Por exemplo, ótimos recursos do WordPress, como o editor WYSIWYG e a visualização ao vivo, não funcionarão ao usar um frontend separado.
3. É mais caro configurar um WordPress sem cabeça. Portanto, sempre mantenha seu custo aumentado em mente.

Quem deve usar o WordPress sem cabeça?

Abaixo estão os melhores casos adequados que você pode precisar do WordPress sem cabeça:

1. Você deve usar o WordPress sem cabeça se a segurança do seu site for sua principal preocupação e primordial para sua empresa.
2. Em seguida, se o seu site não precisar de atualização e atualização regulares, será um ótimo sinal de que você precisa usar uma configuração sem cabeça.
3. Em seguida, se você quiser ter um design personalizado que um tema WordPress não fará facilmente, você deseja apimentar o frontend do seu site com um design exclusivo. Então, o WordPress sem cabeça é sua próxima opção.
4. Por fim, se você estiver criando um site de vida útil curta ou um site de demonstração para apresentações e tutoriais, poderá experimentar a abordagem sem cabeça.

Quem deve evitar usar o WordPress sem cabeça

Aqui estão vários casos em que usar o WordPress sem cabeça não é uma boa opção:

1. Quando seu site depende apenas de plugins e funcionalidades específicos 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 que seu site exija manutenção diária e você não esteja 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 deseja criar e gerenciar seu site sozinho, deve usar o WordPress.

Como tornar o WordPress sem cabeça (construir um aplicativo)

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

Configurando o WordPress Headless com Devkinsta

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

O DevKinsta é gratuito para sempre e oferece 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 nosso primeiro WordPress headless.

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

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

Em seguida, clique em Abrir Site para abrir sua instância WordPress recém-criada em seu navegador padrão.

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

Observe que 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 o usaremos por toda parte o tutorial.

Configurando nosso WordPress Headless

Em seguida, depois de fazer login com sucesso no painel do WordPress, você pode instalar qualquer plug-in e configuração de sua escolha.

Desabilitaremos o tema inteiramente para este tutorial e acessaremos apenas o conteúdo por meio do endpoint baseado na API REST do WordPress instalando o plug-in Simple Website Redirect e configurando-o.

Vá em Plugins > Adicionar novo e procure pelo Simple Website Redirect, instale e ative-o:

Em seguida, clique nas configurações do plug-in e insira sua URL baseada em frontend (por exemplo, http://news-blog.local ), clique nas opções de configuração avançada e adicione os seguintes caminhos - /wp-admin , /wp-login.php , e /wp-json — para a seção Excluir caminhos.

Por fim, habilite o Plugin selecionando Enabled na lista suspensa Redirect Status :

…e é isso!

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

Agora, quando você visitar seu http://headless-wordpress-news-blog.local/wp-json , ele deverá apresentar dados 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)

Usaremos a ferramenta de desenvolvimento web Vite para criar nosso aplicativo Vue 3 para conectar-se ao WordPress headless. Você pode ler mais sobre as ferramentas de desenvolvimento Vue 3 e Vite.

Neste artigo, estaremos construindo um blog de notícias. Todo o gerenciamento de conteúdo de back-end 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ê estiver tendo problemas com espaços em seu nome de usuário, tente usar:

 npx create-vite-app news-blog

Observe que configuramos nosso aplicativo Vue 3 para ouvir http://news-blog.local , mas você pode manter o padrão http://localhost:3000 .

Por fim, abra sua base de código Vue 3 com qualquer editor de código de sua escolha. Vamos com o VSCode e vamos sujar as mãos com códigos.

Consumindo a API do WordPress

Avançamos para desenvolver a parte restante do aplicativo Vue para economizar seu tempo de leitura, mas você pode clonar o repositório do meu GitHub.

Exibir componente de postagem do aplicativo

O trecho de código abaixo mostra como implementamos a API REST do WordPress com nossa instância Vue para exibir todos os posts 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>

Exibir componente de postagem única

O trecho de código mostra como recuperamos um único post com a API REST do WordPress com o WordPress sem cabeça e 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 da API para a API do WordPress headless para o conteúdo do back-end:

 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 } }, }

Implantando o WordPress Headless com Kinsta

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

Para implantar seu WordPress headless para Kinsta, clique no botão Push to Staging em seu painel DevKinsta e entre no Kinsta com suas credenciais de login. Você pode criar uma nova conta Kinsta para obter suas credenciais de login.

Você pode aprender como enviar alterações para o ambiente de teste para implantar seu WordPress headless nos serviços de hospedagem Kinsta em um único clique.

Por fim, você pode implantar sua instância Vue.js em qualquer provedor de hospedagem em nuvem de sua escolha. Certifique-se de atualizar seu endpoint WordPress headless adequadamente para testar seu aplicativo em um ambiente de produção ao vivo.

Resumo

O WordPress sem cabeça 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 entenderem as vantagens de uma opção sem cabeça.

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

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