L'utilizzo del tema child, previa installazione del tema genitore, può essere utile per
evitare che gli aggiornamenti del tema in uso possano sovrascrivere le personalizzazioni apportate allo stesso. Utilizzando un tema child, infatti, gli aggiornamenti vengono eseguiti direttamente sul tema principale e non sul tema child su cui sono state eseguite le personalizzazioni, permettendo ai due temi (child e genitore) di lavorare insieme, completandosi.
Per creare un tema child, una volta installato il tema genitore, è necessario seguire le operazioni indicate di seguito (a titolo esemplificativo verrà creato un tema child per il tema StoreFront):
- accedere al proprio spazio web tramite un client FTP oppure utilizzando lo strumento File Manager;
- all'interno della cartella "wp-content/themes" creare una cartella nominata "@nomedeltema@-child" (ad esempio se il tema genitore è StoreFront, indicare "storefront-child");
- all'interno di tale cartella creare un nuovo file con nome style.css;
- il file style.css dovrà contenere un'intestazione (header) composta dai campi di seguito riportati. Tali campi dovranno essere necessariamente popolati affinché il tema child sia utilizzabile, ma le indicazioni riportate a compilazione dei campi sono a mero titolo esemplificativo:
/*
Theme Name: @nometema@ Child
Theme URI: URL del sito padre (copiarlo da style.css dentro la cartella del tema padre)
Description: @nometema@ Child Theme
Author: uguale al file style.css originario
Author URI: uguale al file style.css originario
Version: uguale al file style.css originario
Text Domain: @nometema@child
Template: uguale al file style.css originario
License: uguale al file style.css originario
License URI: uguale al file style.css originario
*/
- è consigliabile che la riga di testo Theme Name: sia compilata con il nome del template seguito da "Child" (per esempio: "Storefront Child");
- è consigliabile che la riga di testo Description: sia compilata con il nome del tema seguito da Child Theme (per esempio "Storefront Child Theme");
- è obbligatorio che la riga di testo Template: sia compilata con stesso contenuto dell'intestazione presente sul file style.css del tema padre (per esempio "storefront");
Nel caso di modifiche sul tema child, il file "style.css" del tema child dovrà contenere solo le personalizzazioni diverse da quelle dello "style.css" del tema genitore. Inoltre è buona norma aggiungere il suffisso !important a tutte le personalizzazioni effettuate sul tema child, affinché WordPress le riconosca come prioritarie rispetto al tema padre.
Ad esempio:
.link-more a{color:#FF0000 !important;}
- a questo punto importare lo style del tema padre: per farlo creare il file functions.php nella cartella del tema child. Tale file dovrà contenere la funzione PHP come nell'esempio riportato di seguito:
<?PHP
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>
- accedere al pannello di controllo di WordPress: il nuovo tema child creato sarà visibile tra la lista dei temi, ma senza alcuna immagine. Per visualizzare l’immagine di anteprima del tema child è necessario caricare all'interno della cartella del tema stesso un'immagine dal nome "screenshot.jpg" (per comodità si consiglia di utilizzare la stessa immagine del tema padre);
- selezionare infine il tema child come tema utilizzato da WordPress.
È consigliato verificare dagli strumenti del browser (console errori) la classe dello stile da modificare. Nello specifico verificare, come nell’esempio, che il nome della classe sia completo “body.page-two-column:not(.archive) #primary .entry-header”: non è infatti sufficiente indicare solo la classe dell’elemento selezionato.