Hai comprato un bellissimo tema WordPress e adesso lo vorresti personalizzare e renderlo diverso da tutti quei siti che usano il tuo stesso tema?
Non sai ancora cosa sia un tema child WordPress?
Vuoi sapere come crearne uno?
Ecco allora una mini guida pratica per poter creare un Tema Child.
Molto probabilmente ti sarai già trovato nella condizione di dover effettuare personalizzazioni al tuo template WordPress, per renderlo più adatto al tuo stile grafico, aggiungere qualche nuova funzionalità o cambiare il layout dei tuoi contenuti per renderli più efficaci e impattanti. Molte volte bisognerà mettere mano al codice e al css per poter fare delle modifiche impattanti sul proprio sito.
Il tema genitore non si dovrebbe mai modificare!
Il motivo principale è che bisogna tenere tutto sempre aggiornato (ultima versione WP, ultima versione del tema e ultima versione plugin ovviamente prima di aggiornare si fa sempre il backup!).
Se modifichiamo il tema genitore dopo un aggiornamento del tema rischiamo di perdere tutte le modifiche fatte perchè vengono sovra scritte dall’aggiornamento del tema. Allo stesso tempo, se non siamo esperti sviluppatori, rischiamo di commettere errori e “rompere” il tema genitore.
Per fortuna c’è un modo abbastanza facile senza dover modificare il tema principale. La soluzione è quella di creare un tema child.
Cos’è un Tema Child e perchè usarlo
Un tema child (tema figlio) WordPress è un tema che prende tutte le funzionalità e caratteristiche del tema genitore, solitamente chiamato tema parent (tema padre o genitore). Con il tema child si riesce a cambiare lo stile e il funzionamento del tema padre senza però toccare una riga di codice del tema genitore stesso!
I 3 motivi principali per usare un tema child
1) Preservare le modifiche: se modifichi il tema genitore perderai probabilmente tutte le modifiche fatte dopo ogni aggiornamento.
2) Avere codice organizzato: è molto più facile tenere traccia di tutte le modifiche fatte se vengono effetuate in file separati dal tema padre. E’ molto importante tenere traccia del proprio codice per essere sempre sicuri che ci sia compatibilità con il restante codice di WordPress. Un altro motivo è la sicurezza. Bisogna continuamente testare la sicurezza del proprio sito ed impedire ad ogni costo che un hacker faccia dei danni.
3) Sviluppo più rapido: i temi child ereditano le funzioni dal codice del tema genitore. Questa caratteristica elimina la necessità di riscrivere enormi pezzi di codice e quindi si velocizza molto lo sviluppo del sito.
Come creare un tema Child
Quasi tutti i temi acquistati di alta qualità hanno in dotazione un tema child ma è comunque bene sapere come creare un tema child da zero.
Per iniziare abbiamo bisogno di un accesso FTP al sito e un editor di testo o vostro IDE preferito. Per lo scopo di questa guida utilizzeremo il tema “Twenty Sventeen” https://wordpress.org/themes/twentyseventeen/ che è stato recentemente aggiornato (Giugno 2017).
Step 1:
Dobbiamo creare una nuova cartella dentro la cartella dei temi. Il percorso è /wp-content/themes
Nominiamo questa nuova cartella twentyseventeen-child (/wp-content/themes/twentyseventeen-child/)
Step 2:
Creaiamo un foglio di stile e lo nomiano style.css. Questo file va salvato all’interno della cartella “twentyseventeen-child”.
Apriamo il file style.css in un editor di testo/IDE e inseriamo il seguente commento in cima al file.
/*
Theme Name: Twenty Seventeen Child
Theme URI: www.babita.it
Author: Babita
Author URI: www.babita.it
Description: Il mio primo tema child. Parent theme: Twenty Seventeen.
Version: 1.0
Template: twentyseventeen
Text Domain: twentyseventeen-child
*/
Ovviamente per Theme URI, Author, Author URI, Description, Version possiamo mettere quello che vogliamo.
E’ invece molto importante inserire le informazioni corrette in Theme Name: Twenty Seventeen Child e Template: Template: twentyseventeen perchè dicono a WordPress il nome del nostro tema child e il nome del nostro tema padre.
Step 3:
Creiamo un file e lo nominiamo functions.php
Questo file va salvato all’interno della cartella “twentyseventeen-child”
per esempio: /wp-content/themes/twentyseventeen-child
All’inzio del file functions.php del nostro tema child inseriamo <?php .
Non è necessario chiudere il tag php.
Dopodichè usiamo la funzione wp_enqueue_style() “hooked” a wp_enqueue_scripts per richiamare il foglio di stile del tema principale e se il tema padre dovesse averne più di uno lo inseriamo all’interno della funzione nel seguente modo:
add_action( ‘wp_enqueue_scripts’, ‘mio_tema_enqueue_stili’ );
function mio_tema_enqueue_stili() {
wp_enqueue_style(‘parent-style’, get_template_directory_uri().’/style.css’ );
}
Importare il tema genitore tramite @import nel file style.css del nostro tema child non è consigliabile e in alcuni casi si potrebbe creare un conflitto con i vari fogli di stile, soprattutto se si usano servizi tipo Cloudflare.
Step 4:
Adesso possiamo attivare il nostro tema child.
Andiamo nel nosto wp-admin in aspetto/temi e attivamo il tema chiamato twentyseventeen-child
In questo momento se visualizziamo il nostro sito, dovrebbe essere identico a prima anche se stiamo usando un tema diverso da quello di prima.
Il motivo di questa cosa è che abbiamo importato il foglio di stile del nostro tema padre e non abbiamo ancora inserito degli stili nel foglio di stile del nostro tema child.
Adesso possiamo iniziare ad inserire gli stili nel nostro file /wp-content/themes/twentyseventeen-child/style.css e a modificare il tema.
Possiamo anche creare dei template files per la nostra homepage o altre pagine nello stesso modo in cui abbiamo creato i file style.css e functions.php.
Per esempio, se vogliamo cambiare il codice per la testata del sito, includiamo un file header.php nella directory del tema child e questo file verrà utilizzato al posto dell’header.php del tema genitore.
Note finali
Ecco una guida in inglese sui templates e la loro gerarchia: https://developer.wordpress.org/themes/basics/template-hierarchy/
Usare i temi child è il modo più corretto, oltre che raccomandato da WordPress, per poter modificare i temi. Questo sistema aiuta a tenere il tuo codice organizzato ed elimina il rischio di perdere tutte le tue modifiche ogni volta che aggiorni il tema genitore.