In un precedente articolo abbiamo visto come sia possibile personalizzare un tema di WordPress tramite i child themes in tutta sicurezza, senza rischiare di perdere le modifiche effettuate in seguito ad un aggiornamento del tema padre. In questa breve trattazione verranno analizzati alcuni aspetti pratici relativi a tale procedura.
Modificare gli stili del tema padre utilizzando il child theme
Per modificare gli stili CSS del tema padre, come il colore dei testi o dei titoli, la dimensione del carattere o qualsiasi altro elemento dell'aspetto delle pagine generate dal tema, è sufficiente aggiungere delle nuove regole al file CSS del vostro child theme dopo l'istruzione @import. Le nuove regole CSS verranno aggiunte dopo quelle importate dal tema padre e sovrascriveranno quelle originali. Per esempio, volendo cambiare il colore dei titoli del tema twentyfourteen, possiamo aggiungere:
h1, h2, h3, h4, h5, h6{
color: #24890d;
}
a{
color: #FF0303;
}Dopo aver aggiornato il file e fatto il refresh della pagina nel browser, i titoli appariranno ora di un bel verde intenso e gli eventuali link presenti saranno di colore rosso anziché verde. Ovviamente questi sono solo alcuni esempi e gli stili del child theme possono essere modificati a piacimento in base alle esigenze del progetto che stiamo sviluppando.
La clausola !important
Quando dobbiamo modificare gli stili del tema padre in un CSS particolarmente complesso, può risultare utile avvalersi della clausola !important. Applicando tale clausola alla regola di uno specifico elemento abbiamo la certezza che questa prevalga su tutte le altre regole precedentemente impostate:
a{
color: #FF0303!important;
}Utilizzare questa clausola può risultare utile in diverse occasioni, tuttavia è consigliabile non abusarne perché si potrebbe creare una situazione nella quale si ha necessità di sovrascrivere una regola già marcata come !important e questo porterebbe a un circolo vizioso senza alcuna via d'uscita. Per esempio, immaginiamo che il foglio di stile del tema padre abbia una clausola !important assegnata al colore dei titoli:
h1, h2, h3, h4, h5, h6{
color: #24890d!important;
}Ogni successivo tentativo di modifica del colore di questo tag non avrebbe alcun effetto da parte del child theme; il consiglio è quindi quello di affidare le nostre personalizzazioni a elementi dotati di maggiore specificità:
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6{
color: #24890d;
}Specificando ulteriori selettori, possiamo definire in modo più mirato l'aspetto degli elementi. In questo caso abbiamo specificato il colore verde solo per i titoli all'interno del footer.
Funzioni personalizzate nel child theme
Il child theme permette di aggiungere funzionalità personalizzate al tema padre. Sarà sufficiente creare un file denominato "functions" con estensione .php (functions.php) all'interno della cartella principale del child theme. Come già visto, questo file verrà caricato da WordPress subito prima (e in aggiunta) del relativo file del tema padre. Il file functions.php deve avere una struttura che inizia e termina con i tag delimitatori di apertura e chiusura di PHP
<?php
//mie funzioni personalizzate
?>e potrà contenere tutte le funzioni che serviranno a personalizzare il child theme. Di seguito un esempio pratico che inserisce una favicon e il relativo link nell'elemento head delle pagine HTML:
<?php
function favicon_link() {
echo '' . "n";
}
add_action( 'wp_head', 'favicon_link' );
?>Dato che il file functions.php del child theme viene caricato per primo, è buona pratica nello sviluppo dei temi rendere le funzioni "pluggable", ovvero rimpiazzabili da quelle di un eventuale tema child, dichiarandole all'interno di una condizione; ad esempio:
<?php
if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
// Fai qualcosa.
}
}
?>In questo modo sarà possibile sovrascrivere la funzione del tema padre da una equivalente dichiarata nel child theme senza generare alcun errore.
Inclusione di file
Nel caso si voglia includere dei file che si trovano all'interno della struttura delle directory del tema child, è possibile utilizzare get_stylesheet_directory(). Poiché il template genitore di style.css viene rimpiazzato dallo style.css del tema child e lo style.css si trova nella root della subdirectory del tema child, get_stylesheet_directory() punterà alla directory del tema child e non alla directory del tema genitore.
Ecco un esempio, che utilizza require_once abbinato a get_stylesheet_directory per includere un file memorizzato nella struttura delle directory del tema child corrente.
<?php
require_once( get_stylesheet_directory() . '/il_file_da_includere.php' );
?>Internazionalizzazione di un child theme
L'internazionalizzazione è il processo di sviluppo di un tema o di un plugin che permette di effettuare la traduzione in altre lingue. I temi child e le estensioni dovrebbero essere predisposti per poter essere tradotti in altre lingue utilizzando le funzioni gettext. Per rendere il child theme traducibile è necessario aggiungere all'interno della cartella, una directory che accoglierà i file delle varie traduzioni.
mio-tema/languages/Occorre quindi caricare un textdomain utilizzando la funzione load_child_theme_textdomain() all'interno di functions.php durante la action after_setup_theme; un esempio pratico di quanto descritto potrebbe essere il seguente:
<?php
/**
* Impostare il textdomain del child theme.
*
* Dichiarare il textdomain per il child theme.
* Le traduzioni verranno inserite nella directory /languages/
*/
function mio_tema_setup() {
load_child_theme_textdomain( 'mio-textdomain', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'mio_tema_setup' );
?>A questo punto, le stringhe inserite nel tema child sono pronte per essere tradotte. Di seguito un semplice esempio che stampa la frase Code is Poetry
:
<?php
_e( 'Code is Poetry', 'mio-textdomain' );
?>Nel dettaglio della sintassi abbiamo Code is Poetry che rappresenta la stringa da tradurre e il textdomain definito in load_child_theme_textdomain(), mio-textdomain, che verrà utilizzato per tradurre tutte le stringhe del tema child. Nel caso si includa un file di template dal genitore, il textdomain dovrà essere modificato in quello definito dal child. Per un approfondimento si veda il riferimento I18n for WordPress Developers.
Ereditarietà dei post formats
Un tema child eredita i formati articolo (post formats) definiti dal tema genitore. I post formats specificati nel child theme utilizzando add_theme_support('post-formats') non vengono semplicemente aggiunti a quelli del tema padre ma li sovrascrivono completamente.
<?php
add_action( 'after_setup_theme', 'childtheme_formats', 11 );
function childtheme_formats(){
add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link' ) );
}
?>Si conclude così questo approfondimento sull'utilizzo pratico dei child themes.
