In questa guida vi spiegherò cos’è un Child Theme (o Tema Child) in WordPress, a cosa serve e come crearne uno per il vostro sito.
Tema Child WordPress: cos’è?
Un child theme (in italiano "Tema Figlio") è un tema che importa tutte le caratteristiche e funzionalità di un altro tema (detto Parent Theme, in italiano "Tema Genitore").
La possibilità di creare temi child è un’importante caratteristica di WordPress in quanto consente agli sviluppatori di siti web di modificare l’aspetto e le funzionalità di un tema senza agire direttamente sui suoi file originali.
Child Theme: quando conviene crearne uno?
La risposta è semplice: tutte le volte in cui vuoi personalizzare la grafica o le funzionalità di un tema WordPress per adattarlo alle specifiche esigenze di un sito web.
Quasi tutti i siti WordPress presenti in Rete sfruttano temi predefiniti: in Rete ci sono migliaia di template WordPress pronti all’uso coi quali poter vestire siti web di ogni tipo e per ogni scopo. Quando si crea un sito WordPress, quindi, molto spesso non si crea la grafica da zero, ma si cerca qualcosa di già pronto sul quale effettuare le customizzazioni del caso.
È evidente, quindi, che creare un tema child dovrebbe essere considerata una fase "obbligatoria" del processo di sviluppo di qualunque sito web basato su WordPress! Ma quali sono i vantaggi dati dall’avere un Child Theme? Vediamoli di seguito:
- consente di personalizzare un tema senza intervenire sui file originali;
- in caso di errori non si corre il rischio di compromettere il tema originale;
- il tema originale potrà essere aggiornato tranquillamente senza correre il rischio di perdere le modifiche effettuate all’interno del Child Theme;
Come funziona un Child Theme
Da un punto di vista tecnico, il funzionamento dei temi child è piuttosto semplice: nella cartella del nostro child theme andremo a caricare i soli file che intendiamo modificare rispetto al parent theme. Se, ad esempio, vogliamo cambiare il footer rispetto a quello del tema genitore, non dovremo fare altro che copiare il file footer.php del tema genitore all’interno della cartella del nostro tema child ed applicargli le modifiche che riteniamo necessarie.
WordPress, per visualizzare le pagine del sito web, utilizzerà i file presenti all’interno della cartella del tema genitore ad eccezione dei file, aventi lo stesso nome e posizionati nelle medesime sotto-cartelle, presenti all’interno della cartella del tema figlio. Questa regola vale per tutti i file ad eccezione del file functions.php come vedremo tra poco.
Come si crea un Tema Child di WordPress?
La creazione di un child theme di WordPress è una cosa piuttosto semplice. Vi spiegherò passo passo come creare il vostro primo tema child partendo da un qualsiasi tema di WordPress. Per semplicità espositiva, in questo articolo, prenderemo in considerazione il tema di default di WordPress che, nel momento in cui scriviamo, è Twenty Seventeen.
- Per prima cosa è necessario accedere via FTP alla root della tua installazione di WordPress (le credenziali dovrebbero esserti state comunicate dal tuo hosting provider al momento della sottoscrizione del piano hosting).
- All’interno della tua installazione di WordPress devi spostarti nella cartella wp-content e, successivamente, nella sua sotto-cartella themes. In questa cartella sono presenti tante sotto-cartelle quanti sono i temi installati nel tuo sito WordPress. Nel nostro esempio prenderemo in considerazione la cartella twentyseventeen.
- Per creare il nostro tema child dovremo, innanzitutto, creare una nuova cartella chiamata twentyseventeen-child e, al suo interno, creare un file vuoto che dovremo salvare come style.css.
- Apriamo il file style.css e copiamoci dentro il seguente contenuto:
/*
Theme Name: Twenty Seventeen Child
Author: Autore del tema
Author URI: https://www.sito-dell-autore.com
Description: Tema Child di Twenty Seventeen
Template: twentyseventeen
Version: 0.1
*/Queste righe di testo, che tecnicamente non sono altro che un commento all’interno del foglio di stile del nostro tema child, definiscono alcune caratteristiche del tema. È opportuno precisare che le sole righe obbligatorie sono Theme Name e Template, le altre informazioni sono facoltative quindi, se volete, potete anche ometterle.
- Theme Name: è il nome del nostro tema child, quindi potete scrivere ciò che volete;
- Template: è il nome della directory del tema genitore che, nel nostro caso, è il nome della directory dove risiede il tema Twenty Seventeen.
Cor retta gestione degli stili CSS
Bisogna ricordarsi che, per la logica di WordPress, i file del tema child sostituiscono i corrispondenti file del tema parent. In base a ciò, quindi, il nostro foglio di stile style.css verrà ad essere utilizzato da WordPress al posto di quello originale del nostro tema genitore.
Solitamente, però, questo non è ciò che gli sviluppatori vogliono. Nella pratica, infatti, si desidera che lo stile del child theme venga caricato insieme a quello del tema parent e non in sua sostituzione. Per far ciò, spesso, si ricorre alla direttiva @import di CSS (con la quale, nel file syle.css del tema child viene incluso lo stile del tema genitore), tuttavia si ritiene che questa pratica non sia corretta.
Il giusto modo per far si che WordPress carichi entrambi i fogli di stile è agire tramite il file functions.php. Quello che dobbiamo fare, quindi, è creare un nuovo file all’interno della directory del nostro child theme e salvarlo come functions.php.
All’interno di questo file andremo a scrivere queste righe di codice:
<?php
/* Carico i CSS del tema genitore */
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');
}
?>Grazie a questo codice il tuo sito WordPress includerà lo stile del tema originale e, successivamente, quello del tema child. Questo significa che il sito avrà l’aspetto del tema originale e tu potrai modificarlo creando le tue regole di stile all’interno del file style.css del tuo child theme.
Temi Child e file functions.php
Come abbiamo detto, WordPress utilizza tutti i file che trova all’interno del tema child al posto di quelli del tema genitore. Questa regola, tuttavia, patisce un’importante eccezione: il file functions.php del tema child, infatti, non sovrascrive quello del tema parent ma viene caricato insieme a questo.
Si tratta di un’eccezione molto importante: nel nostro file functions.php, quindi, non saremo costretti a copiare tutte le istruzioni del tema originale (in quanto verranno caricate a prescindere) ma potremo limitarci ad aggiungere i soli blocchi di codice necessari a personalizzarlo.
Si ricordi che la personalizzazione del file functions.php non è consigliata agli utenti poco esperti: intervenire su questo file, infatti, significa scrivere codice PHP rispettando le logiche strutturali e sintattiche del coding di WordPress ed eventuali errori potrebbero compromettere la stabilità e la sicurezza del vostro sito web!
Creare un Child Theme utilizzando un plugin
Un altro modo per creare un tema child consiste nell’utilizzare un plugin ad hoc. Esistono diversi plugin, infatti, che promettono di automatizzare la creazione di temi child. Di seguito vi presento i più famosi:
Child Theme Configurator
Questo plugin, sviluppato da Lilaea Media, consente di automatizzare l’intero processo di creazione di un child theme. Il sistema di analisi integrato nel plugin esegue la scansione del tema genitore e configura automaticamente il tema figlio accodando correttamente i fogli di stile dei temi e dei font per ottenere prestazioni ottimali.
Child Theme Creator by Orbisius
Questo plugin consente di creare, in modo rapido e completamente automatizzato, dei temi child da qualsiasi tema installato all’interno di WordPress. Tra le tante funzionalità, segnaliamo la presenza di un editor integrato che si prefigge lo scopo di semplificare l’attività di customizzazione dei temi child.
Childify Me
Segnaliamo, infine, questo plugin sviluppato dall’italiano Rocco Alberti. Childify Me consente di creare, automaticamente, un tema child partendo da un qualsiasi tema installato in WordPress. La creazione del tema child potrà essere effettuata anche dal pannello Aspetto mentre si visualizza un’anteprima di un tema. Il plugin è compatibile anche con installazioni di WordPress di tipo multi-sito.
Attivare il Tema Child
Una volta conclusa la procedura descritta non resta che attivare il tema child appena creato. Per farlo dovremo semplicemente recarci nella bacheca di WordPress e selezionare il percorso Aspetto > Temi. Da questa pagina dovremo selezionare ed attivare il nostro child theme facendo, semplicemente, click sul pulsante "Attiva".
Prima di attivare un tema child in un sito in produzione è buona norma controllare sempre l’anteprima, in modo da verificare che tutto funzioni correttamente e non ci siano errori.
