Scopri come creare un sito WordPress senza testa con Vue.js

WordPress è stato il sistema di gestione dei contenuti di riferimento per sviluppatori e non sviluppatori per creare e creare rapidamente siti Web straordinari.

L'utilizzo di un'architettura di microservizi, in cui il backend di gestione dei contenuti è separato dal frontend, consente il massimo controllo di entrambi i "end". Questo problema di separazione è ciò che i sistemi di gestione dei contenuti senza testa, comprese le soluzioni WordPress senza testa, cercano di risolvere.

Con un approccio headless, le aziende hanno un controllo più granulare sul back-end di gestione dei contenuti. Sono anche liberi di utilizzare qualsiasi frontend di loro scelta, inclusi React, Vue, Angular, ecc.

Questa guida esplorerà in dettaglio WordPress senza testa e di cosa si tratta, quando e perché dovresti considerare di usarlo. Infine, esploreremo la creazione di un ambiente WordPress senza testa, costruendo il frontend con Vue.js e distribuendo il WordPress senza testa utilizzando Kinsta.

Cos'è WordPress senza testa?

WordPress è un'applicazione monolitica in cui le parti di backend e frontend sono strettamente avvolte insieme. Il back-end è il punto in cui entra in gioco la gestione, dove puoi creare, modificare, aggiungere ed eliminare contenuto, inclusa la modifica delle configurazioni dell'aspetto. Al contrario, il frontend è responsabile della visualizzazione del contenuto all'utente.

Headless WordPress è il termine usato per descrivere WordPress disaccoppiato. La parte di back-end (gestione) è separata dalla parte di front-end del CMS di WordPress. Puoi sviluppare e gestire il frontend come un'applicazione autonoma con qualsiasi framework frontend di tua scelta.

Pro e contro di WordPress senza testa

Successivamente, esploreremo i pro ei contro di WordPress senza testa per darti una migliore comprensione del concetto.

I pro

Per prima cosa, inizieremo esplorando i professionisti.

Prestazioni super veloci

In questa era di applicazioni dalle prestazioni super veloci, il tuo sito Web non dovrebbe impiegare più di pochi secondi per caricarsi ed evitare di perdere visitatori. Poiché il frontend è separato da WordPress e può essere sviluppato tenendo conto delle alte prestazioni e della scalabilità utilizzando i moderni strumenti di frontend, l'utilizzo di un approccio WordPress headless è di grande beneficio per l'esperienza utente complessiva del tuo sito web.

Controllo granulare

La scelta di un'architettura headless ti offre un maggiore controllo sul layout del progetto, sulla presentazione dei contenuti e su come gli utenti interagiscono con il frontend della tua applicazione. Consente inoltre di proteggere e accedere ai contenuti di back-end da una posizione centrale.

Maggiore scalabilità

Il ridimensionamento di WordPress a volte può essere complicato perché non hai il controllo completo di tutti i componenti e i codici che alimentano WordPress, principalmente se non sei uno sviluppatore. Ma con il disaccoppiamento di WordPress, è facile ridimensionare ogni parte in isolamento e puoi facilmente rilevare quale parte deve essere ridimensionata.

Sicurezza più stretta

Non possiamo sottolineare abbastanza i vantaggi in termini di sicurezza di WordPress senza testa poiché WordPress disaccoppiato offre vantaggi di alta sicurezza contro hacker e attacchi DDoS. L'approccio senza testa di WordPress rende difficile per gli hacker l'accesso ai tuoi dati di back-end sensibili poiché è separato dal tuo front-end, il sito Web rivolto agli utenti.

Design leggero

Avrai un maggiore controllo sulla struttura e sul layout del tuo design frontend. Inoltre, puoi lavorare sul frontend con maggiore libertà e design personalizzato; grazie alle chiamate dell'API REST, potrai sfruttare i moderni strumenti web e distribuirli sul frontend.

Pubblicazione di contenuti multicanale

Poiché WordPress headless utilizza un sistema basato su API per comunicare i tuoi contenuti al frontend, puoi visualizzare i tuoi contenuti ovunque e su qualsiasi piattaforma, inclusi desktop, sito Web, app mobili e chiosco touch screen. È inoltre possibile sfruttare appieno i dispositivi di Realtà Aumentata, Realtà Virtuale e Internet of Things per visualizzare e presentare i propri contenuti provenienti dal sistema basato su API.

I contro

Esploreremo i contro di senza testa in modo più approfondito mentre procediamo, ma i suoi principali svantaggi sono:

1. Separare il back-end e il front-end ti dà un carico extra durante la gestione di diverse istanze del sito web.
2. Può essere costoso da implementare poiché richiede membri aggiuntivi nel tuo team e capitale aggiuntivo per l'esecuzione di diverse istanze.
3. Rendere disponibili i tuoi contenuti su piattaforme diverse può causare un'esperienza incoerente per i tuoi utenti se il contenuto non viene presentato in modo coerente su tutte le piattaforme.

Quando WordPress senza testa potrebbe non essere l'opzione migliore

Poiché WordPress senza testa è un'innovazione incredibile con grandi vantaggi, ci sono alcune cose che devi tenere a mente quando decidi se dovresti seguirlo o meno.

1. WordPress senza testa è molto costoso da mantenere. Manterrai due diverse istanze di un sito Web dall'infrastruttura a più sviluppatori.
2. Headless WordPress non supporta tutte le funzionalità di WordPress. Ad esempio, le fantastiche funzionalità di WordPress come l'editor WYSIWYG e l'anteprima dal vivo non funzioneranno quando si utilizza un frontend separato.
3. È più costoso configurare un WordPress senza testa. Quindi, tieni sempre a mente il suo costo maggiore.

Chi dovrebbe usare WordPress senza testa?

Di seguito sono riportati i casi più adatti per i quali potresti aver bisogno di WordPress senza testa:

1. Dovresti utilizzare WordPress senza testa se la sicurezza del tuo sito Web è la tua principale preoccupazione e fondamentale per la tua azienda.
2. Successivamente, se il tuo sito Web non necessita di aggiornamenti e aggiornamenti regolari, sarà un ottimo segno che dovrai utilizzare una configurazione senza testa.
3. Quindi, se vuoi avere un design personalizzato che un tema WordPress non farà facilmente, vuoi ravvivare il frontend del tuo sito Web con un design unico. Quindi, WordPress senza testa è la tua prossima opzione.
4. Infine, se stai costruendo un sito Web di breve durata o un sito demo per presentazioni e tutorial, puoi provare l'approccio senza testa.

Chi dovrebbe evitare di utilizzare WordPress senza testa

Qui ci sono diversi casi in cui l'utilizzo di WordPress senza testa non è una buona opzione:

1. Quando il tuo sito Web si basa esclusivamente su plug-in e funzionalità specifici che controllano e funzionano al meglio con il front-end della tua applicazione, dovresti restare con WordPress a meno che i plug-in non offrano opzioni basate su API per consumare i dati.
2. Supponiamo che tu non sia interessato a codificare il tuo sito Web, o che il tuo sito Web richieda una manutenzione giornaliera e che tu non stia assumendo un professionista per la manutenzione di routine a causa del tuo budget limitato. In tal caso, WordPress è un'opzione adatta a te.
3. Se non sei uno sviluppatore esperto e desideri creare e gestire il tuo sito web da solo, dovresti utilizzare WordPress.

Come rendere WordPress senza testa (crea un'app)

Questa sezione esplorerà la creazione e lo sviluppo di un blog di notizie con WordPress headless per il back-end e Vue 3 come front-end rivolto agli utenti.

Configurazione di WordPress senza testa con Devkinsta

Svilupperemo WordPress senza testa con DevKinsta, un popolare ambiente di sviluppo locale di WordPress per progettare, sviluppare e distribuire siti WordPress comodamente dal tuo computer locale.

DevKinsta è gratuito per sempre e ti offre grandi vantaggi e comodità nello sviluppo e nella creazione di WordPress con esso.

Puoi scaricare e installare DevKinsta dal sito Web ufficiale e seguire le istruzioni nella documentazione per iniziare.

Poiché abbiamo già installato DevKinsta, lo apriremo e seguiremo il passaggio seguente per configurare il nostro primo WordPress senza testa.

Nella dashboard di DevKinsta, crea un nuovo sito WordPress utilizzando Nginx, MySQL e qualsiasi versione di WordPress disponibile. Inoltre, puoi importare un'istanza WordPress esistente o creare un'istanza WordPress personalizzata dalla dashboard.

Quindi, dai alla tua istanza WordPress appena creata un nome, un nome utente amministratore e una password, quindi fai clic su Crea e copia i dettagli mentre DevKinsta crea una nuova istanza WordPress nella tua macchina locale.

Quindi, fai clic su Apri sito per aprire l'istanza WordPress appena creata sul browser predefinito.

Infine, puoi accedere alla dashboard dell'amministratore accedendo al link http://headless-wordpress-news-blog.local/wp-admin e digitando le credenziali di accesso dell'amministratore che hai inserito durante la creazione della nuova istanza.

Nota che abbiamo impostato il nostro WordPress senza testa localmente con l'URL http://headless-wordpress-news-blog.local con il frontend è ospitato localmente su http://news-blog.local e lo useremo in tutto il tutorial.

Configurazione del nostro WordPress senza testa

Successivamente, dopo aver effettuato correttamente l'accesso alla dashboard di WordPress, puoi procedere con l'installazione di qualsiasi plug-in e configurazione di tua scelta.

Disattiveremo completamente il tema per questo tutorial e accederemo al contenuto solo tramite l'endpoint basato sull'API REST di WordPress installando il plug-in Simple Website Redirect e configurandolo.

Vai su Plugin > Aggiungi nuovo e cerca Simple Website Redirect, installalo e attivalo:

Quindi, fai clic sulle Impostazioni del plug-in e inserisci il tuo URL basato sul frontend (ad es http://news-blog.local ), fai clic su Opzioni di impostazione avanzate e aggiungi i seguenti percorsi — /wp-admin , /wp-login.php e /wp-json — alla sezione Escludi percorsi.

Infine, abilita il plug-in selezionando Abilitato nel menu a discesa Stato reindirizzamento :

…e basta!

Inoltre, se la tua API JSON non è abilitata quando visiti http://headless-wordpress-news-blog.local/wp-json per impostazione predefinita, puoi abilitarla aprendo i tuoi Permalink nelle Impostazioni di WordPress e selezionando Nome del post o qualsiasi altro a tua scelta tranne Plain :

Ora, quando visiti il ​​tuo http://headless-wordpress-news-blog.local/wp-json , dovrebbe presentarti dati JSON come di seguito:

 { "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 } } } ], ...

Configurazione di Vue.js (anteriore)

Utilizzeremo lo strumento di sviluppo web Vite per creare la nostra applicazione Vue 3 per connetterci con WordPress senza testa. Puoi leggere di più sugli strumenti di sviluppo di Vue 3 e Vite.

In questo articolo creeremo un blog di notizie. Tutta la gestione dei contenuti di back-end del progetto sarà sviluppata e ospitata con il nostro WordPress headless utilizzando Devkinsta.

Digita insieme a questi semplici comandi:

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

Se riscontri problemi con gli spazi nel tuo nome utente, prova a utilizzare:

 npx create-vite-app news-blog

Nota che abbiamo configurato la nostra applicazione Vue 3 per ascoltare http://news-blog.local , ma puoi restare con l' http://localhost:3000 predefinito.

Infine, apri la tua base di codice Vue 3 con qualsiasi editor di codice a tua scelta. Andremo con VSCode e sporcamoci le mani con i codici.

Consumo dell'API di WordPress

Siamo andati avanti per sviluppare la parte rimanente dell'applicazione Vue per farti risparmiare tempo di lettura, ma puoi continuare a clonare il repository dal mio GitHub.

Visualizza il componente del post dell'app

Il frammento di codice seguente mostra come implementiamo l'API REST di WordPress con la nostra istanza Vue per visualizzare tutti i post di WordPress senza testa:

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

Visualizza componente singolo post

Il frammento di codice mostra come recuperiamo un singolo post con l'API REST di WordPress con WordPress senza testa 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 effettua le chiamate API all'API di WordPress senza testa per i contenuti di 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 } }, }

Distribuzione di WordPress senza testa con Kinsta

Infine, la distribuzione del tuo WordPress headless è molto semplice con DevKinsta utilizzando il servizio di hosting Kinsta.

Per distribuire il tuo WordPress headless su Kinsta, fai clic sul pulsante Push to Staging sulla dashboard di DevKinsta e accedi a Kinsta con le tue credenziali di accesso. Puoi creare un nuovo account Kinsta per ottenere le tue credenziali di accesso.

Puoi imparare come inviare le modifiche all'ambiente di staging per distribuire il tuo WordPress senza testa ai servizi di hosting Kinsta con un solo clic.

Infine, puoi distribuire la tua istanza Vue.js a qualsiasi provider di hosting cloud di tua scelta. Assicurati di aggiornare il tuo endpoint WordPress senza testa di conseguenza per testare la tua applicazione in un ambiente di produzione live.

Sommario

WordPress senza testa e i vantaggi che ne derivano sono qui per durare per un po'. La sua popolarità continuerà a crescere man mano che sempre più sviluppatori e proprietari di siti capiranno i vantaggi di un'opzione senza testa.

In questa guida, ti abbiamo presentato i vantaggi, i pro e i contro di WordPress senza testa e ti abbiamo mostrato come creare e distribuire il tuo primo WordPress senza testa con DevKinsta. Ora sei sulla buona strada per avere la tua implementazione WordPress senza testa.

Quali sono i tuoi suggerimenti per la distribuzione di un sito WordPress senza testa? Per favore condividili nella sezione commenti!