L’intelligenza artificiale, i migliori strumenti di sviluppo e i moderni ambienti di hosting stanno dando a WordPress headless una nuova ondata di attenzione da parte di designer e developer. Questa evoluzione sta plasmando il modo in cui le esperienze digitali distribuite vengono progettate, realizzate e implementate.

In questa guida vedremo come utilizzare Lovable, un costruttore di frontend guidato dall’intelligenza artificiale, per creare un sito web moderno alimentato da un backend WordPress headless.

Quello che vediamo oggi offre uno sguardo al futuro di WordPress, sia esso headless o tradizionale: un approccio più aperto, collaborativo e assistito dall’intelligenza artificiale per creare esperienze digitali che uniscono la gestione dei contenuti alla libertà di progettazione creativa.

WordPress headless

Configurare un ambiente WordPress headless è più semplice di quanto sembri. Immagina di dividere WordPress in due parti:

  • Backend – WordPress continua a gestire i contenuti, i media e i dati come al solito.
  • Frontend – un’applicazione separata gestisce l’aspetto e il comportamento di tutto il sito.

Separando le due parti, mantieni l’affidabile gestione dei contenuti di WordPress e ottieni la libertà di progettare e costruire con moderni framework di frontend come React o Vue. Si tratta di prendere il meglio di WordPress e di estenderlo al di là di quanto può fare una configurazione tradizionale.

Un altro modo per immaginarlo: WordPress gestisce la struttura (i contenuti) e il frontend gestisce lo stile (come vengono presentati).

Perché Lovable?

WordPress headless è davvero necessario? Dipende dai propri obiettivi. Per molti progetti, una configurazione standard di WordPress è ancora la strada più semplice ed efficiente. Tuttavia, se si desiderano maggiore flessibilità, iterazioni più rapide o un modo per costruire applicazioni web moderne che vadano oltre i temi e i plugin tradizionali, allora è qui che WordPress headless dà il meglio di sè.

Per questo progetto abbiamo utilizzato Lovable, una piattaforma di sviluppo alimentata dall’intelligenza artificiale che aiuta a generare, modificare e gestire il codice frontend. Si basa su strumenti moderni come React, Tailwind CSS e Vite e utilizza suggerimenti AI per gestire il layout, lo stile e la logica dei componenti.

In altre parole, Lovable non è il frontend in sé. È l’ambiente in cui il frontend viene creato e mantenuto.

Ecco cosa lo ha reso adatto al nostro esperimento:

  • Flessibilità nel controllo delle versioni. Facile sincronizzazione bidirezionale con GitHub, GitLab o Bitbucket.
  • Design multipiattaforma. Crea un sito web, mobile o un sito vetrina da un unico backend WordPress.
  • Iterazioni istantanee. Aggiorna i layout, gli stili o i componenti in pochi secondi grazie ai suggerimenti dell’intelligenza artificiale.
  • Sicurezza disaccoppiata. Nessuna esposizione diretta al database dal lato frontend.
  • Supporta le build statiche. Distribuisci facilmente HTML, CSS e JavaScript statici per migliorare le prestazioni e l’affidabilità.

Naturalmente, le configurazioni headless non sono prive di compromessi. Mantenere uno stack multistrato può rendere più complesso il debugging e i plugin che renderizzano i contenuti sul frontend possono richiedere ponti API personalizzati. Tuttavia, per i siti statici o basati sui contenuti, l’accoppiamento di WordPress con Lovable offre un modo veloce e moderno per esplorare le potenzialità dell’headless.

Come iniziare

Prima di iniziare a costruire, configuriamo le due parti principali del nostro stack: Lovable per il frontend e WordPress per il backend.

Passo 1: creare un progetto Lovable

Vai su lovable.dev e crea un account gratuito. Una volta nella dashboard, inizia un nuovo progetto inserendo una breve richiesta.

Interfaccia utente di Lovable che mostra una panoramica del progetto di un sito web WordPress senza interfaccia utente.
L’interfaccia della chat di Lovable.

L’interfaccia della chat ti fa sentire come se stessi parlando con un collega. Puoi digitare in modo naturale, proprio come in una vera conversazione. Ad esempio, potresti iniziare con una semplice domanda:

Come si inizia a costruire un frontend con WordPress sul backend?

Lovable risponde con una guida chiara, dandoti varie opzioni:

Costruire un frontend React con WordPress come CMS headless è un approccio valido.
È possibile utilizzare l'API REST integrata in WordPress o installare WPGraphQL per query di dati più complesse.

Questo primo scambio stabilisce il tono del processo. Fornisce una rapida panoramica di ciò che è possibile fare e ti aiuta a capire come WordPress si integrerà con il tuo frontend.

Potrai poi perfezionare l’idea chiedendo all’IA di mantenere le cose semplici:

Manteniamo le cose semplici. Vogliamo solo creare un sito blog dimostrativo e avere una pagina che funga da guida di stile dinamica.

Lovable si adatta subito, creando un sito demo pulito e impostando una pagina della Guida di stile che utilizzerai in seguito per gli aggiornamenti globali del design.

Da qui, la conversazione scorre in modo naturale. Tu e Lovable andate avanti e indietro affinando i dettagli e chiarendo ciò che è necessario per proseguire. A un certo punto, Lovable potrebbe chiederti i dettagli essenziali per la configurazione, come ad esempio:

1. Hai un URL del sito WordPress? (ad esempio, https://iltuosito.com)  
2. L'API REST di WordPress è accessibile pubblicamente?  
3. Quali contenuti WordPress devono essere mappati sul tuo blog? (post, pagine o tipi di post personalizzati?)  
4. Ci sono campi personalizzati che desideri recuperare? (ad esempio, tempo di lettura o flag in primo piano)

Una volta fornite queste informazioni, Lovable può generare automaticamente la logica di integrazione, collegando il frontend con il backend di WordPress.

Passo 2: configurare WordPress

Prima che Lovable possa raccogliere i contenuti reali, devi avere un sito WordPress funzionante che funga da backend. È qui che risiedono tutti i post, le pagine e i contenuti multimediali.

Per una configurazione senza problemi, utilizza un host WordPress affidabile come Kinsta, costruito su una potente infrastruttura cloud per assicurarti che le prestazioni e i tempi di attività non siano un problema. Crea un account con Kinsta e crea un nuovo sito WordPress, e otterrai automaticamente un sottodominio temporaneo come:

https://il-tuo-sito.kinsta.cloud/

Una volta creato il sito, controlla che l’API REST sia disponibile pubblicamente. Apri una nuova scheda del browser e visita il sito:

https://il-tuo-sito.kinsta.cloud/wp-json/wp/v2/posts

Se vedi un feed JSON con i dati dei post, il tuo backend è pronto.

Passo 3: collegare WordPress a Lovable

Una volta che il tuo sito WordPress è attivo e l’API REST funziona, è il momento di collegare il backend al tuo progetto Lovable. È qui che il contenuto e il design si uniscono.

Nella chat di Lovable, puoi semplicemente chiedere:

Ok, come colleghiamo il tuo frontend al nostro CMS WordPress?

Lovable ti risponde con un piano chiaro, spiegandoti cosa serve:

Ti collegherai al tuo backend WordPress utilizzando la sua API REST.
Cosa ti servirà:
1. API REST WordPress (integrata, disponibile presso iltuosito.com/wp-json/wp/v2/posts)
2. Un plugin CORS se il tuo frontend si trova presso un dominio diverso
3. (Opzionale) ACF o campi personalizzati per dati aggiuntivi

Inoltre, ti dà una panoramica di ciò che accade da entrambe le parti:

  • Sul lato WordPress: assicurati che l’API REST sia abilitata (di solito lo è per impostazione predefinita).
  • Sul frontend: sostituisci i dati statici del blog con chiamate API a WordPress, crea un servizio per recuperare i dati e gestisci gli stati di caricamento.

Lovable lo descrive in modo chiaro, a volte mostrandoti anche un esempio come questo:

const { data: posts } = useQuery({
  queryKey: ['posts'],
  queryFn: async () => {
    const response = await fetch('https://il-tuo-sito.kinsta.cloud/wp-json/wp/v2/posts');
    return response.json();
  }
});

Successivamente, Lovable, su tuo comando, utilizza l’URL di WordPress che hai fornito e crea un sito frontend che mostra i tuoi post su WordPress.

Esempio di blog WordPress headless basato sul framework front-end di Lovable.
Esempio di blog WordPress headless.

Tutto qui. L’integrazione è attiva, la connessione è stata verificata e il tuo sito headless ha ora un flusso di contenuti perfettamente funzionante da WordPress a Lovable.

Sistema di styling e design

Una volta che la connessione a WordPress è attiva, puoi iniziare a perfezionare l’aspetto del sito. A questo punto, tutto ciò che vedi è stilizzato dai CSS di Tailwind e dalle impostazioni predefinite del browser. Questo ti dà una base pulita, ma ora è il momento di personalizzarlo.

Puoi iniziare chiedendo direttamente a Lovable:

Tutti gli stili sono attualmente forniti da TailwindCSS e dall'User Agent?

Lovable spiega:

Sì. Tutti gli stili sono attualmente forniti da TailwindCSS (tramite index.css e tailwind.config.ts) e dagli stili predefiniti dell'User Agent. Il file App.css esiste ma non viene importato da nessuna parte.

A questo punto puoi iniziare a personalizzare la struttura e la navigazione del sito. Ad esempio, potresti richiedere:

Collegati a tutte le pagine, i post e i media e imposta una barra di navigazione come segue:
Home
Guida di stile
Blog
    Viaggio a Santa Fé
    Hello World
Imposta la pagina Home come root del sito.

Lovable risponde riorganizzando i percorsi e collegando dinamicamente i post di WordPress nel menu a tendina Blog. La navigazione ora funziona su tutte le pagine: Home, Blog e la tua Guida di stile dinamica, che diventa il punto di riferimento per le modifiche globali al design.

Regolazione dell'interfaccia utente del sito web.
Regolazione dell’interfaccia utente del sito web.

Lavorare con la Guida di stile dinamica

In questa pagina puoi definire e controllare lo stile globale di tutto il sito. Ogni modifica che apporti in questa pagina si aggiorna istantaneamente su tutte le pagine.

Potresti iniziare impostando una palette di colori e una tipografia di base:

Imposta il colore di sfondo della pagina su #7B3F00.
Imposta il colore di tutto il testo su #eee.
Heading 1 = 2rem
Heading 2 = 1.5rem
Heading 3 = 1.25rem
Heading 4 = 0.84375rem
Tutto il resto del testo = 1rem

Lovable applica rapidamente il nuovo sistema di design, dando al tuo sito uno sfondo marrone caldo, un testo grigio morbido e una gerarchia di caratteri coerente.

Pagina della guida di stile dinamica in Lovable che mostra tipografia, colori e anteprime dei componenti.
Pagina della guida di stile dinamica.

Da qui puoi continuare a perfezionare il tuo approccio. Ad esempio:

Raddoppia le dimensioni di tutti i titoli.
Aggiungi un margine sinistro e destro del 10% alla pagina.
Crea una galleria immagini 2x2 con spaziatura di 20 px, angoli arrotondati (raggio di 20 px) e un bordo bianco solido di 2 px.

Lovable regola il layout in tempo reale e tu vedi la tua galleria di immagini formarsi immediatamente.

Aggiungere immagini a un progetto WordPress headless.
Aggiunta di immagini a un progetto WordPress headless.

Regolazioni globali di font e spaziatura

Puoi fare un ulteriore passo avanti nel design applicando font e regole di spaziatura coerenti in tutto il sito:

Allinea il titolo della pagina a sinistra.
Usa il font Cowboy (Rye) per tutti i titoli e Roboto per tutto il resto del testo.
Raddoppia l'altezza della riga per tutti i paragrafi e gli elementi di citazione.
Aggiungi margini superiori/inferiori del 5% e margini sinistri/destri del 10% al blocco di citazione.

Lovable aggiorna la tipografia, l’altezza delle linee e i margini.

Personalizza visivamente il layout di una pagina.
Personalizza visivamente il layout di una pagina.

Se qualcosa non sembra corretto, ad esempio se il titolo non è allineato a sinistra, puoi chiedere a Lovable di controllare:

Il titolo della pagina non è allineato a sinistra. Perché?

E ti spiegherà:

Il contenitore ha mx-auto, che lo centra. Lo rimuoverò per ottenere un allineamento a sinistra.

Definire gli stili globali dei pulsanti

Successivamente, puoi dare coerenza visiva ai pulsanti. Nella tua Guida agli stili dinamici, chiedi a Lovable di creare tre dimensioni di pulsanti con stati di passaggio chiari:

1. I pulsanti devono essere rettangolari.
2. Utilizza uno sfondo nero con testo bianco e invertili al passaggio del mouse.
3. Il pulsante medio ha una larghezza pari al 125% di quello piccolo; quello grande è pari al 150%.
4. Aggiungi un raggio del bordo di 20 px.

Se non vedi subito i pulsanti, Lovable può aggiungere una sezione vetrina per visualizzarli in anteprima. Una volta visibili, applica gli stili personalizzati.

Ecco un esempio del CSS risultante che puoi utilizzare anche in WordPress:

.wp-button {
  background: #000;
  color: #fff;
  border-radius: 20px;
  padding: 0.5rem 0.9375rem;
  transition: all 0.3s ease;
}

.wp-button:hover {
  background: #fff;
  color: #000;
}

.wp-button-sm { width: 100%; }
.wp-button-md { width: 125%; }
.wp-button-lg { width: 150%; }

Lovable spiega anche come inserire questi stili nel tuo tema WordPress copiando le variabili nel CSS del tuo tema e applicando le classi di .wp-button nell’editor dei blocchi o nei template.

Aggiungi e personalizza i pulsanti su una pagina web.
Aggiungere e stilizzare pulsanti personalizzati in una pagina web.

Distribuzione

Una volta che il sito headless è stato collegato e personalizzato, il passo finale è la distribuzione, che consiste nel renderlo operativo sul web.

La base di codice di Lovable è portatile, il che significa che puoi inviare il tuo frontend a qualsiasi piattaforma basata su Git e distribuirlo da lì. In questa guida utilizzeremo Sevalla, una piattaforma costruita dal team di Kinsta che combina un potente cloud hosting con un’automazione facile da usare per gli sviluppatori.

Sevalla offre l’hosting gratuito di siti statici, la distribuzione globale e il deploy automatico su Git push. Una volta sincronizzato il codice su GitHub, GitLab o Bitbucket, puoi collegare il tuo repository a Sevalla in pochi clic.

Ecco come fare per andare in onda:

  1. Nella tua dashboard Sevalla, vai su Static Sites e clicca su Add site.
  2. Scegli il tuo provider Git e il tuo repository.
  3. Conferma il branch predefinito e attiva il deployment automatico su commit.
  4. Sevalla rileva automaticamente il tuo framework (in questo caso React + Vite).
  5. Clicca su Create site e la tua compilazione inizierà subito.

Entro pochi minuti il tuo sito sarà disponibile con un dominio temporaneo gratuito.

Consigli utili e altre osservazioni

Man mano che lavori alla creazione di un sito headless con Lovable, ti accorgerai di alcune cose che rendono il processo più fluido e facile da capire.

  • Piani gratuiti e a pagamento: Lovable offre entrambi. Il piano gratuito ti dà ampio spazio per sperimentare, mentre i livelli a pagamento offrono sessioni di richiesta più lunghe e un’elaborazione più veloce.
  • Non è necessario aggiornare spesso: nella maggior parte dei casi, l’interfaccia di Lovable si aggiorna automaticamente quando modifichi o pubblichi contenuti da WordPress. La sincronizzazione live è veloce e affidabile.
  • Modifica diretta dei file: come GitHub, Lovable permette di modificare i file direttamente all’interno della piattaforma. È utile per apportare modifiche rapide o per risolvere piccoli problemi senza dover passare a un editor esterno.
  • API REST vs. WPGraphQL: per la maggior parte dei progetti semplici, l’API REST di WordPress è sufficiente. Tuttavia, se hai bisogno di query o relazioni più complesse, il plugin WPGraphQL offre un’opzione più potente e strutturata.
  • Problemi di configurazione comuni: se riscontri problemi di connessione, spesso sono legati a CORS (Cross-Origin Resource Sharing) o alle autorizzazioni di accesso alle API REST. L’agente AI di Lovable può aiutarti a risolvere rapidamente questi problemi.
  • Considerazioni sulla cache: poiché il tuo frontend è statico, le modifiche potrebbero non apparire immediatamente durante lo sviluppo. Cancella la cache o ricostruiscila quando fai aggiornamenti importanti.

Riepilogo

WordPress headless apre uno spazio in cui il design e lo sviluppo si incontrano quasi senza limiti. Combinando WordPress come backend affidabile per i contenuti con la creazione di frontend guidata dall’intelligenza artificiale di Lovable, puoi passare dall’ideazione alla distribuzione live più velocemente che mai.

Mentre l’intelligenza artificiale continua a plasmare i flussi di lavoro, WordPress headless emerge come un approccio flessibile e pronto per il futuro per i creator che cercano velocità, controllo e libertà in egual misura.

Se vuoi scoprire cosa può fare WordPress headless per il tuo prossimo progetto, inizia con una piattaforma di hosting costruita per garantire prestazioni e affidabilità. Scopri i piani di hosting di Kinsta, la base ideale per WordPress, headless o build ibride.

Bud Kraus

Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.