Un child theme di WordPress (o "tema figlio") è un tema che eredita le funzionalità di un altro tema, chiamato "tema genitore". Utilizzare un child theme è il modo più semplice e sicuro per modificare un tema esistente, perché permette di aggiungere nuove features o di modificare l'aspetto del tema genitore senza sovrascrivere direttamente i file originali.
Perché utilizzare un child theme?
Tra i motivi fondamentali che spingono all'uso dei child theme c'è al possibilità di utilizzare temi di terze parti e creare delle features particolari per le nostre esigenze senza modificare direttamente il core del tema, con il vantaggio di non dover rifare tutto il lavoro ad ogni aggiornamento del tema padre.
Possiamo anche essere noi a costruire il parent-theme, per avere sempre una base di features comuni da utilizzare su diversi siti e poi di specializzare le funzionalità a seconda delle caratteristiche di ogni sito particolare. In questo caso il vantaggio si presenta quando dobbiamo aggiungere una funzionalità comune a tutti i siti e possiamo farlo modificando solo il parent theme.
Inoltre, si tratta di un ottimo sistema per comprendere la gerarchia dei file e poter sviluppare un proprio tema personalizzato facilitando la fase di sviluppo. In assenza di child theme, modificare semplicemente il codice del tema padre rappresenterebbe una soluzione sì percorribile, ma di dubbia efficacia; questo perché, come anticipato, al primo aggiornamento del tema le modifiche apportate andrebbero perse.
Come creare un child theme di WordPress
Impostare un child theme è un'operazione piuttosto semplice, utilizzando un qualsiasi software per la gestione dei file via FTP, è sufficiente creare una cartella nella directory dei temi di WordPress (../wp-content/themes) alla quale possiamo assegnare il nome twentyfourteen-child (il nome è indicato a titolo di esempio, potrà quindi essere assegnato un qualsiasi altro nome). All'interno della cartella l'unico file veramente indispensabile è style.css, questo file, tramite la sua intestazione, servirà per indicare a WordPress a quale tema padre il child theme deve fare riferimento.
L'intestazione del file style.css può contenere diverse informazioni ed essere simile alla seguente:
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/
@import url("../twentyfourteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */La sintassi /* e */ è fondamentale (obbligatoria) perché indica a WordPress l’apertura e la chiusura dell’intestazione (header). Fra le informazioni di esempio solo due sono strettamente necessarie: Theme Name, perché serve ad assegnare il nome del child theme, e Template, perché serve ad assegnare il tema al quale fare riferimento, indicando il nome della directory del tema padre (il nome della directory è case sensitive, quindi fa distinzione tra lettere maiuscole e minuscole).
Per quanto riguarda gli altri argomenti, il loro utilzzo e il ruolo svolto da ciascuno di essi, è possibile fare riferimento allo schema proposto di seguito:
| Parametro | Utilizzo | Descrizione |
|---|---|---|
| Theme URI | (opzionale) | URI al tema figlio. |
| Description | (opzionale) | Descrizione. |
| Author | (opzionale) | Nome dell’autore. |
| Author URI | (opzionale) | Pagina web dell’autore. |
| Version | (opzionale) | Versione del child theme. |
| Tags | (opzionale) | Etichette per la classificazione del tema. |
Dopo la dichiarazione dell'intestazione del tema è necessario importare il foglio di stile del tema padre tramite:
@import url("../twentyfourteen/style.css");.A questo punto, se l'intestazione è stata compilata correttamente, il child theme è pronto per essere attivato. Accedendo nell'area amministrazione sotto la voce "aspetto" > "temi", lo si potrà trovare fra i temi installati e disponibili. Sarà quindi sufficiente cliccare su "attiva" per iniziare a utlizzarlo. Volendo aggiungere una immagine di anteprima personalizzata, è possibile creare un file immagine chiamato screenshot.png e posizionarlo nella directory del tema child. In alternativa è sufficiente copiare e incollare il file screenshot.png dalla directory del parent theme.
Inizialmente il tema figlio, sarà una semplice copia speculare del tema padre per il fatto che ancora non sono state inserite particolari personalizzazioni che potrebbero essere sia di tipo "estetico", con la definizione di nuove regole di stile, oppure funzionali con la definizione di nuove istruzioni.
Le nuove regole di stile possono essere inserite direttamente in style.css di seguito all'istruzione di import del CSS del tema padre. Per esempio, volendo modificare il colore dei titoli rispetto al tema padre possiamo aggiungere una regola apposita. Le regole del tema figlio avranno la precedenza su quelle equivalenti del tema padre, sovrascrivendole.
Il concetto di precedenza nei child themes
Il concetto di precedenza è il cardine del meccanismo che regola il rapporto fra il tema figlio e il tema padre. Infatti, non solo le regole di stile del tema figlio, ma anche i file (per esempio: header.php, footer.php e index.php) e le funzioni all'interno dei file del tema figlio, avranno la precedenza rispetto alle equivalenti del tema padre.
Quindi, nel caso si voglia modificare il file header.php, è sufficente creare un file con lo stesso nome nella directory del child theme per poi personalizzarlo a seconda delle necessità. Anche in questo caso il codice scritto nel file header.php del child theme sostituirà quelle dello stesso file del tema padre. Se nella directory del child theme non fosse presente il file header.php, allora WordPress utilizzerà quello fornito dal tema padre.
Child themes e file functions.php
Nel tema figlio è possibile creare una copia speculare o modificata per ogni file già presente nel tema padre; come precedentemente esposto, questi andranno a "sovrascrivere" il proprio corrispondente. C'è solo un file che fa eccezione a questo meccanismo ed è il file functions.php, questo infatti non sovrascrive il suo corrispondente ma viene caricato subito prima e in aggiunta rispetto a quello presente nel tema padre.
Si tratta di un dettaglio di non poco conto, non è mai una buona pratica copiare l'intero contenuto del file functions.php del tema padre in quello del tema figlio, infatti, in questo caso WordPress produrrà una notifica di errore simile alla seguente, generata utilizzando Twenty Fourteen, il tema di default del CMS per il 2014:
Fatal error: Cannot redeclare nome_funzione() (previously declared in /public_html/wp-content/themes/twentyfourteen-child/functions.php:4) in /wp-content/themes/twentyfourteen/functions.php on line 528Ciò accadrà a causa del fatto che una determinata funzione viene dichiarata in modo non univoco, prima nel functions.php del tema figlio e poi in quello del tema padre. Se non si tiene conto di questo piccolo dettaglio si rischia di perdere parecchio tempo prima di trovare una soluzione all'errore. Il file functions.php del tema figlio dovrebbe aggiungere unicamente funzionalità non presenti nel file functions.php del tema padre o quantomeno solo funzioni che non siano state già dichiarate in precedenza con lo stesso nome.
Conclusioni
I child themes sono uno strumento molto utile e potente, tuttavia, per quanto possa essere semplice impostarli, è sempre un'ottima pratica predisporre una tema per la loro adozione già al momento del rilascio. Approfondiremo l'argomento in un prossimo articolo tramite l'analisi di alcuni aspetti specifici riguardanti le gerarchie tra i temi.
