Cos’è WordPress senza testa? Come crearne uno? [Tutorial]

Quali sono i pro e i contro del CMS headless WordPress?

WordPress headless presenta molti vantaggi e svantaggi, ognuno dei quali può influenzare il tuo lavoro in diversi scenari. Per avere un quadro chiaro, confrontiamo i suoi pro e contro nel formato della tabella comparativa.

WordPress senza testa è buono?

Se ignori le limitazioni menzionate in precedenza, ci sono alcuni scenari in cui l’utilizzo di WordPress headless potrebbe essere vantaggioso per te.

• Se la sicurezza del tuo sito web è una priorità assoluta e la gestione dei dati è molto sensibile o critica.
• Se ti piace il design personalizzato e le possibilità illimitate senza i vincoli delle opzioni limitate dei temi di WordPress e stai cercando un design frontend unico, allora scegli Headless WordPress.
• Se desideri mantenere il tuo sito web isolato dai frequenti aggiornamenti e upgrade di WordPress.
• Se desideri rendere il tuo sito web o la tua applicazione pronti per il futuro e adattarti alle nuove tecnologie, tendenze e comportamenti degli utenti senza dover rivedere l'intera infrastruttura, considera WordPress headless.
• Una configurazione Headless può essere una buona opzione se stai cercando siti Web dimostrativi, progetti piccoli o a breve termine o tutorial.

Come funziona WordPress senza testa?

Pur parlando di WordPress standard, è dotato di un'interfaccia intuitiva e di un pannello di amministrazione facile da usare attraverso il quale puoi facilmente modificare, creare ed eliminare contenuti, nonché gestire il sito web.

Per il front-end, fornisce migliaia di opzioni di temi che combinano temi integrati e temi di terze parti per creare un sito Web visivamente accattivante sullo schermo.

Ma quando disaccoppia WordPress, puoi goderti il ​​meglio di entrambi i mondi. Per renderlo possibile, WordPress ha un'API chiamata WordPress REST API.

È un'interfaccia di programmazione che consente agli sviluppatori di accedere e interagire con i dati del sito Web WordPress utilizzando metodi HTTP standard.

Consente agli sviluppatori di recuperare, creare, aggiornare ed eliminare i contenuti WordPress da remoto, il che semplifica l'integrazione di WordPress con altre piattaforme applicative o altre tecnologie front-end come React.js, Angular.js, ecc. per creare un sito Web personalizzato.

Come faccio a rendere WordPress senza testa? (Tutorial WordPress senza testa)

Possono esserci vari modi attraverso i quali disaccoppiare WordPress standard, a seconda della tecnologia che utilizzerai, delle risorse, delle lingue preferite e dei framework. Indipendentemente dal metodo utilizzato, dovresti sentirti a tuo agio con le lingue front-end e con l'API Rest di WordPress.

Ma per ora sceglieremo il metodo più semplice poiché la maggior parte delle persone sono principianti. Controlla i passaggi indicati di seguito:

Passaggio 1: configura WordPress

La prima cosa che devi fare è creare un sito Web WordPress come faresti normalmente sul tuo server. Significa che il sito web dovrebbe essere attivo, avere il proprio dominio e un account di web hosting adeguato.

Ma scegliere la giusta piattaforma di hosting WordPress è di per sé un compito molto difficile ed è anche un passaggio cruciale quando si configura WordPress e si crea un CMS headless.

È così importante perché, anche se il front-end e il back-end sono disaccoppiati, il back-end deve comunque risiedere su un server che richiede hosting.

Il server non solo fornisce un luogo in cui archiviare tutti i contenuti del tuo sito web, ma le sue prestazioni, sicurezza e affidabilità sono anche fondamentali per fornire i contenuti del sito web senza problemi al front-end, indipendentemente dalla tecnologia utilizzata.

Pertanto, diventa essenziale scegliere un host che offra prestazioni server incredibilmente veloci e una maggiore sicurezza.

Considerando questo, puoi scegliere WPOven, una delle società di hosting WordPress completamente gestite più veloci e leader che fornisce una combinazione di velocità, sicurezza di livello aziendale e supporto concierge, garantendo che il tuo viaggio WordPress senza testa sia più fluido.

• Nello specifico, WPOven fornisce hosting gestito sul provider cloud di alto livello Linode garantendo prestazioni e scalabilità ad alta velocità.
• La piattaforma offre un'installazione pre-WordPress, rendendo la configurazione di WordPress e altri strumenti senza problemi.
• Inoltre, con il sistema di caching avanzato integrato e la rete di distribuzione dei contenuti (CDN) di Cloudflare, i tuoi contenuti vengono consegnati più velocemente, indipendentemente dalla posizione dell'utente.
• Inoltre, WPOven garantisce una solida sicurezza a livello aziendale attraverso firewall di protezione Web integrati e installazione SSL, aiutando a proteggere i dati e le interazioni di backend.
• I backup automatizzati e le semplici opzioni di ripristino forniscono un ulteriore livello di protezione dei dati e tranquillità.
• Inoltre, l'assistenza clienti 24 ore su 24, 7 giorni su 7 e l'ampia base di conoscenze di WPOven garantiscono che qualsiasi problema venga risolto rapidamente, consentendoti di concentrarti sulla creazione e gestione del tuo CMS headless senza problemi legati all'hosting.

Passaggio 2: attiva l'API REST

La prossima cosa che devi fare è assicurarti che l'API REST di WordPress sia abilitata. Per impostazione predefinita, è abilitato su tutte le nuove installazioni di WordPress.

Tuttavia, devi comunque verificare se è abilitato o meno sul tuo sito web. Puoi farlo semplicemente effettuando una richiesta API inserendo il seguente URL nel tuo browser,

https://example.com/wp-json/wp/v2/

Cambia "example.com" con il tuo nome di dominio effettivo e, se l'API è abilitata, verrà visualizzata una risposta JSON con alcune informazioni sui post del tuo sito web.

In alternativa, puoi avvalerti dell'aiuto di un plugin come il plugin WP REST API.

Leggi: L'API REST di WordPress: Guida introduttiva

Passaggio 3: recupera i dati dei post tramite API

Se desideri recuperare i dati dei post, segui questi passaggi:

• Apri la dashboard di WordPress > Impostazioni > Permalink e seleziona Nome del post.

• Successivamente, devi scaricare lo strumento di test API Postman.
• Ora all'interno dello strumento API Postman inserisci l'URL come nel formato indicato di seguito.

https://mydomain.com/wp-json/wp/v2/posts

Questo recupererà i dati del post all'interno del tuo sito Web WordPress.

Passaggio 6: configura l'applicazione React

Ora che abbiamo finito con il backend, è ora di iniziare a lavorare sul front-end. Innanzitutto, creiamo un'applicazione React eseguendo il codice indicato di seguito nel Terminale.

npm create vite@latest my-blog-app
cd my-blog-app
npm install

Questo comando creerà una nuova applicazione React utilizzando Vite e installerà anche le librerie o i pacchetti esterni necessari.

Inoltre, devi includere anche Axios per gestire le richieste HTTP. Per questo esegui il seguente comando per installarlo.

npm install axios

Ora puoi avviare un server di sviluppo locale per la tua applicazione eseguendo il comando npm run dev nel terminale o nel prompt dei comandi.

Quando esegui questo comando, verrà avviato un server sul tuo computer locale e renderà la tua applicazione disponibile all'URL https://127.0.0.1:5173 .

La prossima cosa che devi fare è aprire il tuo progetto nell'editor di codice (quello che preferisci, Visual Studio Code, Subkline Text, Atom, ecc.) e rimuovere anche i file non necessari come index.css, app.css, ecc.

Passaggio 7: recupera i post da WordPress

Nel tuo file App.jsx , in alto, importa l'hook useState dalla libreria React. Ciò ti consente di utilizzare lo stato nel tuo componente funzionale.

import React, { useState } from 'react';

All'interno del componente funzionale App , inizializza una parte di stato chiamata posts utilizzando l'hook useState . Questo stato conterrà una serie di post. useState([]) inizializza posts con un array vuoto come valore iniziale.

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

Dopo aver inizializzato lo stato posts con un array vuoto utilizzando useState([]) , devi aggiungere il codice per recuperare i post dall'API REST di WordPress. Ciò comporta la creazione di una richiesta HTTP all'endpoint API che fornisce i dati dei post.

È necessario aggiungere il codice necessario per recuperare i dati dei post dopo la dichiarazione dello stato. Questo codice implica in genere l'utilizzo di un metodo come fetch() o di una libreria come Axios per effettuare una richiesta HTTP GET all'endpoint API di WordPress che fornisce i dati dei post.

Successivamente, aggiungi il seguente codice dopo la dichiarazione dello stato per recuperare i dati dei post dall'API REST di WordPress e aggiornare i post di conseguenza.

const fetchPosts = () => {
// Using axios to fetch the posts
axios
.get("https://yourdomain.com/wp-json/wp/v2/posts")
.then((res) => {
// Saving the data to state
setPosts(res.data);
});
}
// Calling the function on page load
useEffect(() => {
fetchPosts()
}, [])

Questo codice recupera i post dall'API REST di un sito Web WordPress quando il componente viene montato e aggiorna lo stato del componente con i dati recuperati utilizzando la funzione setPosts dell'hook useState .

Passaggio 8: creazione di un componente Blog e rendering

Ora crea una nuova cartella denominata “components” all'interno della cartella src e crea due nuovi file Blog.jsx e blog.css (all'interno dei componenti).

Successivamente, aggiungi prima il seguente codice al file 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>
);
}

Questo componente recupera e visualizza il titolo, la data, l'estratto e l'immagine in primo piano di un post del blog passato come oggetto di scena.

Successivamente aggiungi il seguente stile al file blog.css,

@import url("https://fonts.googleapis.com/css?display=swap&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;
}

Infine, inserisci il seguente frammento di codice all'interno dell'istruzione return del file App.jsx . Qui è dove definisci la struttura dell'interfaccia utente del tuo componente utilizzando la sintassi JSX.

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

Here's the final version of your "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("https://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>
)
}

Salva il file e aggiorna il browser. Ora sarai in grado di vedere i post del blog renderizzati sullo schermo.

Esempi di WordPress senza testa

Per tuo riferimento e per creare fiducia, qui ti forniamo alcuni esempi di WordPress headless:

1. Techcrunch

Se sei un appassionato di tecnologia, devi avere familiarità con TechCrunch. che è uno dei principali media tecnologici e un sito Web di notizie. Hanno ridisegnato il front-end del loro sito Web per fornire un'esperienza utente fluida.

Per raggiungere questo obiettivo, hanno optato per l'approccio Headless WordPress e hanno utilizzato l'applicazione React per creare il front-end e WordPress headless per il back-end.

2. Centro risorse per il marchio Facebook

Facebook ora popolarmente noto come Meta, un gigante dei social media utilizza questo approccio Headless WordPress nel sito Web del Brand Resource Center come guida di stile per le risorse del proprio marchio.

Il sito Web utilizza una miscela unica di design web unico ed elegante con un'esperienza utente fluida. Se Facebook/Meta come un grande gigante della tecnologia può farlo. fidati di WordPress headless, puoi farlo anche tu.

Conclusione

In conclusione, a parte alcuni limiti, contro o svantaggi. Un approccio headless può fare miracoli se implementato correttamente. Soprattutto può essere molto vantaggioso per gli sviluppatori o i creatori di contenuti che amano creare applicazioni web headless.

Senza dubbio, disaccoppiare WordPress standard può aprire un mondo di possibilità, come ottenere la libertà di progettare l'interfaccia utente di un sito Web utilizzando React e anche di gestire i contenuti utilizzando WordPress.

Questa tecnologia ti consente di sfruttare tutta la potenza di ciascuna tecnologia insieme ai vantaggi di flessibilità, scalabilità e ottimizzazione SEO.

In questo blog, abbiamo tentato di rispondere a tutte le domande generiche riguardanti WordPress headless e ti abbiamo anche fornito alcuni passaggi su come creare un WordPress headless come tuo riferimento. (Tuttavia, possono esserci diversi modi per disaccoppiare WordPress, quindi segui quello che ritieni più semplice per te).

Domande frequenti

Rahul

Rahul Kumar è un appassionato del web e stratega dei contenuti specializzato in WordPress e web hosting. Con anni di esperienza e l'impegno a rimanere aggiornato sulle tendenze del settore, crea strategie online efficaci che indirizzano il traffico, aumentano il coinvolgimento e aumentano le conversioni. L'attenzione ai dettagli e la capacità di creare contenuti accattivanti di Rahul lo rendono una risorsa preziosa per qualsiasi marchio che desideri migliorare la propria presenza online.