Un tema child o tema figlio in WordPress è un tema che mantiene le funzionalità del tema genitore, ma che ci permette di modificare le funzionalità, l’aspetto e di mantenere le modifiche apportate in caso di aggiornamento del tema.
Il tema child eredita tutti i modelli e le funzioni del tema originale ma ne permette le modifiche poichè ne sovrascrive il codice.
Vediamo come creare un Tema Child su WordPress a partire da un tema genitore. Vi consiglio di eseguire questa operazione prima di apportare modifiche al tema genitore, in modo da non perdere il lavoro già svolto e operare direttamente sul tema figlio.
Perchè utilizzare un tema child?
Utilizzando un tema child, al primo aggiornamento disponibile per il tema genitore, non perderemo le modifiche effettuate. Considerate che gli aggiornamenti di un tema sono sempre caldamente consigliati in quanto garantiscono sicurezza e stabilità all’intero sito.
1. Creiamo il foglio di stile “style.css”
Per prima cosa dobbiamo accedere all’installazione di WordPress tramite FTP o il File Manager messo a disposizione dall’hosting, più precisamente alla cartella wp-content che contiene la cartella con tutti i temi installati, chiamata “themes”.
All’interno di questa cartella ne troveremo un’altra con il nome del tema genitore installato dal quale vogliamo creare un tema child. Creiamo all’interno della cartella “themes” una cartella con il nome del tema genitore seguita da “-child”.
Apriamo ora il blocco note o un qualsiasi editor per file di testo semplici e incolliamo il seguente testo:
/* Theme Name: Twenty Thirteen Child Theme URI: http://example.com/ Description: Tema Child per il tema Twenty Thirteen Author: nome cognome Author URI: Template: twentythirteen Version: 0.1.0 */
Dopo aver incollato il testo dobbiamo apportare alcune modifiche alle stringhe come indicato qui di seguito:
- Theme name* – Nome del tema genitore seguito da “child”
- Theme URI – Link di riferimento del tema
- Description – Descrizione testuale libera del tema, utile per capire di quale tema si tratta e di quali specifiche abbiamo adottato
- Author – Nome dell’autore del tema
- Author URI – Link di riferimento dell’autore
- Template* – Nome del tema genitore senza spazi
- Version – Numero della versione (lasciate pure 0.1.0)
*Le uniche righe obbligatorie sono “Theme Name” e “Template”, le altre sono opzionali ma sono utili per riconoscere facilmente il tema nel backend di WordPress
Ora possiamo salvare il foglio di stile nominandolo “style.css”, facendo attenzione che nel formato sia specificata l’opzione “Tutti i file”
2. Inseriamo il file nella directory del Tema Child
Creiamo una cartella all’interno della cartelle “Themes” e rinominiamola “nome-tema-child”, aggiungendo “-child” dopo il nome del tema genitore.
Inseriamo il foglio di stile creato in precedenza all’interno della cartella. Questo file andrà a sovrascrivere il foglio di stile del tema genitore.
Se vogliamo includere anche il foglio di stile del tema genitore occorre creare un nuovo file “functions.php” con il blocco note e inserire il seguente codice:
<?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' );
}N.B. vi sconsiglio di utilizzare la funzione @import poichè caricherebbe due volte il foglio di stile del tema figlio
3. Attiviamo e personalizziamo il nostro Tema Child
Ora andiamo nel backend del nostro sito e vedremo che sarà comparso un nuovo tema con l’aggiunta della dicitura “child”. Attiviamolo e saremo pronti per iniziare a modificare liberamente il nostro tema senza dover preoccuparsi di perdere le modifiche, anche al primo rilascio di aggiornamenti.
Trucchi dell’esperto
Se vogliamo che compaia anche l’anteprima del tema nella finestra dei temi installati, basterà caricare un’immagine dentro la cartella del tema child rinominandola “screenshot.png”
E’ possibile effettuare anche altre modifiche: il tema child può sovrascrivere qualsiasi file del tema genitore ad esclusione del file functions.php. Per farlo, occorrerà copiare il file dalla directory principale del tema genitore e incollarlo nella directory del tema child. Il file sarà così modificabile e non correremo il rischio di perdere le modifiche effettuare ai vari file del tema che stiamo utilizzando.
