Come impostare WordPress senza testa nel 2022?

headless-wordpress

Utilizzando una soluzione WordPress headless, è possibile mantenere completamente distinti il front-end e il back-end del sito web. Questo metodo consente di produrre copie statiche del sito web, riducendo in modo significativo i tempi di caricamento quando si accede al sito.

Più avanti parleremo di come configurare e costruire WordPress senza testa e del suo funzionamento. Dopodiché, vi guideremo nella creazione di una configurazione di base che sfrutta Amazon Web Services per archiviare copie statiche del vostro sito web e nell'utilizzo dei framework per configurare WordPress senza testa.

Cosa significa esattamente "WordPress senza testa"?

wordpress tradizionale vs headless
wordpress tradizionale vs headless

Quando modificate il vostro sito utilizzando la dashboard amministrativa, nota anche come back end, vedrete gli effetti equivalenti sul front end (ovvero le pagine live a cui i visitatori hanno accesso). WordPress è responsabile sia del back end che del front end del vostro sito web quando si utilizza questa strategia convenzionale.

Quando parliamo di WordPress senza testa, parliamo di una configurazione in cui non utilizzate WordPress per produrre il front-end del vostro sito web. È questa la configurazione che intendiamo quando parliamo di WordPress senza testa. Invece, WordPress è responsabile solo della parte posteriore del sito web. È possibile creare un sito web statico per il front-end, utilizzare qualsiasi altra piattaforma che si colleghi a WordPress tramite le sue API, oppure utilizzare WordPress.

Come impostare un sito WordPress senza testa?

Condivideremo due metodi per configurare un sito WordPress senza testa. Diamo un'occhiata:

Metodo 1: Creare WordPress senza Hed utilizzando AWS e i plugin

In linea di principio, è possibile ospitare una versione statica del sito web con qualsiasi provider. Tuttavia, ai fini di questa dimostrazione, utilizzeremo AWS, poiché è compatibile con il plugin che metteremo in evidenza. Di seguito sono illustrati i primi passi da compiere.

Passo 1. Creare un account con AWS

AWS S3

Per prima cosa, è necessario creare un account con AWS.

Iniziare con AWS comporta un po' più di lavoro rispetto a un server web tradizionale. D'altra parte, l'utilizzo di questa piattaforma può comportare costi esigui per i siti web statici. Il costo può superare di poco il mezzo dollaro al mese.

Per configurare un'installazione di WordPress senza testa, dovreste scegliere il livello Amazon S3, che offre hosting gratuito per 12 mesi:

Il sito web del servizio S3 di Amazon.

Non dovrebbe essere troppo difficile configurare il vostro account; tutto ciò che dovete fare è cliccare sul pulsante "Inizia con Amazon S3" e fornire le informazioni necessarie nelle aree previste dal modulo di registrazione.

Si noti che il pulsante di iscrizione completa è sostituito dal pulsante di iscrizione standard se si è già registrati con un account Amazon. La procedura procederà allo stesso modo; tuttavia, non sarà richiesto di reinserire l'indirizzo e-mail e le credenziali di accesso in nessun momento.

Fase 2: produrre una replica del sito web in formato statico.

È comunque necessario installare WordPress da qualche parte perché questa configurazione funzioni correttamente. Questo vi permetterà di utilizzare WordPress come back end del vostro sito e di creare contenuti statici per il front end. Un'installazione locale di WordPress è un'alternativa che può essere utilizzata per evitare di dover pagare i servizi di due provider di hosting separati.

Un sito web locale in WordPress può essere configurato in diversi modi, tra cui i seguenti:

In seguito, modificate e personalizzate il vostro sito web nel modo che ritenete più opportuno. Assicuratevi che le impostazioni siano aggiornate, decidete un tema e iniziate a scrivere le vostre pagine e i vostri articoli. Dopo aver raggiunto un punto in cui siete soddisfatti, potrete creare una copia statica da utilizzare per il front-end del vostro sito web.

È possibile fare la stessa cosa utilizzando uno qualsiasi dei diversi plugin. WP2Static, invece, è compatibile con diverse piattaforme, tra cui, ma non solo, AWS, Netlify, GitHub Pages e molte altre.

Una volta completato il plugin, si potrà accedere alle sue impostazioni facendo clic sulla scheda WP2Static che si trova nella dashboard. Si aprirà la scheda "Deploy static website", che è esattamente il punto in cui volete trovarvi:

In quest'area, riempite la casella URL di destinazione con l'URL che gli utenti forniranno per accedere al vostro sito web (la configurazione di Amazon S3 lo determinerà). Quindi, scegliete Amazon S3 dal menu che appare in cima alla schermata:

Per distribuire il vostro sito web, dovrete prima creare alcuni parametri e poi collegare AWS al vostro sito web. Questo verrà fatto nella fase successiva del processo.

Passo 3: pubblicare automaticamente le pagine statiche su Amazon Web Services

Impostazione del sito statico AWS

Quando si sceglie l'opzione Amazon S3, sono disponibili numerosi altri campi, tra cui i seguenti:

Prima di iniziare il processo di distribuzione, è necessario inserire l'ID della chiave di accesso e la chiave di accesso segreta. Ricordate che l'ID della chiave di accesso utilizzata deve avere i livelli di autorizzazione appropriati affinché la distribuzione vada a buon fine. Di seguito è riportata una breve esercitazione che vi guiderà attraverso il processo di estrazione di entrambe le chiavi dal vostro account AWS.

Metodo 2: Costruire WordPress senza testa utilizzando i framework

È giunto il momento di esaminare i migliori framework se volete creare un sito WordPress headless. Ecco i 3 migliori framework che potete utilizzare per configurare il vostro sito WordPress headless:

1. Reagire

React wp headless framework

React, uno dei framework più popolari, è una libreria Javascript gratuita e open-source per il front-end che consente agli sviluppatori di costruire interfacce utente ricche di potenza. Alcune delle sue caratteristiche includono l'estensione della sintassi JavaScript (JSX), il binding unidirezionale dei dati, il DOM virtuale, l'uso di componenti e i metodi del ciclo di vita.

2. Faust.js

Faust.js framework headless per wordpress

Faust.js è il framework headless di WordPress che fornisce un insieme di strumenti sia per gli sviluppatori che per gli editori per aiutarli a iniziare a costruire applicazioni front-end con WordPress come CMS headless. Questo framework è composto da plugin per WordPress e da un insieme di pacchetti npm e supporta il rendering lato server e la generazione statica.

3. Gatsby

Gatsby framework wordpress headless

Gatsby è un generatore di siti statici open-source. Gatsby è costruito su Node.js utilizzando React e GraphQL. È in grado di offrire tempi di caricamento estremamente rapidi, generando file statici HTML, CSS e Javascript. Il framework dà grande importanza alla SEO, garantendo il superamento della valutazione Core Web Vitals di Google. 

Potete anche utilizzare questi framework popolari per costruire WordPress senza testa:

4. Avanti.js

5. Ambra

6. Frontalità

7. Angolare

8. jQuery

9. Vue.js

Opzione 3: Chiedete un aiuto professionale per configurare WordPress senza testa!

Alcuni siti web non possono trarre vantaggio dall'utilizzo di una strategia WordPress headless. D'altra parte, il passaggio a un front-end statico può contribuire a migliorare la velocità e la sicurezza del sito se il vostro sito non dipende in modo sostanziale da componenti dinamici. Inoltre, probabilmente i costi di hosting saranno più bassi.

Volete configurare WordPress headless ma non conoscete il processo di configurazione? Creare il vostro primo progetto WordPress headless può essere un compito arduo. Non preoccupatevi! Seahawk Media può creare per voi una configurazione headless flessibile e multipiattaforma con il team e gli strumenti giusti. Se avete domande su come iniziare con WordPress headless o su uno qualsiasi degli strumenti discussi in precedenza, chiedete aiuto ai nostri esperti di WordPress. Il nostro team di esperti è sempre qui per assistervi!

Spero che questa guida sulla configurazione di WordPress senza testa vi sia piaciuta.

Iniziare con Seahawk

Registratevi nella nostra app per visualizzare i nostri prezzi e ottenere sconti.