WordPress è stato il sistema di gestione dei contenuti per sviluppatori e non sviluppatori per costruire e creare rapidamente siti web sorprendenti.
L’utilizzo di un’architettura a microservizi, dove il backend di gestione dei contenuti è separato dal frontend, garantisce il massimo controllo di entrambi i “lati”. Questo problema di separazione è ciò che cercano di risolvere i sistemi di gestione dei contenuti headless (senza testa), comprese le soluzioni WordPress headless.
Con un approccio headless, le aziende hanno un controllo più granulare sul backend di gestione dei contenuti. Sono anche libere di utilizzare qualsiasi frontend di loro scelta, compresi React, Vue, Angular, ecc.
In questa guida andremo alla scoperta di WordPress senza testa (o headless), vi diremo di cosa si tratta, quando e perché potreste utilizzarlo. Infine, scopriremo come si crea un ambiente WordPress headless, come si costruisce il frontend con Vue.js e come distribuire WordPress headless utilizzando Kinsta.
Cosa Significa WordPress Headless?
WordPress è un’applicazione monolitica in cui il backend e il frontend sono strettamente legati. Il backend è dove avviene la gestione, dove potete creare, modificare, aggiungere ed eliminare contenuti, oltre a cambiare le configurazioni dell’aspetto. Il frontend è invece responsabile della visualizzazione dei contenuti all’utente.
WordPress headless è il termine utilizzato per descrivere un WordPress disabbinato. La parte del backend (gestione) è separata dalla parte del frontend del CMS WordPress. Potete sviluppare e gestire il frontend come un’applicazione standalone con qualsiasi framework frontend vogliate.
Pro e Contro di WordPress Headless
Ora analizzeremo i pro e i contro di WordPress headless per darvi una migliore comprensione del concetto.
I Pro
Inizieremo dai pro.
Prestazioni Super
In questa era di applicazioni dalle prestazioni super-veloci, il vostro sito web non dovrebbe impiegare più di qualche secondo per caricarsi, evitando così di perdere visitatori. Dal momento che il frontend è separato da WordPress e può essere sviluppato con alte prestazioni e scalabilità utilizzando i moderni strumenti frontend, un approccio WordPress headless offre grandi vantaggi per l’esperienza utente complessiva del vostro sito web.
Controllo Granulare
Optare per un’architettura headless vi dà maggiore controllo sul layout del vostro design, sulla presentazione dei contenuti e su come gli utenti interagiscono con il frontend della vostra applicazione. Permette anche ai vostri contenuti di backend di essere protetti e accessibili da una posizione centrale.
Maggiore Scalabilità
A volte scalare WordPress può essere complicato perché non avete il controllo completo di tutti i componenti e del codice che alimenta WordPress, soprattutto se non siete sviluppatori. Ma con il disaccoppiamento di WordPress, è facile scalare ogni parte in modo isolato e individuare facilmente la parte che ha bisogno di essere scalata.
Sicurezza Più Rigida
Non possiamo sottolineare abbastanza i vantaggi in termini di sicurezza di WordPress headless perché WordPress disabbinato offre vantaggi di alta sicurezza contro gli hacker e gli attacchi DDoS. L’approccio di WordPress headless rende difficile per gli hacker accedere ai vostri dati sensibili di backend perché è separato dal frontend, cioè il sito rivolto agli utenti.
Design Leggero
Avrete maggiore controllo sulla struttura e sul layout del design del vostro frontend. Inoltre, potete lavorare sul frontend con maggiore libertà nel creare design personalizzati; grazie alle chiamate alla REST API, sarete in grado di sfruttare i moderni strumenti web e distribuirli sul frontend.
Pubblicazione di Contenuti Multicanale
Dal momento che WordPress headless utilizza un sistema basato su API per comunicare i vostri contenuti al frontend, potete visualizzare i vostri contenuti ovunque e su qualsiasi piattaforma, compresi desktop, sito web, applicazioni mobili e chiosco touch screen. È anche possibile fare pieno uso della realtà aumentata, della realtà virtuale e dei dispositivi della Internet of Things per visualizzare e presentare i vostri contenuti provenienti dal sistema basato sulle API.
I Contro
Analizzeremo i contro dell’headless in modo più approfondito man mano che andiamo avanti, ma i principali svantaggi sono questi:
- Separare il backend e il frontend vi dà un carico extra quando gestite diverse istanze del sito.
- Può essere costoso da implementare perché ha bisogno di più membri nel vostro team e di un capitale aggiuntivo per gestire diverse istanze.
- Rendere il vostro contenuto disponibile su diverse piattaforme può causare un’esperienza fuorviante per i vostri utenti se il contenuto non è presentato in modo coerente su tutte le piattaforme.
Quando WordPress Headless Potrebbe Non Essere la Soluzione Migliore
Dal momento che WordPress headless è un’incredibile innovazione e offre grandi vantaggi, ci sono alcune cose che dovete tenere a mente quando decidete se adottarlo o meno.
- WordPress headless è molto costoso da mantenere. Dovrete mantenere due diverse istanze di un sito web dall’infrastruttura a più sviluppatori.
- WordPress headless non supporta tutte le funzionalità di WordPress. Ad esempio, alcune funzionalità di WordPress come l’editor WYSIWYG e l’anteprima live non funzionano quando si utilizza un frontend separato.
- È più costoso configurare un WordPress headless. Quindi, tenete sempre presente il costo maggiore.
Chi Dovrebbe Utilizzare WordPress Headless?
Di seguito riportiamo i casi in cui potreste aver più bisogno di WordPress headless:
- Dovreste usare WordPress headless se la sicurezza del vostro sito web è la vostra preoccupazione principale ed è fondamentale per la vostra azienda.
- Inoltre, se il vostro sito web non ha bisogno di aggiornamenti regolari, sarà un ottimo segno che avete bisogno di una configurazione headless.
- Poi, se volete avere un design personalizzato che non è facile trovare in un tema WordPress, potrete ravvivare il frontend del vostro sito web con un design unico. Allora, WordPress headless è la soluzione per voi.
- Infine, se state costruendo un sito web di breve durata o una demo per presentazioni e tutorial, allora potete provare l’approccio headless.
Chi Dovrebbe Evitare WordPress headless
Qui riportiamo diversi casi in cui usare WordPress headless non è una buona idea:
- Quando il vostro sito web si basa esclusivamente su plugin specifici e funzionalità che controllano e lavorano al meglio con il frontend della vostra applicazione, dovreste rimanere con WordPress a meno che i plugin non offrano soluzioni basate su API per consumare i dati.
- Supponiamo che non siate interessati a codificare il vostro sito web, o che il vostro sito web richieda una manutenzione quotidiana e che non abbiate budget per assumere un professionista per la manutenzione ordinaria. In questo caso, WordPress è una soluzione più adatta a voi.
- Se non siete uno sviluppatore esperto e volete creare e gestire il vostro sito web da soli, dovresti utilizzare WordPress.
Come Rendere WordPress Headless (Creare un’App)
In questa sezione analizzeremo la creazione e lo sviluppo di un blog di notizie con WordPress headless per il backend e Vue 3 come frontend per l’utente.
Installare WordPress Headless con Devkinsta
Svilupperemo WordPress headless con DevKinsta, un popolare ambiente di sviluppo locale di WordPress per progettare, sviluppare e distribuire siti WordPress comodamente dalla vostra macchina locale.
DevKinsta è gratuito e vi offre grandi vantaggi nello sviluppare e costruire su WordPress.
Potete scaricare e installare DevKinsta dal sito ufficiale e seguire le istruzioni della documentazione.
Dato che abbiamo già installato DevKinsta, lo avvieremo e seguiremo il passaggio che segue per installare il nostro primo WordPress headless.
Sulla dashboard di DevKinsta, create un nuovo sito WordPress con Nginx, MySQL e qualsiasi versione di WordPress disponibile. Inoltre, potete importare un’istanza di WordPress esistente o creare un’istanza di WordPress personalizzata dalla dashboard.
Successivamente, assegnate alla vostra istanza di WordPress appena creata un nome, un nome utente admin e una password, poi fate clic su Crea e copiate i dati mentre DevKinsta crea una nuova istanza di WordPress sulla vostra macchina locale.
Poi fate clicca su Apri sito per aprire la vostra istanza di WordPress nel vostro browser predefinito.
Infine, potrete accedere alla bacheca di amministrazione accedendo al link http://headless-wordpress-news-blog.local/wp-admin e digitando le credenziali di accesso da amministratore che avete inserito durante la creazione della nuova istanza.
Si noti che abbiamo configurato il nostro WordPress headless in locale con l’URL http://headless-wordpress-news-blog.local, mentre il frontend è accessibile localmente su http://news-blog.local. Utilizzeremo questi indirizzi per tutto il tutorial.
Configurare il Nostro WordPress Headless
Dopo aver effettuato l’accesso alla vostra bacheca di WordPress, potrete procedere all’installazione di qualsiasi plugin e configurazione di vostra scelta.
Per questo tutorial disabiliteremo completamente il tema e accederemo al contenuto solo tramite l’endpoint basato sulla REST API di WordPress installando e configurando il plugin Simple Website Redirect.
Andate su Plugin > Aggiungi nuovo e cercate Simple Website Redirect, installatelo e attivatelo:
Poi fate clic sulle Impostazioni del plugin e inserite il vostro URL del frontend (ad esempio http://news-blog.local), cliccate sulle opzioni Avanzate e aggiungete alla sezione Exclude Paths i seguenti percorsi – /wp-admin, /wp-login.php e /wp-json.
Infine, abilitate il plugin selezionando Enabled nel menu a tendina Redirect Status:
…e questo è tutto!
Inoltre, se la vostra API JSON non è abilitata di default quando visitate http://headless-wordpress-news-blog.local/wp-json, potete abilitarla aprendo i vostri Permalink nelle Impostazioni di WordPress e selezionando Nome articolo o qualsiasi altro a vostra scelta tranne Semplice:
Ora, quando visitate il vostro http://headless-wordpress-news-blog.local/wp-json, dovrebbe presentarvi dei dati JSON come quelli riportati qui sotto:
{
"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
}
}
}
],
...Installare Vue.js (Frontend)
Per creare la nostra applicazione Vue 3 e connetterci con WordPress headless useremo lo strumento di sviluppo web Vite. Potete approfondire su Vue 3 e sugli strumenti di sviluppo di Vite.
In questo articolo creeremo un blog di notizie. Tutta la gestione backend dei contenuti del progetto sarà sviluppata e ospitata con il nostro WordPress headless su Devkinsta.
Proseguite digitando questi semplici comandi:
npm init @vitejs/app news-blog
cd news-blog
npm install
npm run devSe avete problemi con gli spazi nel vostro nome utente, provate:
npx crea-vite-app news-blogSi noti che abbiamo configurato la nostra applicazione Vue 3 per rimanere in ascolto di http://news-blog.local, ma potete continuare con l’indirizzo http://localhost:3000 predefinito.
Infine, aprite il vostro codice Vue 3 con un qualsiasi editor di codice. Noi utilizzeremo VSCode.
Consumare l’API di WordPress
Siamo andati avanti a sviluppare la parte rimanente dell’applicazione Vue per farvi risparmiare tempo nella lettura, ma potete proseguire clonando la repository dal mio GitHub.
Visualizzare il Componente Post dell’Applicazione
Lo snippet di codice qui sotto mostra come implementiamo l’API REST di WordPress con la nostra istanza di Vue per visualizzare tutti i post da 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>Visualizzare il componente di un singolo post
Lo snippet di codice mostra come recuperiamo un singolo post con WordPress REST API con l’headless WordPress e lo visualizziamo nella nostra istanza 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>Di seguito è riportato lo store che fa le chiamate API all’API headless di WordPress per i contenuti del 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
}
},
}Qui sotto c’è il negozio che fa le chiamate API all’API di WordPress headless per i contenuti del 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 (dati) {
commit('setPosts', dati)
}
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 (dati) {
commit('setPost', dati)
}
return data
}
},
}Distribuire WordPress Headless con Kinsta
Distribuire il vostro WordPress headless è molto facile con DevKinsta utilizzando il servizio di hosting Kinsta.
Per distribuire il vostro WordPress headless su Kinsta, fate clic sul pulsante Passa a Staging nella vostra dashboard di DevKinsta e accedete a Kinsta con le vostre credenziali.
Trovate istruzioni per passare le modifiche all’ambiente di staging e distribuire il vostro WordPress headless ai servizi di hosting di Kinsta con un solo clic.
Infine, potete distribuire la vostra istanza di Vue.js verso qualsiasi provider di cloud hosting. Aggiornate di conseguenza il vostro endpoint WordPress headless per testare la vostra applicazione in un ambiente di produzione live.
Riepilogo
WordPress headless e i vantaggi che ne derivano rimarranno per un po’. La sua popolarità continuerà a crescere man mano che un numero maggiore di sviluppatori e proprietari di siti comprenderanno i vantaggi di un’opzione headless.
In questa guida vi abbiamo presentato i vantaggi, i pro e i contro di WordPress headless e vi abbiamo mostrato come creare e distribuire il vostro primo WordPress headless con DevKinsta. Ora siete sulla buona strada per avere la vostra implementazione di WordPress headless.
Quali sono i vostri consigli per implementare un sito WordPress headless? Condivideteli nella sezione dei commenti!
Lascia un commento