Child theme di WordPress: cos’è e come si crea

431
Child theme di WordPress

Un child theme di WordPress (tradotto in italiano come tema figlio) è un particolare tipo di tema che consente di apportare modifiche al tema utilizzato senza sovrascrivere il codice originale di quest’ultimo.
Può essere creato in modo semplice e veloce ed è possibile utilizzarlo in associazione a qualsiasi tema WordPress.
Nella prima parte della guida verrà spiegato cos’è un child theme e perché utilizzarlo mentre nella seconda parte della guida vedremo come attivarlo e come funziona.

Cos’è un child theme di WordPress?

Se vogliamo effettuare semplici modifiche o cambiamenti significativi al tema che genera il layout di WordPress dobbiamo cambiare il codice del file style.css e degli altri file php che lo compongono. Se creiamo un tema figlio, invece di modificare i file del parent theme o tema genitore (il tema scelto e utilizzato per personalizzare WordPress), potremo cambiare soltanto i file che compongono il tema figlio.
Il child theme erediterà tutte le funzionalità del parent theme ma le parti di codice modificate verranno sovrascritte a quelle del tema genitore lasciando inalterato tutto il resto.

Perché utilizzare un child theme di WordPress?

Il motivo principale per cui si utilizza un tema figlio è per non perdere le modifiche effettuate dopo un aggiornamento del tema principale (→ come aggiornare un tema WordPress). L’aggiornamento di un tema WordPress comporta infatti la sovrascrittura di tutti i file che lo compongono e il conseguente annullamento di tutte le eventuali modifiche effettuate nel foglio di stile e negli altri file.
Se utilizziamo un tema figlio potremo aggiornare il tema principale senza perdere le modifiche effettuate.

Come creare un child theme di WordPress?

Vediamo adesso come creare un child theme di WordPress nel modo corretto.

Creare la directory

Supponiamo di voler creare il tema figlio del tema Twenty Seventeen, uno dei temi di default di WordPress.
La prima cosa da fare è creare nel nostro spazio web la directory che conterrà il tema figlio. Il tema figlio dev’essere creato in una propria directory, diversa da quella del tema principale.
Tramite FTP o qualsiasi applicazione per la gestione dei file, creiamo una nuova cartella nella directory dove sono presenti i temi di WordPress (../wp-content/themes).
Chiamiamo questa directory twentyseventeen-child
Questo è il nome che useremo nel nostro esempio ma la cartella può essere chiamata in qualsiasi modo. L’importante è non lasciare nessuno spazio vuoto tra i termini del nome.

Creare il file style.css

All’interno della cartella twentyseventeen-child dobbiamo creare un nuovo file chiamato style.css.
Importante: il file style.css è il solo e unico file necessario per creare un child theme di WordPress. Fornisce le informazioni che consentono a WordPress di riconoscere il tema figlio e sostituisce, sovrascrivendolo, il file style.css del tema genitore.
Tutti gli altri file presenti in un child theme sono opzionali.
Adesso apriamo il file style.css e inseriamo le seguenti informazioni:

/*
Theme Name: Twenty Seventeen Child
Description: Child Theme del tema Twenty Seventeen
Author: Memex Computer
Author URI: https://www.memexcomputer.it/
Template: twentyseventeen
Version: 0.1
*/

Salviamo il file style.css.
Vediamo a cosa serve ogni informazione e come deve essere compilata.

/* (obbligatorio) – Indica a WordPress l’apertura dell’intestazione.
Theme Name: (obbligatorio) – È il nome che vogliamo dare al tema figlio.
Description: (opzionale) – È la descrizione del tema figlio.
Author: (opzionale) – È il nome dell’autore del tema figlio.
Author URI: (opzionale) – È la pagina web dell’autore del tema figlio.
Template: (obbligatorio) – Indica a WordPress il nome della directory del tema principale.
Nel nostro esempio vogliamo utilizzare il tema Twenty Seventeen che si trova nella cartella ../wp-content/themes/twentyseventeen
Quindi scriveremo twentyseventeen (il nome della directory è case sensitive, cioè fa distinzione tra lettere maiuscole e minuscole).
Version: (opzionale) – È la versione del tema figlio.
*/ (obbligatorio) – Indica a WordPress la chiusura dell’intestazione.

Creare il file functions.php

Poiché il file style.css del child theme di WordPress sovrascriverà il file style.css del tema genitore dobbiamo includere il foglio di stile di quest’ultimo nel tema figlio.
Per farlo dobbiamo utilizzare il file functions.php.

Sempre all’interno della cartella twentyseventeen-child creiamo un nuovo file chiamato functions.php.
Apriamo il file functions.php e inseriamo le seguenti informazioni:

<?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' );
}

Salviamo il file functions.php.

Come attivare un child theme di WordPress

Dopo aver visto come creare un child theme di WordPress vediamo come attivarlo.
Effettuiamo l’accesso alla Bacheca di WordPress.
Selezioniamo Aspetto e facciamo clic su Temi.
Se il file style.css è stato compilato nel modo corretto nell’elenco dei Temi disponibili vedremo adesso il tema figlio.
Nel nostro esempio sarà il Twenty Seventeen Child (questo è il nome con cui l’abbiamo chiamato in Theme Name: nel file style.css).
Posizioniamo il puntatore del mouse sul child theme e facciamo clic su Attiva per attivarlo.

Il tema sarà sprovvisto di una immagine di anteprima. Se vogliamo aggiungerla dobbiamo creare un file immagine chiamato screenshot.png e posizionarlo nella directory del child theme. In alternativa possiamo copiare e incollare il file screenshot.png del tema genitore.

Il template del tema figlio che abbiamo appena attivato sarà una copia esatta del template del tema padre (nel nostro esempio il tema Twenty Seventeen). Questo perché nel file style.css del tema Twenty Seventeen Child abbiamo inserito soltanto le informazioni che servono a WordPress per riconoscere il child theme.

Personalizzare il tema di WordPress

Continuiamo la guida su come creare un child theme di WordPress spiegando come personalizzarlo.
Accediamo alla Bacheca di WordPress.
Selezioniamo Aspetto e facciamo clic su Editor.
Nella casella Selezionare il tema da modificare: facciamo clic sul nome del tema figlio (nel nostro esempio Twenty Seventeen Child).
Facciamo clic su Seleziona.
Nel riquadro destro File del tema sarà presente soltanto un file: il Foglio di stile (style.css) che abbiamo creato prima.
Se vogliamo modificare il file style.css apriamolo e inseriamo le regole.

Come funziona child theme di WordPress?

Per concludere la guida su come creare un child theme di WordPress spieghiamo come funziona.

Il file style.css

Il meccanismo di funzionamento di un child theme di WordPress è molto semplice.
Ogni regola scritta nel file style.css del tema figlio viene utilizzata al posto della stessa regola presente nel file style.css del tema genitore.
Se nel file style.css del tema figlio non è contenuta nessuna regola WordPress utilizza le regole del file style.css del tema genitore.

I files .php

Lo stesso principio vale anche per tutti gli altri file che compongono un tema WordPress (header.php, index.php, footer.php, ecc).
Se ad esempio vogliamo modificare il file header.php dobbiamo creare un file con lo stesso nome nella directory del child theme.
Anche in questo caso le regole scritte nel file header.php del tema figlio sostituiranno quelle scritte nel file header.php del tema genitore.
Se nella directory del tema figlio non è presente il file header.php WordPress utilizzerà il file header.php del tema genitore.
Nel tema figlio possiamo anche includere file che non sono presenti nel tema genitore.

Il file functions.php

L’unica eccezione a quanto detto in precedenza riguarda il file functions.php (da non confondere con il file di WordPress che troviamo nella cartella wp-includes).
Il file functions.php del child theme di WordPress non viene sostituito ma viene caricato in aggiunta al file functions.php del tema genitore (per essere precisi viene caricato subito prima di quello del parent theme).
Se aggiungiamo una funzione al file functions.php del tema genitore questa verrà eliminata al primo aggiornamento del tema. Se invece la scriviamo nel file functions.php del child theme non sarà eliminata.