Come avrai notato guardando questa schermata, WordPress ci mostra i dettagli del tema in base alle informazioni che abbiamo inserito nel commento del file style.css.<\/p>\n\n\n\n
In questo caso, per\u00f2, non ci mostra nessuna anteprima del tema.<\/p>\n\n\n\n
Per visualizzare un’immagine di anteprima ci basta andare a caricare uno screen nella cartella del tema child e rinominalo: screenshot.png.<\/p>\n\n\n\nPuoi anche utilizzare lo screenshot del tema parent e copiarlo nella cartella di del tema child che hai creato.<\/p>\n\n\n\n
Creare un tema child con un plugin<\/h2>\n\n\n\n Abbiamo visto passo passo la procedura per creare un tema child “manualmente”. In alternativa, potresti voler utilizzare un plugin per creare il tuo tema child in maniera pi\u00f9 rapida.<\/p>\n\n\n\n
Ci sono diversi plugin che ci permettono di farlo. Vediamo come fare con uno dei plugin pi\u00f9 diffusi: Child Theme Configurator.<\/p>\n\n\n\n
C’\u00e8 anche un altro plugin molto usato, Child Theme Creator by Orbisius<\/em>, ma considera che non viene aggiornato da due anni e non \u00e8 compatibile con le ultime versioni di WordPress.<\/p>\n\n\n\nCreare un tema child con Child Theme Configurator<\/h3>\n\n\n\n Per prima cosa, installiamo il plugin Child Theme Configurator<\/em>.<\/p>\n\n\n\nDalla dashboard di WordPress clicchiamo su Plugin -> Aggiungi nuovo, cerchiamo il plugin con la barra di ricerca e clicchiamo su Installa adesso<\/em>.<\/p>\n\n\n\nDopodich\u00e9 attiviamo il plugin cliccando su Attiva<\/em>.<\/p>\n\n\n\nDopo aver attivato il plugin, vedremo la voce “Child themes” nella sezione Strumenti<\/em>.<\/p>\n\n\n\nDalla scheda “Parent\/Child” dobbiamo per prima cosa scegliere un’azione.<\/p>\n\n\n\n
Nel nostro caso, visto che vogliamo creare un tema child, selezioniamo CREATE a new Child Theme<\/em>.<\/p>\n\n\n\nDobbiamo quindi selezionare il tema che vogliamo usare come parent<\/em>. Dal menu a tendina scegliamo quello che ci interessa, nel nostro caso “Twenty Twenty”.<\/p>\n\n\n\nDopodich\u00e9 clicchiamo sul pulsante Analyze<\/em>.<\/p>\n\n\n\nIl plugin analizzer\u00e0 il tema parent e ci dir\u00e0 se pu\u00f2 essere utilizzato per creare un tema child, come vedi in questa schermata.<\/p>\n\n\n\nNello step successivo dobbiamo scegliere il nome della cartella del tema child. Possiamo lasciare l’opzione di default che sar\u00e0 “nometemaparent-child”, come vedi qui:<\/p>\n\n\n\nLa prossima sezione ci permette di scegliere se salvare lo stile in un foglio di stile separato o in quello primario. Anche in questo caso possiamo lasciare l’opzione predefinita (Primary stylesheet).<\/p>\n\n\n\nNella sezione 6 possiamo lasciare l’opzione di default “use the WordPress style queue”.<\/p>\n\n\n\nLa sezione 7 ci permette di modificare i dettagli del tema child. Clicchiamo sulla freccia per espandere la sezione e poi possiamo compilare i seguenti campi:<\/p>\n\n\n\nChild Theme Name<\/strong>: inserisci il nome del tema.<\/p>\n\n\n\nTheme Website<\/strong>: puoi inserire il sito web del tema.<\/p>\n\n\n\nAuthor<\/strong>: il nome dell’autore del tema.<\/p>\n\n\n\nAuthor Website<\/strong>: il sito dell’autore.<\/p>\n\n\n\nTheme Description<\/strong>: qui puoi inserire una breve descrizione del tema.<\/p>\n\n\n\nTheme Tags<\/strong>: puoi indicare i tag del tema.<\/p>\n\n\n\nVersion<\/strong>: il numero di versione del tema.<\/p>\n\n\n\nLo step 8 ci permette di scegliere se vogliamo importare menu e widget dal tema parent al tema child. Per farlo ci basta spuntare l’opzione indicata in questa sezione.<\/p>\n\n\n\nPer finire alla sezione 9 troviamo il pulsante “Create New Child Theme<\/em>“. Dopo aver verificato tutte le impostazioni precedenti, puoi cliccare sul pulsante e il plugin creer\u00e0 il tuo nuovo tema child.<\/p>\n\n\n\nSe la procedura \u00e8 andata a buon fine, vedrai un avviso come questo che ti comunica che il tema child \u00e8 stato creato.<\/p>\n\n\n\nFacendo click su “Preview your child theme” da questo avviso, possiamo aprire un’anteprima del tema.<\/p>\n\n\n\n
Dopodich\u00e9 possiamo cliccare su “Attiva e pubblica” per attivare il tema child.<\/p>\n\n\n\nSe andiamo alla sezione Aspetto -> Temi<\/em>, vedremo nella lista dei temi installati, il nostro tema child:<\/p>\n\n\n\nTieni presente che in questo modo hai solo creato il tema child, che risulter\u00e0 identico a quello parent. Il passaggio successivo \u00e8 quello di modificare il tema, come vedremo nella sezione su come personalizzare il tema child.<\/p>\n\n\n\n
Come personalizzare il tema child<\/h2>\n\n\n\n Per personalizzare il tema possiamo andare ad aggiungere delle regole nel file CSS che abbiamo creato.<\/p>\n\n\n\n
Inoltre, possiamo anche creare dei nuovi file template che verranno usati al posto dei corrispondenti file del tema parent.<\/p>\n\n\n\n
Per finire possiamo anche aggiungere delle funzioni personalizzate al tema child con il file functions.php.<\/p>\n\n\n\n
Andiamo a vedere alcuni esempi.<\/p>\n\n\n\n
Modificare il file di stile<\/h3>\n\n\n\n Possiamo modificare lo stile CSS del file del tema parent andando ad aggiungere nuove regole nel file style.css<\/em> del tema child.<\/p>\n\n\n\nInfatti, WordPress andr\u00e0 a sostituire gli stili presenti nel tema parent, usando quelli del tema child.<\/p>\n\n\n\n
Pu\u00f2 essere utile per praticit\u00e0 copiare lo stile del tema parent e modificarlo nel file del tema child.<\/p>\n\n\n\n
Vediamo come fare con un esempio.<\/p>\n\n\n\n
Nel tema parent abbiamo questo stile:<\/p>\n\n\n\n
.button:hover,\nbutton:hover,\ninput[type=\"button\"]:hover,\ninput[type=\"reset\"]:hover,\ninput[type=\"submit\"]:hover {\n background: #111;\n cursor: pointer;\n}<\/code><\/pre>\n\n\n\nLa regola “background” ci serve per determinare il colore di un pulsante quando vi interagiamo passandoci sopra con il mouse.<\/p>\n\n\n\n
Per modificare lo stile nel nostro tema child ci basta copiare lo stesso testo e modificare il colore dello sfondo del pulsante, come in questo esempio:<\/p>\n\n\n\n
.button:hover,\nbutton:hover,\ninput[type=\"button\"]:hover,\ninput[type=\"reset\"]:hover,\ninput[type=\"submit\"]:hover {\n background: #ffd700;\n cursor: pointer;\n}<\/code><\/pre>\n\n\n\nModificare i file template<\/h3>\n\n\n\n I file che andiamo ad aggiungere nella cartella del tema child verranno utilizzati al posto dei corrispondenti file del tema parent.<\/p>\n\n\n\n
Se vogliamo apportare delle modifiche a un file di template, ci basta copiare il file dalla cartella del tema parent a quella del tema child e poi modificarlo. O crearlo direttamente nella cartella del tema child.<\/p>\n\n\n\n
In questo modo i file del tema parent resteranno invariati e potremo lavorare su quelli del tema child.<\/p>\n\n\n\n
Questo sistema ci permette anche di creare template per alcune pagine specifiche.<\/p>\n\n\n\n
Per approfondire come funziona la gerarchia dei template e quindi come viene scelto il template da usare puoi fare riferimento alla documentazione di WordPress sui template<\/a>.<\/p>\n\n\n\nTieni presente che WordPress utilizza il file che ha priorit\u00e0 nella gerarchia.<\/p>\n\n\n\n
Se il file ha lo stesso nome sia nella cartella del tema parent che in quella del tema child, verr\u00e0 usato con priorit\u00e0 quello del tema child.<\/p>\n\n\n\n
Modificare il file functions.php<\/h3>\n\n\n\n Possiamo usare il file functions.php del tema child per creare nuove funzioni.<\/p>\n\n\n\n
Tieni presente, per\u00f2, che il file functions.php <\/em>del tema child non sostituisce<\/strong> quello del tema parent. E in particolare viene caricato prima il file functions.php del tema child e dopo quello del parent.<\/p>\n\n\n\nPer sostituire una funzione del tema parent specificandola nel tema child dovrai dichiarare la funzione in maniera condizionale.<\/p>\n\n\n\n
Ecco un esempio:<\/p>\n\n\n\n
if ( ! function_exists( 'nome_funzione' ) ) {\n function nome_funzione() {\n \/\/ contenuto della funzione\n }\n}<\/code><\/pre>\n\n\n\nPuoi approfondire consultando la documentazione di WordPress sulle funzioni dei temi<\/a>.<\/p>\n\n\n\nCome creare un tema child con un tema a blocchi<\/h2>\n\n\n\n WordPress 5.9 supporta i temi a blocchi. Con l’editor a blocchi e i temi che supportano questa funzione possiamo modificare non solo il contenuto, come facevamo con post e pagine, ma anche tutte le aree del sito compreso header e footer.<\/p>\n\n\n\n
Vediamo come creare un tema child di un tema a blocchi. La procedura in questo caso \u00e8 un po’ diversa da quella per i temi tradizionali che abbiamo visto prima.<\/p>\n\n\n\n
In questa guida prenderemo come esempio il tema Twenty Twenty-Two<\/strong>.<\/p>\n\n\n\nCreare i file necessari per il tema child<\/h3>\n\n\n\n Per creare un tema child per un tema a blocchi dobbiamo:<\/p>\n\n\n\n
\ncreare una cartella<\/li>\n\n\n\n creare il file style.css<\/li>\n\n\n\n creare il file theme.json.<\/li>\n<\/ul>\n\n\n\nVediamo come fare.<\/p>\n\n\n\n
Creare la cartella per il tema child<\/h4>\n\n\n\n Per prima cosa dobbiamo creare la cartella all’interno della quale andremo a inserire i file del nostro tema child.<\/p>\n\n\n\n
Possiamo usare il file manager o un client FTP per accedere ai file.<\/p>\n\n\n\n
All’interno della cartella \/wp-content\/themes\/ andiamo a creare una nuova cartella che abbia un nome come questo:<\/p>\n\n\n\n
nometemaparent-child.<\/p>\n\n\n\n
Nel nostro caso sar\u00e0 twentytwentytwo-child, perch\u00e9 il tema parent \u00e8 Twenty Twenty-Two.<\/p>\n\n\n\nCreare il file style.css<\/h4>\n\n\n\n Dopo aver creato la cartella dobbiamo creare un file “style.css” all’interno della cartella.<\/p>\n\n\n\nModifichiamo il file e inseriamo queste righe:<\/p>\n\n\n\n
\/*\n Theme Name: Twenty Twenty-Two Child\n Theme URI: https:\/\/nomedelsito.com\/twentytwentytwo-child\/\n Description: Tema child per Twenty Twenty-Two\n Author: SupportHost\n Author URI: https:\/\/nomedelsito.com\/\n Template: twentytwentytwo\n Version: 1.0.0\n License: GNU General Public License v2 or later\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n*\/<\/code><\/pre>\n\n\n\nTi basta modificare i campi con le informazioni che preferisci.<\/p>\n\n\n\n
Il campo Theme Name<\/strong> sar\u00e0 quello corrispondente al nome del tuo tema, e dovr\u00e0 essere unico.<\/p>\n\n\n\nNel campo