Una delle modalità più avanzate per sfruttare le potenzialità di WordPress è il cosiddetto headless mode o "CMS headless". Un CMS headless è un sistema di gestione senza la componente front-end, si concentra esclusivamente sulla gestione dei contenuti stessi. Questo permette di integrarli in qualsiasi sistema o sito web attraverso delle API. Grazie ad esse i dati possono essere trasmessi in modo efficiente dal CMS al front-end, offrendo maggiore flessibilità e prestazioni superiori.
WordPress headless
Un sito WordPress headless sfrutta il CMS per la gestione dei contenuti ma utilizza tecnologie front-end come React o Vue per la visualizzazione e l'interazione con l'utente. In questa architettura WordPress si occupa unicamente della gestione e dell'archiviazione dei contenuti, mentre il front-end è responsabile della loro presentazione dinamica. Tale separazione è resa possibile dall'uso di un'API che facilita la comunicazione tra il back-end e il front-end.
L'utilizzo di tecnologie front-end moderne come React garantisce prestazioni ottimali poiché le richieste dell'utente sono elaborate rapidamente dal front-end stesso, liberando il back-end da compiti che potrebbero rallentare le prestazioni del sito.
In sintesi, un sito WordPress headless offre una migliore separazione delle responsabilità tra front-end e back-end, consentendo anche una maggiore scalabilità e flessibilità nella gestione e presentazione dei contenuti online.
Vantaggi dei siti Worpress Headless
Implementare WordPress headless offre una serie di vantaggi significativi:
- flessibilità: gli sviluppatori hanno la libertà di creare esperienze front-end personalizzate senza essere vincolati dal tradizionale sistema di temi di WordPress. Questo consente la creazione di interfacce utente senza aderire a schemi predefiniti.
- Prestazioni migliorate: separando il front-end dal back-end di un sito WordPress è possibile ottimizzare le prestazioni. Il server si limita a fornire i dati tramite un'API anziché eseguire il rendering completo dell'HTML ad ogni richiesta e si riducono i tempi di caricamento delle pagine.
- Sicurezza potenziata: l'architettura headless contribuisce a rafforzare la sicurezza del sistema. La separazione tra front-end e back-end limita l'accesso al codice e al database, aggiungendo quindi un ulteriore strato di protezione dei dati.
Svantaggi dei siti WordPress headless
Implementare un sistema WordPress headless presenta anche alcuni svantaggi:
- mancanza di temi predefiniti: non si dispone di una libreria di temi pronti all'uso. È necessario creare temi personalizzati per adattare l'aspetto e la funzionalità del front-end. Questo processo può richiedere tempo e risorse per sviluppo e personalizzazione.
- Costi aggiuntivi: lo sviluppo e la gestione possono comportare costi maggiori rispetto ad un sito WordPress tradizionale. Questo è dovuto alla necessità di competenze tecniche avanzate per la configurazione e la manutenzione del sistema, nonché alla creazione dei temi personalizzati.
- Limitazioni dei plugin: alcuni plugin di WordPress potrebbero non essere compatibili o non funzionare correttamente in ambiente headless. Questo perché molti plugin si basano sull'interazione con il tema di WordPress per offrire determinate funzionalità. La mancanza di un tema tradizionale potrebbe limitare l'efficacia di alcuni plugin o richiedere soluzioni alternative.
In definitiva, sebbene WordPress headless offra molte opportunità e vantaggi, è importante considerare anche queste potenziali limitazioni e costi aggiuntivi durante la pianificazione e lo sviluppo del progetto.
REST API di WordPress
L'API REST di WordPress svolge il ruolo di ponte tra il back-end e il front-end di un sito. Questa interfaccia permette un flusso controllato di dati tra le due parti, garantendo un accesso sicuro e autorizzato alle informazioni. Grazie all'API REST è semplice inviare e ricevere dati dal sito, poiché offre un accesso strutturato alle risorse. Solo gli utenti autorizzati possono interagire con i dati.
L'API è in grado di gestire una vasta gamma di formati di dati, con particolare enfasi su JSON, molto popolare per le sue caratteristiche di leggibilità e facilità d'uso. Questo rende l'interazione con il sistema più intuitiva. Per gli sviluppatori, l'API REST di WordPress rappresenta uno strumento potente per la creazione, l'aggiornamento e la cancellazione dei dati nel sistema. Inoltre, consente di implementare funzionalità personalizzate per il sito o di integrarlo con altri servizi esterni.
Esistono inoltre plugin dedicati che estendono ulteriormente le funzionalità dell'API. Offrendo ad esempio metodi avanzati di autenticazione o altre utili caratteristiche che migliorano la flessibilità e la robustezza del sistema.
La libreria React
React è una libreria JavaScript focalizzata sulla creazione di interfacce utente dinamiche e interattive. Si tratta di una libreria open source che consente di creare componenti UI riutilizzabili tramite una sintassi dichiarativa. L'approccio dichiarativo di React permette di definire in modo chiaro come l'UI dovrebbe apparire in base allo stato dei dati. Quando i dati cambiano React si occupa di aggiornare l'UI, rendendo la gestione dello stato e degli aggiornamenti dell'interfaccia molto più semplice.
Una delle caratteristiche più apprezzate di React è la sua capacità di gestire componenti complessi e di renderizzare l'UI in tempo reale. Questo lo rende adatto alla creazione di applicazioni dove la risposta immediata agli input dell'utente è fondamentale.
Perché scegliere React
La sintassi dichiarativa semplifica la creazione dei componenti dell'interfaccia utente consentendo di concentrarsi sulla definizione di come l'UI dovrebbe apparire in base allo stato dei dati e non sulle manipolazioni dirette del DOM. Questo porta alla creazione di componenti riutilizzabili che possono essere adattati e implementati in diverse parti dell'applicazione. Gli sviluppatori possono accedere anche ad una ricca collezione di componenti predefiniti, template, librerie di gestione dello stato e molto altro, accelerando il processo di sviluppo e migliorando la qualità delle applicazioni.
Un altro punto di forza è il concetto di DOM virtuale. React lo utilizza per rappresentare l'albero dei componenti e aggiornare l'UI in tempo reale. Quando lo stato dei dati cambia, React determina quali componenti devono essere aggiornati e modifica solo quelle parti dell'UI. Evitando così il rendering completo dell'intera pagina. Questo approccio porta a prestazioni migliorate e a una maggiore efficienza nell'aggiornamento dinamico della UI, soprattutto in applicazioni complesse con molti componenti interattivi.
Infine, la riutilizzabilità dei componenti è un altro aspetto chiave di React. I suoi componenti sono progettati per essere modulari, consentendo agli sviluppatori di creare librerie di componenti personalizzati che possono essere utilizzati in più progetti e applicazioni. Questo approccio non solo riduce il tempo e lo sforzo necessari per lo sviluppo, favorisce anche una maggiore coerenza e manutenibilità nel codice.
Prerequisiti per utilizzare React
Per lavorare con React è importante soddisfare alcuni prerequisiti:
- Conoscenza di React: la familiarità con i concetti di componenti, stato, props e il ciclo di vita dei componenti sarà utile per affrontare progetti complessi.
- Node.JS: assicurati di averlo installato sulla tua macchina locale con una versione uguale o superiore alla 14. Include npm (Node Package Manager), uno strumento essenziale per gestire le dipendenze dei progetti React e per avviare gli ambienti di sviluppo.
- Editor di codice: utilizza un editor di codice che ti sia familiare e che supporti lo sviluppo di applicazioni JavaScript e React. Alcuni dei più popolari sono Visual Studio Code, Sublime Text e Atom.
- Conoscenza di HTML, CSS e JavaScript: sebbene React si concentri principalmente sulla gestione di UI, è importante avere una solida comprensione di HTML per la struttura, CSS per lo stile e JavaScript per la logica di programmazione.
- Familiarità con gli strumenti di sviluppo web: è utile una comprensione di base degli strumenti comunemente utilizzati nello sviluppo web, come Git per il controllo di versione del codice, webpack o Parcel per il bundling, Babel per la trasformazione del codice JavaScript e altri strumenti di debugging e testing.
Creazione del database
Aprite un terminale e digitate:
mysql -u root -pDate quindi Invio e una volta loggati digitate:
CREATE DATABASE reactapi_db;Verrà creato un nuovo database vuoto chiamato reactapi_db. Per uscire dalla console di MySQL digitate exit e premete Invio. Potrete quindi utilizzare questo database durante l'installazione di WordPress.
Impostare i permalink in WordPress
Per abilitare l'API JSON di WordPress, è necessario aggiornare la struttura dei permalink del sito.
Per fare ciò, seguite questi passaggi:
- accedete alla bacheca di WordPress, fate clic su "Impostazioni" quindi selezionate "Permalink".
- Nella pagina dei permalink, scegliete l'opzione "Nome del post" o un'altra struttura di permalink che preferite.
- Fate clic su "Salva modifiche".
Una volta completati questi passaggi, l'API JSON di WordPress sarà abilitata e pronta per essere utilizzata. Potete anche utilizzare strumenti come Postman per testare e inviare facilmente richieste alle API REST. Sono utili per verificare la corretta configurazione delle API, consentendo di eseguire test e debug. Assicuratevi di avere le autorizzazioni necessarie per accedere alle API e di includere correttamente gli header e i parametri richiesti nelle richieste API.
Installare React
Una volta configurato il back-end con WordPress non rimane che passare al front-end installando React. Aprite un terminale e fatelo puntare su una directory a piacere, quindi digitate:
create vite@latest my-blog-app
cd my-blog-app
npm installSi crea così l'applicazione dipendenze comprese. Per effettuare le richieste HTTP userete il package Axios, quindi scaricatelo. Da terminale:
npm i axiosPer avviare il server digitate invece:
npm run devL'applicazione dovrebbe avviarsi all'indirizzo http://127.0.0.1:5173.
Aprite il progetto con il vostro IDE e modificate main.jsx in questo modo:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
);Poi modificate app.jsx in questo modo:
import React from 'react';
export default function App() {
return (
<div>
<p>Hello, World!</p>
</div>
);
}Recuperare i post da WordPress
Innanzitutto definite uno stato all'interno del componente App.jsx:
const [posts, setPosts] = useState([]);In React, l'hook useState è utile per gestire lo stato all'interno dei componenti. Lo stato in React si riferisce ai dati o alle proprietà che possono variare nel tempo e influenzare il rendering dell'interfaccia utente. Quando utilizzate useState in un componente, definite una variabile di stato e una funzione per aggiornare tale stato. Ad esempio, se avete una variabile chiamata posts che contiene un elenco di post, userete useState per inizializzare e gestire questo stato:
import React, { useState } from 'react';
const MyComponent = () => {
// Inizializziamo lo stato "posts" con un array vuoto
const [posts, setPosts] = useState([]);
// Qui potreste aggiungere ulteriori logiche e funzionalità al componente
return (
<div>
{/* Il resto del codice del componente */}
</div>
);
};
export default MyComponent;Nel codice posts rappresenta lo stato dei post, mentre setPosts è la funzione che aggiorna il valore di posts quando necessario.
Recuperare i dati dell'API Rest
Ora potete recuperare i dati dei post dall'API REST di WordPress e aggiornare il vostro stato posts con questi dati. Potete poi aggiungere del codice dopo lo stato per gestire questa operazione. Ad esempio:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MyComponent = () => {
// Inizializziamo lo stato "posts" con un array vuoto
const [posts, setPosts] = useState([]);
// Effettuiamo una chiamata API per recuperare i dati dei post all'avvio del componente
useEffect(() => {
const fetchPosts = async () => {
try {
const response = await axios.get('https://example.com/wp-json/wp/v2/posts');
setPosts(response.data);
} catch (error) {
console.error('Error fetching posts:', error);
}
};
fetchPosts();
}, []); // Le quadre vuote indicano che useEffect verrà eseguito solo all'avvio del componente
// Qui potremmo aggiungere ulteriori logiche e funzionalità al componente
return (
<div>
{/* Il resto del codice del componente */}
</div>
);
};
export default MyComponent;In questo esempio, avete utilizzato l'hook useEffect per eseguire la chiamata API e aggiornare lo stato dei post quando il componente viene montato per la prima volta. Questo consente di caricare dinamicamente i dati dei post dall'API REST di WordPress e renderizzarli nel componente React. Assicuratevi di sostituire l'URL dell'API con l'endpoint dell'API REST di WordPress da utilizzare.
Completamento del componente
Ora completate il componente App.jsx e aggiungete il seguente codice dopo la definizione dello stato:
const fetchPosts = () => {
axios
.get("http://localhost/reactapi/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}
useEffect(() => {
fetchPosts()
}, [])Nel codice è stata implementata una logica che viene eseguita automaticamente quando il componente viene caricato per la prima volta. Questo è reso possibile dall'hook useEffect che consente di definire azioni da eseguire in risposta a determinati eventi, come il caricamento del componente.
All'interno della funzione fetchPosts() viene utilizzato Axios per inviare una richiesta GET all'API. L'URL specificato nella richiesta corrisponde all'endpoint dell'API che fornisce i dati dei post. Una volta ricevuti i dati dalla richiesta API viene utilizzata la funzione setPosts() per aggiornare lo stato posts del componente. Questo aggiornamento attiva automaticamente il re-rendering del componente, assicurando che i dati dei post aggiornati vengano visualizzati nell'interfaccia utente.
In questo modo, il componente è in grado di recuperare dinamicamente i dati dei post dall'API al momento del caricamento della pagina e di mantenere sincronizzati gli aggiornamenti dei dati con lo stato del componente.
Creare il componente Post
All'interno della directory src create un'altra directory chiamata components dove collocare il componente Post.jsx:
import axios from "axios";
import React, { useEffect, useState } from "react";
import "./../assets/css/blog.css";
export default function Post({ 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 className="container">
<div className="row 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} className="mask" />
</div>
</div>
);
}Nel codice è stato sviluppato un componente React per visualizzare le informazioni di un singolo post del blog proveniente dall'API. Nel componente, è stata definita la funzione getImage() il cui compito è recuperare l'URL dell'immagine in evidenza associata al post utilizzando Axios. Questo URL viene poi memorizzato nello stato locale del componente per essere utilizzato nel rendering dell'immagine.
Per garantire che l'URL dell'immagine venga recuperato e memorizzato correttamente è stato utilizzato l'hook useEffect. Esso consente di eseguire azioni aggiuntive quando il componente viene montato, nel nostro caso invocando la funzione getImage() per recuperare l'URL. Nella sezione di rendering del componente è stato incluso il codice per mostrare le informazioni del post, come il titolo e l'estratto del contenuto. Inoltre, è possibile visualizzare l'immagine in evidenza associata al post tramite l'URL precedentemente recuperato e memorizzato nello stato. Questo approccio consente di creare componenti dinamici e interattivi che si integrano con i dati provenienti dall'API.
Lo stile del componente
Per quanto riguarda lo stile del componente, all'interno della cartella assets create la cartella css e in questa il file post.css con il seguente contenuto:
/* Importa il font Poppins */
@import url("https://fonts.googleapis.com/css?family=Poppins");
.container {
display: flex; /* Usa Flexbox per allineare i container dei blog */
flex-wrap: wrap; /* Consenti il wrapping dei container su più righe se necessario */
justify-content: space-between; /* Distribuisci gli spazi tra i container */
}
/* Stile personalizzato per i blog-container */
.blog-container {
width: calc(33.33% - 20px); /* Calcola la larghezza per 3 elementi in una riga con spazio tra di loro */
background: white;
border-radius: 10px;
box-shadow: 0px 20px 50px #d9dbdf;
transition: all 0.3s ease;
margin-right: 20px; /* Aggiungi spazio tra i container */
margin-bottom: 20px; /* Aggiungi spazio sotto i container */
display: flex !important; /* Usa Flexbox per allineare i contenuti all'interno */
flex-direction: column !important; /* Allinea i contenuti in colonna all'interno del container */
}
img.mask {
width: 100%;
height: 210px;
object-fit: cover;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-bottom: 10px;
}
.blog-title {
margin: 15px 20px 0; /* Margine in alto e sui lati */
font-family: "Poppins", sans-serif;
font-size: 22px;
font-weight: bold;
}
.blog-date,
.blog-excerpt {
padding: 0 20px; /* Padding sui lati */
font-family: "Poppins", sans-serif;
font-size: 12px;
color: #8a8a8a;
line-height: 18px;
}
.blog-date {
color: #c8c8c8;
margin-top: 10px; /* Spazio sopra */
}
.blog-excerpt {
margin-bottom: 15px; /* Maggiore spazio sotto */
}Modificate ora App.jsx in modo tale che restituisca il componente:
<div>
{posts.map((item) => (
<Post
key={item.id}
post={item}
/>
))}
</div>Il codice completo
Ecco il codice completo:
import React, { useEffect, useState } from 'react';
import axios from "axios";
import Blog from './components/Blog';
import 'bootstrap/dist/css/bootstrap.min.css';
export default function App() {
const [posts, setPosts] = useState([]);
const fetchPosts = () => {
axios
.get("http://localhost/reactapi/wp-json/wp/v2/posts")
.then((res) => {
setPosts(res.data);
});
}
useEffect(() => {
fetchPosts()
}, [])
return (
<div>
{posts.map((item) => (
<Post
key={item.id}
post={item}
/>
))}
</div>
)
}Salvate il tutto, create un paio di articoli in WordPress e aggiornate la scheda del browser. Se tutto è andato a buon fine dovreste vedere:
Certamente, la formattazione potrebbe non essere ottimale. È comunque possibile utilizzare framework come Bootstrap o Tailwind ma lo scopo principale di questo tutorial è mostrare l'utilizzo di WordPress headless con le sue API JSON.
