Questo articolo è stato aggiornato in data
Usa l'indice dei contenuti
Chiunque abbia a che fare con il mondo di WordPress, ad un certo punto, avrà sentito parlare di Child Theme (o anche Tema Child). Lo si sente nominare spesso all’interno di tutorial o guide per WordPress, ma anche nella documentazione di alcuni temi.
Ma che cos’è un child theme? E perché lo si sente così spesso nominare? In questo articolo ci soffermeremo proprio su questo: a cosa serve un child theme su WordPress e come fare per crearlo (sia manualmente che con l’aiuto di uno specifico plugin).
Sei in cerca di una live chat per il tuo sito web? Chatra è uno dei migliori programmi di live chat in circolazione, dai un'occhiata.
Oltre alla lettura di questo articolo, vi consiglio di leggere anche la documentazione di WordPress relativa ai child themes, è una lettura molto interessante (in inglese) che, oltre a spiegare che cos’è un child theme, tratta alcuni esempi ed utilizzi del tema child in vari contesti.
Child Theme WordPress: che cos’è
Un child theme è un tema che eredita l’aspetto, le funzionalità e la struttura del tema principale (detto anche tema genitore) ma che può essere modificato a nostro piacimento.
Infatti, se traducessimo in italiano “Child theme” otterremmo “Tema Bambino“, questo ci fa capire l’ereditarietà e la stretta connessione che c’è tra il tema genitore (Parent Theme) e il tema bambino/figlio (Child Theme).
A cosa serve un child theme
A questo punto ti starai chiedendo: ok, ma quindi a cosa serve un child theme?
Il motivo principale per cui un child theme viene utilizzato è sostanzialmente perché è possibile effettuare modifiche (sia di tipo estetico, sia di tipo tecnico) al tema principale (parent theme), senza andare a toccare il codice del tema stesso, ma lavorando in un ambiente completamente nostro (child theme).
Questa pratica è utile per 2 motivi:
- Se mettessimo mano direttamente al tema principale andando a modificare il codice, questo verrebbe rimosso nell’aggiornamento successivo.
Un child theme invece non ha questo problema, e il nostro codice personalizzato rimarrà li fino a che non saremo noi a deciderlo. - Se decidessimo di modificare il codice del tema principale e, malauguratamente, si venissero a generare degli errori per via di un codice scritto male, non sarebbe una bella situazione.
Invece, se la stessa cosa accadesse su un child theme, sarà sufficiente disattivarlo e continuare ad utilizzare il tema principale fino a quando non avremo risolto il problema al codice del nostro child theme.
Quando usare un child theme
Il linea generale consiglio sempre di utilizzare un child theme su WordPress, perché ci sarà sempre qualcosa da modificare o da aggiungere all’interno del nostro tema, prima o poi.
Facciamo degli esempi concreti: magari abbiamo bisogno di inserire del codice CSS per cambiare il colore di sfondo di una pagina per il periodo natalizio, oppure vogliamo aumentare la dimensione del testo in un determinato widget, oppure vogliamo inserire il codice di Google Analytics o di Facebook Pixel nel nostro sito web e non vogliamo utilizzare l’ennesimo plugin.
Questi sono solo alcuni casi in cui un child theme può esserci utile e ci permetterà di evitare di installare plugin aggiuntivi. Ovviamente l’utilità di un child theme aumenta di pari passo con le nostre capacità e conoscenze di CSS, PHP e jQuery.
Più siamo bravi, più cose saremo in grado di fare con il nostro child theme.
L’unico caso (che mi viene in mente adesso) in cui un child theme potrebbe non essere utile, è se il tema che stiamo utilizzando è un tema personalizzato. Ossia un tema creato appositamente per il nostro sito WordPress, un tema di cui abbiamo il completo controllo (quindi non un tema scaricato dalla directory di WordPress o un tema acquistato) e che quindi non riceverà aggiornamenti automatici che ci faranno perdere il nostro codice personalizzato.
Ma anche in quest’ultimo caso, se non ti senti sicuro e vuoi evitare di causare errori, il child theme è la soluzione adatta perché potrai sempre tornare indietro disattivandolo 🙂
Come creare un Child Theme WordPress
Ora che abbiamo capito cos’è un child theme e qual’è la sua utilità sul nostro sito WordPress, vediamo come creare un child theme e installarlo sul nostro sito web.
Ci sono due modi per creare un child theme, lo si può fare manualmente oppure tramite l’utilizzo di un plugin il cui scopo è quello di generare child theme.
In questo articolo vedremo entrambe i casi, così da poter scegliere quale metodo utilizzare.
Creare un child theme manualmente
Innanzitutto: non sono richieste particolari conoscenze di codice perché il processo di creazione di un child theme è molto semplice, quindi non temere 🙂
In secondo luogo, per questo esempio ho utilizzato il tema WordPress chiamato Attesa, un tema molto semplice da usare, ricco di funzioni, tradotto in italiano e realizzato da Rizzo Andrea, uno dei fondatori di WP Special 😉
La prima cosa da fare è entrare all’interno del nostro file manager (potrebbe essere quello di cPanel del nostro hosting o anche un software come FileZilla o simili) e andare nella cartella /wp-content/themes.
In questa cartella troveremo la lista dei temi attualmente installati sul nostro sito WordPress sotto forma di cartelle.
Ora dovremo creare una nuova cartella e chiamarla con il nome del tema a cui vogliamo creare il child theme, e con suffisso “-child“. Quindi, in questo esempio la chiameremo “attesa-child“.
Il passo successivo è quello di entrare nella cartella appena creata e creare un file vuoto chiamato “style.css“, questo file ci servirà per compilare il child theme e dare alcune direttive a WordPress. Vediamo quindi cosa dovrai incollare all’interno del file “style.css” appena creato:
/*
Theme Name: Attesa Child
Theme URI: https://attesawp.com
Author: Inserisci il tuo nome
Author URI: Inserisci l'indirizzo del tuo sito web
Description: Il mio child theme del tema Attesa
Version: 1.0.0
Template: attesa
Text Domain: attesa-child
*/Come puoi vedere, abbiamo dato un nome al child theme, inserito l’autore del child theme, la versione e altri dati che verranno mostrati all’interno della pagina in “Aspetto-> Temi” della bacheca di WordPress.
Tutti i campi sono personalizzabili, ma l’unico campo in cui dovrai fare attenzione è “Template“, in cui dovrai andare a dichiarare il nome della cartella del tema principale (tema genitore) su cui si sta andando a creare il child theme. In questo caso la cartella del tema genitore si chiama “attesa“.
Il file functions.php
Non abbiamo ancora finito, è rimasto ancora un file da creare all’interno del nostro child theme, e questo file (importantissimo) si chiama “functions.php“.
Andiamo quindi nella cartella del nostro child theme (in questo caso in “attesa-child”) e creiamo un nuovo file vuoto e chiamiamolo “functions.php“.
Perché fare ciò? Perché bisogna dichiarare a WordPress qual’è il percorso dello stile del tema principale che il child theme deve caricare.
Infatti, se saltassimo questo passo e attivassimo il child theme adesso, il nostro sito si caricherebbe ma senza uno stile grafico (bruttino direi).
Quindi, apriamo il file “functions.php” appena creato e incolliamo questo codice:
<?php
add_action( 'wp_enqueue_scripts', 'attesa_child_carica_stile' );
function attesa_child_carica_stile() {
wp_enqueue_style( 'attesa-child-css', get_template_directory_uri() . '/style.css' );
}Che cosa abbiamo scritto? Se hai delle conoscenze di PHP lo avrai intuito, ma nel caso in cui te lo stessi chiedendo, abbiamo creato un filtro PHP per dichiarare a WordPress qual’è il percorso da utilizzare per caricare lo stile del tema principale, e lo abbiamo messo in coda tra i vari stili che WordPress caricherà durante il suo funzionamento.
Piccolo consiglio per migliorare l’aspetto del tuo child theme all’interno della bacheca: per aggiungere un’immagine al child theme, che verrà visualizzata all’interno della tua bacheca in “Aspetto-> Temi“, è sufficiente creare un’immagine di 1200×900 pixel, salvarla in formato png e chiamarla “screenshot”.
Successivamente basterà caricare quest’immagine nella cartella del child theme.
Finito! Abbiamo creato il nostro child theme manualmente e, se tutto è stato fatto correttamente, dovremo avere un file chiamato “style.css“, un file chiamato “functions.php” e (opzionale) un file chiamato “screenshot.png“, il tutto nella nostra cartella chiamata “attesa-child“.
Ora non ci resta che entrare nella nostra bacheca di WordPress, andare in “Aspetto-> Temi” e attivare il child theme.
Avrà il nome che gli abbiamo dato nello “style.css” (in questo caso Attesa Child) e, se abbiamo inserito il file “screenshot.png“, verrà mostrata l’immagine.
Piccola nota: attivare e disattivare i child theme non è rischioso, ma per sicurezza è sempre utile effettuare un backup completo del nostro sito WordPress prima di effettuare questo tipo di operazioni. Prevenire è sempre meglio che curare 🙂
Creare un child theme tramite plugin
Veniamo quindi alla seconda soluzione, ossia generare un tema child con l’aiuto di un plugin apposito. In questo esempio utilizzeremo il plugin chiamato “Child Theme Configurator” dato che è il plugin più utilizzato per creare child theme.
Andiamo quindi nella nostra bacheca di WordPress in “Plugin-> Aggiungi nuovo“, cerchiamo “Child Theme Configurator“, installiamolo e attiviamolo.
Una volta fatto ciò, le opzioni del plugin saranno disponibili da “Strumenti-> Child Themes“
Tramite il plugin, sarà possibile creare un nuovo child theme, configurare un child theme esistente (quindi impostare un child theme precedentemente creato), duplicare oppure resettare un child theme.
La cosa interessante di questo plugin è la possibilità di inserire codice CSS direttamente tramite apposito pannello senza dover essere noi stessi a scriverlo nello “style.css” del child theme.
Avremo a disposizione anche un pannello per importare Google Fonts o font locali usando @import.
Altra funzionalità interessante è, dal pannello “Files“, la possibilità di selezionare i template del tema principale e “clonarli” all’interno del child theme.
Questa funzionalità è utile nel caso in cui volessimo cambiare una porzione di codice che si trova all’interno di un template del tema.
Un ottimo plugin per generare child theme in maniera sicura e veloce, ricco di funzionalità (ha anche una versione PRO a pagamento che aggiunge ulteriori opzioni).
Se voleste approfondire le potenzialità di questo plugin, è disponibile una corposa guida direttamente dal sito ufficiale (in inglese).
Child theme: alcuni esempi pratici
Abbiamo visto come creare un child theme manualmente, abbiamo visto come crearlo tramite apposito plugin, abbiamo visto come installare un child theme, ora direi che bisogna dare dimostrazione di cosa un child theme può fare per noi.
Vediamo quindi alcuni esempi pratici, vedremo come sfruttare il file “style.css” del child theme per inserire codice CSS personalizzato, e come inserire il codice di Google Analytics utilizzando il file “functions.php” del child theme.
Inserire codice CSS personalizzato nel child theme
Apriamo il file “style.css” del nostro tema child e, subito dopo la dichiarazione iniziale del tema (quindi dalla riga successiva a */ in poi) possiamo scrivere il nostro CSS personalizzato.
Ipotizziamo di voler ingrandire il titolo del nostro sito WordPress e di volerlo colorare di rosso, il codice CSS da utilizzare sarà:
.site-title {
font-size: 50px;
color: red;
}A questo punto basterà inserire questo codice CSS all’interno dello “style.css” del nostro tema child e il gioco è fatto.
Possiamo inserire tutto il codice CSS che vogliamo, e quest’ultimo andrà ad aggiungersi allo stile del nostro tema principale, ma senza andare a modificare i file del tema principale stesso.
Aggiungere il codice di Google Analytics nel child theme
Spesso, per aggiungere dei codici di tracciamento come può essere Google Analytics o similari, si tende ad utilizzare dei plugin aggiuntivi o, peggio ancora, andare a modificare i file del tema principale (abbiamo già descritto quali sono i problemi dell’andare a modificare il codice del tema principale).
Un child theme ti permette di inserire il codice di Google Analytics in maniera pulita e sopratutto senza l’ausilio di plugin esterni.
Tutto ciò che bisogna fare è aprire il file “functions.php” del child theme e inserire questo codice:
function child_theme_codice_analytics() {
?>
<!-- Inserisci qui il codice di Google Analytics -->
<?php
}
add_action('wp_head', 'child_theme_codice_analytics');Fatto ciò, basterà sostituire la dicitura “<!– Inserisci qui il codice di Google Analytics –>” con il codice che Google Analytics stesso ci ha fornito.
E questo vale per la stragrande maggioranza dei codici di tracciamento esistenti, il procedimento è pressoché identico.
Modificare un tema WordPress tramite child theme
Un altra interessante caratterista di un child theme, è la possibilità di modificare uno o più file del tema principale.
Si tratta di una pratica leggermente più tecnica rispetto alle altre, e richiede delle conoscenza (seppur minime) di HTML e PHP.
Facciamo un esempio pratico per capire meglio: facciamo finta di voler inserire un pulsante all’interno del footer del nostro sito web.
Supponiamo che il tema che stiamo utilizzando non permetta di farlo, quindi l’unica possibilità è quella di agire sul template del tema.
In questo specifico caso, dovremo modificare il file “footer.php” del tema per inserire il nostro codice personalizzato e mostrare il pulsante.
Chiaramente, come già spiegato precedentemente, non è consigliabile modificare i file del tema principale, ma è necessario utilizzare un child theme.
Tutto ciò che dovremo fare, sarà quello di copiare il file “footer.php” del tema principale, e di incollarlo nella cartella del nostro child theme.
In questo modo, il file “footer.php” del child theme avrà maggiore rilevanza rispetto a quello del tema principale, e il sistema lo utilizzerà come template predefinito.
Ora, con tutta tranquillità, potremo modificare il file “footer.php” del child theme e inserire il pulsante che tanto vogliamo.
Il tutto, senza aver toccato i file del tema principale, quindi evitando spiacevoli sorprese nel momento in cui ci sarà un nuovo aggiornamento del tema.
In questo caso abbiamo preso come esempio il file “footer.php“, ma questa pratica può essere fatta per molti file del tema WordPress principale (escluso il functions.php).
Conclusioni
In questa guida abbiamo parlato dei child theme di WordPress, di come si creano e di come si installano. Abbiamo anche visto alcune delle loro potenzialità e anche alcuni esempi pratici.
Da come si può intuire, le potenzialità di un child theme sono direttamente proporzionali alle proprie conoscenze sul PHP, CSS e jQuery, quindi è del tutto normale se inizialmente, sopratutto se si è ai primi passi, si hanno difficoltà ad andare oltre alla semplice aggiunta di codice CSS personalizzato; tutte le cose vengono per gradi 😉
Sei in cerca di un form per il tuo sito WordPress? Con Gravity Forms puoi creare tutti i form di cui hai bisogno, dai più semplici form di contatto fino a complessi form per le tue attività!
