{"id":79182,"date":"2024-10-01T15:28:36","date_gmt":"2024-10-01T14:28:36","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=79182&#038;preview=true&#038;preview_id=79182"},"modified":"2024-10-02T12:44:16","modified_gmt":"2024-10-02T11:44:16","slug":"proprieta-css-personalizzate-theme-json","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/","title":{"rendered":"Sviluppare propriet\u00e0 personalizzate CSS con theme.json per migliorare i temi di WordPress"},"content":{"rendered":"<p>Gli sviluppatori di temi WordPress possono utilizzare un file <code>theme.json<\/code> per semplificare un processo che in passato si basava in gran parte su PHP. Tuttavia, potete sempre utilizzare le vostre competenze in HTML, JavaScript e PHP per creare i vostri temi, e i CSS non fanno eccezione. Infatti, \u00e8 possibile utilizzare le propriet\u00e0 personalizzate CSS all&#8217;interno di <code>theme.json<\/code>. Questo pu\u00f2 migliorare la fase di progettazione e offrire una maggiore flessibilit\u00e0.<\/p>\n<p>In questa guida affronteremo le propriet\u00e0 personalizzate CSS per scoprire come funzionano con WordPress e <code>theme.json<\/code>. Ma prima di arrivare a questo punto, facciamo un riepilogo delle caratteristiche del file theme.json, del Full Site Editing (FSE) e di come i CSS si inseriscono in questo nuovo approccio alla progettazione.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Come funziona theme.json con WordPress<\/h2>\n<p>Il file <code>theme.json<\/code> \u00e8 apparso per la prima volta con <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-5-8\/\">WordPress 5.8<\/a>. Si tratta di un modo rivoluzionario di progettare i temi di WordPress, utilizzando la sintassi JSON per <a href=\"https:\/\/kinsta.com\/it\/blog\/theme-json\/\">costruire un file di configurazione<\/a>. WordPress lo legge e applica i risultati senza bisogno di <a href=\"https:\/\/kinsta.com\/it\/blog\/tutorial-php\/\">PHP<\/a>, <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-css\/\">CSS<\/a> o <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-javascript\/\">JavaScript<\/a>.<\/p>\n<figure id=\"attachment_184933\" aria-describedby=\"caption-attachment-184933\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184933\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/theme-json.png\" alt=\"Una finestra dell'editor di codice che mostra il contenuto del file theme.json di un tema WordPress. La struttura JSON definisce le impostazioni del tema, comprese le versioni dello schema, i pattern e le impostazioni dei colori. Sullo sfondo \u00e8 visibile un paesaggio panoramico con montagne, foreste e campi terrazzati.\" width=\"1200\" height=\"705\"><figcaption id=\"caption-attachment-184933\" class=\"wp-caption-text\">Un file <strong>theme.json<\/strong> all&#8217;interno di un editor di codice.<\/figcaption><\/figure>\n<p>Le <a href=\"https:\/\/kinsta.com\/it\/blog\/full-site-editing-wordpress\/\">impostazioni globali e gli stili<\/a> di FSE controllano vari aspetti visivi del tema. Possono includere le tipiche palette di colori e la tipografia, ma anche le opzioni di layout e gli stili dei singoli blocchi ed elementi.<\/p>\n<p>Sebbene il FSE sia intuitivo, potente, adattabile e facile da usare, <code>theme.json<\/code> pu\u00f2 aiutare a colmare il divario tra l&#8217;utente finale e lo sviluppatore. Quasi tutte le opzioni offerte da <code>theme.json<\/code> sono visibili anche nell&#8217;Editor del sito.<\/p>\n<figure id=\"attachment_184932\" aria-describedby=\"caption-attachment-184932\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184932\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/site-editor-interface.png\" alt=\"L'interfaccia dell'editor del sito WordPress, che mostra la pagina iniziale di un sito web sul lato destro dello schermo, mentre la barra laterale nera di sinistra offre opzioni per la navigazione, gli stili, le pagine, i modelli e gli schemi.\" width=\"1200\" height=\"750\"><figcaption id=\"caption-attachment-184932\" class=\"wp-caption-text\">L&#8217;interfaccia principale dell&#8217;editor del sito di WordPress.<\/figcaption><\/figure>\n<p>L&#8217;utilizzo di <code>theme.json<\/code> offre molti vantaggi nella <a href=\"https:\/\/kinsta.com\/it\/blog\/tema-react-wordpress\/\">creazione di temi WordPress<\/a>. I motivi sono molteplici:<\/p>\n<ul>\n<li>Costituisce una posizione centrale per la configurazione del design del tema, il che rende pi\u00f9 facile la gestione e l&#8217;aggiornamento.<\/li>\n<li>C&#8217;\u00e8 meno confusione tra l&#8217;esperienza front-end, l&#8217;editor del sito e la base di codice del tema.<\/li>\n<li>L&#8217;utilizzo di <code>theme.json<\/code> offre compatibilit\u00e0 con il futuro dello sviluppo e del design di WordPress.<\/li>\n<li>Le funzionalit\u00e0 integrate di WordPress riducono la necessit\u00e0 per l&#8217;utente di applicare CSS personalizzati.<\/li>\n<\/ul>\n<p>Vediamo come <code>theme.json<\/code> si collega alle impostazioni globali e agli stili del FSE.<\/p>\n<h3>Un&#8217;introduzione alle impostazioni globali e agli stili del FSE<\/h3>\n<p>Il FSE rappresenta una nuova era nello sviluppo di temi WordPress e le impostazioni globali e gli stili sono in prima linea. Permettono agli utenti di personalizzare quasi ogni elemento dell&#8217;aspetto di un sito attraverso la funzionalit\u00e0 dell&#8217;Editor del sito.<\/p>\n<figure id=\"attachment_184929\" aria-describedby=\"caption-attachment-184929\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184929\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/global-settings-styles.png\" alt=\"L'editor del sito WordPress mostra i campi di immissione del pannello Stili nella barra laterale destra. Consente di apportare modifiche alle impostazioni tipografiche. Il lato sinistro mostra una vista parziale di una pagina web a tema blu.\" width=\"1200\" height=\"863\"><figcaption id=\"caption-attachment-184929\" class=\"wp-caption-text\">Il pannello Stili dell&#8217;Editor del sito WordPress.<\/figcaption><\/figure>\n<p>Qui potete regolare alcuni aspetti del layout del tema con opzioni che prima richiedevano l&#8217;uso di CSS o di un <a href=\"https:\/\/kinsta.com\/it\/blog\/page-builder-wordpress\/\">plugin per la creazione di pagine<\/a> di terze parti. La modifica dei margini, del padding e dei bordi ne sono un esempio, ma ce ne sono molti altri.<\/p>\n<figure id=\"attachment_184930\" aria-describedby=\"caption-attachment-184930\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184930\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/paddings-margins.png\" alt=\"L'editor del sito WordPress mostra il pannello di personalizzazione del layout. Consente di personalizzare le dimensioni del contenuto, il padding e la spaziatura dei blocchi. Il lato sinistro della schermata mostra una vista parziale di una pagina web a tema blu.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-184930\" class=\"wp-caption-text\">Lavorare con i tipici elementi CSS come padding e margini all&#8217;interno dell&#8217;Editor del sito.<\/figcaption><\/figure>\n<p>Potete anche attivare o disattivare molte di queste funzionalit\u00e0 all&#8217;interno di <code>theme.json<\/code> (o del file <code>block.json<\/code> di un blocco). Questo supporta la personalizzazione dell&#8217;interfaccia utente insieme al design generale del sito.<\/p>\n<p>Tuttavia, le opzioni a vostra disposizione, pur essendo ampie, potrebbero non coprire tutte le vostre esigenze, e ci\u00f2 \u00e8 particolarmente vero se state costruendo un tema da zero. Questo \u00e8 un compito che le propriet\u00e0 personalizzate CSS possono aiutare a risolvere.<\/p>\n<h2>Le propriet\u00e0 personalizzate dei CSS<\/h2>\n<p>In PHP, JavaScript e in quasi tutti i linguaggi di programmazione, le variabili contengono i valori di vari elementi del codice. Ad esempio, potete memorizzare valori come nomi, date e numeri e utilizzarli nel programma.<\/p>\n<p>Le variabili CSS3 &#8211; o propriet\u00e0 personalizzate CSS, come le chiameremo in questo post &#8211; sono <a href=\"https:\/\/caniuse.com\/?search=css%20variables\" target=\"_blank\" rel=\"noopener noreferrer\">supportate dalla maggior parte dei browser attuali<\/a>. Internet Explorer non le supporta, cos\u00ec come Opera Mini. Tuttavia, <a href=\"https:\/\/kinsta.com\/it\/blog\/microsoft-edge-vs-chrome\/\">tutti i principali browser le supportano<\/a>.<\/p>\n<figure id=\"attachment_184927\" aria-describedby=\"caption-attachment-184927\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184927\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/can-i-use.png\" alt=\"Un grafico di compatibilit\u00e0 per le variabili CSS (propriet\u00e0 personalizzate) nei diversi browser web. Il grafico mostra un utilizzo globale elevato, pari al 97,05%, e indica un supporto diffuso tra i principali browser desktop e mobili.\" width=\"1200\" height=\"604\"><figcaption id=\"caption-attachment-184927\" class=\"wp-caption-text\">Il sito web Can I Use mostra il supporto attuale delle propriet\u00e0 personalizzate CSS.<\/figcaption><\/figure>\n<p>Le propriet\u00e0 personalizzate CSS permettono di memorizzare valori da riutilizzare nel vostro foglio di stile. \u00c8 un modo potente per creare un CSS pi\u00f9 dinamico e flessibile. Potete aggiornare pi\u00f9 regole di stile cambiando un solo valore.<\/p>\n<p>Il concetto di variabili CSS non \u00e8 del tutto nuovo. Preprocessori come <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a> utilizzano una funzionalit\u00e0 simile. Ad esempio, prendiamo il seguente esempio di Sass:<\/p>\n<pre><code class=\"language-css\">$font-stack: Helvetica, sans-serif\n$primary-color: #333\n\nbody\n  font: 100% $font-stack\n  color: $primary-color<\/code><\/pre>\n<p>Questo processa il tipico CSS:<\/p>\n<pre><code class=\"language-css\">body {\n  font: 100% Helvetica, sans-serif;\n  color: #333;\n}<\/code><\/pre>\n<p>Tuttavia, le propriet\u00e0 personalizzate dei CSS portano il tutto direttamente al browser. Questo offre alcuni vantaggi:<\/p>\n<ul>\n<li><strong>Aggiornamenti dinamici.<\/strong> A differenza della maggior parte delle variabili del preprocessore, potete aggiornare le propriet\u00e0 personalizzate CSS &#8220;al volo&#8221; utilizzando JavaScript.<\/li>\n<li><strong>Natura a cascata.<\/strong> Le propriet\u00e0 personalizzate seguono la cascata CSS, il che offre una maggiore flessibilit\u00e0 e uno stile pi\u00f9 consapevole del contesto.<\/li>\n<\/ul>\n<p>Le propriet\u00e0 personalizzate saranno anche pi\u00f9 performanti grazie alla riduzione della ridondanza del codice. Fogli di stile pi\u00f9 piccoli significano tempi di caricamento pi\u00f9 rapidi.<\/p>\n<h3>La sintassi delle propriet\u00e0 personalizzate CSS<\/h3>\n<p>Come per le tipiche variabili del preprocessore, la sintassi delle propriet\u00e0 personalizzate CSS \u00e8 semplice. Utilizza doppi trattini anzich\u00e9 segni di dollaro per specificare una propriet\u00e0:<\/p>\n<pre><code class=\"language-css\">:root {\n  --primary-color: #007bff;\n}<\/code><\/pre>\n<p>Da qui, si utilizza la funzione <code>var()<\/code> per assegnare queste propriet\u00e0 agli elementi:<\/p>\n<pre><code class=\"language-css\">.button {\n  background-color: var(--primary-color);\n}<\/code><\/pre>\n<p>Notate che potete anche assegnare propriet\u00e0 personalizzate utilizzando la propriet\u00e0 <code>@<\/code>. Tuttavia, come capirete tra poco, WordPress semplifica l&#8217;intero processo.<\/p>\n<h3>Dove usare le propriet\u00e0 personalizzate CSS<\/h3>\n<p>La versatilit\u00e0 \u00e8 all&#8217;ordine del giorno quando si parla di propriet\u00e0 personalizzate CSS. Con WordPress e <code>theme.json<\/code> avete a disposizione diversi modi per utilizzarle:<\/p>\n<ul>\n<li><strong>Preset:<\/strong> potete definire preset di colore, font e spaziatura.<\/li>\n<li><strong>Stili di blocco:<\/strong> <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">i singoli blocchi<\/a> possono utilizzare propriet\u00e0 personalizzate per uno stile coerente.<\/li>\n<li><strong>Stili globali:<\/strong> le propriet\u00e0 personalizzate sono preziose per il design dell&#8217;intero sito.<\/li>\n<\/ul>\n<p>Potete creare propriet\u00e0 completamente personalizzate per qualsiasi scopo vogliate. Vediamo un esempio pratico di come utilizzare le propriet\u00e0 personalizzate nel vostro file <code>theme.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#007bff\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"line-height\": {\n        \"body\": 1.5,\n        \"heading\": 1.2\n      }\n    }\n  },\n  \"styles\": {\n    \"typography\": {\n      \"lineHeight\": \"var(--wp--custom--line-height--body)\"\n    },\n    \"blocks\": {\n      \"core\/heading\": {\n        \"typography\": {\n          \"lineHeight\": \"var(--wp--custom--line-height--heading)\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Qui definiamo un colore preimpostato e utilizziamo la propriet\u00e0 <code>custom<\/code> per definire i valori di <code>line-height<\/code> per i titoli e il corpo della pagina. WordPress generer\u00e0 le propriet\u00e0 CSS per gli elementi che definite utilizzando <code>custom<\/code>. Pi\u00f9 avanti, possiamo assegnare queste propriet\u00e0 personalizzate a vari stili, impostazioni, blocchi e altro ancora.<\/p>\n<h2>I vantaggi dell&#8217;uso delle propriet\u00e0 personalizzate CSS<\/h2>\n<p>Forse avete gi\u00e0 un&#8217;idea di come le propriet\u00e0 personalizzate CSS possano aiutarvi nello sviluppo dei temi. Tuttavia, ci sono molti vantaggi da sottolineare.<\/p>\n<p>Abbiamo gi\u00e0 parlato di modularit\u00e0 e riutilizzabilit\u00e0. Tutti i valori comuni che definite come propriet\u00e0 personalizzate favoriscono la coerenza e riducono la ridondanza. Tale ridondanza si tradurr\u00e0 in migliori <a href=\"https:\/\/kinsta.com\/it\/blog\/ottimizzare-css\/\">prestazioni potenziali<\/a> per il vostro tema.<\/p>\n<p>Per l&#8217;utente finale, le propriet\u00e0 personalizzate offrono diversi vantaggi:<\/p>\n<ul>\n<li><strong>Personalizzazione semplificata.<\/strong> Gli utenti e i proprietari dei siti possono <a href=\"https:\/\/kinsta.com\/it\/blog\/come-personalizzare-il-vostro-tema-wordpress\/\">personalizzare un tema<\/a> senza dover avere conoscenze complesse di CSS. Una volta esposte le variabili attraverso <code>theme.json<\/code>, gli utenti possono accedere alle impostazioni attraverso l&#8217;Editor del sito.<\/li>\n<li><strong>Migliore compatibilit\u00e0 con FSE.<\/strong> Le propriet\u00e0 personalizzate si allineano ai principi di FSE, permettendoti di creare temi pi\u00f9 flessibili e dinamici.<\/li>\n<li><strong>Manutenzione e aggiornamenti pi\u00f9 semplici.<\/strong> Se avete bisogno di aggiornare valori comuni a tutto il tema, una propriet\u00e0 personalizzata permette di modificarli in un solo punto. Questo semplifica la manutenzione e rende pi\u00f9 gestibili gli aggiornamenti e le modifiche.<\/li>\n<\/ul>\n<p>In generale, le propriet\u00e0 personalizzate possono migliorare il flusso di lavoro dello sviluppo del tema. Inoltre, la loro determinazione \u00e8 pi\u00f9 semplice rispetto all&#8217;utilizzo delle tipiche variabili CSS.<\/p>\n<h2>Come definire le propriet\u00e0 CSS personalizzate nel file theme.json<\/h2>\n<p>Passiamo agli aspetti pratici della definizione e dell&#8217;utilizzo delle propriet\u00e0 personalizzate CSS all&#8217;interno di <code>theme.json<\/code>. Il primo passo \u00e8 imparare a scriverle.<\/p>\n<h3>Sintassi e convenzioni di denominazione<\/h3>\n<p>WordPress offre la propriet\u00e0 <code>custom<\/code> per facilitare le definizioni. Questa propriet\u00e0 \u00e8 leggermente pi\u00f9 semplice da usare rispetto alla propriet\u00e0 <code>@<\/code> o alle definizioni all&#8217;interno delle pseudo-classi e utilizza il formato standard chiave\/valore:<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"custom\": {\n      \"property-name\": \"value\"\n    }\n  }\n}<\/code><\/pre>\n<p>Dietro le quinte, WordPress elaborer\u00e0 questa definizione e generer\u00e0 una propriet\u00e0 CSS personalizzata utilizzando i doppi trattini:<\/p>\n<pre><code class=\"language-css\">--wp--custom--&lt;custom-element&gt;<\/code><\/pre>\n<p><code>--wp--custom--<\/code> sar\u00e0 sempre parte della propriet\u00e0 CSS e non utilizzer\u00e0 le maiuscole. Ad esempio, se definite <code>lineHeight<\/code> come propriet\u00e0 personalizzata, WordPress la trasformer\u00e0 in &#8220;kebab case:&#8221;<\/p>\n<pre><code class=\"language-css\">--wp--custom--line-height<\/code><\/pre>\n<p>Per quanto riguarda le convenzioni di denominazione, potete usare le maiuscole se lo desiderate, ma vi consigliamo di usare le maiuscole per i nomi delle propriet\u00e0 personalizzate. Questo \u00e8 coerente con le convenzioni di denominazione di WordPress, migliora la leggibilit\u00e0 e riduce gli errori di elaborazione.<\/p>\n<p><strong>Nota<\/strong>: le propriet\u00e0 personalizzate CSS utilizzano doppi trattini perch\u00e9 il <a href=\"https:\/\/www.w3.org\/Style\/CSS\/\" target=\"_blank\" rel=\"noopener noreferrer\">gruppo di lavoro CSS del W3C<\/a> vuole incoraggiare a utilizzare Sass (che utilizza il segno del dollaro per definire le propriet\u00e0). In questo modo, avete la possibilit\u00e0 di utilizzare entrambi i metodi per migliorare i vostri progetti.<\/p>\n<p>WordPress definisce gi\u00e0 alcune propriet\u00e0 personalizzate &#8211; o almeno, i temi hanno la possibilit\u00e0 di farlo. Ci\u00f2 significa che vedrete le variabili CSS all&#8217;interno di <code>theme.json<\/code> senza una dichiarazione esplicita:<\/p>\n<pre><code class=\"language-json\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"var(--wp--preset--color--primary)\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"spacing\": {\n        \"small\": \"1rem\",\n        \"medium\": \"2rem\",\n        \"large\": \"3rem\"\n      }\n    }\n  },\n  \"styles\": {\n    \"spacing\": {\n      \"blockGap\": \"var(--wp--custom--spacing--medium)\"\n    }\n  }\n}<\/code><\/pre>\n<p>In questo esempio, definiamo un colore primario utilizzando un colore preimpostato esistente. Poi, definiamo alcune propriet\u00e0 di spaziatura personalizzate e le impostiamo con <code>var()<\/code>.<\/p>\n<p>In questo modo non abbiamo bisogno di codificare i valori in <code>theme.json<\/code>. Inoltre, gli utenti possono aggiornare questi valori nell&#8217;Editor del sito e fare in modo che si propaghino in tutto il tema.<\/p>\n<h3>Preset e propriet\u00e0 personalizzate<\/h3>\n<p>Naturalmente, <code>theme.json<\/code> permette anche di definire dei preset per i colori, le dimensioni dei caratteri e altri elementi comuni del tema. D&#8217;altra parte, potete usare le propriet\u00e0 personalizzate per qualsiasi valore che volete riutilizzare nel vostro tema.<\/p>\n<p>La differenza maggiore riguarda le convenzioni di denominazione e l&#8217;accessibilit\u00e0. Gli utenti non saranno in grado di accedere alle propriet\u00e0 personalizzate nell&#8217;Editor del sito senza un ulteriore lavoro da parte vostra. Con le preimpostazioni, WordPress generer\u00e0 un CSS simile a quello che elabora le propriet\u00e0 personalizzate:<\/p>\n<pre><code class=\"language-css\">{\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"slug\": \"primary\",\n          \"color\": \"#007bff\",\n          \"name\": \"Primary\"\n        }\n      ]\n    },\n    \"custom\": {\n      \"fontFamily\": {\n        \"base\": \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\",\n        \"headings\": \"'Helvetica Neue', Helvetica, Arial, sans-serif\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Una volta che WordPress le avr\u00e0 elaborate, potrete notare le differenze intrinseche:<\/p>\n<pre><code class=\"language-css\">--wp--preset--primary: #007bff;\n--wp--custom--font-family--base: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif\";\n--wp--custom--font-family--headings: \"'Helvetica Neue', Helvetica, Arial, sans-serif\";<\/code><\/pre>\n<p>Notate che l&#8217;ulteriore annidamento delle propriet\u00e0 utilizzer\u00e0 doppi trattini, anche dopo aver convertito il camel case in kebab case.<\/p>\n<h3>CSS globale e specifico per il blocco rispetto alle propriet\u00e0 CSS personalizzate<\/h3>\n<p>Con il classico WordPress, per disegnare gli elementi all&#8217;interno del tema si usavano <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-css\/\">CSS aggiuntivi e personalizzati<\/a> sul front-end. Questo \u00e8 ancora il caso di <code>theme.json<\/code> e del FSE, anche se l&#8217;approccio \u00e8 diverso dalle propriet\u00e0 personalizzate CSS.<\/p>\n<p>Se visitate l&#8217;Editor del sito e andate nella schermata <strong>Stili<\/strong>, noterete la sezione <strong>CSS aggiuntivi<\/strong>. Questa funziona come un pannello CSS personalizzato nelle installazioni classiche di WordPress:<\/p>\n<figure id=\"attachment_184926\" aria-describedby=\"caption-attachment-184926\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184926\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/additional-css.png\" alt=\"Una vista parziale dell'Editor del sito WordPress che mostra i collegamenti alle impostazioni dei Blocchi e dei CSS aggiuntivi. Il lato sinistro dello schermo mostra una vista parziale di un edificio su un cielo blu.\" width=\"1200\" height=\"587\"><figcaption id=\"caption-attachment-184926\" class=\"wp-caption-text\">La sezione CSS aggiuntivi nell&#8217;Editor del sito WordPress.<\/figcaption><\/figure>\n<p>Rappresenta un modo per aggiungere una personalizzazione CSS globale a un tema. Tuttavia, \u00e8 un modo per dare agli utenti la possibilit\u00e0 di aggiungere CSS. Potreste anche utilizzarla per apportare piccole modifiche che non giustificano un intero foglio di stile.<\/p>\n<p>All&#8217;interno di <code>theme.json<\/code>, utilizzate la propriet\u00e0 <code>css<\/code> per definire qualsiasi CSS aggiuntivo desideriate:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n    \"styles\": {\n      \"css\": \"margin: 0\"\n    }\n}<\/code><\/pre>\n<p>Notate che non \u00e8 necessario utilizzare il punto e virgola per terminare le dichiarazioni CSS. Potete anche impostare un CSS personalizzato per i blocchi:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 2,\n  \"styles\": {\n    \"blocks\": {\n      \"core\/post-title\": {\n        \"css\": \"letter-spacing: 1px;\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Ogni volta che impostate un CSS di questo tipo all&#8217;interno di <code>theme.json<\/code>, lo vedrete in tutti i campi <strong>CSS aggiuntivi<\/strong> dell&#8217;editor del sito. Tuttavia, ricordate che nulla di ci\u00f2 che dichiarate utilizzando <code>css<\/code> \u00e8 una propriet\u00e0 CSS personalizzata.<\/p>\n<h3>Usare il selettore ampersand (&#038;)<\/h3>\n<p>Come Sass, anche WordPress supporta il selettore ampersand, con alcune differenze. In questo caso, si tratta di un ottimo modo per puntare a elementi e propriet\u00e0 annidate. Questo potrebbe essere importante se scegliete di dichiarare propriet\u00e0 CSS personalizzate per singoli blocchi.<\/p>\n<p>Prendiamo il seguente esempio:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"styles\": {\n  \"blocks\": {\n    \"core\/table\": {\n      \"css\": \"color:#333 & th{ background:#f5f5f5; }\"\n    }\n\u2026<\/code><\/pre>\n<p>Questo definisce un colore di testo e un colore di sfondo per l&#8217;elemento intestazione della tabella. Una volta che WordPress lo elabora, otterrete un CSS pulito e semplice:<\/p>\n<pre><code class=\"language-css\">.wp-block-table &gt; table {\n  color: #333;\n}\n\n.wp-block-table &gt; table th {\n  background: #f5f5f5;\n}<\/code><\/pre>\n<p>I selettori ampersand sono eccellenti se desiderate estendere un CSS. Un modo comprensibile di pensare al selettore \u00e8 che aiuta a separare gli elementi CSS. Vediamo il seguente esempio:<\/p>\n<pre><code class=\"language-json\">{\n  \"version\": 3,\n  \"styles\": {\n    \"blocks\": {\n      \"core\/avatar\": {\n        \"css\": \"& img {border-radius: 999px}\"\n      }\n    }\n  }\n}<\/code><\/pre>\n<p>Aggiunge un raggio al bordo di un avatar e produce il CSS come ci si aspetterebbe:<\/p>\n<pre><code class=\"language-css\">.wp-block-image img {\n  border-radius: 999px;\n}<\/code><\/pre>\n<p>Tuttavia, senza l&#8217;ampersand, WordPress unirebbe le dichiarazioni:<\/p>\n<pre><code class=\"language-css\">\u2026\n\u200b\u200b.wp-block-imageimg\n\u2026<\/code><\/pre>\n<p>L&#8217;utilizzo del selettore con l&#8217;ampersand per le propriet\u00e0 personalizzate CSS sar\u00e0 un&#8217;attivit\u00e0 che farete regolarmente.<\/p>\n<h2>Il ruolo di Kinsta nel supportare lo sviluppo moderno di WordPress<\/h2>\n<p>La scelta dell&#8217;hosting \u00e8 importante quanto qualsiasi linguaggio di programmazione, preprocessore o altro elemento tecnico. Senza un provider di hosting di qualit\u00e0 al vostro fianco, non potrete beneficiare delle prestazioni e degli strumenti di <code>theme.json<\/code> o FSE.<\/p>\n<p>Kinsta pu\u00f2 essere il fulcro del vostro intero flusso di lavoro, grazie ai nostri strumenti di sviluppo. Potete iniziare con <a href=\"https:\/\/kinsta.com\/it\/devkinsta\/\">DevKinsta<\/a>, il nostro ambiente di sviluppo locale che utilizza i <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-docker\/\">container Docker<\/a> per isolare la vostra installazione di WordPress:<\/p>\n<figure id=\"attachment_184928\" aria-describedby=\"caption-attachment-184928\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184928\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/devkinsta-interface-1.png\" alt=\"L'interfaccia di DevKinsta mostra le impostazioni di configurazione del database e di WordPress. Mostra i dettagli della connessione, compresi host, porta, nome del database e versione di WordPress. L'interfaccia mostra anche le opzioni per abilitare il debug e gli aggiornamenti automatici di WordPress.\" width=\"1200\" height=\"596\"><figcaption id=\"caption-attachment-184928\" class=\"wp-caption-text\">L&#8217;interfaccia principale di DevKinsta.<\/figcaption><\/figure>\n<p>Una funzionalit\u00e0 utile \u00e8 la capacit\u00e0 di DevKinsta di eseguire il push e il pull dei dati tra il vostro computer locale e gli <a href=\"https:\/\/kinsta.com\/it\/blog\/ambienti-di-staging-di-kinsta\/\">ambienti di staging di Kinsta<\/a>:<\/p>\n<figure id=\"attachment_184931\" aria-describedby=\"caption-attachment-184931\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-184931\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/08\/push-pull.png\" alt=\"Una vista parziale dell'interfaccia di DevKinsta che mostra le informazioni sul sito e le opzioni di controllo. L'interfaccia mostra i pulsanti per l'apertura del sito, la sincronizzazione, l'accesso al database manager e l'amministrazione di WordPress. Un menu a tendina rivela le opzioni per eseguire il push o il pull da Kinsta. Il tipo di sito \u00e8 indicato come WordPress, con informazioni visibili ma parziali sull'host.\" width=\"1200\" height=\"354\"><figcaption id=\"caption-attachment-184931\" class=\"wp-caption-text\">Le opzioni di push e pull da Kinsta all&#8217;interno di DevKinsta.<\/figcaption><\/figure>\n<p>Questo permette di testare i vostri temi in un ambiente simile alla produzione prima di iniziare a distribuirli. Quando lavorate con le propriet\u00e0 personalizzate dei CSS, potete assicurarvi che funzionino in contesti diversi. <span style=\"margin: 0px;padding: 0px\"><a href=\"https:\/\/api-docs.kinsta.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">L&#8217;API di Kinsta<\/a> pu\u00f2 supportare la volta <a href=\"https:\/\/kinsta.com\/it\/blog\/come-creare-una-pipeline-ci-cd\/\">pipeline CI\/CD<\/a> una volta pronti ad andare in produzione<\/span>.<\/p>\n<p>Altri aspetti dell&#8217;architettura di Kinsta vi aiuteranno nell&#8217;intera configurazione di sviluppo. Ad esempio, Kinsta supporta Git, il che rende facile il controllo della versione dei file del tema, compreso <code>theme.json<\/code>. Per iterare le propriet\u00e0 personalizzate o semplicemente per sperimentare diverse configurazioni, vorrete sapere che avete a disposizione un&#8217;opzione di rollback.<\/p>\n<p>Infine, se scegliete di utilizzare il vostro tema su un server Kinsta, il nostro <a href=\"https:\/\/kinsta.com\/it\/blog\/edge-caching\/\">Edge Caching<\/a> aumenta le prestazioni di <code>theme.json<\/code> fino all&#8217;<a href=\"https:\/\/kinsta.com\/it\/edge-caching\/\">80%<\/a>. Avere un sito web che funziona velocemente a prescindere dal browser dell&#8217;utente far\u00e0 s\u00ec che le aggiunte personalizzate vengano visualizzate prontamente.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Cos\u00ec come <code>theme.json<\/code> \u00e8 un potente file di configurazione per creare temi WordPress flessibili e manutenibili, le propriet\u00e0 personalizzate CSS sono fondamentali per il flusso di lavoro. \u00c8 cos\u00ec che costruirete e dichiarerete il CSS per gli elementi che non si possono costruire con l&#8217;Editor del sito. Saranno inoltre fondamentali se costruite i vostri blocchi o semplicemente se volete sviluppare temi WordPress unici con la massima profondit\u00e0 di personalizzazione. Inoltre, avete anche la possibilit\u00e0 di condividere il CSS con gli utenti attraverso l&#8217;Editor del sito.<\/p>\n<p>Le propriet\u00e0 personalizzate CSS faranno parte del vostro flusso di lavoro per lo sviluppo di temi? Se s\u00ec, come le utilizzerete? Condividete le vostre idee nella sezione commenti qui sotto!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gli sviluppatori di temi WordPress possono utilizzare un file theme.json per semplificare un processo che in passato si basava in gran parte su PHP. Tuttavia, potete &#8230;<\/p>\n","protected":false},"author":199,"featured_media":79183,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[25878,25873],"class_list":["post-79182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-design-sito-wordpress","topic-sviluppo-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>Sviluppare propriet\u00e0 personalizzate CSS con theme.json in WordPress<\/title>\n<meta name=\"description\" content=\"Ecco come sviluppare propriet\u00e0 personalizzate CSS all&#039;interno del file theme.json per aggiungere funzionalit\u00e0 avanzate ai temi 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:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sviluppare propriet\u00e0 personalizzate CSS con theme.json per migliorare i temi di WordPress\" \/>\n<meta property=\"og:description\" content=\"Ecco come sviluppare propriet\u00e0 personalizzate CSS all&#039;interno del file theme.json per aggiungere funzionalit\u00e0 avanzate ai temi WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-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-10-01T14:28:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-02T11:44:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jeremy Holcombe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Ecco come sviluppare propriet\u00e0 personalizzate CSS all&#039;interno del file theme.json per aggiungere funzionalit\u00e0 avanzate ai temi WordPress.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-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=\"Jeremy Holcombe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/\"},\"author\":{\"name\":\"Jeremy Holcombe\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\"},\"headline\":\"Sviluppare propriet\u00e0 personalizzate CSS con theme.json per migliorare i temi di WordPress\",\"datePublished\":\"2024-10-01T14:28:36+00:00\",\"dateModified\":\"2024-10-02T11:44:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/\"},\"wordCount\":2418,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json.png\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/\",\"name\":\"Sviluppare propriet\u00e0 personalizzate CSS con theme.json in WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json.png\",\"datePublished\":\"2024-10-01T14:28:36+00:00\",\"dateModified\":\"2024-10-02T11:44:16+00:00\",\"description\":\"Ecco come sviluppare propriet\u00e0 personalizzate CSS all'interno del file theme.json per aggiungere funzionalit\u00e0 avanzate ai temi WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json.png\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sviluppo di WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sviluppare propriet\u00e0 personalizzate CSS con theme.json per migliorare i temi di WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.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:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21\",\"name\":\"Jeremy Holcombe\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g\",\"caption\":\"Jeremy Holcombe\"},\"description\":\"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/jeremyholcombe\/\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Sviluppare propriet\u00e0 personalizzate CSS con theme.json in WordPress","description":"Ecco come sviluppare propriet\u00e0 personalizzate CSS all'interno del file theme.json per aggiungere funzionalit\u00e0 avanzate ai temi 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:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/","og_locale":"it_IT","og_type":"article","og_title":"Sviluppare propriet\u00e0 personalizzate CSS con theme.json per migliorare i temi di WordPress","og_description":"Ecco come sviluppare propriet\u00e0 personalizzate CSS all'interno del file theme.json per aggiungere funzionalit\u00e0 avanzate ai temi WordPress.","og_url":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-10-01T14:28:36+00:00","article_modified_time":"2024-10-02T11:44:16+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json.png","type":"image\/png"}],"author":"Jeremy Holcombe","twitter_card":"summary_large_image","twitter_description":"Ecco come sviluppare propriet\u00e0 personalizzate CSS all'interno del file theme.json per aggiungere funzionalit\u00e0 avanzate ai temi WordPress.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json-1024x512.png","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Jeremy Holcombe","Tempo di lettura stimato":"16 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/"},"author":{"name":"Jeremy Holcombe","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21"},"headline":"Sviluppare propriet\u00e0 personalizzate CSS con theme.json per migliorare i temi di WordPress","datePublished":"2024-10-01T14:28:36+00:00","dateModified":"2024-10-02T11:44:16+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/"},"wordCount":2418,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json.png","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/","url":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/","name":"Sviluppare propriet\u00e0 personalizzate CSS con theme.json in WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json.png","datePublished":"2024-10-01T14:28:36+00:00","dateModified":"2024-10-02T11:44:16+00:00","description":"Ecco come sviluppare propriet\u00e0 personalizzate CSS all'interno del file theme.json per aggiungere funzionalit\u00e0 avanzate ai temi WordPress.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json.png","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/10\/css-custom-properties-in-theme-json.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/proprieta-css-personalizzate-theme-json\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Sviluppo di WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/sviluppo-wordpress\/"},{"@type":"ListItem","position":3,"name":"Sviluppare propriet\u00e0 personalizzate CSS con theme.json per migliorare i temi di WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.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:\/\/kinsta.com\/it\/#\/schema\/person\/4eee42881d7b5a73ebb4f58dd5223b21","name":"Jeremy Holcombe","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0e17001f3bb37dbbe54fceef9bb547fa?s=96&d=mm&r=g","caption":"Jeremy Holcombe"},"description":"Senior Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems.","sameAs":["https:\/\/www.linkedin.com\/in\/jeremyholcombe\/"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/jeremyholcombe\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/79182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/199"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=79182"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/79182\/revisions"}],"predecessor-version":[{"id":79192,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/79182\/revisions\/79192"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79182\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79182\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79182\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79182\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79182\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79182\/translations\/jp"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79182\/translations\/es"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79182\/translations\/nl"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79182\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/79183"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=79182"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=79182"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=79182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}