I temi a blocchi di WordPress rappresentano un cambiamento fondamentale nel modo in cui vengono costruiti i temi. Invece di file template PHP che controllano ogni aspetto del rendering, i temi a blocchi usano template HTML con blocchi, un file di configurazione centrale theme.json e il sistema Global Styles. Il risultato sono temi più coerenti, più facili da personalizzare e compatibili con l'esperienza completa dell'editor a blocchi.
Questa guida copre come costruire un tema a blocchi da zero, dai file essenziali alla configurazione avanzata di theme.json fino alla creazione di block pattern personalizzati.
Cosa Rende un Tema un Tema a Blocchi
Un tema a blocchi è definito dall'uso di template a blocchi piuttosto che di file template PHP. Invece di header.php, index.php e footer.php, un tema a blocchi ha un singolo template index.html composto interamente da blocchi. Il file theme.json gestisce tutto lo stile, sostituendo functions.php per la maggior parte della configurazione relativa allo stile.
Il requisito minimo per un tema a blocchi è un file style.css con l'header del tema, un file theme.json con impostazioni di base e un template index.html nella directory /templates. Tutto qui. Tutto il resto è opzionale.
Il File theme.json: Il Centro di Controllo del Tuo Tema
theme.json sostituisce centinaia di righe di codice functions.php. Controlla le palette di colori, le dimensioni dei font, le impostazioni tipografiche, i preset di spaziatura e gli stili specifici dei blocchi. Tutto è definito in un formato JSON strutturato che è coerente in tutti i temi a blocchi.
La sezione settings definisce quali opzioni sono disponibili per gli utenti nell'editor - quali colori possono scegliere, quali dimensioni dei font sono disponibili, quali blocchi supportano quali funzionalità. La sezione styles definisce gli effettivi valori CSS che vengono applicati. Separare le impostazioni dagli stili è una delle innovazioni chiave di theme.json.
Template a Blocchi vs Template PHP
I template a blocchi sono file HTML che usano markup a blocchi invece di PHP. Un template per un singolo post potrebbe includere il blocco Post Title, il blocco Post Content e il blocco Comments. Ogni blocco gestisce il proprio rendering e stile, eliminando la necessità della logica del loop di WordPress nei tuoi file template.
Le template part - header, footer, sidebar - sono file HTML riutilizzabili conservati nella directory /parts. Vengono incluse nei template usando il blocco Template Part. Questo crea un sistema modulare in cui puoi aggiornare il tuo header in un unico posto e si aggiorna ovunque.
Global Styles e Personalizzazione Utente
Uno dei maggiori vantaggi dei temi a blocchi è il sistema Global Styles. Gli utenti possono cambiare colori, font e spaziatura dall'interfaccia dell'editor senza scrivere CSS. Le modifiche si applicano a tutto il sito e persistono attraverso gli aggiornamenti del tema.
Definisci default sensati nel tuo theme.json. Gli utenti possono sovrascriverli, ma buoni default creano una grande prima impressione. Usa l'impostazione appearanceTools per abilitare opzioni di stile comuni - padding, margin, border e colore dei link - senza abilitare ogni possibile personalizzazione.
Block Pattern e Template Part
I block pattern sono layout pre-progettati che gli utenti possono inserire in qualsiasi pagina o post. Registra i pattern nel tuo tema mettendo file PHP nella directory /patterns. WordPress li scopre e registra automaticamente.
Le template part sono componenti riutilizzabili come header, footer e sidebar. Creali come file HTML nella directory /parts e assegna loro un'area - header, footer o general. Gli utenti possono modificare le template part dal Site Editor, rendendo la personalizzazione del tema accessibile ai non sviluppatori.
Aggiungere CSS Personalizzato
Sebbene i temi a blocchi minimizzino la necessità di CSS personalizzato, a volte ti servirà per requisiti di design specifici. Aggiungi CSS personalizzato usando la proprietà styles.css in theme.json per override globali, o crea un file style.css separato per CSS che non può essere espresso in theme.json.
Usa le custom property CSS per mantenere la compatibilità con Global Styles. WordPress genera variabili CSS dalle impostazioni di theme.json a cui puoi fare riferimento nel tuo CSS personalizzato.
Il punto fondamentale
I temi a blocchi sono il futuro dei temi WordPress. Sono più semplici da costruire, più coerenti da usare e più personalizzabili per gli utenti finali. Se non hai ancora costruito un tema a blocchi, inizia con un theme.json di base e un singolo template. Man mano che prendi confidenza, aggiungi pattern, template part e stili di blocco personalizzati. La curva di apprendimento vale la pena: i temi a blocchi sono più veloci da sviluppare, più facili da mantenere e offrono un'esperienza migliore per tutti.
