{"id":79607,"date":"2024-11-18T10:02:55","date_gmt":"2024-11-18T09:02:55","guid":{"rendered":"https:\/\/kinqsta.com\/it\/?p=79607&#038;preview=true&#038;preview_id=79607"},"modified":"2024-11-18T15:55:31","modified_gmt":"2024-11-18T14:55:31","slug":"proprieta-coppie-chiave-theme-json","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/","title":{"rendered":"Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json"},"content":{"rendered":"<p>Comprendere la struttura e le propriet\u00e0 del file <code><a href=\"https:\/\/kinqsta.com\/it\/blog\/blocks-theme-json\/\">theme.json<\/a><\/code> \u00e8 fondamentale per lo <a href=\"https:\/\/kinqsta.com\/it\/blog\/concetti-fondamentali-temi-wordpress\/\">sviluppo dei temi<\/a> a blocchi. Questo file \u00e8 l&#8217;hub di configurazione principale per tutti i temi a blocchi.<\/p>\n<p>Che stiate costruendo un tema da zero, personalizzandone uno esistente, sviluppando una variante di stile o lavorando su un tema child, \u00e8 essenziale capire come lavorare con <code>theme.json<\/code>.<\/p>\n<p>Fortunatamente, JSON (JavaScript Object Notation) \u00e8 un formato leggibile dall&#8217;uomo con una struttura gerarchica che organizza le informazioni da propriet\u00e0 generali a specifiche. Nel contesto di <code>theme.json<\/code>, la familiarit\u00e0 con i fogli di stile a cascata (<a href=\"https:\/\/kinqsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a>) \u00e8 pi\u00f9 importante di una conoscenza approfondita di <a href=\"https:\/\/kinqsta.com\/it\/blog\/cosa-e-javascript\/\">JavaScript<\/a>.<\/p>\n<p>Questo articolo si propone di suddividere le propriet\u00e0 primarie e secondarie (annidate) di un file <code>theme.json<\/code>, concentrandosi sulle impostazioni chiave e sulle propriet\u00e0 degli stili. Questi sono gli elementi fondamentali del file e forniremo spiegazioni dettagliate ed esempi di codice per ciascuno di essi.<\/p>\n<p>Ci basiamo sulle basi gettate nel nostro precedente articolo, <em><a href=\"https:\/\/kinqsta.com\/it\/blog\/theme-json\/\">Sfruttare la potenza di theme.json: personalizzare il tema di WordPress come veri professionisti<\/a><\/em> in particolare nella sezione <em><a href=\"https:\/\/kinqsta.com\/it\/blog\/theme-json\/#working-with-the-themejson-file-properties\">Lavorare con le propriet\u00e0 del file theme.json<\/a><\/em>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Per lo sviluppo locale di un tema, potete usare lo strumento di sviluppo di Kinsta, <a href=\"https:\/\/kinqsta.com\/it\/devkinsta\/\">DevKinsta<\/a>, che permette di <a href=\"https:\/\/kinqsta.com\/it\/blog\/installare-wordpress-in-locale\/\">creare un ambiente WordPress locale<\/a> rapidamente e di distribuirlo facilmente sul vostro <a href=\"https:\/\/kinqsta.com\/it\/mykinsta\/\">account Kinsta<\/a>.<\/p>\n<p>Kinsta fornisce anche l&#8217;accesso agli <a href=\"https:\/\/kinqsta.com\/it\/docs\/hosting-wordpress\/ambienti-di-staging\/\">ambienti di staging<\/a>, consentendovi di gestire e perfezionare senza problemi i vostri progetti web. Questo pu\u00f2 essere particolarmente utile per testare le modifiche al vostro tema, compresi gli aggiornamenti del file <code>theme.json<\/code>.<\/p>\n<\/aside>\n\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Come vengono resi gli stili in un tema a blocchi<\/h2>\n<p>WordPress utilizza un processo a cascata integrato per rendere gli stili di un sito. Quando pi\u00f9 fonti definiscono la stessa impostazione o lo stesso stile, WordPress deve determinare quale ha la precedenza. Di seguito \u00e8 riportato l&#8217;ordine di precedenza che WordPress segue per decidere quali stili applicare:<\/p>\n<ol start=\"1\">\n<li><strong>Core di WordPress<\/strong>. Il file di fallback <code>theme.json<\/code> si trova nella directory wp-includes. Questo file viene aggiornato con le principali versioni di WordPress e non deve essere modificato.<\/li>\n<li><strong>Tema<\/strong>. Il file <code>theme.json<\/code> principale utilizzato dagli sviluppatori di temi per definire le impostazioni, gli stili e altre propriet\u00e0 del tema.<\/li>\n<li><strong>Variazioni di stile<\/strong>. Se un tema include variazioni di stile, ognuna di esse ha un proprio file <code>theme.json<\/code> memorizzato nella sottodirectory styles del tema.<\/li>\n<li><strong>Tema child<\/strong>. Come per i temi classici, un tema child pu\u00f2 modificare un tema genitore senza alterarne i file (opzionale).<\/li>\n<li><strong>Variazioni di stile del tema child<\/strong>. Analogamente alle variazioni di stile regolari, un tema child pu\u00f2 avere il proprio file <code>theme.json<\/code> nella sottodirectory degli stili (opzionale).<\/li>\n<li><strong>Stili creati dall&#8217;utente<\/strong>. Si tratta di stili personalizzati aggiunti tramite gli editor di WordPress (per pagine, post o per l&#8217;intero sito) e memorizzati nel database.<\/li>\n<\/ol>\n<p>L&#8217;ordine a cascata garantisce che gli stili provenienti da fonti con priorit\u00e0 pi\u00f9 alta sovrascrivano quelli provenienti da fonti con priorit\u00e0 pi\u00f9 bassa. Ad esempio, le impostazioni del file <code>theme.json<\/code> del tema sovrascrivono quelle del core di WordPress <code>theme.json<\/code>. Allo stesso modo, la variazione di stile di un tema child preceder\u00e0 la variazione di stile del tema genitore.<\/p>\n<p>Gli stili creati dall&#8217;utente (6) hanno la massima priorit\u00e0 e sovrascrivono tutti gli altri stili in cascata.<\/p>\n<p>In questo articolo ci concentriamo sul file <code>theme.json<\/code> che si trova nella cartella principale di ogni tema a blocchi di WordPress.<\/p>\n<h2>Un riferimento per le propriet\u00e0 primarie e i loro valori chiave<\/h2>\n<p>Esploriamo i sette oggetti di primo livello di <code>theme.json<\/code>, che abbiamo raggruppato in tre sezioni per rendere le informazioni pi\u00f9 facili da digerire.<\/p>\n<h3>Alcune definizioni prima di cominciare<\/h3>\n<p>Lavorando con <code>theme.json<\/code>, probabilmente troverete definizioni diverse per componenti importanti. Per chiarezza, ecco come li definiamo in questo articolo:<\/p>\n<ol start=\"1\">\n<li><strong>Sezioni<\/strong>: raggruppamenti di opzioni di primo livello (in alcuni articoli vengono chiamate anche &#8220;oggetti di primo livello&#8221;).<\/li>\n<li><strong>Oggetti <\/strong>: gli elementi principali del file <code>theme.json<\/code>, come <code>settings<\/code> e <code>styles<\/code>.<\/li>\n<li><strong>Propriet\u00e0<\/strong>: i componenti all&#8217;interno degli oggetti. Ad esempio, l&#8217;oggetto <code>settings<\/code> contiene 12 propriet\u00e0 diverse.<\/li>\n<li><strong>Coppie chiave-valore<\/strong>: le propriet\u00e0 sono costituite da coppie chiave-valore. Una &#8220;chiave&#8221; rappresenta un attributo della propriet\u00e0 ed \u00e8 racchiusa tra virgolette. Il &#8220;valore&#8221; pu\u00f2 essere un booleano, una stringa o un array.<\/li>\n<\/ol>\n<p>Quando si parla di &#8220;predefinito&#8221;, ci si riferisce alle configurazioni predefinite presenti nel file <code>theme.json<\/code>, che si trova all&#8217;indirizzo <code>wp-includes\/theme.json<\/code>.<\/p>\n<p>Infine, con &#8220;utenti&#8221; ci si riferisce a tutti coloro che utilizzano l&#8217;<a href=\"https:\/\/kinqsta.com\/it\/blog\/amministrazione-wordpress\/\">admin di WordPress<\/a> e che possono modificare le impostazioni negli editor di siti, pagine o post.<\/p>\n<h3>Panoramica della sintassi<\/h3>\n<ol start=\"1\">\n<li>I <strong>booleani<\/strong> non sono racchiusi tra virgolette.<\/li>\n<li>Le <strong>stringhe<\/strong> sono racchiuse tra doppi apici.<\/li>\n<li>Gli <strong>array<\/strong> sono racchiusi tra parentesi quadre <code>[]<\/code>.<\/li>\n<li>Gli <strong>oggetti<\/strong> sono racchiusi tra parentesi graffe <code>{}<\/code>, contenenti pi\u00f9 propriet\u00e0 o oggetti annidati.<\/li>\n<li>Le <strong>virgole<\/strong> sono utilizzate per separare pi\u00f9 coppie chiave-valore all&#8217;interno di un oggetto.<\/li>\n<\/ol>\n<p>Ecco un esempio di sintassi tipica:<\/p>\n<pre><code class=\"language-json\">{\n    \"house\": {\n        \"rooms\": \"kitchen\"\n    }\n}<\/code><\/pre>\n<h3>Raggruppare le propriet\u00e0<\/h3>\n<p>Abbiamo organizzato le propriet\u00e0 in tre sezioni per facilitare la navigazione:<\/p>\n<ol start=\"1\">\n<li>Propriet\u00e0 di base<\/li>\n<li>Propriet\u00e0 delle impostazioni e degli stili<\/li>\n<li>Propriet\u00e0 template e pattern<\/li>\n<\/ol>\n<p>Per semplificare gli esempi, a volte abbiamo omesso i wrapper degli oggetti esterni. Invece di mostrare l&#8217;intera struttura:<\/p>\n<pre><code class=\"language-json\">{\n    \"settings\": {\n        \"appearanceTools\": false,\n        \"background\": {\n            \"backgroundImage\": true\n        }\n    }\n}<\/code><\/pre>\n<p>Potremmo abbreviarla in:<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Alcuni esempi sono utilizzati per illustrare i concetti e potrebbero non rappresentare l&#8217;uso pratico nello sviluppo dei temi.<\/p>\n<\/aside>\n.<\/p>\n<h3>Propriet\u00e0 di base<\/h3>\n<p>All&#8217;inizio di un file <code>theme.json<\/code>, in genere si trovano due propriet\u00e0 fondamentali: <code>$schema<\/code> e <code>version<\/code>. Queste propriet\u00e0 sono solitamente collocate all&#8217;inizio del file. La versione attuale dello schema \u00e8 la 3, introdotta con <a href=\"https:\/\/kinqsta.com\/it\/blog\/wordpress-6-6\/\">WordPress 6.6<\/a>.<\/p>\n<pre><code class=\"language-json\">\"$schema\": \"https:\/\/schemas.wp.org\/wp\/6.6\/<code>theme.json<\/code>\", \"version\": 3<\/code><\/pre>\n<h3>Propriet\u00e0 delle impostazioni e degli stili<\/h3>\n<p>Se avete familiarit\u00e0 con i temi classici, considerate le propriet\u00e0 delle impostazioni come caratteristiche e funzioni che generalmente vengono impostate nel file <code><a href=\"https:\/\/kinqsta.com\/it\/blog\/wordpress-functions-php\/\">functions.php<\/a><\/code> ed esposte nella <strong>sezione<\/strong> <strong>Aspetto<\/strong> &gt; <strong>Personalizza<\/strong> dell&#8217;amministrazione di WordPress.<\/p>\n<p>Gli stili, invece, sono simili alle propriet\u00e0 CSS che risiedevano nel file <code>styles.css<\/code> e che controllano il layout e il design del tema.<\/p>\n<h4>Impostazioni<\/h4>\n<p>Ad eccezione delle propriet\u00e0 <code>block<\/code> e <code>elements<\/code>, tutte le altre impostazioni sono globali. Poich\u00e9 molte di queste impostazioni sono booleane, agiscono come levette per attivare o disattivare una funzione dell&#8217;interfaccia utente.<\/p>\n<p>\u00c8 importante notare che non tutti i tasti sono applicabili in ogni contesto. Ad esempio, non \u00e8 possibile consentire agli utenti di impostare un&#8217;altezza minima per un blocco di paragrafi.<\/p>\n<h5>Appearence tools<\/h5>\n<p>Queste impostazioni possono essere attivate collettivamente o singolarmente utilizzando <code>\"appearanceTools\": true<\/code>.<\/p>\n<p>L&#8217;abilitazione di questa funzione espone varie opzioni dell&#8217;interfaccia utente nell&#8217;<a href=\"https:\/\/kinqsta.com\/it\/blog\/full-site-editing-wordpress\/\">editor di WordPress<\/a>, facendo risparmiare tempo agli sviluppatori. Per impostazione predefinita, questi strumenti sono disabilitati (<code>\"appearanceTools\": false<\/code>).<\/p>\n<p>Le opzioni di <code>appearanceTools<\/code> includono:<\/p>\n<ul>\n<li><code>background<\/code>\n<ul>\n<li><code>backgroundImage<\/code>. Permette all&#8217;utente di aggiungere un&#8217;immagine di sfondo ai blocchi.<\/li>\n<li><code>backgroundSize<\/code>. Definisce la modalit\u00e0 di ridimensionamento dell&#8217;immagine di sfondo (coprire, contenere, ecc.).<\/li>\n<\/ul>\n<\/li>\n<li><code>border<\/code>\n<ul>\n<li><code>color<\/code>. Abilita la selezione del colore per i bordi.<\/li>\n<li><code>style<\/code>. Permette all&#8217;utente di scegliere lo stile del bordo (solido, tratteggiato, punteggiato, ecc.).<\/li>\n<li><code>width<\/code>. Controlla lo spessore del bordo.<\/li>\n<li><code>radius<\/code>. Permette agli utenti di impostare angoli arrotondati regolando il raggio del bordo.<\/li>\n<\/ul>\n<\/li>\n<li><code>color<\/code>\n<ul>\n<li><code>link<\/code>. Consente di impostare un colore per i link all&#8217;interno del contenuto.<\/li>\n<li><code>heading<\/code>. Permette agli utenti di definire i colori dei tag di intestazione (<code>&lt;h1&gt;<\/code>, <code>&lt;h2&gt;<\/code>, ecc.).<\/li>\n<li><code>button<\/code>. Controlla il colore dei pulsanti nel tema.<\/li>\n<li><code>caption<\/code>. Permette di impostare un colore personalizzato per le didascalie.<\/li>\n<\/ul>\n<\/li>\n<li><code>dimensions<\/code>\n<ul>\n<li><code>aspectRatio<\/code>. Permette di controllare il rapporto larghezza\/altezza dei blocchi.<\/li>\n<li><code>minHeight<\/code>. Permette di impostare un&#8217;altezza minima per i blocchi.<\/li>\n<\/ul>\n<\/li>\n<li><code>position<\/code>\n<ul>\n<li><code>sticky<\/code>. Permette all&#8217;utente di mettere un blocco in evidenza, ossia che rimanga fisso in posizione durante lo scorrimento.<\/li>\n<\/ul>\n<\/li>\n<li><code>spacing<\/code>\n<ul>\n<li><code>blockGap<\/code>. Controlla la spaziatura tra i blocchi.<\/li>\n<li><code>margin<\/code>. Permette agli utenti di regolare i margini intorno a un blocco.<\/li>\n<li><code>padding<\/code>. Controlla il padding all&#8217;interno di un blocco, definendo lo spazio tra il suo contenuto e il suo bordo.<\/li>\n<\/ul>\n<\/li>\n<li><code>typography<\/code>\n<ul>\n<li><code>lineHeight<\/code>. Permette agli utenti di regolare l&#8217;altezza delle righe (spazio tra le righe di testo) per una migliore leggibilit\u00e0.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Esempio:<\/strong> se volete che gli utenti aggiungano un&#8217;immagine di sfondo mantenendo disabilitati gli altri strumenti di aspetto, usate:<\/p>\n<pre><code class=\"language-json\">\"appearanceTools\": false,\n\"background\": {\n    \"backgroundImage\": true\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/background-img-block.png\" alt=\"L'interfaccia utente risultante che permette agli utenti di aggiungere un'immagine di sfondo a un gruppo blocco\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">L&#8217;interfaccia utente risultante che permette agli utenti di aggiungere un&#8217;immagine di sfondo a un gruppo blocco.<\/figcaption><\/figure>\n<h5>Blocchi<\/h5>\n<p>La propriet\u00e0 <code>blocks<\/code> permette agli utenti di abilitare le impostazioni per ogni blocco, che possono sovrascrivere le impostazioni globali.<\/p>\n<p><strong>Esempio:<\/strong> se <code>appearanceTools<\/code> \u00e8 impostato su <code>false<\/code>, ma volete comunque esporre i controlli dei bordi per un blocco, usate:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n    \"color\": true,\n    \"style\": true,\n    \"width\": true,\n    \"radius\": true\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/border-shadow-block.png\" alt=\"L'interfaccia utente risultante che permette di aggiungere i bordi\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">L&#8217;interfaccia utente risultante che permette di aggiungere i bordi.<\/figcaption><\/figure>\n<h5>Color<\/h5>\n<p>Questa propriet\u00e0 consente agli utenti di impostare opzioni di colore come il colore di sfondo, il colore del testo o i gradienti.<\/p>\n<p>Le opzioni della propriet\u00e0 <code>color<\/code>:<\/p>\n<ul>\n<li><strong><code>background<\/code><\/strong>. Controlla il colore di sfondo dei blocchi o degli elementi.<\/li>\n<li><strong><code>custom<\/code><\/strong>. Abilita o disabilita la possibilit\u00e0 per gli utenti di selezionare colori personalizzati.<\/li>\n<li><strong><code>customDuotone<\/code><\/strong>. Permette agli utenti di applicare filtri duotone personalizzati alle immagini.<\/li>\n<li><strong><code>customGradient<\/code><\/strong>. Abilita le opzioni di sfumatura personalizzate.<\/li>\n<li><strong><code>defaultDuotone<\/code><\/strong>. Fornisce le opzioni di filtro duotono predefinite per le immagini.<\/li>\n<li><strong><code>defaultGradient<\/code><\/strong>. Definisce le opzioni di sfumatura predefinite disponibili per gli utenti.<\/li>\n<li><strong><code>defaultPalette<\/code><\/strong>. Controlla la palette dei colori predefinita del tema.<\/li>\n<li><strong><code>duotone<\/code><\/strong>. Consente i filtri duotono sulle immagini.<\/li>\n<li><strong><code>gradient<\/code><\/strong>. Abilita le opzioni di sfumatura per gli sfondi o altri elementi.<\/li>\n<li><strong><code>link<\/code><\/strong>. Imposta il colore dei link nel tema.<\/li>\n<li><strong><code>text<\/code><\/strong>. Controlla le opzioni di colore del testo.<\/li>\n<li><strong><code>heading<\/code><\/strong>. Imposta i colori degli header (ad esempio, h1, h2, ecc.).<\/li>\n<li><strong><code>button<\/code><\/strong>. Controlla le opzioni di colore dei pulsanti.<\/li>\n<li><strong><code>caption<\/code><\/strong>. Imposta il colore della didascalia per gli elementi multimediali.<\/li>\n<\/ul>\n<p>Vediamo alcuni esempi:<\/p>\n<p><strong>Esempio 1:<\/strong> se volete disabilitare il selettore colore per gli utenti, potete usare la seguente procedura:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n    \"custom\": false\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/disable-color-picker.png\" alt=\"Disabilitare la UI del selettore colore\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Disabilitare la UI del selettore colore.<\/figcaption><\/figure>\n<p><strong>Esempio 2:<\/strong> per impostare i colori primari e secondari del tema, potete usare questa configurazione:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"palette\": [\n       { \"slug\": \"primary\", \"color\": \"#0000ff\", \"name\": \"Primary\" },\n       { \"slug\": \"secondary\", \"color\": \"#ff0000\", \"name\": \"Secondary\" }\n   ]\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/theme-color-setting.png\" alt=\"L'interfaccia utente risultante che imposta i colori del tema primario e secondario\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">L&#8217;interfaccia utente risultante che imposta i colori del tema primario e secondario.<\/figcaption><\/figure>\n<h5>Dimensions<\/h5>\n<p>Questa propriet\u00e0 fornisce opzioni per controllare le dimensioni dei blocchi, come la larghezza, l&#8217;altezza e il rapporto d&#8217;aspetto.<\/p>\n<p>Tasti all&#8217;interno della propriet\u00e0 <code>dimensions<\/code>:<\/p>\n<ul>\n<li><strong><code>aspectRatio<\/code><\/strong>. Permette agli utenti di impostare o bloccare il rapporto di aspetto di un blocco (ad esempio, 16:9, 4:3).<\/li>\n<li><strong><code>defaultAspectRatios<\/code><\/strong>. Definisce le proporzioni predefinite per i blocchi.<\/li>\n<li><strong><code>minHeight<\/code><\/strong>. Abilita la possibilit\u00e0 di impostare un&#8217;altezza minima per i blocchi.<\/li>\n<\/ul>\n<p>Ad esempio, per consentire agli utenti di impostare un&#8217;altezza minima per i blocchi supportati, usate la seguente procedura:<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n    \"minHeight\": true\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/min-height-setting.png\" alt=\"Altezza minima impostata nell'interfaccia utente\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Altezza minima impostata nell&#8217;interfaccia utente.<\/figcaption><\/figure>\n<h5>Layout<\/h5>\n<p>La propriet\u00e0 <code>layout<\/code> permette agli utenti di impostare le opzioni relative al layout, come la larghezza del contenuto e la possibilit\u00e0 di personalizzare il layout. Questo permette agli utenti di impostare le opzioni di layout con questi tasti:<\/p>\n<ul>\n<li><strong><code>contentSize<\/code><\/strong>. Imposta&lt; la larghezza predefinita dei blocchi.<\/li>\n<li><strong><code>wideSize<\/code><\/strong>. Definisce la larghezza dei blocchi quando \u00e8 selezionata l&#8217;opzione di allineamento ampio.<\/li>\n<li><strong><code>allowEditing<\/code><\/strong>. Determina se gli utenti possono modificare le opzioni di layout.<\/li>\n<li><strong><code>allowCustomContentAndWideSize<\/code><\/strong>. Abilita la personalizzazione di <code>contentSize<\/code> e <code>wideSize<\/code>.<\/li>\n<\/ul>\n<p><strong>Esempio<\/strong>: ecco come configurare le impostazioni di layout con la larghezza dei blocchi predefinita e ampia:<\/p>\n<pre><code class=\"language-json\">\"layout\": {\n    \"contentSize\": \"620px\",\n    \"wideSize\": \"1000px\"\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/width-setting.png\" alt=\"Impostazioni di blocco predefinite e di larghezza risultanti\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Impostazioni di blocco predefinite e di larghezza risultanti.<\/figcaption><\/figure>\n<p><aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Questi valori sono punti di partenza che gli utenti possono modificare.<\/p>\n<\/aside>\n.<\/p>\n<h5>Lightbox<\/h5>\n<p>La propriet\u00e0 <code>lightbox<\/code> permette agli utenti di attivare la funzione &#8220;Espandi al clic&#8221; per le immagini, aprendole in una visualizzazione pi\u00f9 grande quando si fa clic.<\/p>\n<p>Opzioni della propriet\u00e0 <code>lightbox<\/code>:<\/p>\n<ul>\n<li><strong><code>enabled<\/code><\/strong>. Attiva o disattiva la funzione lightbox.<\/li>\n<li><strong><code>allowEditing<\/code><\/strong>. Permette agli utenti di attivare l&#8217;impostazione della lightbox.<\/li>\n<\/ul>\n<p><strong>Esempio:<\/strong> per consentire agli utenti di attivare la funzione lightbox per le immagini, usate questa configurazione:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n    \"core\/image\": {\n        \"lightbox\": {\n            \"allowEditing\": true\n        }\n    }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/lightbox-effect-toggle.png\" alt=\"Toggle per l'effetto lightbox esposto\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Toggle per l&#8217;effetto lightbox esposto.<\/figcaption><\/figure>\n<h5>Position<\/h5>\n<p>La propriet\u00e0 <code>position<\/code> permette agli utenti di controllare la posizione dei blocchi, ad esempio per mettere un blocco in evidenza sulla pagina.<\/p>\n<p><strong>Esempio<\/strong>: come mettere un blocco in evidenza:<\/p>\n<pre><code class=\"language-json\">\"position\": {\n    \"sticky\": true\n}<\/code><\/pre>\n<h5>Shadow<\/h5>\n<p>Questa propriet\u00e0 consente agli utenti di applicare effetti d&#8217;ombreggiatura ai blocchi, sia utilizzando preimpostazioni predefinite che ombreggiature definite in modo personalizzato.<\/p>\n<p>Opzioni della propriet\u00e0 <code>shadow<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultPresets<\/code><\/strong>. Attiva o disattiva le preimpostazioni predefinite delle ombreggiature.<\/li>\n<li><strong><code>presets<\/code><\/strong>. Permette agli utenti di definire delle preimpostazioni d&#8217;ombreggiatura personalizzate.<\/li>\n<\/ul>\n<p>Ecco un esempio in cui le ombreggiature predefinite sono disattivate e viene definita un&#8217;ombreggiatura personalizzata denominata &#8220;Natural&#8221;:<\/p>\n<pre><code class=\"language-json\">\"shadow\": {\n    \"defaultPresets\": false,\n    \"presets\": [\n        { \"name\": \"Natural\", \"slug\": \"natural\", \"shadow\": \"6px 6px 9px rgba(0, 0, 0, 0.2)\" }\n    ]\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/shadow-setting.png\" alt=\"SImpostazione delle opzioni di ombreggiatura nell'interfaccia utente\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Impostazione delle opzioni di ombreggiatura nell&#8217;interfaccia utente.<\/figcaption><\/figure>\n<p>I numeri indicano i click effettuati nell&#8217;editor del sito per dimostrare l&#8217;interfaccia utente. L&#8217;ultimo passo mostra l&#8217;ombra &#8220;Natural&#8221;.<\/p>\n<h5>Spacing<\/h5>\n<p>Questa propriet\u00e0 definisce come viene controllata la spaziatura (padding, margine, gap) nell&#8217;editor.<\/p>\n<p>Le opzioni della propriet\u00e0 <code>spacing<\/code>:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code><\/strong>. Controlla lo spazio tra i blocchi.<\/li>\n<li><strong><code>margin<\/code><\/strong>. Permette agli utenti di impostare i margini intorno ai blocchi.<\/li>\n<li><strong><code>padding<\/code><\/strong>. Fornisce opzioni per impostare il padding all&#8217;interno dei blocchi.<\/li>\n<li><strong><code>units<\/code><\/strong>. Definisce le unit\u00e0 di misura disponibili per la spaziatura (ad esempio, px, rem).<\/li>\n<li><strong><code>customSpacingSize<\/code><\/strong>. Permette agli utenti di impostare spaziature personalizzate.<\/li>\n<li><strong><code>spacingSizes<\/code><\/strong>. Definisce una serie di spaziature predefinite.<\/li>\n<li><strong><code>spacingScale<\/code><\/strong>. Permette di scalare le unit\u00e0 di spaziatura.<\/li>\n<\/ul>\n<p><strong>Esempio:<\/strong> per limitare gli utenti a due unit\u00e0 di misura (pixel e rem) per il padding, i margini, le larghezze e le altezze e per esporre i controlli di spaziatura nell&#8217;editor del sito, impostate <code>appearanceTools<\/code> su <code>true<\/code> e configurate in questo modo:<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"units\": [\"px\", \"rem\"]\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/measurement-limit.png\" alt=\"Setting shadow options in the UI\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Limitare l&#8217;uso di 2 unit\u00e0 di misura.<\/figcaption><\/figure>\n<h5>Typography<\/h5>\n<p>Questa propriet\u00e0 controlla le impostazioni relative al testo del vostro tema, come la dimensione, il peso e l&#8217;altezza dei caratteri.<\/p>\n<p>Le opzioni della propriet\u00e0 <code>typography<\/code>:<\/p>\n<ul>\n<li><strong><code>defaultFontSizes<\/code><\/strong>. Definisce le dimensioni predefinite dei caratteri disponibili per gli utenti.<\/li>\n<li><strong><code>customFontSize<\/code><\/strong>. Abilita o disabilita la possibilit\u00e0 di impostare dimensioni personalizzate dei caratteri.<\/li>\n<li><strong><code>fontStyle<\/code><\/strong>. Controlla lo stile del carattere (ad esempio, normale, corsivo).<\/li>\n<li><strong><code>fontWeight<\/code><\/strong>. Permette agli utenti di impostare il peso del font (ad esempio, grassetto, leggero).<\/li>\n<li><strong><code>fluid<\/code><\/strong>. Abilita tipografia fluida, regolando le dimensioni dei caratteri in modo dinamico in base alle dimensioni dello schermo.<\/li>\n<li><strong><code>letterSpacing<\/code><\/strong>. Controlla la spaziatura tra le lettere.<\/li>\n<li><strong><code>lineHeight<\/code><\/strong>. Imposta l&#8217;altezza di ogni riga di testo.<\/li>\n<li><strong><code>textAlign<\/code><\/strong>. Permette di controllare l&#8217;allineamento del testo (ad esempio, a sinistra, al centro, a destra).<\/li>\n<li><strong><code>textDecoration<\/code><\/strong>. Fornisce opzioni per la decorazione del testo (ad esempio, sottolineatura).<\/li>\n<li><strong><code>writingMode<\/code><\/strong>. Imposta la modalit\u00e0 di scrittura del testo (ad esempio, orizzontale o verticale).<\/li>\n<\/ul>\n<p><strong>Esempio<\/strong>: per disabilitare sia le dimensioni personalizzate dei caratteri che le opzioni di DropCap, usate la seguente procedura:<\/p>\n<pre><code class=\"language-json\">\"typography\": {\n    \"customFontSize\": false,\n    \"dropCap\": false\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/font-size-drop-cap-options.png\" alt=\"Rimozione delle opzioni di dimensione dei caratteri personalizzati e DropCap\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Rimozione delle opzioni di dimensione dei caratteri personalizzati e DropCap.<\/figcaption><\/figure>\n<p>In questo caso, entrambe le opzioni evidenziate <strong>non<\/strong> appariranno nell&#8217;editor.<\/p>\n<h5>Root padding aware alignments<\/h5>\n<p>Se impostata su <code>true<\/code>, questa propriet\u00e0 assicura che gli allineamenti dei blocchi larghi o a tutta larghezza siano consapevoli del padding applicato all&#8217;elemento root della pagina (ad esempio, <code>&lt;html&gt;<\/code> o <code>&lt;body&gt;<\/code>), garantendo un allineamento corretto anche quando viene applicato il padding.<\/p>\n<p><strong>Esempio:<\/strong><\/p>\n<pre><code class=\"language-json\">\"useRootPaddingAwareAlignments\": true<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Per impostazione predefinita, questa propriet\u00e0 \u00e8 impostata su <code>false<\/code>, con il risultato di un design senza spaziature.<\/p>\n<\/aside>\n\n<p>Quando \u00e8 impostata su <code>true<\/code>, \u00e8 anche necessario definire i valori del padding superiore, destro, inferiore e sinistro della root come stile. (Maggiori informazioni sulle propriet\u00e0 di stile sono riportate di seguito).<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n    \"padding\": {\n        \"top\": \"0\",\n        \"right\": \"100px\",\n        \"bottom\": \"0\",\n        \"left\": \"100px\"\n    }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/use-root-padding-aware-alignments-default.png\" alt=\"Il valore predefinito di useRotPaddingAwareAignments\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Il valore predefinito useRotPaddingAwareAignments.<\/figcaption><\/figure>\n<p>Applicando l&#8217;impostazione <code>useRootPaddingAwareAlignements<\/code> insieme al padding destro e sinistro al corpo (come nel codice precedente) si ottiene il seguente risultato.<\/p>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/alignment-padding.png\" alt=\"Applicare il padding destro e sinistro quando useRootPaddingAwareAlignments \u00e8 impostato su true\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Applicare il padding destro e sinistro quando useRootPaddingAwareAlignments \u00e8 impostato su true.<\/figcaption><\/figure>\n<h4>Styles<\/h4>\n<p>La propriet\u00e0 <code>styles<\/code> permette di applicare stili CSS alla root (predefinita), a elementi specifici o a singoli blocchi del vostro tema.<\/p>\n<h5>Stili di sfondo<\/h5>\n<p>Potete controllare le propriet\u00e0 relative allo sfondo, come le immagini, il posizionamento e gli allegati.<\/p>\n<p>Opzioni comuni per lo sfondo:<\/p>\n<ul>\n<li><strong><code>backgroundImage<\/code><\/strong>. Definisce l&#8217;immagine di sfondo per il blocco o l&#8217;elemento.<\/li>\n<li><strong><code>backgroundPosition<\/code><\/strong>. Imposta la posizione dell&#8217;immagine di sfondo (ad esempio, al centro, in alto a destra).<\/li>\n<li><strong><code>backgroundRepeat<\/code><\/strong>. Specifica se l&#8217;immagine di sfondo si ripete (ad esempio, repeat, no-repeat).<\/li>\n<li><strong><code>backgroundSize<\/code><\/strong>. Controlla dimensioni dell&#8217;immagine di sfondo (es. copertura, contenuto).<\/li>\n<li><strong><code>backgroundAttachment<\/code><\/strong>. Specifica se l&#8217;immagine di sfondo \u00e8 fissa o scorre con la pagina.<\/li>\n<\/ul>\n<p>Ad esempio, potete impostare un&#8217;immagine di sfondo per il vostro tema:<\/p>\n<pre><code class=\"language-json\">\"background\": {\n   \"backgroundImage\": {\n       \"url\": \"https:\/\/joyofwp.com\/wp-content\/uploads\/2024\/09\/dots.png\"\n   }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/bg-style-page.png\" alt=\"Aggiunge uno stile di immagine di sfondo a tutte le pagine\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Aggiunge uno stile di immagine di sfondo a tutte le pagine.<\/figcaption><\/figure>\n<h5>Stili specifici per blocchi<\/h5>\n<p>Potete applicare stili specifici, come ombreggiature, tipografia e bordi, a singoli blocchi.<\/p>\n<p>Opzioni per il bordo:<\/p>\n<ul>\n<li><strong><code>color<\/code><\/strong>. Definisce il colore del bordo.<\/li>\n<li><strong><code>radius<\/code><\/strong>. Imposta il raggio del bordo per gli angoli arrotondati.<\/li>\n<li><strong><code>style<\/code><\/strong>. Specifica lo stile del bordo (ad esempio, solido, punteggiato).<\/li>\n<li><strong><code>width<\/code><\/strong>. Controlla la larghezza del bordo.<\/li>\n<li><strong><code>top<\/code>, <code>right<\/code>, <code>bottom<\/code>, <code>left<\/code><\/strong>. Permette di impostare stili di bordo individuali per ogni lato.<\/li>\n<\/ul>\n<p>Ad esempio, il seguente esempio imposta un bordo rosso solido di 20px intorno all&#8217;intera pagina:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/add-border-styles.png\" alt=\"Aggiunta di uno stile di bordo a tutte le pagine\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Aggiunta di uno stile di bordo a tutte le pagine.<\/figcaption><\/figure>\n<p>Potete anche assegnare un CSS personalizzato a un blocco specifico, a un elemento o alla root.<br \/>\nAd esempio, il codice qui sotto applica un colore di testo rosso a un blocco tabella:<\/p>\n<pre><code class=\"language-json\">\"border\": {\n   \"color\": \"#ff0000\",\n   \"width\": \"20px\",\n   \"style\": \"solid\"\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/add-text-color-tables.png\" alt=\"Aggiunta di uno stile di colore del testo a tutte le tabelle\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Aggiunta di uno stile di colore del testo a tutte le tabelle.<\/figcaption><\/figure>\n<h5>Stili di colore<\/h5>\n<p>La propriet\u00e0 color permette di controllare le impostazioni dei colori di sfondo, sfumatura e testo.<br \/>\nOpzioni per <code>color<\/code>:<\/p>\n<ul>\n<li><code>background<\/code>. Imposta il colore di sfondo del blocco o dell&#8217;elemento.<\/li>\n<li><code>gradient<\/code>. Definisce un gradiente di sfondo per il blocco.<\/li>\n<li><code>text<\/code>. Controlla il colore del testo.<\/li>\n<\/ul>\n<p>L&#8217;esempio seguente imposta uno sfondo nero con testo bianco su ogni elemento per ogni pagina:<\/p>\n<pre><code class=\"language-json\">\"color\": {\n   \"background\": \"#000000\",\n   \"text\": \"#ffffff\"\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/text-bg-styling.png\" alt=\"Setting text and background color styling to all pages\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Impostazione dello stile del testo e del colore di sfondo per tutte le pagine.<\/figcaption><\/figure>\n<h5>CSS<\/h5>\n<p>La propriet\u00e0 <code>css<\/code> permette di associare stili personalizzati a classi specifiche, consentendo un controllo pi\u00f9 granulare sugli stili del tema.<\/p>\n<p><strong>Esempio<\/strong>: \u00e8 possibile applicare stili personalizzati a <code>wp-block-template-parts<\/code> e <code>wp-block-button<\/code> e aggiungere un effetto hover per il pulsante:<\/p>\n<pre><code class=\"language-json\">\"css\": \".wp-block-template-part { background-color: #777777; padding: 20px; } .wp-block-button__link:hover { background-color: #ffffff; color: #000000; }\"<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/btn-hover-style.png\" alt=\"Mostrare tutti i pulsanti dell'header con uno stato hover per il testo e gli stili di sfondo\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Mostrare tutti i pulsanti dell&#8217;header con uno stato hover per il testo e gli stili di sfondo.<\/figcaption><\/figure>\n<p>Come potete vedere, alle parti di template dell&#8217;header e del footer sono assegnati <code>background-color<\/code> e <code>padding<\/code>, mentre lo stato hover del pulsante ha uno sfondo bianco con testo nero.<\/p>\n<h5>Dimensions<\/h5>\n<p>La propriet\u00e0 <code>dimensions<\/code> permette di controllare la larghezza, l&#8217;altezza e il <a href=\"https:\/\/developer.wordpress.org\/news\/2024\/08\/05\/registering-custom-aspect-ratios-in-wordpress-6-6\/\" target=\"_blank\" rel=\"noopener noreferrer\">rapporto di aspetto<\/a> dei blocchi.<\/p>\n<p>Opzioni per la propriet\u00e0 dimensions:<\/p>\n<ul>\n<li><strong><code>aspectRatios<\/code><\/strong>: Definisce rapporti di aspetto personalizzati per gli elementi.<\/li>\n<li><strong><code>minHeight<\/code><\/strong>: Imposta l&#8217;altezza minima dei blocchi.<\/li>\n<\/ul>\n<p><strong>Esempio<\/strong>: ecco come creare un rapporto di aspetto personalizzato di 3:7 per un blocco immagine:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"dimensions\": {\n           \"aspectRatio\": \"custom\"\n       }\n   }\n}<\/code><\/pre>\n<p>Tuttavia, quanto detto sopra non \u00e8 sufficiente. \u00c8 necessario registrare lo stile &#8220;personalizzato&#8221; nelle sezioni delle impostazioni.<\/p>\n<pre><code class=\"language-json\">\"dimensions\": {\n   \"defaultAspectRatios\": true,\n   \"aspectRatios\": [\n       {\n           \"name\": \"Custom Ratio 3:7\",\n           \"slug\": \"custom\",\n           \"ratio\": \"3\/7\"\n       }\n   ]\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/image-custom-ratio.png\" alt=\"Aggiunta di un'opzione di styling del rapporto personalizzato per tutte le immagini\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Aggiunta di un&#8217;opzione di styling del rapporto personalizzato per tutte le immagini.<\/figcaption><\/figure>\n<p>Qui potete vedere che \u00e8 stata aggiunta l&#8217;opzione &#8220;Rapporto personalizzato&#8221;. Se preferite rimuovere i sette rapporti di aspetto predefiniti, rimuovete <code>\"defaultAspectRatios\":true<\/code> dalla sezione delle impostazioni.<\/p>\n<h5>Stili specifici per gli elementi<\/h5>\n<p>La propriet\u00e0 <code>elements<\/code> permette di applicare stili a elementi HTML specifici come link, pulsanti o titoli.<\/p>\n<p>Ad esempio, il codice sottostante disattiva la decorazione del testo (sottolineatura) per tutti i link:<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"link\": {\n       \"typography\": {\n           \"textDecoration\": \"none\"\n       }\n   }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/disable-text-decoration.png\" alt=\"Disabilitazione dello stile di decorazione del testo per i link\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Disabilitazione dello stile di decorazione del testo per i link.<\/figcaption><\/figure>\n<h5>Filter<\/h5>\n<p>La propriet\u00e0 <code>filter<\/code> permette di applicare effetti filtro simili a quelli dei CSS (ad es. sfocatura, luminosit\u00e0) a determinati blocchi come le immagini.<\/p>\n<p><strong>Esempio:<\/strong> applichiamo un filtro di sfocatura e luminosit\u00e0 a un blocco immagine:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"filter\": {\n           \"duotone\": \"blur(5px) brightness(0.8)\"\n       }\n   }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/blur-image.png\" alt=\"Aggiunta di uno stile di sfocatura a tutte le immagini\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Aggiunta di uno stile di sfocatura a tutte le immagini.<\/figcaption><\/figure>\n<p>Qui sono stati applicati gli effetti di sfocatura e luminosit\u00e0 al blocco immagine. Altri valori di filtro disponibili sono:<\/p>\n<ul>\n<li><strong><code>contrast<\/code><\/strong>: Regola il contrasto dell&#8217;elemento.<\/li>\n<li><strong><code>grayscale<\/code><\/strong>: Converte l&#8217;elemento in scala di grigi.<\/li>\n<li><strong><code>invert<\/code><\/strong>: Inverte i colori dell&#8217;elemento.<\/li>\n<li><strong><code>opacity<\/code><\/strong>: Controlla la trasparenza dell&#8217;elemento.<\/li>\n<li><strong><code>saturate<\/code><\/strong>: Aumenta o diminuisce la saturazione dei colori.<\/li>\n<li><strong><code>sepia<\/code><\/strong>: Applica un tono seppia all&#8217;elemento.<\/li>\n<\/ul>\n<h5>Outline<\/h5>\n<p>La propriet\u00e0 <code>outline<\/code> definisce gli stili per i contorni disegnati al di fuori del bordo dell&#8217;elemento, senza influenzare lo spazio del layout.<\/p>\n<p>Opzioni per la propriet\u00e0 outline:<\/p>\n<ul>\n<li><strong><code>color<\/code><\/strong>: Imposta il colore del contorno.<\/li>\n<li><strong><code>offset<\/code><\/strong>: Controlla lo spazio tra il bordo e il contorno.<\/li>\n<li><strong><code>style<\/code><\/strong>: Specifica lo stile del contorno (ad esempio, tratteggiato, solido).<\/li>\n<li><strong><code>width<\/code><\/strong>: Imposta la larghezza del contorno.<\/li>\n<\/ul>\n<p><strong>Esempio<\/strong>: come applicare un contorno tratteggiato rosso a un pulsante:<\/p>\n<pre><code class=\"language-json\">\"elements\": {\n   \"button\": {\n       \"outline\": {\n           \"color\": \"#ff0000\",\n           \"style\": \"dotted\",\n           \"width\": \"4px\"\n       }\n   }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/button-outline-style.png\" alt=\"Aggiungere uno stile di contorno a tutti i pulsanti\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Aggiungere uno stile di contorno a tutti i pulsanti.<\/figcaption><\/figure>\n<h5>Stili ombreggiatura<\/h5>\n<p>La propriet\u00e0 <code>shadow<\/code> permette di applicare ombreggiature ai blocchi, aggiungendo profondit\u00e0 ed enfasi agli elementi.<\/p>\n<p><strong>Esempio<\/strong>: come applicare un&#8217;ombra a tutte le immagini<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/image\": {\n       \"shadow\": \"0 10px 20px 0 rgb(0 0 225 \/ 0.50)\"\n   }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/shadow-image.png\" alt=\"Aggiunge un'ombreggiatura a tutte le immagini\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Aggiunge un&#8217;ombreggiatura a tutte le immagini.<\/figcaption><\/figure>\n<h5>Stili di spaziatura<\/h5>\n<p>La propriet\u00e0 <code>spacing<\/code> gestisce gli stili di padding, margine e spaziatura del blocco per il vostro tema.<\/p>\n<p>Opzioni per la spaziatura:<\/p>\n<ul>\n<li><strong><code>blockGap<\/code> <\/strong>-Controlla lo spazio tra i blocchi.<\/li>\n<li><strong><code>margin<\/code> <\/strong>-Imposta i margini intorno ai blocchi.<\/li>\n<li><strong><code>padding<\/code> <\/strong>-Controlla il padding all&#8217;interno dei blocchi.<\/li>\n<\/ul>\n<p>L&#8217;esempio seguente imposta un padding personalizzato sui lati destro e sinistro:<\/p>\n<pre><code class=\"language-json\">\"spacing\": {\n   \"padding\": {\n       \"left\": \"min(6.5rem, 8vw)\",\n       \"right\": \"min(6.5rem, 8vw)\"\n   }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/left-right-padding.png\" alt=\"Aggiunge il padding a destra e a sinistra\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Aggiunge il padding a destra e a sinistra.<\/figcaption><\/figure>\n<h5>Stili tipografici<\/h5>\n<p>La propriet\u00e0 <code>typography<\/code> gestisce gli stili dei caratteri, le dimensioni e altre impostazioni relative al testo.<\/p>\n<p>Opzioni comuni per la tipografia:<\/p>\n<ul>\n<li><strong><code>fontFamily<\/code><\/strong>. Imposta la famiglia di caratteri per il testo.<\/li>\n<li><strong><code>fontSize<\/code><\/strong>. Definisce la dimensione del carattere.<\/li>\n<li><strong><code>fontStyle<\/code><\/strong>. Specifica lo stile del carattere (ad esempio, corsivo, normale).<\/li>\n<li><strong><code>fontWeight<\/code><\/strong>. Controlla il peso (spessore) del carattere.<\/li>\n<li><strong><code>letterSpacing<\/code><\/strong>. Regola la spaziatura tra le lettere.<\/li>\n<li><strong><code>lineHeight<\/code><\/strong>. Definisce l&#8217;altezza della linea (spaziatura tra le righe di testo).<\/li>\n<li><strong><code>textAlign<\/code><\/strong>. Imposta l&#8217;allineamento del testo (ad esempio, sinistra, centro, destra).<\/li>\n<li><strong><code>textColumns<\/code><\/strong>. Controlla il numero di colonne di testo.<\/li>\n<li><strong><code>textDecoration<\/code><\/strong>. Imposta la decorazione del testo (ad esempio, la sottolineatura).<\/li>\n<li><strong><code>writingMode<\/code><\/strong>. Definisce la modalit\u00e0 di scrittura (ad esempio, orizzontale, verticale).<\/li>\n<li><strong><code>textTransform<\/code><\/strong>. Controlla la trasformazione del testo (ad esempio, maiuscolo, minuscolo).<\/li>\n<\/ul>\n<p>Ad esempio, potete impostare tutti i titoli con un peso del carattere di 300 e uno stile corsivo:<\/p>\n<pre><code class=\"language-json\">\"blocks\": {\n   \"core\/heading\": {\n       \"typography\": {\n           \"fontWeight\": \"300\",\n           \"fontStyle\": \"italic\"\n       }\n   }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/heading-style.png\" alt=\"Tutti i titoli includono le propriet\u00e0 di stile corsivo e peso\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Tutti i titoli includono le propriet\u00e0 di stile corsivo e peso.<\/figcaption><\/figure>\n<h3>Propriet\u00e0 template e pattern<\/h3>\n<p>Queste tre propriet\u00e0 di primo livello sono utilizzate per registrare le risorse personalizzate nel vostro tema.<\/p>\n<h4>1. Template personalizzati<\/h4>\n<p>La propriet\u00e0 <code>templates<\/code> \u00e8 utilizzata per registrare template personalizzati per vari tipi di post.<\/p>\n<ul>\n<li><strong><code>name<\/code><\/strong>. Il nome del file <code>.html<\/code> o <code>.php<\/code> che si trova nella sottodirectory <code>templates<\/code>.<\/li>\n<li><strong><code>title<\/code><\/strong>. Il titolo che verr\u00e0 assegnato al template per facilitarne l&#8217;identificazione.<\/li>\n<li><strong><code>postTypes<\/code><\/strong>. Specifica il tipo di contenuto (ad esempio, post, pagine) che il template deve rendere.<\/li>\n<\/ul>\n<h4>2. Parti del template<\/h4>\n<p>La propriet\u00e0 <code>templateParts<\/code> \u00e8 utilizzata per definire le parti riutilizzabili dei template (ad esempio, header e footer).<\/p>\n<ul>\n<li><strong><code>name<\/code><\/strong>. Il nome del file <code>.html<\/code> o <code>.php<\/code> situato nella sottodirectory <code>parts<\/code>.<\/li>\n<li><strong><code>title<\/code><\/strong>. Il titolo dato alla parte del template per facilitarne l&#8217;identificazione.<\/li>\n<li><strong><code>area<\/code><\/strong>. Specifica a quale parte della pagina si applica il template (ad esempio, <code>header<\/code>, <code>footer<\/code>, <code>sidebar<\/code>).<\/li>\n<\/ul>\n<h4>3. Pattern<\/h4>\n<p>La propriet\u00e0 <code>patterns<\/code> permette di registrare un array di pattern dalla directory dei pattern di WordPress, rendendoli disponibili nel tema.<\/p>\n<p>Ecco come registrare un pattern:<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n    \"my-custom-pattern-slug\"\n]<\/code><\/pre>\n<h2>Tre esempi pratici di lavoro con theme.json<\/h2>\n<p>Ecco alcune cose che potreste voler fare per un tema che state sviluppando.<\/p>\n<h3>1. Aggiungere un pattern<\/h3>\n<p>Ecco come includere due pattern dalla directory dei pattern di WordPress. Qui \u00e8 mostrato il pattern &#8220;Galleria di immagini di copertina a schermo intero&#8221;:<\/p>\n<pre><code class=\"language-json\">\"patterns\": [\n   \"fullscreen-cover-image-gallery\",\n   \"hero-banner-with-overlap-images\"\n]<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/pattern-wordpress.png\" alt=\"Inserimento di un pattern da wordpress.org\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Inserimento di un pattern da wordpress.org.<\/figcaption><\/figure>\n<p><strong>Note:<\/strong><\/p>\n<ul>\n<li>I pattern prelevati dalla directory <strong>Patterns<\/strong> non verranno visualizzati nella sezione <strong>Pattern<\/strong> dell&#8217;editor del sito. Questi pattern saranno disponibili solo attraverso il <strong>Pannello di inserimento<\/strong>.<\/li>\n<li>In questo esempio, includiamo la propriet\u00e0 di primo livello <code>patterns<\/code> (rispetto a <code>settings<\/code> e <code>styles<\/code>, che abbiamo omesso negli esempi precedenti per brevit\u00e0).<\/li>\n<\/ul>\n<h3>2. Aggiungere un font personalizzato<\/h3>\n<p>Abbiamo scaricato due file di font (<code>Roboto-Regular.ttf<\/code> e <code>Roboto-Bold.ttf<\/code>) dalla libreria <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Fonts<\/a> e li abbiamo caricati nella sottodirectory <code>assets\/fonts\/<\/code> del nostro tema.<\/p>\n<p>Il codice seguente registra entrambi i font e li rende disponibili per tutto il sito:<\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"typography\": {\n       \"fontFamilies\": [\n           {\n               \"fontFamily\": \"Roboto\",\n               \"name\": \"Roboto\",\n               \"slug\": \"roboto\",\n               \"fontFace\": [\n                   {\n                       \"fontFamily\": \"Roboto Regular\",\n                       \"fontWeight\": \"400\",\n                       \"fontStyle\": \"normal\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Regular.ttf\"\n                       ]\n                   },\n                   {\n                       \"fontFamily\": \"Roboto Bold\",\n                       \"fontWeight\": \"700\",\n                       \"fontStyle\": \"bold\",\n                       \"src\": [\n                           \"file.\/assets\/fonts\/Roboto-Bold.ttf\"\n                       ]      \n                   }  \n               ]\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/google-font.png\" alt=\"Inclusione di un font Google\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Inclusione di un font Google.<\/figcaption><\/figure>\n<h3>3. Impostazione della palette dei colori<\/h3>\n<p>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).<\/p>\n<p><strong>Esempio:<\/strong><\/p>\n<pre><code class=\"language-json\">\"settings\": {\n   \"color\": {\n       \"custom\": false,\n       \"defaultPalette\": false,\n       \"palette\": [\n           {\n               \"slug\": \"primary\",\n               \"color\": \"#1e8cbe\",\n               \"name\": \"Primary\"\n           },\n           {\n               \"slug\": \"secondary\",\n               \"color\": \"#21759b\",\n               \"name\": \"Secondary\"\n           },\n           {\n               \"slug\": \"tertiary\",\n               \"color\": \"#\",\n               \"name\": \"Tertiary\"\n           },\n           {\n               \"slug\": \"accent\",\n               \"color\": \"#464646\",\n               \"name\": \"Accent\"\n           }\n       ]\n   }\n}<\/code><\/pre>\n<figure id=\"attachment_105526\" aria-describedby=\"caption-attachment-105526\" style=\"width: 1001px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/10\/custom-theme-colors.png\" alt=\"Dimostrazione dei colori del tema personalizzato\" width=\"1001\" height=\"471\"><figcaption id=\"caption-attachment-105526\" class=\"wp-caption-text\">Colori del tema personalizzato.<\/figcaption><\/figure>\n<p>Riconoscete questi quattro colori? Fanno parte della storia dei colori di WordPress.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Questo articolo mette in evidenza il ruolo fondamentale di <code>theme.json<\/code> nello sviluppo di temi WordPress moderni. Imparando a conoscere <code>theme.json<\/code>, potrete personalizzare completamente il design visivo e l&#8217;interfaccia utente del vostro tema senza dover ricorrere a complesse sovrascritture <a href=\"https:\/\/kinqsta.com\/it\/blog\/cosa-e-php\/\">PHP<\/a> o CSS.<\/p>\n<p>Capire come usare in modo efficace propriet\u00e0 come <code>appearanceTools<\/code> 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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Comprendere la struttura e le propriet\u00e0 del file theme.json \u00e8 fondamentale per lo sviluppo dei temi a blocchi. Questo file \u00e8 l&#8217;hub di configurazione principale per &#8230;<\/p>\n","protected":false},"author":313,"featured_media":79608,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25873,25957],"class_list":["post-79607","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-sviluppo-wordpress","topic-temi-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json<\/title>\n<meta name=\"description\" content=\"Lavora con le propriet\u00e0 e le coppie chiave-valore in theme.json per personalizzare le impostazioni e gli stili dei temi a blocchi di WordPress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json\" \/>\n<meta property=\"og:description\" content=\"Lavora con le propriet\u00e0 e le coppie chiave-valore in theme.json per personalizzare le impostazioni e gli stili dei temi a blocchi di WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-18T09:02:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-18T14:55:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bud Kraus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lavora con le propriet\u00e0 e le coppie chiave-valore in theme.json per personalizzare le impostazioni e gli stili dei temi a blocchi di WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bud Kraus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"29 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/\"},\"author\":{\"name\":\"Bud Kraus\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\"},\"headline\":\"Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json\",\"datePublished\":\"2024-11-18T09:02:55+00:00\",\"dateModified\":\"2024-11-18T14:55:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/\"},\"wordCount\":3916,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/\",\"url\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/\",\"name\":\"Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"datePublished\":\"2024-11-18T09:02:55+00:00\",\"dateModified\":\"2024-11-18T14:55:31+00:00\",\"description\":\"Lavora con le propriet\u00e0 e le coppie chiave-valore in theme.json per personalizzare le impostazioni e gli stili dei temi a blocchi di WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"contentUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sviluppo di WordPress\",\"item\":\"https:\/\/kinqsta.com\/it\/argomenti\/sviluppo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/it\/#website\",\"url\":\"https:\/\/kinqsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed\",\"name\":\"Bud Kraus\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinqsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g\",\"caption\":\"Bud Kraus\"},\"description\":\"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.\",\"url\":\"https:\/\/kinqsta.com\/it\/blog\/author\/budkraus\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json","description":"Lavora con le propriet\u00e0 e le coppie chiave-valore in theme.json per personalizzare le impostazioni e gli stili dei temi a blocchi di WordPress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/","og_locale":"it_IT","og_type":"article","og_title":"Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json","og_description":"Lavora con le propriet\u00e0 e le coppie chiave-valore in theme.json per personalizzare le impostazioni e gli stili dei temi a blocchi di WordPress.","og_url":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-11-18T09:02:55+00:00","article_modified_time":"2024-11-18T14:55:31+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","type":"image\/png"}],"author":"Bud Kraus","twitter_card":"summary_large_image","twitter_description":"Lavora con le propriet\u00e0 e le coppie chiave-valore in theme.json per personalizzare le impostazioni e gli stili dei temi a blocchi di WordPress.","twitter_image":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json-1024x512.png","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Bud Kraus","Tempo di lettura stimato":"29 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/"},"author":{"name":"Bud Kraus","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed"},"headline":"Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json","datePublished":"2024-11-18T09:02:55+00:00","dateModified":"2024-11-18T14:55:31+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/"},"wordCount":3916,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/","url":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/","name":"Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json","isPartOf":{"@id":"https:\/\/kinqsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","datePublished":"2024-11-18T09:02:55+00:00","dateModified":"2024-11-18T14:55:31+00:00","description":"Lavora con le propriet\u00e0 e le coppie chiave-valore in theme.json per personalizzare le impostazioni e gli stili dei temi a blocchi di WordPress.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#primaryimage","url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","contentUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/11\/working-with-properties-and-key-value-pairs-in-theme.json.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/it\/blog\/proprieta-coppie-chiave-theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Sviluppo di WordPress","item":"https:\/\/kinqsta.com\/it\/argomenti\/sviluppo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Lavorare con le propriet\u00e0 e le coppie chiave-valore in theme.json"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/it\/#website","url":"https:\/\/kinqsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinqsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/8cce3d6bbd8a2aa46850235d997793ed","name":"Bud Kraus","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinqsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4720f5a00a3f527eda2576d524728bc2?s=96&d=mm&r=g","caption":"Bud Kraus"},"description":"Bud Kraus has been working with WordPress as an in-class and online instructor, site developer, and content creator since 2009. He has produced instructional videos and written many articles for WordPress businesses.","url":"https:\/\/kinqsta.com\/it\/blog\/author\/budkraus\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/79607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/users\/313"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/comments?post=79607"}],"version-history":[{"count":5,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/79607\/revisions"}],"predecessor-version":[{"id":79613,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/posts\/79607\/revisions\/79613"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79607\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79607\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79607\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79607\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79607\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79607\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79607\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79607\/translations\/es"},{"href":"https:\/\/kinqsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79607\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/media\/79608"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/media?parent=79607"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/tags?post=79607"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/it\/wp-json\/wp\/v2\/topic?post=79607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}