Lavorare con le proprietà e le coppie chiave-valore in theme.json

Comprendere la struttura e le proprietà del file theme.json è fondamentale per lo sviluppo dei temi a blocchi. Questo file è l’hub di configurazione principale per tutti i temi a blocchi.

Che stiate costruendo un tema da zero, personalizzandone uno esistente, sviluppando una variante di stile o lavorando su un tema child, è essenziale capire come lavorare con theme.json.

Fortunatamente, JSON (JavaScript Object Notation) è un formato leggibile dall’uomo con una struttura gerarchica che organizza le informazioni da proprietà generali a specifiche. Nel contesto di theme.json, la familiarità con i fogli di stile a cascata (CSS) è più importante di una conoscenza approfondita di JavaScript.

Questo articolo si propone di suddividere le proprietà primarie e secondarie (annidate) di un file theme.json, concentrandosi sulle impostazioni chiave e sulle proprietà degli stili. Questi sono gli elementi fondamentali del file e forniremo spiegazioni dettagliate ed esempi di codice per ciascuno di essi.

Ci basiamo sulle basi gettate nel nostro precedente articolo, Sfruttare la potenza di theme.json: personalizzare il tema di WordPress come veri professionisti in particolare nella sezione Lavorare con le proprietà del file theme.json.

Come vengono resi gli stili in un tema a blocchi

WordPress utilizza un processo a cascata integrato per rendere gli stili di un sito. Quando più fonti definiscono la stessa impostazione o lo stesso stile, WordPress deve determinare quale ha la precedenza. Di seguito è riportato l’ordine di precedenza che WordPress segue per decidere quali stili applicare:

1. Core di WordPress. Il file di fallback theme.json si trova nella directory wp-includes. Questo file viene aggiornato con le principali versioni di WordPress e non deve essere modificato.
2. Tema. Il file theme.json principale utilizzato dagli sviluppatori di temi per definire le impostazioni, gli stili e altre proprietà del tema.
3. Variazioni di stile. Se un tema include variazioni di stile, ognuna di esse ha un proprio file theme.json memorizzato nella sottodirectory styles del tema.
4. Tema child. Come per i temi classici, un tema child può modificare un tema genitore senza alterarne i file (opzionale).
5. Variazioni di stile del tema child. Analogamente alle variazioni di stile regolari, un tema child può avere il proprio file theme.json nella sottodirectory degli stili (opzionale).
6. Stili creati dall’utente. Si tratta di stili personalizzati aggiunti tramite gli editor di WordPress (per pagine, post o per l’intero sito) e memorizzati nel database.

L’ordine a cascata garantisce che gli stili provenienti da fonti con priorità più alta sovrascrivano quelli provenienti da fonti con priorità più bassa. Ad esempio, le impostazioni del file theme.json del tema sovrascrivono quelle del core di WordPress theme.json. Allo stesso modo, la variazione di stile di un tema child precederà la variazione di stile del tema genitore.

Gli stili creati dall’utente (6) hanno la massima priorità e sovrascrivono tutti gli altri stili in cascata.

In questo articolo ci concentriamo sul file theme.json che si trova nella cartella principale di ogni tema a blocchi di WordPress.

Un riferimento per le proprietà primarie e i loro valori chiave

Esploriamo i sette oggetti di primo livello di theme.json, che abbiamo raggruppato in tre sezioni per rendere le informazioni più facili da digerire.

Alcune definizioni prima di cominciare

Lavorando con theme.json, probabilmente troverete definizioni diverse per componenti importanti. Per chiarezza, ecco come li definiamo in questo articolo:

1. Sezioni: raggruppamenti di opzioni di primo livello (in alcuni articoli vengono chiamate anche “oggetti di primo livello”).
2. Oggetti : gli elementi principali del file theme.json, come settings e styles.
3. Proprietà: i componenti all’interno degli oggetti. Ad esempio, l’oggetto settings contiene 12 proprietà diverse.
4. Coppie chiave-valore: le proprietà sono costituite da coppie chiave-valore. Una “chiave” rappresenta un attributo della proprietà ed è racchiusa tra virgolette. Il “valore” può essere un booleano, una stringa o un array.

Quando si parla di “predefinito”, ci si riferisce alle configurazioni predefinite presenti nel file theme.json, che si trova all’indirizzo wp-includes/theme.json.

Infine, con “utenti” ci si riferisce a tutti coloro che utilizzano l’admin di WordPress e che possono modificare le impostazioni negli editor di siti, pagine o post.

Panoramica della sintassi

1. I booleani non sono racchiusi tra virgolette.
2. Le stringhe sono racchiuse tra doppi apici.
3. Gli array sono racchiusi tra parentesi quadre [].
4. Gli oggetti sono racchiusi tra parentesi graffe {}, contenenti più proprietà o oggetti annidati.
5. Le virgole sono utilizzate per separare più coppie chiave-valore all’interno di un oggetto.

Ecco un esempio di sintassi tipica:

{
    "house": {
        "rooms": "kitchen"
    }
}

Raggruppare le proprietà

Abbiamo organizzato le proprietà in tre sezioni per facilitare la navigazione:

1. Proprietà di base
2. Proprietà delle impostazioni e degli stili
3. Proprietà template e pattern

Per semplificare gli esempi, a volte abbiamo omesso i wrapper degli oggetti esterni. Invece di mostrare l’intera struttura:

{
    "settings": {
        "appearanceTools": false,
        "background": {
            "backgroundImage": true
        }
    }
}

Potremmo abbreviarla in:

"appearanceTools": false,
"background": {
    "backgroundImage": true
}

.

Proprietà di base

All’inizio di un file theme.json, in genere si trovano due proprietà fondamentali: $schema e version. Queste proprietà sono solitamente collocate all’inizio del file. La versione attuale dello schema è la 3, introdotta con WordPress 6.6.

"$schema": "https://schemas.wp.org/wp/6.6/theme.json", "version": 3

Proprietà delle impostazioni e degli stili

Se avete familiarità con i temi classici, considerate le proprietà delle impostazioni come caratteristiche e funzioni che generalmente vengono impostate nel file functions.php ed esposte nella sezione Aspetto > Personalizza dell’amministrazione di WordPress.

Gli stili, invece, sono simili alle proprietà CSS che risiedevano nel file styles.css e che controllano il layout e il design del tema.

Impostazioni

Ad eccezione delle proprietà block e elements, tutte le altre impostazioni sono globali. Poiché molte di queste impostazioni sono booleane, agiscono come levette per attivare o disattivare una funzione dell’interfaccia utente.

È importante notare che non tutti i tasti sono applicabili in ogni contesto. Ad esempio, non è possibile consentire agli utenti di impostare un’altezza minima per un blocco di paragrafi.

Appearence tools

Queste impostazioni possono essere attivate collettivamente o singolarmente utilizzando "appearanceTools": true.

L’abilitazione di questa funzione espone varie opzioni dell’interfaccia utente nell’editor di WordPress, facendo risparmiare tempo agli sviluppatori. Per impostazione predefinita, questi strumenti sono disabilitati ("appearanceTools": false).

Le opzioni di appearanceTools includono:

• background
  • backgroundImage. Permette all’utente di aggiungere un’immagine di sfondo ai blocchi.
  • backgroundSize. Definisce la modalità di ridimensionamento dell’immagine di sfondo (coprire, contenere, ecc.).
• border
  • color. Abilita la selezione del colore per i bordi.
  • style. Permette all’utente di scegliere lo stile del bordo (solido, tratteggiato, punteggiato, ecc.).
  • width. Controlla lo spessore del bordo.
  • radius. Permette agli utenti di impostare angoli arrotondati regolando il raggio del bordo.
• color
  • link. Consente di impostare un colore per i link all’interno del contenuto.
  • heading. Permette agli utenti di definire i colori dei tag di intestazione (<h1>, <h2>, ecc.).
  • button. Controlla il colore dei pulsanti nel tema.
  • caption. Permette di impostare un colore personalizzato per le didascalie.
• dimensions
  • aspectRatio. Permette di controllare il rapporto larghezza/altezza dei blocchi.
  • minHeight. Permette di impostare un’altezza minima per i blocchi.
• position
  • sticky. Permette all’utente di mettere un blocco in evidenza, ossia che rimanga fisso in posizione durante lo scorrimento.
• spacing
  • blockGap. Controlla la spaziatura tra i blocchi.
  • margin. Permette agli utenti di regolare i margini intorno a un blocco.
  • padding. Controlla il padding all’interno di un blocco, definendo lo spazio tra il suo contenuto e il suo bordo.
• typography
  • lineHeight. Permette agli utenti di regolare l’altezza delle righe (spazio tra le righe di testo) per una migliore leggibilità.

Esempio: se volete che gli utenti aggiungano un’immagine di sfondo mantenendo disabilitati gli altri strumenti di aspetto, usate:

"appearanceTools": false,
"background": {
    "backgroundImage": true
}

Blocchi

La proprietà blocks permette agli utenti di abilitare le impostazioni per ogni blocco, che possono sovrascrivere le impostazioni globali.

Esempio: se appearanceTools è impostato su false, ma volete comunque esporre i controlli dei bordi per un blocco, usate:

"border": {
    "color": true,
    "style": true,
    "width": true,
    "radius": true
}

Color

Questa proprietà consente agli utenti di impostare opzioni di colore come il colore di sfondo, il colore del testo o i gradienti.

Le opzioni della proprietà color:

• background. Controlla il colore di sfondo dei blocchi o degli elementi.
• custom. Abilita o disabilita la possibilità per gli utenti di selezionare colori personalizzati.
• customDuotone. Permette agli utenti di applicare filtri duotone personalizzati alle immagini.
• customGradient. Abilita le opzioni di sfumatura personalizzate.
• defaultDuotone. Fornisce le opzioni di filtro duotono predefinite per le immagini.
• defaultGradient. Definisce le opzioni di sfumatura predefinite disponibili per gli utenti.
• defaultPalette. Controlla la palette dei colori predefinita del tema.
• duotone. Consente i filtri duotono sulle immagini.
• gradient. Abilita le opzioni di sfumatura per gli sfondi o altri elementi.
• link. Imposta il colore dei link nel tema.
• text. Controlla le opzioni di colore del testo.
• heading. Imposta i colori degli header (ad esempio, h1, h2, ecc.).
• button. Controlla le opzioni di colore dei pulsanti.
• caption. Imposta il colore della didascalia per gli elementi multimediali.

Vediamo alcuni esempi:

Esempio 1: se volete disabilitare il selettore colore per gli utenti, potete usare la seguente procedura:

"color": {
    "custom": false
}

Esempio 2: per impostare i colori primari e secondari del tema, potete usare questa configurazione:

"color": {
   "palette": [
       { "slug": "primary", "color": "#0000ff", "name": "Primary" },
       { "slug": "secondary", "color": "#ff0000", "name": "Secondary" }
   ]
}

Dimensions

Questa proprietà fornisce opzioni per controllare le dimensioni dei blocchi, come la larghezza, l’altezza e il rapporto d’aspetto.

Tasti all’interno della proprietà dimensions:

• aspectRatio. Permette agli utenti di impostare o bloccare il rapporto di aspetto di un blocco (ad esempio, 16:9, 4:3).
• defaultAspectRatios. Definisce le proporzioni predefinite per i blocchi.
• minHeight. Abilita la possibilità di impostare un’altezza minima per i blocchi.

Ad esempio, per consentire agli utenti di impostare un’altezza minima per i blocchi supportati, usate la seguente procedura:

"dimensions": {
    "minHeight": true
}

Layout

La proprietà layout permette agli utenti di impostare le opzioni relative al layout, come la larghezza del contenuto e la possibilità di personalizzare il layout. Questo permette agli utenti di impostare le opzioni di layout con questi tasti:

• contentSize. Imposta< la larghezza predefinita dei blocchi.
• wideSize. Definisce la larghezza dei blocchi quando è selezionata l’opzione di allineamento ampio.
• allowEditing. Determina se gli utenti possono modificare le opzioni di layout.
• allowCustomContentAndWideSize. Abilita la personalizzazione di contentSize e wideSize.

Esempio: ecco come configurare le impostazioni di layout con la larghezza dei blocchi predefinita e ampia:

"layout": {
    "contentSize": "620px",
    "wideSize": "1000px"
}

.

Lightbox

La proprietà lightbox permette agli utenti di attivare la funzione “Espandi al clic” per le immagini, aprendole in una visualizzazione più grande quando si fa clic.

Opzioni della proprietà lightbox:

• enabled. Attiva o disattiva la funzione lightbox.
• allowEditing. Permette agli utenti di attivare l’impostazione della lightbox.

Esempio: per consentire agli utenti di attivare la funzione lightbox per le immagini, usate questa configurazione:

"blocks": {
    "core/image": {
        "lightbox": {
            "allowEditing": true
        }
    }
}

Position

La proprietà position permette agli utenti di controllare la posizione dei blocchi, ad esempio per mettere un blocco in evidenza sulla pagina.

Esempio: come mettere un blocco in evidenza:

"position": {
    "sticky": true
}

Shadow

Questa proprietà consente agli utenti di applicare effetti d’ombreggiatura ai blocchi, sia utilizzando preimpostazioni predefinite che ombreggiature definite in modo personalizzato.

Opzioni della proprietà shadow:

• defaultPresets. Attiva o disattiva le preimpostazioni predefinite delle ombreggiature.
• presets. Permette agli utenti di definire delle preimpostazioni d’ombreggiatura personalizzate.

Ecco un esempio in cui le ombreggiature predefinite sono disattivate e viene definita un’ombreggiatura personalizzata denominata “Natural”:

"shadow": {
    "defaultPresets": false,
    "presets": [
        { "name": "Natural", "slug": "natural", "shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)" }
    ]
}

I numeri indicano i click effettuati nell’editor del sito per dimostrare l’interfaccia utente. L’ultimo passo mostra l’ombra “Natural”.

Spacing

Questa proprietà definisce come viene controllata la spaziatura (padding, margine, gap) nell’editor.

Le opzioni della proprietà spacing:

• blockGap. Controlla lo spazio tra i blocchi.
• margin. Permette agli utenti di impostare i margini intorno ai blocchi.
• padding. Fornisce opzioni per impostare il padding all’interno dei blocchi.
• units. Definisce le unità di misura disponibili per la spaziatura (ad esempio, px, rem).
• customSpacingSize. Permette agli utenti di impostare spaziature personalizzate.
• spacingSizes. Definisce una serie di spaziature predefinite.
• spacingScale. Permette di scalare le unità di spaziatura.

Esempio: per limitare gli utenti a due unità di misura (pixel e rem) per il padding, i margini, le larghezze e le altezze e per esporre i controlli di spaziatura nell’editor del sito, impostate appearanceTools su true e configurate in questo modo:

"spacing": {
    "units": ["px", "rem"]
}

Typography

Questa proprietà controlla le impostazioni relative al testo del vostro tema, come la dimensione, il peso e l’altezza dei caratteri.

Le opzioni della proprietà typography:

• defaultFontSizes. Definisce le dimensioni predefinite dei caratteri disponibili per gli utenti.
• customFontSize. Abilita o disabilita la possibilità di impostare dimensioni personalizzate dei caratteri.
• fontStyle. Controlla lo stile del carattere (ad esempio, normale, corsivo).
• fontWeight. Permette agli utenti di impostare il peso del font (ad esempio, grassetto, leggero).
• fluid. Abilita tipografia fluida, regolando le dimensioni dei caratteri in modo dinamico in base alle dimensioni dello schermo.
• letterSpacing. Controlla la spaziatura tra le lettere.
• lineHeight. Imposta l’altezza di ogni riga di testo.
• textAlign. Permette di controllare l’allineamento del testo (ad esempio, a sinistra, al centro, a destra).
• textDecoration. Fornisce opzioni per la decorazione del testo (ad esempio, sottolineatura).
• writingMode. Imposta la modalità di scrittura del testo (ad esempio, orizzontale o verticale).

Esempio: per disabilitare sia le dimensioni personalizzate dei caratteri che le opzioni di DropCap, usate la seguente procedura:

"typography": {
    "customFontSize": false,
    "dropCap": false
}

In questo caso, entrambe le opzioni evidenziate non appariranno nell’editor.

Root padding aware alignments

Se impostata su true, questa proprietà assicura che gli allineamenti dei blocchi larghi o a tutta larghezza siano consapevoli del padding applicato all’elemento root della pagina (ad esempio, <html> o <body>), garantendo un allineamento corretto anche quando viene applicato il padding.

Esempio:

"useRootPaddingAwareAlignments": true

Quando è impostata su true, è anche necessario definire i valori del padding superiore, destro, inferiore e sinistro della root come stile. (Maggiori informazioni sulle proprietà di stile sono riportate di seguito).

"spacing": {
    "padding": {
        "top": "0",
        "right": "100px",
        "bottom": "0",
        "left": "100px"
    }
}

Applicando l’impostazione useRootPaddingAwareAlignements insieme al padding destro e sinistro al corpo (come nel codice precedente) si ottiene il seguente risultato.

Styles

La proprietà styles permette di applicare stili CSS alla root (predefinita), a elementi specifici o a singoli blocchi del vostro tema.

Stili di sfondo

Potete controllare le proprietà relative allo sfondo, come le immagini, il posizionamento e gli allegati.

Opzioni comuni per lo sfondo:

• backgroundImage. Definisce l’immagine di sfondo per il blocco o l’elemento.
• backgroundPosition. Imposta la posizione dell’immagine di sfondo (ad esempio, al centro, in alto a destra).
• backgroundRepeat. Specifica se l’immagine di sfondo si ripete (ad esempio, repeat, no-repeat).
• backgroundSize. Controlla dimensioni dell’immagine di sfondo (es. copertura, contenuto).
• backgroundAttachment. Specifica se l’immagine di sfondo è fissa o scorre con la pagina.

Ad esempio, potete impostare un’immagine di sfondo per il vostro tema:

"background": {
   "backgroundImage": {
       "url": "https://joyofwp.com/wp-content/uploads/2024/09/dots.png"
   }
}

Stili specifici per blocchi

Potete applicare stili specifici, come ombreggiature, tipografia e bordi, a singoli blocchi.

Opzioni per il bordo:

• color. Definisce il colore del bordo.
• radius. Imposta il raggio del bordo per gli angoli arrotondati.
• style. Specifica lo stile del bordo (ad esempio, solido, punteggiato).
• width. Controlla la larghezza del bordo.
• top, right, bottom, left. Permette di impostare stili di bordo individuali per ogni lato.

Ad esempio, il seguente esempio imposta un bordo rosso solido di 20px intorno all’intera pagina:

"border": {
   "color": "#ff0000",
   "width": "20px",
   "style": "solid"
}

Potete anche assegnare un CSS personalizzato a un blocco specifico, a un elemento o alla root.
Ad esempio, il codice qui sotto applica un colore di testo rosso a un blocco tabella:

"border": {
   "color": "#ff0000",
   "width": "20px",
   "style": "solid"
}

Stili di colore

La proprietà color permette di controllare le impostazioni dei colori di sfondo, sfumatura e testo.
Opzioni per color:

• background. Imposta il colore di sfondo del blocco o dell’elemento.
• gradient. Definisce un gradiente di sfondo per il blocco.
• text. Controlla il colore del testo.

L’esempio seguente imposta uno sfondo nero con testo bianco su ogni elemento per ogni pagina:

"color": {
   "background": "#000000",
   "text": "#ffffff"
}

CSS

La proprietà css permette di associare stili personalizzati a classi specifiche, consentendo un controllo più granulare sugli stili del tema.

Esempio: è possibile applicare stili personalizzati a wp-block-template-parts e wp-block-button e aggiungere un effetto hover per il pulsante:

"css": ".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }"

Come potete vedere, alle parti di template dell’header e del footer sono assegnati background-color e padding, mentre lo stato hover del pulsante ha uno sfondo bianco con testo nero.

Dimensions

La proprietà dimensions permette di controllare la larghezza, l’altezza e il rapporto di aspetto dei blocchi.

Opzioni per la proprietà dimensions:

• aspectRatios: Definisce rapporti di aspetto personalizzati per gli elementi.
• minHeight: Imposta l’altezza minima dei blocchi.

Esempio: ecco come creare un rapporto di aspetto personalizzato di 3:7 per un blocco immagine:

"blocks": {
   "core/image": {
       "dimensions": {
           "aspectRatio": "custom"
       }
   }
}

Tuttavia, quanto detto sopra non è sufficiente. È necessario registrare lo stile “personalizzato” nelle sezioni delle impostazioni.

"dimensions": {
   "defaultAspectRatios": true,
   "aspectRatios": [
       {
           "name": "Custom Ratio 3:7",
           "slug": "custom",
           "ratio": "3/7"
       }
   ]
}

Qui potete vedere che è stata aggiunta l’opzione “Rapporto personalizzato”. Se preferite rimuovere i sette rapporti di aspetto predefiniti, rimuovete "defaultAspectRatios":true dalla sezione delle impostazioni.

Stili specifici per gli elementi

La proprietà elements permette di applicare stili a elementi HTML specifici come link, pulsanti o titoli.

Ad esempio, il codice sottostante disattiva la decorazione del testo (sottolineatura) per tutti i link:

"elements": {
   "link": {
       "typography": {
           "textDecoration": "none"
       }
   }
}

Filter

La proprietà filter permette di applicare effetti filtro simili a quelli dei CSS (ad es. sfocatura, luminosità) a determinati blocchi come le immagini.

Esempio: applichiamo un filtro di sfocatura e luminosità a un blocco immagine:

"blocks": {
   "core/image": {
       "filter": {
           "duotone": "blur(5px) brightness(0.8)"
       }
   }
}

Qui sono stati applicati gli effetti di sfocatura e luminosità al blocco immagine. Altri valori di filtro disponibili sono:

• contrast: Regola il contrasto dell’elemento.
• grayscale: Converte l’elemento in scala di grigi.
• invert: Inverte i colori dell’elemento.
• opacity: Controlla la trasparenza dell’elemento.
• saturate: Aumenta o diminuisce la saturazione dei colori.
• sepia: Applica un tono seppia all’elemento.

Outline

La proprietà outline definisce gli stili per i contorni disegnati al di fuori del bordo dell’elemento, senza influenzare lo spazio del layout.

Opzioni per la proprietà outline:

• color: Imposta il colore del contorno.
• offset: Controlla lo spazio tra il bordo e il contorno.
• style: Specifica lo stile del contorno (ad esempio, tratteggiato, solido).
• width: Imposta la larghezza del contorno.

Esempio: come applicare un contorno tratteggiato rosso a un pulsante:

"elements": {
   "button": {
       "outline": {
           "color": "#ff0000",
           "style": "dotted",
           "width": "4px"
       }
   }
}

Stili ombreggiatura

La proprietà shadow permette di applicare ombreggiature ai blocchi, aggiungendo profondità ed enfasi agli elementi.

Esempio: come applicare un’ombra a tutte le immagini

"blocks": {
   "core/image": {
       "shadow": "0 10px 20px 0 rgb(0 0 225 / 0.50)"
   }
}

Stili di spaziatura

La proprietà spacing gestisce gli stili di padding, margine e spaziatura del blocco per il vostro tema.

Opzioni per la spaziatura:

• blockGap -Controlla lo spazio tra i blocchi.
• margin -Imposta i margini intorno ai blocchi.
• padding -Controlla il padding all’interno dei blocchi.

L’esempio seguente imposta un padding personalizzato sui lati destro e sinistro:

"spacing": {
   "padding": {
       "left": "min(6.5rem, 8vw)",
       "right": "min(6.5rem, 8vw)"
   }
}

Stili tipografici

La proprietà typography gestisce gli stili dei caratteri, le dimensioni e altre impostazioni relative al testo.

Opzioni comuni per la tipografia:

• fontFamily. Imposta la famiglia di caratteri per il testo.
• fontSize. Definisce la dimensione del carattere.
• fontStyle. Specifica lo stile del carattere (ad esempio, corsivo, normale).
• fontWeight. Controlla il peso (spessore) del carattere.
• letterSpacing. Regola la spaziatura tra le lettere.
• lineHeight. Definisce l’altezza della linea (spaziatura tra le righe di testo).
• textAlign. Imposta l’allineamento del testo (ad esempio, sinistra, centro, destra).
• textColumns. Controlla il numero di colonne di testo.
• textDecoration. Imposta la decorazione del testo (ad esempio, la sottolineatura).
• writingMode. Definisce la modalità di scrittura (ad esempio, orizzontale, verticale).
• textTransform. Controlla la trasformazione del testo (ad esempio, maiuscolo, minuscolo).

Ad esempio, potete impostare tutti i titoli con un peso del carattere di 300 e uno stile corsivo:

"blocks": {
   "core/heading": {
       "typography": {
           "fontWeight": "300",
           "fontStyle": "italic"
       }
   }
}

Proprietà template e pattern

Queste tre proprietà di primo livello sono utilizzate per registrare le risorse personalizzate nel vostro tema.

1. Template personalizzati

La proprietà templates è utilizzata per registrare template personalizzati per vari tipi di post.

• name. Il nome del file .html o .php che si trova nella sottodirectory templates.
• title. Il titolo che verrà assegnato al template per facilitarne l’identificazione.
• postTypes. Specifica il tipo di contenuto (ad esempio, post, pagine) che il template deve rendere.

2. Parti del template

La proprietà templateParts è utilizzata per definire le parti riutilizzabili dei template (ad esempio, header e footer).

• name. Il nome del file .html o .php situato nella sottodirectory parts.
• title. Il titolo dato alla parte del template per facilitarne l’identificazione.
• area. Specifica a quale parte della pagina si applica il template (ad esempio, header, footer, sidebar).

3. Pattern

La proprietà patterns permette di registrare un array di pattern dalla directory dei pattern di WordPress, rendendoli disponibili nel tema.

Ecco come registrare un pattern:

"patterns": [
    "my-custom-pattern-slug"
]

Tre esempi pratici di lavoro con theme.json

Ecco alcune cose che potreste voler fare per un tema che state sviluppando.

1. Aggiungere un pattern

Ecco come includere due pattern dalla directory dei pattern di WordPress. Qui è mostrato il pattern “Galleria di immagini di copertina a schermo intero”:

"patterns": [
   "fullscreen-cover-image-gallery",
   "hero-banner-with-overlap-images"
]

Note:

• I pattern prelevati dalla directory Patterns non verranno visualizzati nella sezione Pattern dell’editor del sito. Questi pattern saranno disponibili solo attraverso il Pannello di inserimento.
• In questo esempio, includiamo la proprietà di primo livello patterns (rispetto a settings e styles, che abbiamo omesso negli esempi precedenti per brevità).

2. Aggiungere un font personalizzato

Abbiamo scaricato due file di font (Roboto-Regular.ttf e Roboto-Bold.ttf) dalla libreria Google Fonts e li abbiamo caricati nella sottodirectory assets/fonts/ del nostro tema.

Il codice seguente registra entrambi i font e li rende disponibili per tutto il sito:

"settings": {
   "typography": {
       "fontFamilies": [
           {
               "fontFamily": "Roboto",
               "name": "Roboto",
               "slug": "roboto",
               "fontFace": [
                   {
                       "fontFamily": "Roboto Regular",
                       "fontWeight": "400",
                       "fontStyle": "normal",
                       "src": [
                           "file./assets/fonts/Roboto-Regular.ttf"
                       ]
                   },
                   {
                       "fontFamily": "Roboto Bold",
                       "fontWeight": "700",
                       "fontStyle": "bold",
                       "src": [
                           "file./assets/fonts/Roboto-Bold.ttf"
                       ]      
                   }  
               ]
           }
       ]
   }
}

3. Impostazione della palette dei colori

Se volete limitare i vostri utenti a una specifica palette di colori, potete configurarla in questo modo. (Anche i gradienti e i duotoni possono essere configurati secondo le vostre specifiche).

Esempio:

"settings": {
   "color": {
       "custom": false,
       "defaultPalette": false,
       "palette": [
           {
               "slug": "primary",
               "color": "#1e8cbe",
               "name": "Primary"
           },
           {
               "slug": "secondary",
               "color": "#21759b",
               "name": "Secondary"
           },
           {
               "slug": "tertiary",
               "color": "#",
               "name": "Tertiary"
           },
           {
               "slug": "accent",
               "color": "#464646",
               "name": "Accent"
           }
       ]
   }
}

Riconoscete questi quattro colori? Fanno parte della storia dei colori di WordPress.

Riepilogo

Questo articolo mette in evidenza il ruolo fondamentale di theme.json nello sviluppo di temi WordPress moderni. Imparando a conoscere theme.json, potrete personalizzare completamente il design visivo e l’interfaccia utente del vostro tema senza dover ricorrere a complesse sovrascritture PHP o CSS.

Capire come usare in modo efficace proprietà come appearanceTools offre un maggiore controllo ed efficienza durante la creazione o il perfezionamento dei temi WordPress, rendendo questo file uno strumento essenziale per gli sviluppatori che desiderano creare temi flessibili e di facile utilizzo.