Oggi, gli sviluppatori di WordPress hanno più controllo che mai grazie alla continua evoluzione dell’ecosistema WordPress. Il full site editing (FSE) offre a tutti gli utenti la possibilità di costruire un tema da zero, soprattutto utilizzando il file theme.json.

Anche gli sviluppatori possono sfruttare il file theme.json. Questo file di configurazione consente una personalizzazione granulare del tema WordPress senza la noia e la complessità dei linguaggi di programmazione più articolati.

In questa guida completa esploreremo le caratteristiche del file theme.json, compreso il suo rapporto con il full site editing. Alla fine capirete come sfruttare le sue capacità per creare siti web moderni e performanti, indipendentemente dalle vostre capacità di sviluppo.

Il file theme.json

Il file theme.json è un file di configurazione che definisce le impostazioni e gli stili del tema WordPress. Utilizza la JavaScript Object Notation (JSON), ovvero dati strutturati che ereditano le coppie chiave-valore del linguaggio madre per permettervi di scrivere il vostro codice.

Un frammento di codice JSON che definisce la struttura di un glossario. Include una voce per SGML (Standard Generalized Markup Language) con dettagli quali l'acronimo, l'abbreviazione, la definizione e i termini correlati.
Esempio di codice JSON.

Il file theme.json è fondamentale per controllare vari aspetti del tema. Tra questi vi sono le palette di colori, le impostazioni tipografiche, le opzioni di layout, gli stili per blocco, le proprietà CSS personalizzate e molto altro ancora. Nel corso dell’articolo forniremo maggiori dettagli su questi aspetti.

Anche se finora non sembra poi così rivoluzionario, theme.json è importante per il futuro dello sviluppo di WordPress. La prossima sezione spiega perché.

Perché theme.json è importante per lo sviluppo dei temi di WordPress

L’approccio tipico di WordPress allo sviluppo di temi e alla creazione di plugin si basa spesso sulla modifica dei file di template con PHP, sull’uso del file functions.php e su altre attività tecniche.

Il file theme.json segna un cambiamento significativo, soprattutto per lo sviluppo dei temi. Le ragioni sono molteplici:

  • Il file rappresenta una posizione unica e organizzata per definire le impostazioni e gli stili del tema. Questo riduce la necessità di avere una serie di file CSS e PHP sparsi.
  • Questo approccio centralizzato di dichiarazione degli stili e delle impostazioni in theme.json significa che WordPress può generare un CSS più efficiente. Rispetto all’utilizzo di un framework come jQuery, c’è un potenziale miglioramento delle prestazioni.
  • Si ha un maggiore controllo sullo stile del sito e dei singoli blocchi rispetto al passato. Questo democratizza lo sviluppo dei temi per gli utenti con meno conoscenze tecniche.
  • Con l’evoluzione del FSE, il file theme.json avrà un ruolo fondamentale nel modo in cui i temi, gli stili globali e l’editor dei blocchi interagiscono tra loro.

Combinando tutti questi aspetti si ottiene un modo standardizzato di definire le impostazioni e gli stili per il tema. Per tutti coloro che desiderano comprendere e lavorare con temi diversi, l’adozione di theme.json permetterà di creare temi WordPress più robusti, flessibili e facili da usare. Inoltre, queste creazioni saranno in linea con la direzione futura della piattaforma.

Dove trovare il file theme.json

Innanzitutto, non troverete un file theme.json nei temi “tradizionali” o “classici”. Per trovare e utilizzare questo file è necessario un tema a blocchi dedicato. Detto questo, è possibile creare il file in qualsiasi tema, purché si utilizzi la versione di WordPress 5.8 o una superiore.

La posizione tipica del file theme.json è all’interno di wp-content/themes/[your-theme]. Se il file non è presente, aprite il vostro editor di codice preferito e create il file come necessario. Per il momento non preoccupatevi dei contenuti: ci penseremo tra poco.

Se avete bisogno di creare un nuovo file da zero ma volete anche vedere i dettagli del suo contenuto prima di personalizzare il vostro, date un’occhiata al tema predefinito Twenty Twenty-Four.

Essendo un tema a blocchi, avrà un file theme.json da visualizzare. Può essere utile averlo aperto mentre analizziamo la struttura nelle prossime sezioni.

Cosa serve per lavorare con theme.json

Naturalmente, non tutti saranno in grado di aprire il file di configurazione e mettersi al lavoro. Serviranno comunque alcune competenze e conoscenze fondamentali per costruire e personalizzare un tema:

  • Conoscenza di base di JSON. Pensiamo che sia qualcosa che si può imparare velocemente, ma comunque la familiarità con la sintassi e la struttura JSON è fondamentale.
  • Conoscenza dei CSS. Scoprirete che molti oggetti e proprietà di theme.json corrispondono alle loro controparti CSS. La conoscenza dei CSS sarà un vantaggio in questo caso.
  • Conoscenza dell’editor di blocchi di WordPress. Capire come funzionano i blocchi e le loro opzioni di personalizzazione vi aiuterà nella costruzione.

Anche se non è strettamente necessario, vi invitiamo a comprendere almeno i concetti chiave dell’FSE, che vi aiuteranno a sfruttare il file theme.json in modo più efficace. Potrete anche capire come le modifiche influenzeranno il “tinkering” dell’utente finale. Inoltre, in alcuni casi dovrete utilizzare HTML e JavaScript per realizzare la vostra visione.

Infine, vi consigliamo un paio di “extra” tecnici:

  • Un editor di codice. Scegliete un editor di qualità che offra l’evidenziazione e la validazione della sintassi JSON renderà più piacevole il flusso di lavoro.
  • Un ambiente di sviluppo locale. L’utilizzo di uno strumento come DevKinsta per lavorare sul vostro tema vi permetterà di sperimentare e testare le modifiche in modo rapido e senza avere alcun impatto sul sito live.

Con questi strumenti e queste conoscenze, sarete ben equipaggiati per iniziare a personalizzare il vostro tema WordPress utilizzando theme.json.

L’anatomia, la struttura e la gerarchia del file theme.json

Il file theme.json ha ovviamente una struttura che è necessario comprendere. Ha anche una gerarchia e alcuni elementi unici che necessitano di ulteriori spiegazioni.

Questa è probabilmente la parte più complessa dell’utilizzo del file di configurazione, ma anche in questo caso i concetti saranno facilmente comprensibili.

Iniziamo con la struttura e poi passiamo agli altri elementi di theme.json.

Struttura di base

Dato che il file segue il formato JSON, potreste già intuire il concetto generale della struttura. Innanzitutto, l’intero oggetto del file è racchiuso tra parentesi graffe, così come alcuni dei vari oggetti al suo interno. Ogni oggetto è composto da coppie chiave-valore, utilizza apici singoli o doppi per le chiavi e virgole per terminare la riga.

Il minimo indispensabile per un file theme.json sono gli oggetti version, settings e styles:

{
    "version": 2,
    "settings": {
      // Global settings go here
    },
    "styles": {
      // Global styles go here
    }
}

Gli oggetti settings e styles sono semplici, ma version richiede maggiori spiegazioni. Questo valore sarà un numero intero che corrisponde alla versione dell’API utilizzata per leggere il file. La versione attuale dell’API è 3, anche se la versione 2 è comune e si può migrare da versioni precedenti.

La maggior parte delle strutture dei file theme.json include anche uno schema. In poche parole, questo permette di lavorare con il completamento automatico negli editor di codice e fornisce la convalida del file. Dovrà essere aggiunto all’inizio del file:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "settings": {
    },
    "styles": {
    }
}

Da qui, aggiungerete varie proprietà e oggetti alle impostazioni e agli stili per costruire il vostro file.

Gerarchia

Il file theme.json segue una struttura gerarchica ed è solo un livello della gerarchia generale delle impostazioni e degli stili del vostro sito. Se avete conoscenze di CSS, la comprensione di questo file sarà più semplice, in quanto la sua complessità è simile a quella dei CSS.

In breve, le personalizzazioni apportate a theme.json potrebbero non essere sempre visibili sul front-end del vostro sito. Le configurazioni degli utenti hanno la priorità su tutto. Ciò significa che qualsiasi modifica effettuata nella schermata Aspetto > Editor di WordPress verrà visualizzata sul front-end:

L'interfaccia dell'editor del sito WordPress. La barra laterale di sinistra mostra le opzioni di personalizzazione del design, mentre l'area principale mostra il design della homepage del sito web con un titolo sull'innovazione e la sostenibilità, insieme all'immagine di una moderna struttura architettonica.
L’interfaccia principale dell’Editor del sito di WordPress.

Se utilizzate un tema child e includete un file theme.json, questo sovrascriverà tutte le modifiche diverse da quelle effettuate con l’Editor del sito. Allo stesso modo, qualsiasi cosa definiate all’interno del file di configurazione del tema principale sovrascriverà le impostazioni e gli stili predefiniti di WordPress. È su questo file che ci concentriamo in questo post, anche se WordPress ha il suo file theme.json.

Anche se non sarà oggetto di questo post, è possibile sovrascrivere i valori utilizzando hook e filtri. Questi filtri dinamici permettono di creare plugin e temi che modificano anche le impostazioni e gli stili del tema e della piattaforma.

Grammatica dei blocchi

Se accedete all’editor a blocchi o del sito di WordPress, aprite un post o una pagina e attivate l’editor del codice, noterete molti commenti HTML all’interno del contenuto:

L'interfaccia dell'editor di codice di WordPress all'interno dell'editor a blocchi. Mostra il codice HTML per l'informativa sulla privacy di un sito web. Il codice include intestazioni e paragrafi con dettagli sull'indirizzo del sito web, sulle politiche dei commenti e sull'uso di Gravatar.
La schermata di modifica del codice nell’Editor dei blocchi di WordPress.

Questo perché, invece di utilizzare i file PHP, i temi a blocchi utilizzano i file HTML insieme ai commenti e al markup dei blocchi per creare il vostro sito. La combinazione di questi elementi dà origine alla “grammatica dei blocchi” di cui avete bisogno per scrivere il vostro file theme.json.

Per i blocchi che contengono contenuto, come il blocco Paragrafo, il contenuto viene avvolto:

<!-- wp:paragraph -->
    <p>Content goes here!</p>
<!-- /wp:paragraph -->

In altri casi, avrete bisogno solo di commenti di una sola riga o di quelli che si chiudono da soli. Con alcuni blocchi, combinerete i tipi per creare i vostri layout e design. Potete anche annidare questi commenti:

<!-- wp:columns -->
<div class="wp-block-columns">
    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
    

    <!-- wp:column -->
        <div class="wp-block-column"></div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

In questo caso, creiamo un blocco Colonne utilizzando un commento wrapper. All’interno, possiamo iniziare ad aggiungere l’HTML per progettare le colonne e includere i wrapper delle singole colonne. Questo sarebbe banale sul front-end, dato che spesso si inseriscono i blocchi uno dentro l’altro.

Per trovare il markup di un particolare blocco, potete sfogliare il Manuale dell’editor dei blocchi fino a trovare ciò che vi serve. Il modo più semplice, però, è semplicemente quello di aggiungere il blocco a WordPress, aprire l’editor del codice e copiare il markup da lì.

Per quanto riguarda le modifiche da apportare al markup, ne parleremo in una sezione successiva.

Come si combinano theme.json e la modifica completa del sito WordPress

Dalla discussione sulla gerarchia, avrete capito che theme.json è una parte importante di FSE. Entrambi lavorano insieme per offrirvi una soluzione completa di tematizzazione per WordPress. Ad esempio, l’interfaccia Stili globali è essenzialmente la rappresentazione visiva delle impostazioni di theme.json.

L'editor del sito WordPress, con il lato sinistro che mostra parte del contenuto di un sito web utilizzando un testo di colore rosso scuro. A destra, il pannello Stili si concentra sulle impostazioni dei Colori. Include un selettore di palette di colori e opzioni per personalizzare i colori di vari elementi del sito, come testo, sfondo, link e pulsanti. È inoltre visibile un controllore di contrasto che mostra il codice esadecimale #A62B0C per il tema di colore selezionato.
La barra laterale dell’editor del sito, che mostra le opzioni degli stili globali di un tema.

È possibile modificare le impostazioni sia nel pannello Stili globali che nel file di configurazione e WordPress aggiornerà i valori corrispondenti quando necessario. Mentre le impostazioni dell’editor del sito avranno la precedenza, theme.json fungerà da base per gli stili del vostro tema. Per l’utente finale, gli Stili Globali consentono di sostituire le impostazioni predefinite con le proprie personalizzazioni senza dover utilizzare il codice o modificare il file theme.json.

Inoltre, le proprietà CSS personalizzate definite in theme.json diventano disponibili nell’interfaccia Stili Globali. In questo modo gli utenti possono sfruttare queste proprietà per ottenere uno stile più coerente in tutto il sito. Questo si estende anche alla possibilità di definire stili e impostazioni specifiche per i blocchi, che possono essere ulteriormente modificati dalla bacheca di WordPress.

In poche parole, theme.json offre un controllo più granulare su impostazioni, stili e altro ancora. È uno strumento a livello di sviluppatore che offre un’esperienza più semplice e snella rispetto agli approcci classici. Al contrario, l’interfaccia Stili globali offre a tutti la possibilità di personalizzare un tema a proprio piacimento. Sviluppando ulteriormente i temi, vedrete come entrambi lavorano in tandem per creare design e layout del sito.

Lavorare con le proprietà del file theme.json

Una volta comprese le basi, potrete iniziare a lavorare con gli oggetti e le proprietà di theme.json. Non riusciremo a coprire tutti i casi d’uso o le eventualità. Tuttavia, alla fine di questo tutorial, sarete in grado di creare temi che offrano tutte le funzionalità e che siano belli da vedere.

Impostazioni

La proprietà settings permette di controllare le funzionalità offerte dall’editor del sito e il loro comportamento. È una proprietà di primo livello e di solito si trovano più livelli di annidamento.

Una volta esaminati gli stili e le loro varianti, vedrete che c’è un certo incrocio tra queste opzioni, ma entrambi i tipi hanno un ruolo nella creazione del vostro tema.

Avete a disposizione un numero selezionato di proprietà:

{
    "version": 3,
    "settings": {
        "appearanceTools": false,
        "blocks": {},
        "border": {},
        "color": {},
        "custom": {},
        "dimensions": {},
        "layout": {},
        "position": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "useRootPaddingAwareAlignments": false
    }
}

Il manuale per gli sviluppatori di temi di WordPress ufficiale contiene un riferimento per tutte queste impostazioni (e stili). Tuttavia, ecco una rapida panoramica di alcune più importanti che necessitano di ulteriori chiarimenti:

  • appearanceTools. Questa proprietà “ombrello” ne abilita molte altre ed è stata concepita per risparmiare tempo. Imposta le opzioni dei bordi, le altezze delle linee tipografiche, il padding, i margini e molto altro ancora.
  • blocks. Mentre la maggior parte del vostro lavoro riguarderà le impostazioni e gli stili globali, la proprietà blocks permette di farlo per ogni blocco. Il concetto non viene trattato in dettaglio in questa sede, ma il manuale per gli sviluppatori di temi contiene un’eccellente documentazione su questo aspetto di theme.json.
  • custom. Questa proprietà unica non ha alcuna funzionalità: siete voi a decidere cosa fare. La utilizzerete per creare proprietà CSS personalizzate per il vostro tema e il campo di applicazione è molto ampio.
  • useRootPaddingAwareAlignments. Anche in questo caso si tratta di una proprietà complessa che non tratteremo per intero. Vi aiuta essenzialmente a posizionare gli stili di padding orizzontale del vostro tema ed è molto potente. La utilizzerete quando vorrete lasciare che gli elementi a tutta larghezza si estendano fino ai bordi dello schermo utilizzando il padding dell’elemento principale.

È bene notare che non è necessario aggiungere alcuna proprietà a theme.json con cui non si vuole lavorare. Ad esempio, se non volete lavorare con appearanceTools, potete semplicemente ometterlo piuttosto che definirlo con false.

Come definire le impostazioni nel file theme.json

Quando si tratta di definire le impostazioni, ogni proprietà ha una serie di sottoproprietà costituite da coppie chiave-valore. Ad esempio, potete creare delle palette di colori in questo modo:

{
    "version": 3,
    "settings": {
        "color": {
          "palette": [
            {
              "color": "#0073aa",
              "name": "Primary",
              "slug": "primary"
            },
            {
              "color": "#23282d",
              "name": "Secondary",
              "slug": "secondary"
            }
          ],
…

Altre proprietà hanno semplici valori booleani, che attivano o disattivano le caratteristiche nell’editor del sito:

{
    "version": 3,
    "settings": {
        "color": {
            "background": true,
            "defaultPalette": true,
            "link": true,
            "text": true
        }
    }
}

Una volta definite le impostazioni, è possibile introdurne lo stile. Esaminiamo ora questo aspetto.

Stili e variazioni di stile

Mentre settings definisce l’accesso ad alcune opzioni di stile, la proprietà styles permette di definire gli stili globali del vostro tema. Anche in questo caso, si tratta di una proprietà di primo livello che utilizzerà più livelli di annidamento. Potrete indirizzare elementi specifici, blocchi o persino utilizzare proprietà CSS personalizzate.

È importante definire gli stili del tema in questo punto in modo da potervi accedere e personalizzarli dall’editor del sito. Potete lavorare con diversi elementi:

{
    "version": 3,
    "styles": {
        "border": {},
        "color": {},
        "dimensions": {},
        "filter": {},
        "shadow": {},
        "spacing": {},
        "typography": {},
        "css": {}
    }
}

Tuttavia, spesso non utilizzerete molti di questi come proprietà di secondo livello. Invece, alcune funzionano principalmente con i blocchi o gli elementi. Ad esempio:

…
"styles": {
    "blocks": {
        "core/group": {
            "color": {
                "text": "#000000",
                "background": "#ffffff",
                "link": "#777777"
            }
…

Per gli stili globali, lavorerete sulla root, che corrisponde al tag <body> della pagina. Per gli elementi specifici, potete seguire una struttura simile a quella dei blocchi, questa volta utilizzando la proprietà elements:

…
"styles": {
    "elements": {
        "button": {
            "color": {
                "text": "#ffffff",
                "background": "#aa3f33"
            }
…

Se osservate le modifiche apportate nell’Editor del sito, dovreste vederle al loro posto. Il markup genererà anche il CSS per gli stili creati:

La homepage di un sito web con il titolo
Il front-end di un sito che mostra il browser DevTools, evidenziando il CSS generato per un elemento.

Notate che è possibile anche creare pseudo-classi di stile per gli elementi, come gli stili hover e focus:

…
"elements": {
    "button": {
        "color": {
            "text": "#ffffff",
            "background": "#aa3f33"
        },
        ":hover": {
            "color": {
                "background": "#822f27"
            }
…

L’applicazione degli stili è ancora più approfondita di così, e questo è uno dei fantastici vantaggi dell’utilizzo di theme.json.

Variazioni di stile

Prima di andare avanti, è necessario conoscere le variazioni di stile. Potete vedere le varie palette di colori e gli stili tipografici all’interno dell’interfaccia del FSE:

L'interfaccia dell'editor del sito WordPress mostra le varianti di stile di un tema sul lato sinistro, con varie opzioni di carattere e colore. L'area del contenuto principale mostra un'intestazione
La barra laterale degli stili all’interno dell’Editor del sito, che mostra diverse varianti.

Tuttavia, non si tratta di un codice da inserire in theme.json. Al contrario, dovrete creare versioni alternative del file, assegnare loro un nome univoco e memorizzarle nella directory degli stili del tema:

L'interfaccia di macOS mostra due finestre. La finestra di sfondo mostra un esploratore di file con più file JSON per diversi schemi di colore. La finestra in primo piano mostra un editor di codice aperto su green.json, che contiene le impostazioni dei colori del tema per uno schema di colori verde.
Un editor di codice che mostra i file JSON delle variazioni di stile.

Notate che il titolo all’interno del markup è unico per ogni file JSON alternativo. Tuttavia, si tratta di un campo facoltativo, anche se vi consigliamo di utilizzarlo per ottenere una maggiore chiarezza e una migliore esperienza.

Template personalizzati e parti di template

Come per le variazioni di stile, theme.json permette di registrare template personalizzati e parti di template associate. La registrazione del markup è semplice:

"customTemplates": [
    {
        "name": "my-template",
        "title": "My Template",
        "postTypes": [
            "page",
            "post"
        ]
    }
]

La proprietà customTemplates richiede la definizione di tre elementi:

  • name. Corrisponde a un template creato all’interno della cartella template del vostro tema, come ad esempio /template/my-template.html.
  • title. Questa è la versione leggibile del nome del template.
  • postTypes. Senza una definizione, il template corrisponde di default a una pagina, ma potete specificare una serie di tipi di post per i quali il template è adatto.

Gli utenti potranno selezionare i template registrati dall’editor del sito o del blocco:

L'editor di blocchi di WordPress mostra i dettagli di una pagina pubblicata, tra cui lo stato, la data di pubblicazione, il link, l'autore e il template. È presente un menu a discesa con le opzioni per modificare, scambiare, mostrare o creare un nuovo template.
Scegliere di modificare, scambiare, creare o mostrare un template all’interno dell’Editor del sito WordPress.

Per quanto riguarda le parti del template, non è necessario registrarle, ma lo consigliamo. La struttura è simile a quella della registrazione dei template:

…
"templateParts": [
    {
        "area": "header",
        "name": "header",
        "title": "Header"
    },
…

In questo caso, il nome e il titolo corrispondono alle stesse definizioni dei template completi. L’area si riferisce all’area di appartenenza della parte: le aree header, footer o uncategorized sono quelle predefinite, ma potete assegnare le parti template a qualsiasi area personalizzata.

Vi invitiamo a studiare anche il modo in cui visualizzare queste parti di template, poiché non si vedranno senza un po’ di codice aggiuntivo. Anche in questo caso, la loro registrazione è semplice.

Pattern

Per concludere, parliamo dei block pattern. Potete raggruppare un numero qualsiasi di questi pattern all’interno del vostro file theme.json utilizzando un array di primo livello. Qualsiasi pattern adatto dalla libreria dei pattern di WordPress è disponibile per essere incluso nel vostro file:

La schermata di ricerca della libreria di pattern di WordPress mostra una griglia di template per la progettazione di siti web. I template includono vari design di banner e intestazioni con immagini, testo e pulsanti.
La libreria dei pattern di WordPress.

Definire l’array è semplice; basta utilizzare la proprietà patterns e lo slug del pattern associato dall’URL della libreria:

Un primo piano della barra degli indirizzi di un browser che evidenzia lo slug dell'URL nella barra degli strumenti. Il resto della schermata mostra un pattern di immagini eroe arancione, con un titolo grande, una descrizione piccola e un pulsante Acquista ora.
Selezione dello slug di un pattern dall’URL di un browser web.

Grazie a questo slug, potete inserire il markup di patterns:

{
    "version": 3,
    "patterns": [
        "fullwidth-vertically-aligned-headline-on-right-with-description-on-left"
    ]
}

Potrete selezionarli dalla directory dei pattern dell’editor a blocchi:

L'interfaccia dell'editor a blocchi di WordPress mostra un menu laterale di elementi e pattern di blocco sulla sinistra e un'anteprima di vari design di banner sulla destra. Il banner principale visualizzato presenta il testo in grassetto LET 'EM ROLL BIG JOHN PATTON su uno sfondo arancione.
La directory dei patter di WordPress all’interno dell’Editor a blocchi.

Questo semplice modo di inserire le risorse della libreria dei pattern nei vostri temi è comodo e prezioso. È un altro motivo per cui il file theme.json sta rapidamente diventando il modo preferito di costruire tra gli sviluppatori di temi WordPress.

Il flusso di lavoro per personalizzare un sito WordPress utilizzando theme.json

Una volta compresi i componenti chiave di theme.json, lo sviluppo del flusso di lavoro per il suo utilizzo è un passo importante. Rappresenta un nuovo modo di sviluppare i temi e come tale deve essere gestito in modo diverso rispetto ai metodi classici.

Il nostro approccio prevede la configurazione dell’URL dello schema, la scelta della versione dell’API e la definizione delle impostazioni globali. Queste includono la tavolozza dei colori, le opzioni tipografiche e le impostazioni del layout. Nella maggior parte dei casi, anche l’attivazione di appearanceTools sarebbe utile:

"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
   "settings": {
"appearanceTools": true,
     "color": {
       "palette": [
         {
           "name": "Primary",
"slug": "primary",
           "color": "#0073aa"
         },
         {
      "name": "Secondary",
        "slug": "secondary",
           "color": "#23282d"
         }
       ]
     },
     "typography": {
"fluid": true,
       "fontSizes": [
         {
           "size": "13px",
           "slug": "small",
           "name": "Small"
         },
         {
"size": "16px",
           "slug": "normal",
           "name": "Normal"
…

Successivamente, potete cercare di creare proprietà CSS personalizzate utilizzando gli slug che avete definito. Ad esempio, potreste aver creato dei pesi dei caratteri personalizzati:

…
"custom": {
    "fontWeight": {
        "light": 300,
        "regular": 400,
        "medium": 500,
        "bold": 700
    },
…

Una volta terminate le impostazioni, è il momento di specificare gli stili.

…
"styles": {
    "color": {
        "background": "var(--wp--preset--color--base)",
        "text": "var(--wp--preset--color--main)"
    },
…

La personalizzazione degli stili dei blocchi è il prossimo passo e potrebbe rappresentare una parte importante del vostro file theme.json.

…
"styles": {
    "block": {
        "core/separator": {
            "color": {
            "text": "var(--wp--preset--color--main)"
            },
        "typography": {
            "fontSize": "var(--wp--preset--font-size--large)"
            }
        },
        "core/site-tagline": {
            "spacing": {
                "margin": {
                    "bottom": "20px"
                }
            },
            "typography": {
                "fontSize": "var(--wp--preset--font-size--small)"
            }
        },
        "core/site-title": {
            "typography": {
                "fontSize": "var(--wp--preset--font-size--medium)",
                "fontWeight": "var(--wp--custom--font-weight--semi-bold)",
                "lineHeight": "var(--wp--custom--line-height--none)"
        },
…

Infine, dovrete progettare tutti i template e le parti di template personalizzati e registrarli all’interno di theme.json. Questo è anche il momento di registrare tutti i pattern di blocco che volete utilizzare e crearli se necessario.

Utilizzare Kinsta come parte del flusso di lavoro per lo sviluppo e la personalizzazione dei temi

Prima di apportare qualsiasi modifica, dovrete testare tutto. Finora avrete probabilmente lavorato con uno strumento di sviluppo locale come DevKinsta:

L'interfaccia di DevKinsta per un singolo sito. Mostra dettagli come la versione di WordPress, il server web, la versione PHP e il tipo di database, oltre a un'anteprima della homepage del sito.
L’interfaccia di DevKinsta.

Tuttavia, è anche importante testare i risultati delle attività di sviluppo su un sito live. L’integrazione con Kinsta di DevKinsta permette di inviare un sito a un ambiente di staging standard o premium:

L'interfaccia di DevKinsta mostra le informazioni e i controlli del sito. Il menu a discesa del pulsante Sync è aperto e mostra le opzioni Push to Kinsta e Pull from Kinsta.
Le opzioni di sincronizzazione in DevKinsta.

Da qui potrete testare il vostro tema sulla nostra architettura cloud di prim’ordine e avere il pieno controllo sulle modifiche che apporterete.

Potete anche sfruttare la nostra soluzione completa di gestione dei backup, che permette di ripristinare i backup automatici giornalieri sia negli ambienti live che in quelli di staging. Inoltre, tutti i nostri ambienti di staging sono dotati di DevTools per aiutarvi a monitorare le prestazioni del vostro sito prima di eseguirne il push a live.

Meglio usare theme.json o il full site editing con WordPress?

Dato che theme.json e il full site editing si sovrappongono, potreste chiedervi perché usare l’uno piuttosto che l’altro. In realtà, entrambi si adattano a scenari diversi e dovrebbero essere utilizzati insieme.

Ad esempio, theme.json sarà il vostro strumento preferito nelle seguenti situazioni:

  • Sviluppate temi e create un nuovo tema da zero.
  • JSON è un linguaggio che conoscete e con cui vi trovate bene a lavorare.
  • Volete un metodo programmatico per definire stili e impostazioni predefinite per il vostro tema.
  • Gli stili e le impostazioni che volete implementare necessitano di un controllo maggiore rispetto a quello che potete trovare di default nell’editor del sito.

Certo, quest’ultimo punto sarà di nicchia, poiché il FSE rispecchia quasi esattamente le funzionalità di theme.json. Pertanto, il full site editing avrà più senso per la maggior parte degli utenti nei seguenti scenari:

  • Siete i proprietari di un sito che vuole personalizzare un tema esistente.
  • Non avete familiarità con JSON.
  • Le interfacce visive hanno più senso per il vostro flusso di lavoro di personalizzazione e sviluppo.
  • Volete apportare modifiche rapide senza dover ricorrere a una codifica approfondita.

In pratica, il tema avrà bisogno di un file di configurazione per definire le sue basi. Da lì, la gerarchia prende il sopravvento e i proprietari del sito possono utilizzare il FSE per apportare ulteriori personalizzazioni.

Riepilogo

Il file di configurazione theme.json è rivoluzionario per lo sviluppo di temi WordPress. Offre una sede centralizzata per le impostazioni e gli stili del tema e permette di creare temi più flessibili, manutenibili e personalizzabili.

Utilizzerete il file insieme all’editor del sito di WordPress per arrivare al design finale di un sito. Le opzioni impostate all’interno di theme.json sono quelle predefinite, che l’utente finale potrà personalizzare ulteriormente. La buona notizia è che la codifica di questo file è più semplice rispetto alla modifica di una serie di file PHP e CSS.

Avete qualche domanda sull’utilizzo del file theme.json in WordPress? Fatecelo sapere nella sezione commenti qui sotto!

Jeremy Holcombe Kinsta

Content & Marketing Editor presso Kinsta, web developer di WordPress e content writer. Al di fuori di tutto ciò che riguarda WordPress, mi piacciono la spiaggia, il golf e il cinema. Ho anche i problemi di tutte le persone più alte della media ;).