{"id":81166,"date":"2025-06-12T08:13:03","date_gmt":"2025-06-12T07:13:03","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=81166&preview=true&preview_id=81166"},"modified":"2025-06-16T08:13:53","modified_gmt":"2025-06-16T07:13:53","slug":"temi-ibridi","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/temi-ibridi\/","title":{"rendered":"I Temi Ibridi di WordPress: un’analisi per utenti e sviluppatori"},"content":{"rendered":"

WordPress 5.9<\/a> ha introdotto un nuovo modo di costruire siti web: il Full Site Editing<\/a>. \u00c8 stato un punto di svolta per gli utenti di WordPress perch\u00e9 ha cambiato completamente il modo in cui i temi di WordPress vengono sviluppati e funzionano.<\/p>\n

L’introduzione dell’FSE ha portato a una distinzione tra i temi che supportano pienamente le nuove funzionalit\u00e0 di costruzione del sito, noti anche come Temi a blocchi, e i temi tradizionali basati su PHP, che oggi chiamiamo Temi classici.<\/p>\n

Nel corso del tempo, molte funzioni create per i temi a blocchi sono state estese ai temi classici. Ci\u00f2 ha dato vita a una terza categoria di temi, i Temi ibridi, che sono progettati con la logica e la struttura dei Temi classici, ma con il supporto di varie funzioni tipiche dei Temi a blocchi.<\/p>\n

Questo articolo analizza i temi ibridi, le loro caratteristiche principali, il modo in cui gli sviluppatori possono migliorarli e quando sceglierli rispetto ai temi a blocchi.<\/p>\n

Cominciamo!<\/p>\n

\"Un'anteprima
Twenty Twenty-Two \u00e8 il primo tema WordPress a supportare il Full Site Editing<\/figcaption><\/figure>\n
<\/div><\/kinsta-auto-toc>\n

Temi classici o Temi ibridi?<\/h2>\n

Prima dell’introduzione dei temi a blocchi con Twenty Twenty-Two<\/a> e WordPress 5.9, non esistevano i temi classici. Il termine \u00e8 nato per distinguerli dai temi a blocchi. I temi classici sono tutti i temi WordPress che non supportano le funzionalit\u00e0 dei blocchi.<\/p>\n

\"Anteprima
Un’anteprima del tema Twenty Twenty-One Hybrid<\/figcaption><\/figure>\n

Oggi non \u00e8 facile trovare temi classici puri perch\u00e9, a partire dalla versione 5.9, questi temi sono stati arricchiti con molte funzioni sviluppate per i temi a blocchi, rendendo le esperienze di modifica e progettazione delle due categorie di temi sempre pi\u00f9 sfumate.<\/p>\n

Detto questo, il modo di lavorare con i temi ibridi \u00e8 ancora diverso da quello dei temi a blocchi.<\/p>\n

Caratteristiche di base dei temi ibridi<\/h2>\n

Con i temi ibridi, il sito pu\u00f2 sfruttare le capacit\u00e0 di editing dell’editor di blocchi di WordPress pur rimanendo compatibile con i plugin e le funzionalit\u00e0 tradizionali di WordPress, come i widget, i menu e i modelli di pagina.<\/p>\n

Il Customizer di WordPress<\/h3>\n

I temi ibridi di solito supportano il Customizer di WordPress<\/a>, un ambiente di configurazione visuale che permette di perfezionare l’aspetto del sito WordPress e di visualizzare l’anteprima delle modifiche in tempo reale.<\/p>\n

Il tema predefinito Twenty Twenty-One<\/a> \u00e8 un buon esempio di tema ibrido che offre le impostazioni pi\u00f9 comuni del Customizer, tra cui Identit\u00e0 del sito, Colori e modalit\u00e0 scura, Immagine di sfondo, Menu, Widget, Impostazioni della homepage e altro ancora.<\/p>\n

\"Il
Il Customizer con il tema Twenty Twenty-One<\/figcaption><\/figure>\n

I temi possono registrare controlli specifici del Customizer, quindi le funzionalit\u00e0 variano a seconda del tema. L’immagine che segue mostra il Customizer di Neve<\/a>, un tema ibrido leggero di ThemeIsle.<\/p>\n

\"Un'anteprima
Un’anteprima del Customizer del tema WordPress Neve<\/figcaption><\/figure>\n

I temi possono anche registrare funzionalit\u00e0 avanzate per dare agli utenti un controllo granulare su aspetti specifici del design del sito. Neve, ad esempio, offre un potente builder per la creazione di intestazioni e footer.<\/p>\n

\"Neve
Neve ha un costruttore di intestazioni nel Customizer<\/figcaption><\/figure>\n

Widget a blocchi<\/h3>\n

I temi ibridi permettono di personalizzare le aree dei widget utilizzando i blocchi, grazie all’editor dei widget a blocchi<\/a>. \u00c8 stato introdotto per la prima volta con WordPress 5.8<\/a> e possiamo provarlo con qualsiasi tema classico che utilizzi i widget.<\/p>\n

\"La
La schermata dei widget in Twenty Twenty-One<\/figcaption><\/figure>\n

L’interfaccia dell’editor dei widget \u00e8 simile a quella dell’editor dei post. L’immagine che segue mostra un blocco immagine nell’area widget del footer del tema Twenty Twenty-One.<\/p>\n

\"Una
L’editor dei widget porta le funzionalit\u00e0 dei blocchi ai widget classici<\/figcaption><\/figure>\n

I widget classici come Categorie, Archivi, Post recenti o Commenti recenti sono ancora supportati nei temi ibridi. L’Editor di widget integra i widget classici di WordPress consentendo agli utenti di crearne di propri attraverso l’interfaccia a blocchi.<\/p>\n

Style book e block pattern<\/h3>\n

Con le recenti modifiche introdotte con WordPress 6.8<\/a>, i temi ibridi che supportano gli stili dell’editor<\/a> possono utilizzare il Libro degli stili<\/strong>, un’interfaccia grafica<\/a> che consente agli utenti di visualizzare l’anteprima di qualsiasi blocco che pu\u00f2 essere utilizzato nel sito senza doverlo necessariamente inserire nei contenuti.<\/p>\n

\u00c8 possibile accedere al Libro degli stili nei temi ibridi da Aspetto<\/strong> > Design<\/strong> > Stili<\/strong>.<\/p>\n

L’immagine che segue mostra il Libro degli stili del tema ibrido Kadence.<\/p>\n

\"Il
Il Libro degli stili del tema ibrido Kadence<\/figcaption><\/figure>\n

Nella stessa interfaccia possiamo sfogliare e gestire i pattern.<\/p>\n

\"Pattern
Pattern del tema Blocksy<\/figcaption><\/figure>\n

Per i temi ibridi che li supportano, i pattern sono disponibili nell’Editor dei post<\/a>, che \u00e8 abilitato di default su tutte le installazioni di WordPress a partire dalla versione 5.0<\/a>, a meno che non l’abbiamo disabilitato con il plugin Classic Editor<\/a>.<\/p>\n

\"La
La sezione Patterns nel block inserter dell’Editor dei Post con il tema Twenty Twenty-One<\/figcaption><\/figure>\n

Struttura del tema: una panoramica per gli sviluppatori<\/h2>\n

I temi classici e i temi a blocchi non sono diversi solo in termini di funzionalit\u00e0 per l’utente finale. Sono diversi anche dal punto di vista strutturale.<\/p>\n

Temi classici<\/h3>\n

I temi classici si basano su alcuni file principali, il pi\u00f9 importante dei quali \u00e8 il file style.css<\/code>. Questo file fornisce i metadati del tema<\/a> e determina l’aspetto del sito sul front-end.<\/p>\n

Oltre al foglio di stile del tema, i temi classici hanno di solito un file functions.php<\/code><\/a> utilizzato per creare le funzionalit\u00e0 e il supporto del tema.<\/p>\n

I temi classici si basano anche su template PHP che definiscono la struttura di una pagina e le sue aree principali: intestazione, corpo, barre laterali e footer. Quando un utente visita un post o una pagina, WordPress individua il template da utilizzare per rendere il contenuto sullo schermo secondo un rigido sistema di regole noto come gerarchia dei template<\/a>. I template pi\u00f9 comunemente utilizzati sono index.php<\/code>, page.php<\/code>, single.php<\/code> e altri.<\/p>\n

I temi classici possono utilizzare funzioni PHP specifiche (hook e filtri<\/a>), che vengono eseguite in momenti specifici della vita di WordPress, consentendo agli sviluppatori di estendere le funzionalit\u00e0 di un tema utilizzando codice PHP nel file functions.php<\/code> di un child theme<\/a>.<\/p>\n

Si pu\u00f2 intuire che la personalizzazione di un tema classico \u00e8 complessa per gli utenti che non hanno competenze di sviluppo.<\/p>\n

Temi a blocchi<\/h3>\n

Anche i temi a blocchi hanno bisogno di uno style.css<\/code> per fornire a WordPress i metadati del tema, ma si basano prevalentemente su un file theme.json<\/code><\/a>, un file di configurazione che definisce gli stili e le impostazioni globali del tema. Questo file contiene un oggetto JSON<\/a> le cui propriet\u00e0 definiscono le impostazioni iniziali<\/a> necessarie per creare il layout e definire l’aspetto<\/a> delle pagine del sito.<\/p>\n

I temi a blocchi utilizzano anche template e parti di template, ma questi sono strutturalmente diversi dai classici template PHP dei temi. Nei temi a blocchi, i template e le parti di template sono file HTML contenenti markup specifici e oggetti JSON. Ad esempio, analizziamo il template home.html<\/code> del tema predefinito Twenty Twenty-Five<\/a>:<\/p>\n

<!-- wp:template-part {\"slug\":\"header\"} \/-->\n\n<!-- wp:group {\"tagName\":\"main\",\"style\":{\"spacing\":{\"margin\":{\"top\":\"var:preset|spacing|60\"}}},\"layout\":{\"type\":\"constrained\"}} -->\n<main class=\"wp-block-group\" style=\"margin-top:var(--wp--preset--spacing--60)\">\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/hidden-blog-heading\"} \/-->\n\t<!-- wp:pattern {\"slug\":\"twentytwentyfive\/template-query-loop\"} \/-->\n<\/main>\n<!-- \/wp:group -->\n\n<!-- wp:template-part {\"slug\":\"footer\"} \/--><\/code><\/pre>\n
Questo template \u00e8 composto da elementi strutturati sotto forma di tag HTML e commenti. I commenti possono riferirsi ad altri elementi tipici di un tema a blocchi, come le parti del template e i pattern, che sono composti da blocchi o altri elementi annidati.<\/p>\n
Aggiungere le funzionalit\u00e0 dei blocchi ai temi ibridi<\/h2>\n
Come abbiamo detto in precedenza, con i temi classici \u00e8 necessario aggiungere del codice personalizzato per modificare il layout o le funzionalit\u00e0 di un sito, spesso coinvolgendo template file o il functions.php<\/code>. Al contrario, i temi a blocchi permettono a chi non sviluppa di avere un maggiore controllo sul layout e sull’aspetto del sito.<\/p>\n
I temi ibridi offrono meno funzionalit\u00e0 dei blocchi rispetto ai temi a blocchi, ma possono comunque fornire un maggiore controllo sul layout e sullo stile grazie a pattern e agli stili globali.<\/p>\n
Analizziamo alcune potenti funzionalit\u00e0 tipiche dei temi a blocchi che possiamo integrare in un tema classico e scopriamo come implementarle in modo efficace.<\/p>\n
<\/div><\/kinsta-auto-toc>\n
Stili globali<\/h3>\n
WordPress 5.8<\/a> ha introdotto gli Stili Globali, un’interfaccia grafica che permette agli utenti di controllare l’aspetto del proprio sito web da una posizione centralizzata e agli sviluppatori di controllare gli stili dei siti WordPress attraverso un file theme.json<\/code>.<\/p>\n
Per abilitare questa funzione in un tema ibrido, basta aggiungere un file theme.json<\/code> nella cartella principale del tema. Vediamo alcune delle caratteristiche principali che possiamo aggiungere ad un tema ibrido con il theme.json<\/code>.<\/p>\n
Tipografia<\/h4>\n
Supponiamo di voler aggiungere ad un tema classico il supporto per tre famiglie di caratteri. In questo esempio utilizzeremo Twenty Twenty-One<\/a>.<\/p>\n
Per prima cosa, creiamo una cartella fonts<\/code> sotto assets<\/code> e carichiamo alcuni font a scelta. Aggiungeremo tre font: Manrope<\/code> Fira Code<\/code> e Beiruti<\/code>. Possiamo ottenere questi font dal tema Twenty Twenty-Five<\/a>.<\/p>\n
\"Abbiamo
Abbiamo aggiunto tre font e un file theme.json al tema Twenty Twenty-One<\/figcaption><\/figure>\n
Apriamo l’editor di testo e creiamo il seguente theme.json<\/code>:<\/p>\n
{\n\t\"$schema\": \"https:\/\/schemas.wp.org\/trunk\/theme.json\",\n\t\"version\": 3,\n\t\"settings\": {\n\t\t\"layout\": {\n\t\t\t\"contentSize\": \"768px\",\n\t\t\t\"wideSize\": \"1024px\"\n\t\t},\n\t\t\"typography\": {\n\t\t\t\"fontFamilies\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Manrope\",\n\t\t\t\t\t\"slug\": \"manrope\",\n\t\t\t\t\t\"fontFamily\": \"Manrope, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/manrope\/Manrope-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"200 800\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Manrope\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Fira Code\",\n\t\t\t\t\t\"slug\": \"fira-code\",\n\t\t\t\t\t\"fontFamily\": \"\\\"Fira Code\\\", monospace\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/fira-code\/FiraCode-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"\\\"Fira Code\\\"\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"Beiruti\",\n\t\t\t\t\t\"slug\": \"beiruti\",\n\t\t\t\t\t\"fontFamily\": \"Beiruti, sans-serif\",\n\t\t\t\t\t\"fontFace\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"src\": [\n\t\t\t\t\t\t\t\t\"file:.\/assets\/fonts\/beiruti\/Beiruti-VariableFont_wght.woff2\"\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\"fontWeight\": \"300 700\",\n\t\t\t\t\t\t\t\"fontStyle\": \"normal\",\n\t\t\t\t\t\t\t\"fontFamily\": \"Beiruti\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n
La propriet\u00e0 settings.typography.fontFamilies<\/code> permette di registrare un numero qualsiasi di famiglie di font personalizzate<\/a>. Per ogni font, dovremo dichiarare le seguenti propriet\u00e0:<\/p>\n