Un tema child (tema figlio) in WordPress è un tema che acquisisce tutte le funzionalità di un altro tema, detto tema padre ma che può essere personalizzato senza dover modificare il tema padre.
Questo permette di continuare a ricevere aggiornamenti al tema padre, senza perdere le tue personalizzazioni.
Indice
Perché è importante un tema child?
Perché consente di modificare, aggiungere, eliminare delle funzionalità o delle parti di un tema, senza modificare i file del tema padre.
In questo modo aggiornando il tema padre, non perderai le tue modifiche.
È importante creare un tema child per qualsiasi tema, sia a pagamento che gratuito.
I temi child servono proprio per avere la possibilità di mantenere le personalizzazioni che hai apportato al tema e contemporaneamente avere la possibilità di aggiornare il tema padre accedendo alle nuove funzionalità, risoluzioni di errori e a migliorarne la sicurezza.
Come creare un tema child
É possibile creare un tema child per qualsiasi tema.
Prenderò come esempio il tema di default di WordPress, il tema Twenty Twenty-Five.
Per creare il tema child di un altro tema, basta che segui i passaggi successivi e sostituisci il nome twentytwentyfive e Twenty Twenty-Five con il nome del tuo tema.
Crea la cartella del tema child
Vai su wp-content/themes e crea una cartella con il nome del tuo tema in versione kebab-case (e aggiungi -child all fine per capire che è un tema child), ad esempio twentytwentyfive-child.
Crea il file style.css del tema child
Dobbiamo creare il file style.css che è obbligatorio per ogni tema WP.
Questo file conterrà informazioni che WP leggerà ed utilizzerà per registrare il tema.
Dentro la cartella twentytwentyfive-child crea un nuovo file style.css ed incolla il seguente codice:
/**
* Theme Name: Twenty Twenty-Five Child
* Template: twentytwentyfive
*/Questi codici servono per dare a WordPress le informazioni del tema che verranno visualizzate in Aspetto > Temi.
- Theme Name: è il nome del tema child
- Template: è il nome della cartella del tema padre, è case sensitive (distingue tra maiuscole e minuscole). È obbligatorio.
Attenzione: il valore di Template deve corrispondere esattamente alla cartella del tema genitore che si trova in wp-content/themes.
Queste sono le informazioni principali, ma è possibile aggiungerne molte altre. Guarda la documentazione sullo stylesheet.
Installa e attiva il tema child
Se hai seguito i passaggi sopra, il tuo tema dovrebbe essere già installato.
Vai su Aspetto > Temi e cerca il tuo tema child.
Clicca sul pulsante Attiva.
Perfetto, hai creato ed attivato il tuo tema child.
Al momento sembra tutto uguale al tuo tema padre, ma ora puoi iniziare a personalizzarlo come meglio credi.
Personalizzare il tema child
Dobbiamo dire a WordPress di caricare il file style.css del tema figlio.
Crea il file functions.php ed inserisci questo codice:
<?php
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_child_enqueue_styles' );
function twentytwentyfive_child_enqueue_styles() {
wp_enqueue_style(
'twentytwentyfive-child-style',
get_stylesheet_uri()
);
}Ora il tuo file style.css verrà caricato anche nel frontend.
Così per fare un piccolo test visuale, modifica il colore dello sfondo e del titolo, aggiungi al file style.css questo codice:
body {
background-color:#1d1e1d;
color: #fff;
}Vai sulla home del sito e se vedi che cambia colore, vuol dire che funziona tutto.
Ora puoi rimuovere il codice di test che hai appena inserito.
Il tema child ora è una copia identica del tema padre.
Ha tutte le sue funzioni, e non aspetta altro che essere personalizzato come si deve.
Ogni variazione di stile che vorrai fare, andrà fatta sul file style.css del tema child, non su quello del tema padre, altrimenti al prossimo aggiornamento del tema padre perderai tutto.
Ogni variazione che apporterai sul file style.css del tema child, sovrascriverà un’eventuale istruzione analoga del tema padre.
Template, parts, e pattern
In WordPress, un tema child (tema figlio) eredita tutto dal tema parent (tema padre), ma ti permette di modificare o sovrascrivere parti specifiche senza alterare direttamente i file originali del tema padre.
Se nel tema padre c’è, ad esempio:
/wp-content/themes/tema-padre/template-parts/header.php
puoi creare nel tema child una struttura identica:
/wp-content/themes/tema-child/template-parts/header.php
WordPress userà il file del tema child al posto di quello del tema padre.
Questo principio vale per:
- Template (es.
single.php,page.php,archive.php, ecc.) - Template parts (es.
/template-parts/*.php) - Patterns (blocchi riutilizzabili in
/patterns/) - File di blocchi o template JSON (es.
/templates/page.htmlo/parts/header.htmlnei temi a blocchi)
Per approfondire puoi leggere la documentazione ufficiale.
Usare il file functions.php
Il file functions.php del tema child non verrà caricato al posto del file functions.php del tema padre.
Infatti verranno caricati entrambi, con quello child che verrà caricato prima di quello padre.
In questo modo è possibile gestire in maniera intelligente anche le funzioni del tema padre.
Utilizza sempre il file functions.php del tema child per aggiungere nuove funzioni.
Per includere dei file che si trovano all’interno della cartella del tema child, utilizza la funzione get_theme_file_path() in questo modo:
require_once get_theme_file_path( 'inc/functions-helpers.php' );Dove functions-helpers.php è il file da includere che si trova dentro la cartella inc.
