Child Themes di WordPress: come crearlo

Come creare il Child Theme in WordPress
WordPress Child Theme (Image by fsweb_de from Pixabay)

Child Theme di WordPress: conviene crearlo per non toccare mai i file originali del tema che usi e puoi personalizzare facilmente il sito.


Cos'è

Il Child theme di WordPress è una directory aggiuntiva da creare, una cartella in pratica, che contiene i file necessari a mantenere la personalizzazione che imposti tu al tema principale utilizzato, anche quando si esegue il periodico update del tema. In caso contrario, se si è eseguita una personalizzazione anche minima del tema utilizzato (colore link, sfondo, etc.) questa verrà perduta ogni qualvolta si esegue il periodico update del tema utilizzato, in quanto i vecchi file verrebbero sovrascritti da quelli più recenti.

Utilità del Child Theme di WordPress

Quando si va ad installare un tema di WordPress, molto spesso si ha l'esigenza, o solo il desiderio, di personalizzare il tema stesso con colori, logo, diciture, etc. diversi dal layout predefinito dal tema che usi, quello di default.

Nonostante la miriade di temi, plugin, widget a disposizione, e tutto gratuitamente, tutti di qualità, controllati e curati nel dettaglio anche dal punto di vista grafico, soprattutto per chi ha un po' di dimestichezza con la programmazione, modificare qualcosa è quasi scontato.

Nessun problema, questo è uno dei vantaggi di un CMS (Content Management System), nella fattispecie di WordPress. La cosa importante, per evitare che al primo aggiornamento le modifiche di personalizzazione vengano perse, è utile creare un Child theme, ovvero una directory figlia della directory genitore, Parent theme.

Avere un directory Child Theme, permette inoltre di sapere con precisione quali modifiche hai portato, cosa che torna molto utile se il codice implementato è abbondante, senza andare a correggere, e ritoccare i file originali del tema.

Dal momento che per quanto riguarda la sicurezza è bene sempre aggiornare WordPress quando sono disponibili le nuove versioni, sia per quanto riguarda WP che il tema, ogni volta che sono disponibili versioni di aggiornamento, quando entri in area riservata ti viene immediatamente notificato.

Potrai procedere senza preoccupazione alcuna ad aggiornare la versione del tema, in quanto le modifiche apportate in precedenza saranno salvate, e non sovrascritte, nella directory Child Theme che avrai creato.

Come procedere per creare il Child Theme di WordPress

Ipotizziamo che il tema utilizzato sia Twenty Tweenty, e desideri apportare modifiche allo stile grafico, e aggiungere funzioni, secondo le tue esigenze.

1) Crea una directory denominata: twentytwenty-child trattino incluso.

2) Il file style.css è l'unico ed indispensabile file che serve per creare il Child Theme, gli altri, come ad esempio functions.php sono opzionali.

3) Crea un semplice file di testo sul tuo PC, e lo devi rinominare style.css e devi inserire queste righe di codice all'inizio:

/*
Theme Name: Twenty Twenty Child
Template: twentytweenty
/*
@import url("../twentytwenty/style.css");

Questo è il codice essenziale per far funzionare il tema, se vuoi puoi aggiungere altre informazioni aggiuntive:

/*
Theme Name: Twenty Twenty Child
Template: twentytweenty
Theme URI: http://example.com/
Description: Child theme for Twenty Twenty
Author: Il tuo nome
Author URI: http://example.com/about/
Version: 1.0
*/
@import url("../twentytwenty/style.css");

4) Esegui l'upload della cartella creata con all'interno il file style.css e functions.php se usi anche questo, che è di estrema utilità.

5) Entra nell'area di amministrazione del sito, e vai a:

WordPress Bacheca > Aspetto > Temi > Twenty Twenty Child e attivi il tema.

Da questo momento, sarà il tema Child Theme ad essere attivo, e continuerà ad utilizzare tutte le funzioni e lo stile grafico del Parent Theme, ovvero il tema in uso.

Aggiungendo il codice appropriato al file style.css e functions.php puoi personalizzare, modificare, layout e funzioni.

A cosa serve il codice di base del file style.css

Queste righe permettono a WordPress di interpretare le istruzioni, dove:

Theme Name, la prima riga, stabilisce che la directory in cui è contenuto il file è figlia di Twenty Twenty, e quindi prende il nome di Twenty Twenty Child;
Queste sono le due istruzioni essenziali
Template, il nome del tema Parent, il nome esatto della directory (attenzione a maiuscole e minuscole, usa solo lettere minuscole);

Theme URI, l'url del sito;

Description, descrive che questo tema, sebbene contenga anche il solo file style.css è figlio del tema Parent (Twenty Twenty);

Author, il nome dell'autore con cui verrà identificato il tema in area di amministrazione;

Author URI, l'url dell'eventuale pagina di presentazione dell'autore;

Version, la versione del tema Parent.

Theme Name e Template sono righe di codice indispensabili in quanto identificano il nome del tema Parent, e quello della rispettiva directory.

Altra riga di codice che non può mancare è la seguente:


@import url("../twentytwenty/style.css");

Tuttavia, se installi anche il file functions.php nella directory Child Theme, puoi usare questo codice per importare il file style.css ed ovviamente devi togliere @import url("../twentytwenty/style.css"); altrimenti il file verrebbe caricato due volte:


add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'twentytwenty-style'; // in questo esempio usiamo il tema Twenty twenty
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}

Il tema oggetto in questo esempio è Twenty Twenty, quindi se utilizzi un tema diverso, devi sostituire il nome della directory, in questo caso twentytwenty, con quello in uso, nel mio caso ad esempio: generatepress-child dato che uso il tema GeneratePress.

Il codice sopra, sia @import url che quello in PHP, e usi uno o l'altro, istruisce il file style.css del Child Theme, di adottare tutti i criteri di stile dall'altro file omonimo che si trova nella Parent directory.

Questo codice va inserito prima di qualsiasi modifica di stile che intende fare, in caso contrario non funzionerebbe perché viene interpretato in maniera sequenziale.

Modificare il tema utilizzato con il Child Theme

A questo punto, creata la directory Child Theme, puoi inserire anche altri file modificati che andranno a sostituire, a sovrascrivere, quelli della Parent directory.

Se desideri modificare l'intestazione del CMS modificando il file header.php ad esempio, devi creare un nuovo file header.php che vai ad inserire nel Child Theme.

Ogni file che si andrà ad inserire nella Child directory, di fatto avrà la precedenza su quello omonimo contenuto nella Parent directory.

Io ti consiglio di avere solo 2 file nel Child Theme: il primo style.css che ricordo è indispensabile per far funzionare il tema figlio, ed il file functions.php senza toccare i file del tema.

In primo luogo, semplifichi le cose; e poi a questo file puoi davvero aggiungere qualsiasi cosa ti serva.

Il file functions.php del tema principale, il Parent Theme, nel nostro esempio Twenty Twenty, non viene sovrascritto, se presente anche nella Child directory, per impostazione di WordPress viene tenuto in considerazione per primo quello presente nella Parent directory.

Quindi, se intendi aggiungere nuove funzioni, è comunque possibile creare un nuovo file (vuoto) functions.php da inserire nella Child directory, e aggiungere le funzioni che desideri, come ad esempio quella per importare il file style.css usando PHP.

Questa è la pagina di WordPress dove viene spiegato nel dettaglio, tutto e di più, riguardo al Child Theme: Temi Child WordPress Codex, inclusi altri link a specifiche pagine dove sono illustrate tutta una serie di funzioni, anche per gli sviluppatori.