WordPress è uno dei sistemi di gestione dei contenuti (CMS) più popolari, utilizzato da 810 milioni di persone, ovvero il 41% dell’intera rete internet! È la scelta ideale per chi vuole creare rapidamente un sito web perché è semplice, intuitivo, offre un’ampia gamma di opzioni di personalizzazione e dispone di un solido ecosistema di plugin e altre risorse.

Uno dei modi per sfruttare al meglio WordPress è quello di utilizzare la modalità headless.

Un CMS headless, noto anche come sistema headless, è un tipo di CMS backend utilizzato esclusivamente per la gestione dei contenuti. Questo permette di integrare i contenuti in qualsiasi sistema o sito web semplicemente chiamando le API del CMS headless.

Tuttavia, in questo modo il frontend va gestito separatamente. È qui che entra in gioco un’API.

Le API permettono a due o più applicazioni diverse di scambiarsi dati. In questo caso, l’API viene utilizzata per trasferire i dati dal CMS al sito web di frontend, garantendo maggiore flessibilità e prestazioni più veloci.

In questo articolo scopriremo cos’è un CMS headless, perché potreste volerne creare uno e come configurarlo per WordPress.

Che cos’è WordPress Headless?

Un sito web WordPress Headless è un tipo di sito che utilizza WordPress principalmente come CMS, o sistema di gestione dei contenuti, e utilizza altre tecnologie frontend come React o Vue per il frontend.

Le librerie e i framework JavaScript vengono utilizzati per visualizzare i contenuti del sito. Pertanto, un WordPress Headless ha un frontend e un backend separati e per la comunicazione viene utilizzata un’API.

In termini più semplici, un’architettura headless significa che il CMS viene utilizzato solo per archiviare e gestire i contenuti e non si occupa del frontend del sito web.

Il compito principale del frontend, invece, è quello di visualizzare i contenuti e, a sua volta, non si preoccupa di dove i contenuti siano archiviati o gestiti, a patto di poterli raggiungere.

Un WordPress Headless ha prestazioni migliori perché le richieste del frontend sono gestite da tecnologie più veloci come React e solo il backend è gestito da WordPress. La separazione tra frontend e backend consente di scalare i componenti in modo indipendente.

Hai bisogno di una soluzione per siti web che possa funzionare con qualsiasi sistema o sito web? WordPress Headless può fare proprio questo; ecco come 🚀 Clicca per twittare

Pro e contro di WordPress Headless

Come per tutte le opzioni di sviluppo, la scelta di una soluzione WordPress Headless presenta sia vantaggi che svantaggi. È importante comprenderli entrambi prima di prendere una decisione.

Pro di WordPress Headless

Alcuni dei principali vantaggi di un’implementazione di WordPress Headless sono i seguenti:

  • Flessibilità: WordPress Headless permette agli sviluppatori di creare esperienze frontend personalizzate senza essere limitati dal tradizionale sistema di temi di WordPress. Ciò significa che è possibile creare interfacce utente ed esperienze uniche per esigenze specifiche.
  • Prestazioni: Separare il frontend dal backend di un sito WordPress può rendere più veloce il caricamento del sito e aumentarne le prestazioni, poiché il server si limita a fornire i dati tramite un’API, anziché eseguire il rendering dell’HTML per ogni richiesta.
  • Sicurezza: Separando il frontend e il backend, WordPress Headless può fornire un ulteriore livello di sicurezza limitando l’accesso alla base di codice e al database di WordPress.

Contro di WordPress Headless

Gli svantaggi di WordPress Headless possono includere:

  • Mancanza di temi: Poiché WordPress Headless non si basa su temi precostituiti, dovrete creare i vostri temi personalizzati. Questo può richiedere tempo e risorse aggiuntive.
  • Costi: Lo sviluppo di un sito WordPress Headless può essere più costoso di un sito WordPress tradizionale, in quanto richiede maggiori competenze tecniche e risorse per la configurazione e la manutenzione.
  • Limitazioni dei plugin: Alcuni plugin di WordPress potrebbero non funzionare con WordPress Headless, in quanto si basano sui temi di WordPress per funzionare correttamente.

Cos’è l’API REST di WordPress?

L’API REST di WordPress è utilizzata come interfaccia tra il backend e il frontend. Grazie all’API, i dati possono essere inviati o recuperati dal sito con facilità, poiché l’API ha un accesso controllato ai dati del sito. Inoltre, garantisce che solo gli utenti autorizzati possano interagire con essa.

L’API può supportare un’ampia gamma di formati di dati, tra cui JSON, il che facilita l’interazione con il sistema.

L’API REST di WordPress è un potente strumento per gli sviluppatori che possono creare, aggiornare o cancellare dati, oltre a creare funzionalità personalizzate per i siti o integrarsi con altri servizi. Inoltre, sono disponibili dei plugin che estendono le funzionalità dell’API, come ad esempio l’integrazione di ulteriori metodi di autenticazione.

Cos’è React?

React è una libreria JavaScript per la creazione di interfacce utente. Si tratta di una libreria frontend open-source e riutilizzabile basata su componenti che permette agli sviluppatori di costruire componenti dell’interfaccia utente (UI) utilizzando una sintassi dichiarativa.

React crea un’interfaccia utente interattiva e renderizza i componenti quando i dati cambiano. Questa libreria è molto popolare tra gli sviluppatori che vogliono creare componenti complessi e riutilizzabili, gestire lo stato in modo efficiente e aggiornare facilmente l’interfaccia utente in tempo reale.

La solida community di sviluppatori di React ha creato una serie di strumenti, librerie e risorse per migliorare le funzionalità della libreria. Molte organizzazioni e aziende stanno adottando React come tecnologia per la creazione di applicazioni web complesse, dinamiche e veloci.

Collage di loghi di aziende popolari (tra cui Facebook, Netflix, Amazon, Reddit) con React
Aziende popolari che utilizzano React.js (fonte: inexture.com)

Perché usare React?

React offre molti vantaggi che lo rendono una scelta eccellente per sviluppare applicazioni web complesse e dinamiche.

Ecco alcuni dei principali vantaggi dell’utilizzo di React:

  • Sintassi dichiarativa: React utilizza un approccio dichiarativo alla costruzione dei componenti dell’interfaccia utente, rendendo più semplice la creazione di componenti riutilizzabili e altamente efficienti.
  • Ampia comunità ed ecosistema: React ha una comunità di sviluppatori ampia e attiva, che ha portato alla creazione di una vasta gamma di strumenti e librerie per migliorare le sue funzionalità.
  • DOM virtuale: React utilizza il DOM virtuale per aggiornare l’interfaccia utente in tempo reale. Ciò significa che quando lo stato cambia, aggiorna solo i componenti che devono essere modificati, invece di renderizzare l’intera pagina.
  • Riutilizzabilità: React.js offre componenti riutilizzabili che possono essere utilizzati in diverse applicazioni, riducendo notevolmente i tempi e gli sforzi di sviluppo.

Come creare un sito WordPress Headless con React

Ora è il momento di sporcarci le mani e imparare a creare e distribuire un sito WordPress Headless con React.

Continuate a leggere per cominciare.

Prerequisiti

Prima di iniziare questo tutorial, assicuratevi di avere:

Passo 1. Configurare un sito web WordPress

Iniziamo a configurare il sito web WordPress, che servirà come fonte di dati per l’applicazione React. Se avete già configurato un sito web WordPress, potete saltare questa sezione; in caso contrario, seguiteci.

In questo tutorial utilizzeremo DevKinsta, un ambiente di sviluppo locale veloce e affidabile molto utilizzato per creare, sviluppare e distribuire siti WordPress. È completamente gratuito: basta scaricarlo dal sito ufficiale e installarlo sul sistema.

Una volta completata l’installazione, aprite la dashboard di DevKinsta e cliccate su Nuovo sito WordPress per creare un nuovo sito WordPress.

Inserite i dati richiesti e premete il pulsante Crea sito per continuare.

Schermata della pagina di creazione del sito di DevKinsta che mostra tre campi di input e un pulsante
Pagina di creazione del sito DevKinsta

Questa operazione potrebbe richiedere qualche minuto, ma una volta creato il sito, potrete accedere al suo pannello di amministrazione cliccando rispettivamente su Apri sito o sulle opzioni di amministrazione WP.

Successivamente, per abilitare l’API JSON, dovrete aggiornare i permalink del vostro sito web.

Nella bacheca di amministrazione di WordPress, cliccate su Impostazioni e poi su Permalink. Scegliete l’opzione Nome del post e cliccate su Salva modifiche.

Schermata della pagina delle impostazioni dei permalink del pannello di amministrazione di WordPress che mostra varie opzioni per personalizzare la struttura dei permalink del sito web..
Impostazioni dei Permalink di WordPress

Potete anche utilizzare strumenti come Postman per testare e inviare facilmente richieste alle API REST di WordPress.

Passo 2: Impostare un’applicazione React

Ora che abbiamo configurato il nostro sito WordPress, possiamo iniziare a lavorare sul frontend. Come già detto, in questo tutorial utilizzeremo React per il frontend della nostra applicazione.

Per iniziare, eseguite il codice qui sotto nel terminale per creare un’applicazione React.

npm create [email protected] my-blog-app 
cd my-blog-app 
npm install

I comandi precedenti creeranno un’applicazione React e installeranno le dipendenze necessarie.

Dobbiamo anche installare Axios, una libreria JavaScript per effettuare richieste HTTP. Eseguite il comando seguente per installarla.

npm install axios

Ora, per avviare il server di sviluppo, potete eseguire npm run dev nel terminale. Il server dovrebbe inizializzare l’applicazione all’indirizzo http://127.0.0.1:5173.

La schermata della pagina predefinita di React mostra il logo di React e Vite, un pulsante e del testo.
Pagina di destinazione di Vite + React

Successivamente, aprite il progetto nel vostro editor di codice preferito e cancellate tutti i file non necessari, come la cartella assets, index.css e app.css.

Potete anche sostituire il codice all’interno di main.jsx e App.jsx con il seguente codice:

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
// App.jsx

import React from 'react'

export default function App() {
  return (
    <App />
  )
}

Passo 3: Recuperare i post da WordPress

Ora è il momento di recuperare i post dal nostro sito WordPress.

All’interno di App.jsx, aggiungete il seguente stato e importate useState da React:

const [posts, setPosts] = useState([])

useState è un hook integrato in React che viene utilizzato per aggiungere stati a un componente, uno stato che si riferisce a dati o proprietà.

posts è usato per ottenere i dati dallo stato e setPosts è usato per aggiungere nuovi dati al post. Per impostazione predefinita, abbiamo passato un array vuoto a state.

Quindi, aggiungete il seguente codice dopo lo state per recuperare i post dall’API REST di WordPress:

const fetchPosts = () => {
    // Using axios to fetch the posts
    axios
      .get("http://headless-wordpress-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        // Saving the data to state
        setPosts(res.data);
      });
  }


  // Calling the function on page load
  useEffect(() => {
    fetchPosts()
  }, [])

Il codice precedente esegue la funzione fetchPosts() al caricamento della pagina. All’interno della funzione fetchPosts(), inviamo una richiesta GET all’API di WordPress utilizzando Axios per recuperare i post e poi salvarli nello stato dichiarato in precedenza.

Passo 4: Creare un componente Blog

All’interno della cartella principale, create una nuova cartella denominata components e al suo interno create due nuovi file: blog.jsx e blog.css.

Per prima cosa, aggiungete il seguente codice a blog.jsx:

import axios from "axios";
import React, { useEffect, useState } from "react";
import "./blog.css";

export default function Blog({ post }) {
  const [featuredImage, setFeaturedimage] = useState();

  const getImage = () => {
    axios
     .get(post?._links["wp:featuredmedia"][0]?.href)
     .then((response) => {
      setFeaturedimage(response.data.source_url);
    });
  };

  useEffect(() => {
    getImage();
  }, []);

  return (
    <div class="container">
      <div class="blog-container">
        <p className="blog-date">
          {new Date(Date.now()).toLocaleDateString("en-US", {
            day: "numeric",
            month: "long",
            year: "numeric",
          })}
        </p>
        <h2 className="blog-title">{post.title.rendered}</h2>
        <p
          className="blog-excerpt"
          dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
        />
        <img src={featuredImage} class="mask" />
      </div>
    </div>
  );
}

Nel codice precedente, abbiamo creato un componente scheda che prende la proprietà posts che contiene le informazioni sul post del blog dall’API di WordPress.

Nella funzione getImage(), utilizziamo Axios per recuperare l’URL dell’immagine in evidenza e poi salviamo queste informazioni nello stato.

Poi, abbiamo aggiunto un hook useEffect per chiamare la funzione getImage() una volta che il componente è stato montato. Abbiamo anche aggiunto la dichiarazione di ritorno in cui renderizziamo i dati del post, il titolo, l’estratto e l’immagine.

Quindi, aggiungete gli stili sottostanti al file blog.css:

@import url("https://fonts.googleapis.com/css?family=Poppins");

.blog-container {
  width: 400px;
  height: 322px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 20px 50px #d9dbdf;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

img {
  width: 400px;
  height: 210px;
  object-fit: cover;
  overflow: hidden;
  z-index: 999;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.blog-title {
  margin: auto;
  text-align: left;
  padding-left: 22px;
  font-family: "Poppins";
  font-size: 22px;
}

.blog-date {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #c8c8c8;
  line-height: 18px;
  padding-top: 10px;
}

.blog-excerpt {
  text-align: justify;
  padding-left: 22px;
  padding-right: 22px;
  font-family: "Poppins";
  font-size: 12px;
  color: #8a8a8a;
  line-height: 18px;
  margin-bottom: 13px;
}

Nel file App.jsx, aggiungete il seguente codice nell’istruzione return per rendere il componente blog:

<div>
	{posts.map((item) => (
		<Blog post={item} />
	))}
</div>;

Infine, ecco come dovrebbe apparire il vostro App.jsx:

import React, { useEffect, useState } from 'react'
import axios from "axios"
import Blog from './components/Blog';

export default function App() {
  const [posts, setPosts] = useState([]);

  const fetchPosts = () => {
    axios
      .get("http://my-awesome-website.local/wp-json/wp/v2/posts")
      .then((res) => {
        setPosts(res.data);
      });
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  return (
    <div>
      {posts.map((item) => (
        <Blog
          post={item}
        />
      ))}
    </div>
  )
}

Salvate il file e aggiornate la scheda del browser. Ora dovreste essere in grado di vedere i post del blog visualizzati sulla pagina.

Schermata dell'applicazione React con quattro schede blog, ognuna delle quali visualizza un diverso post di WordPress.
WordPress Headless con React.js
Ecco come ottenere il massimo dal tuo sito WordPress passando all'headless ⬇️ Clicca per twittare

Riepilogo

WordPress Headless offre un ottimo modo per creare siti web dalle prestazioni veloci e dall’architettura scalabile. Grazie all’uso di React e dell’API REST di WordPress, creare siti web dinamici e interattivi con WordPress come sistema di gestione dei contenuti è più facile che mai.

Altrettanto importante per la velocità è il luogo in cui viene ospitato il sito WordPress. Kinsta è in grado di offrire un’esperienza di hosting WordPress velocissima grazie a macchine Google C2 di altissimo livello sulla sua rete Premium Tier, oltre a un’integrazione Cloudflare per evitare che il vostro sito vada incontro a perdite di dati o attacchi malevoli.

Avete realizzato o avete intenzione di realizzare un sito web WordPress Headless con React? Fatecelo sapere nella sezione commenti qui sotto!