Tema child di WordPress

215
Tema child di WordPress

Un tema child di WordPress o child theme (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 di WordPress.
Nella prima parte della guida verrà spiegato cos’è un tema child di WordPress e perché utilizzarlo mentre nella seconda parte della guida vedremo come attivarlo e come funziona.

Cos’è un tema child di WordPress

Se vogliamo effettuare semplici modifiche oppure 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 tema genitore o parent theme (il tema scelto e utilizzato per personalizzare WordPress) potremo cambiare i file che compongono il child theme.
Il tema child di WordPress 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 tema child 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 tema child di WordPress

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

Creare la directory del tema child

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 tema child 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 tema child 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 tema child 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 tema child di WordPress

Dopo aver visto come creare un tema child 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 tema child 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 tema child. 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 tema child.

Personalizzare il tema di WordPress

Continuiamo la guida su come creare un tema child 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 un tema child WordPress

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

Il file style.css

Il meccanismo di funzionamento di un tema child 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 tema child 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 tema child non sarà eliminata.