WordPress child theme: come crearlo

🕐 7 minuti @ Condividi via Email
Aggiornato:
WordPress child theme, a cosa serve, come crearlo
(Image by fsweb_de from Pixabay)

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


WordPress Child Theme: 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.

Per non perdere le modifiche apportate

In caso contrario, se hai eseguito una personalizzazione anche minima del tema utilizzato, colore link, sfondo, etc. ma soprattutto modifiche ai singoli file, questa verrà perduta ogni qualvolta viene eseguito l'update del tema genitore, il Parent Theme, in quanto i vecchi file verrebbero sovrascritti da quelli più recenti.

Utilità

Quando vai 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 di questo tipo 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 che avrai creato.

Come procedere

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 e indispensabile che serve per creare il Child Theme, gli altri, come ad esempio functions.php sono opzionali; questo però, è essere di estrema utilità.

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.

Tema Child attivato

Da questo momento, sarà il tema Child Theme ad essere attivo, e continuerà a 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:

1) 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

2) 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 e 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 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 in uso

A questo punto, creata la directory, 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 nella directory.

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, e il file functions.php senza toccare i file del tema, puoi portare tutte le modifiche che vuoi, e internet è pieno di tutorial.

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, in questo 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.

 

Felice Amadeo - af1.it
Dal 2006 lavoro con internet, scrivo i contenuti e provvedo alla gestione del sito. Ho conosciuto WordPress tanti anni fa, e dal 2013 uso questo.
Invecchiando, ho scoperto che mi piace portare il cappello.