Creare un child theme (in italiano: tema figlio) serve ad aggiungere tutte le personalizzazioni che vuoi ad un sito, senza perderle quando il tema genitore (cioè quello originario di partenza) viene aggiornato. In questo modo, è anche possibile organizzare bene il codice CSS (e anche quello di altre personalizzazioni più avanzate) e rendere più facile la collaborazione se anche altri hanno accesso ai file. Inoltre, un tema child non subirà modifiche, in caso qualcuno andasse a mettere indebitamente mano ai settaggi del tema e alla personalizzazione di WordPress.
Il procedimento non è difficile ed è alla portata anche di chi non ha mai provato a smanettare con i file di un CMS.
Come mai serve un tema child per Divi?
Divi è un tema WordPress molto ricco di funzionalità ma, di base, non è diverso dagli altri. Ogni volta che devi modificare un tema WP, creare un child che ne erediti la struttura e le funzionalità è una buona pratica: quando fai una modifica ai file di un tema, la perdi quando il tema stesso viene aggiornato.
Con un tema figlio, invece, i cambiamenti che farai verranno preservati quando fai gli update al tema genitore.
Quindi, se vuoi fare delle personalizzazioni che includano una buona dose di modifiche al CSS, aggiunte di Javascript, nuovi template o nuove funzioni, questa è la soluzione migliore; apporterai i cambiamenti ai file del child senza andare a toccare altro.
Si possono fare modifiche a Divi senza usare un child theme?
Modificare un qualsiasi tema, quindi anche Divi, senza usare un tema figlio è sempre possibile, però bisogna vedere in che situazione ci troviamo. Intanto, si può scrivere il proprio CSS e anche del codice aggiuntivo nel Divi Builder, così come nelle Opzioni del tema e nel Personalizza di WordPress.
Il codice inserito qui viene mantenuto durante gli aggiornamenti: per questo si può procedere inserendovi le personalizzazioni; pertanto, non è necessario creare un child nel caso in cui siano previste solo modifiche di poco conto al CSS.
Quindi, non c’è la stretta necessità che tu metta su un tema figlio se:
- Devi fare limitate personalizzazioni, ad esempio una decina di regole CSS, un paio di script e il banner della Cookie Policy.
- Sei solo tu che accedi al backend e non rischi che altri facciano modifiche al codice che hai inserito.
- Pensi di incaricare uno sviluppatore o un designer per lavorare sulla parte tecnica del sito: il child theme lo creerà da sé in ogni caso, se è un professionista.
A ogni buon conto, io faccio un tema figlio sempre.
Quando conviene utilizzare un tema child?
- Quando prevedi di modificare dei file del tema oltre al CSS (tipo header.php, functions.php, template di pagina e così via).
- Quando pensi di aggiungere tanto codice personalizzato (CSS/JS…): anche se, come abbiamo visto, potresti aggiungerlo nelle aree preposte del tema, diventerebbe ben presto difficile da gestire.
- Quando lavori al sito con altri: con un child hai tutti i file da personalizzare in un loro spazio dedicato e organizzato.
- Quando non vuoi rischiare che un cliente un po’ maldestro possa fare pasticci con il lavoro che hai fatto.
Cosa serve per creare un child theme?
Avrai bisogno di:
- Un tema WordPress installato e attivato (nel nostro caso particolare, il tema genitore sarà Divi o Extra).
- Un editor di testo per modificare i file: io uso volentieri Sublime Text o Notepad++ ma ognuno ha le proprie preferenze (no, Word non va bene, non è un editor di testo!).
- Un programma per comprimere i file in uno .ZIP, io mi trovo bene con 7Zip.
- Se hai bisogno di scaricare dal sito una copia di alcuni file del tema, ti servirà anche un client FTP (ti consiglio FileZilla).
Com’è fatto un child theme?
Per capire com’è fatto un child theme, è necessario esaminare la struttura delle directory di WordPress. Se stai lavorando in locale sul tuo computer, non ti serve altro che aprire la finestra dove si trova la tua installazione, altrimenti puoi usare un Client FTP e aprire il tuo spazio web.
Nella cartella dove si trova WordPress, troverai una serie di file e tre sottodirectory: wp-admin, wp-includes e wp-content.
Apri quest’ultima e, tra le cartelle che appaiono, fai doppio clic su quella chiamata “themes”.
Adesso sei nella directory che contiene tutti i temi presenti nel sito, attivi e non.
Aprendone una qualsiasi, noterai che contiene diverse sottocartelle e diversi file: tieni a mente che l’unico file assolutamente obbligatorio in un child theme è il file style.css ma, se vuoi personalizzare molti aspetti del tuo sito, dovrai inserire nel child anche i file che li gestiscono e – fondamentale – fare in modo che la struttura del tema figlio sia assolutamente uguale a quella del tema genitore.
Come vedi nell’immagine qui sotto, in questo child theme abbiamo il file style.css insieme ai file che generano intestazione e pie’ di pagina, header.php e footer.php, al file functions.php (che contiene delle funzioni personalizzate) e alla cartella Includes.
Questo perché? Perché, in questo caso, ho personalizzato un file che, nel parent theme, si trova proprio in quella posizione e, quindi, ho dovuto replicare fedelmente quella struttura.
Il primo passo per la creazione di un child theme: la cartella
Innanzi tutto, crea sul tuo computer una cartella col nome del tuo tema: il nome dovrà essere scritto sempre così, tenendo conto di maiuscole e minuscole, nel codice che servirà a renderlo disponibile per il sito. Per questo esempio, utilizziamo “Extrachild”. Che fantasia, vero? 😉
Crea il file di stile per il tuo tema
Dentro questa cartella, creiamo un file di testo che, tramite il comando “Salva con nome” salveremo come “Tutti i file (*.*)” col nome di style.css (deve per forza chiamarsi così).
Dentro questo file, scriveremo il seguente codice:
/* Theme Name: Extrachild Theme URI: http://example.com/extrachild/ Description: Extra Child Theme Author: Extradivi Author URI: https://extradivi.it Template: Extra Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: extrachild */
Le uniche righe obbligatorie sono:
- Theme Name: il nome del tuo tema child.
- Template: deve riportare il nome del tema genitore, tale e quale come lo vedi dalla cartella in wp-content/themes/.
Puoi fare copiaincolla del codice che ho messo qui e modificare dove serve. Trovi queste istruzioni nella pagina del Codex di WordPress.org dedicata ai Child Themes.
Collega il child theme al tema genitore
Fino a un po’ di tempo fa, per collegare parent e child theme, si usava la regola @import dei CSS. Adesso WordPress la ritiene deprecata e raccomanda di utilizzare il seguente metodo per accodare i due temi:
- Sempre col tuo editor di testo, crea un file vuoto e salvalo come functions.php.
- Copia il codice seguente e incollalo dentro al file:
<?php function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Questo codice è stato leggermente modificato per Divi ed Extra, in quanto essi accodano già autonomamente il foglio di stile del child ed è necessario solo dire esplicitamente di “agganciare” il parent. La funzione dice semplicemente a WordPress in quale cartella lo trova. Non chiudere il tag PHP, lascialo così com’è.
Un po’ di immagine non guasta…
Nella schermata che mostra i temi presenti sul sito ci sono le loro miniature: se vogliamo fare le cose come si deve, e mostrarne una che rappresenti il nostro tema, creiamo un’immagine delle dimensioni di 1200×900 pixel, e salviamola col nome screenshot.png nella cartella del child theme.
Adesso, nella nostra cartella “Extrachild” avremo tre file: style.css, functions.php e l’immagine appena salvata.
Finalmente andiamo online!
Adesso, non resta che caricare il tema e attivarlo (se non l’hai mai fatto e preferisci vedere prima come funziona, dai un’occhiata a Come installare Divi o Extra (o un tema qualsiasi) sul proprio sito WordPress).
Visto che lo caricheremo dal backend di WordPress, per prima cosa, dobbiamo zippare la cartella con 7Zip (o un altro tool simile). Carichiamo il file .ZIP ottenuto tramite l’interfaccia che troviamo in Aspetto > Temi > Carica nuovo.
È il momento di attivare normalmente il nostro child theme.
Da adesso, il nostro sito inizierà ad utilizzarlo e potrai fare tutte le variazioni che ritieni opportune senza pericolo di perderle aggiornando il tema di partenza o WordPress stesso.
Puoi inserire una modifica di test al CSS per verificare che tutto funzioni (pulisci eventuali sistemi di cache attivi sul sito o visitalo con una sessione anonima per vedere il cambiamento) e potrai iniziare tranquillamente a modificare il tuo sito come preferisci.