{"id":81478,"date":"2025-07-17T15:15:35","date_gmt":"2025-07-17T14:15:35","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=81478&preview=true&preview_id=81478"},"modified":"2025-07-22T10:07:06","modified_gmt":"2025-07-22T09:07:06","slug":"personalizzare-i-blocchi-con-i-child-theme","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/personalizzare-i-blocchi-con-i-child-theme\/","title":{"rendered":"Stili personalizzati per i temi a blocchi di WordPress con i child theme"},"content":{"rendered":"

I temi a blocchi<\/a> e il theme.json<\/a><\/code> sono strumenti estremamente flessibili, il che potrebbe far pensare che i child theme<\/a> siano obsoleti. Ma in molti casi sono ancora importanti.<\/p>\n

Un child theme \u00e8 ancora la soluzione giusta se si vuole avere un controllo reale sul design del sito senza toccare i file principali del tema parent.<\/p>\n

In questo articolo utilizziamo il tema Twenty Twenty-Five<\/a> come base per la creazione di un child theme a blocchi con i propri style.css<\/code> e functions.php<\/a><\/code>. Vedremo come sovrascrivere gli stili in modo sicuro, definire stili di blocco personalizzati e persino impostare varianti di stile. Non si tratta solo di un trucco di stile, ma di un solido passo avanti verso la creazione di un block theme completo.<\/p>\n

Anche se questo esercizio pu\u00f2 sembrare semplice, analizzeremo alcune particolarit\u00e0 che possono mettere in difficolt\u00e0. Iniziamo creando un child theme personalizzato e poi implementando una style variation personalizzata.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Registrazione di un child theme a blocchi<\/h2>\n

Registrare un child theme a blocchi \u00e8 molto pi\u00f9 semplice che registrarne uno classico<\/a>.<\/p>\n

Tecnicamente, non \u00e8 necessario registrarlo. La registrazione avviene automaticamente quando la cartella di un child theme correttamente nominato contiene sia un file theme.json<\/code> che un file style.css<\/code>.<\/p>\n

Allora perch\u00e9 il file style.css<\/code> \u00e8 ancora necessario?<\/p>\n

Come in precedenza, questo file contiene un’intestazione obbligatoria (mostrata qui sotto) con i metadati<\/a> utilizzati da WordPress per identificare il tema, con il nome e il tema parent di cui \u00e8 estensione. Sebbene gli stili e le impostazioni siano ora gestiti nel theme.json<\/code>, il file style.css<\/code> svolge ancora un ruolo fondamentale per consentire a WordPress di riconoscere il tema, anche se non contiene CSS vero e proprio.<\/p>\n

\/*\nTheme Name: Twenty Twenty-Five Child\nDescription: Child theme for the Twenty Twenty-Five theme\nTemplate: twentytwentyfive\n*\/<\/code><\/pre>\n
Un file functions.php<\/code> non \u00e8 necessario a meno che non si voglia inserire degli script<\/a> o aggiungere delle funzionalit\u00e0 PHP. Lo faremo pi\u00f9 avanti.<\/p>\n
Se non si ha familiarit\u00e0 con il theme.json<\/code> o se \u00e8 necessario un rapido ripasso, abbiamo una guida su Come lavorare con le propriet\u00e0 e le coppie chiave-valore nel file theme.json<\/a>.<\/p>\n
Modifiche di base al child theme<\/h2>\n
Cominciamo con l’aggiornamento dei colori globali dello sfondo e del testo e con lo styling del blocco Button.<\/p>\n
Nel file theme.json<\/code> del child theme (che serve come stile predefinito), definiamo quanto segue:<\/p>\n
{\n  \"version\": 3,\n  \"settings\": {\n    \"color\": {\n      \"palette\": [\n        {\n          \"name\": \"Black\",\n          \"slug\": \"black\",\n          \"color\": \"#000000\"\n        },\n        {\n          \"name\": \"Yellow\",\n          \"slug\": \"yellow\",\n          \"color\": \"#FFFF00\"\n        },\n        {\n          \"name\": \"Purple\",\n          \"slug\": \"purple\",\n          \"color\": \"#800080\"\n        },\n        {\n          \"name\": \"White\",\n          \"slug\": \"white\",\n          \"color\": \"#FFFFFF\"\n        }\n      ]\n    }\n  },\n  \"styles\": {\n    \"color\": {\n      \"background\": \"var(--wp--preset--color--black)\",\n      \"text\": \"var(--wp--preset--color--yellow)\"\n    },\n    \"blocks\": {\n      \"core\/button\": {\n        \"color\": {\n          \"background\": \"var(--wp--preset--color--purple)\",\n          \"text\": \"var(--wp--preset--color--white)\"\n        },\n        \"border\": {\n          \"color\": \"var(--wp--preset--color--yellow)\",\n          \"width\": \"2px\",\n          \"style\": \"solid\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
Mentre i colori dello sfondo e del testo si applicano a tutte le varianti di stile, lo stile del blocco Button si applica solo alla variante predefinita<\/strong>.<\/p>\n
\"Child
Child theme con la variante di stile predefinita nell’Editor del sito.<\/figcaption><\/figure>\n
Sovrascrivere le varianti di stile<\/h3>\n
Per applicare lo stesso stile ai pulsanti in diverse varianti, \u00e8 meglio creare un file .json<\/code> che corrisponda alla convenzione di denominazione delle varianti del tema principale.<\/p>\n
Ad esempio, per sovrascrivere il bordo del pulsante nella variante di stile Sera<\/em>, possiamo creare un file chiamato 01-evening.json<\/code> nella cartella principale del child theme (o all’interno di una sottocartella \/styles<\/code>):<\/p>\n
{\n  \"version\": 3,\n  \"title\": \"Evening\",\n  \"styles\": {\n    \"blocks\": {\n      \"core\/button\": {\n        \"border\": {\n          \"color\": \"var(--wp--preset--color--white)\",\n          \"width\": \"3px\",\n          \"style\": \"dashed\"\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n
In questo caso, abbiamo utilizzato un bordo pi\u00f9 ampio e tratteggiato per far risaltare il pulsante. Poich\u00e9 si tratta di stili pi\u00f9 specifici, questi sovrascrivono quelli generali del theme.json<\/code>.<\/p>\n