Luigi Sabbetti

Il mondo del web a 360 gradi

Creare Child Theme Wordpress

Come creare un Child Theme in WordPress


di // Pubblicato il: 14 Aprile 2020

Il template rappresenta senza dubbio una parte molto importante di un sito, oserei dire quasi vitale. Ci permette di dare un’identità alla nostra opera e di impaginare al meglio i contenuti. In passato, abbiamo già visto come sia semplice installare un template premium.

Oggi, invece, vedremo assieme come effettuare delle modifiche al tema, per personalizzarlo e renderlo in linea con i nostri gusti o con le esigenze di un cliente. Per farlo, è necessario creare un Child Theme.

Questo, infatti, è l’unico metodo sicuro per personalizzare un template. Mediante l’uso di questa tecnica, preserveremo il tema genitore, ed eviteremo di perdere le modifiche effettuate ad ogni nuovo upgrade rilasciato dallo sviluppatore originale.

Indice dei contenuti

Cos’è un Child Theme?

Prima di crearne uno è bene conoscere e sapere cos’è un Child Theme, a cosa serve e in che modo può tornarci utile. Un Child Theme, Tema Figlio traducendo il lemma dall’inglese all’italiano, non è altro che un template che eredita funzionalità e stili da un altro tema, quest’ultimo viene definito tema genitore.

Attraverso questa tecnica, avremo la possibilità di apportare delle modifiche al template originale, senza modificarne di fatto la struttura e i files. Editeremo, quindi, le funzionalità del tema genitore senza intervenire direttamente su di esso. Si può affermare che i files di un Tema Child vadano a sovrascrivere gli omologhi del rispettivo tema genitore.

Perché utilizzare un Child Theme

Ma quando e perché utilizzare un Child Theme? Per prima cosa, sappi che non è obbligatorio utilizzare un tema figlio all’interno del tuo sito, tuttavia rientra sicuramente tra le best practices a cui ogni sviluppatore dovrebbe attenersi.

Esistono, però, delle situazioni tali che non richiedono l’utilizzo di questa metodologia. Ad esempio, non vi è bisogno che utilizzi un tema figlio nei seguenti casi:

  • Sei tu il creatore del template e non hai intenzione di distribuirlo, inviarlo a terzi o semplicemente rivenderlo su piattaforme dedicate come ad esempio Themeforest o Template Monster
  • Non hai dimestichezza con il codice e hai intenzione di limitarti alla customizzazione base del tema, attraverso gli strumenti messi a disposizione da WordPress, le configurazioni dei plugin del tema e le opzioni di personalizzazione offerte dal template stesso.

Di contro, ecco alcune buone motivazioni per fare uso di un template child:

  • Effettuare modifiche a stili e files e preservarle nonostante gli aggiornamenti del tema genitore. L’aggiornamento di un tema, infatti, potrebbe includere anche features sulla sicurezza ed è quindi buona norma eseguire sempre gli upgrade messi a disposizione dallo sviluppatore
  • Migliorare le prestazioni del tema padre, correggere alcuni bug e velocizzare i tempi di sviluppo
  • Allenarsi nello sviluppo di template custom. Creare un tema child, infatti, è un ottimo modo per iniziare a “toccare con mano” il codice sorgente di WordPress ed imparare cose nuove.

Come creare un Child Theme

Veniamo adesso alla parte pratica di questa guida e ricostruiamo i passaggi necessari per la creazione di un Child Theme:

  • Creiamo una cartella all’interno della directory dei temi (il percorso è wp-content/themes e puoi raggiungerlo mediante una connessione FTP al tuo server). Buona norma è chiamare questa directory con la nomenclatura nometemapadre-child. Se stai creando un Child Theme del template TwentyTwenty ad esempio, utilizzerai il nome twentytwenty-child.
  • Creiamo un file style.css e posizioniamolo all’interno della cartella appena creata. Questo file conterrà gli stili del nostro tema figlio, ma anche le configurazioni di base per farlo funzionare. Si tratta, infatti, dell’unico file strettamente necessario.
  • Creiamo un file functions.php e posizioniamolo all’interno della cartella del Child Theme. In questo file andremo ad inserire le funzionalità del nostro nuovo tema, richiamare stili e script, sovrascrivere comportamenti del tema padre e molto altro.
struttura base child theme
struttura base child theme

Adesso non ci resta che editare il nostro file style.css, andando ad inserire, nelle prime righe, alcuni commenti che serviranno a WordPress per riconoscerlo e renderlo funzionante

/*
Theme Name:     Twenty Twenty Child
Theme URI:      https://luigisabbetti.it/
Description:    Tema Child per il tema Twenty Twenty realizzato da Luigi Sabbetti
Author:         Luigi Sabbetti
Author URI:     https://luigisabbetti.it/contatti/
Template:       twentytwenty
Version:        0.1.0
*/

Analizziamo, riga per riga, quello che abbiamo scritto:

  • Theme Name: Il nome del nostro Theme Child, nel nostro caso “Twenty Twenty Child”
  • Theme Uri: L’indirizzo web in cui abbiamo hostato il nostro tema o, semplicemente, il nostro sito internet
  • Description: Una breve descrizione del tema child creato
  • Author: L’autore del tema, in questo caso ho inserito il mio nome, voi naturalmente inserirete il vostro
  • Author URI: Un link alla biografia o ad un form di contatti dell’autore del tema
  • Template: Il nome del tema padre, in lowercase e senza spazi
  • Version: La versione del tema, in questo caso essendo la prima release ho inserito 0.1.0

Queste sono alcune informazioni minime, tuttavia puoi anche eliminarne qualcuna. Il tuo tema, per funzionare, ha bisogno soltanto dei campi Theme Name e Template. Il resto dei campi sono necessari per personalizzarlo e renderlo proprio.

Adesso possiamo accedere all’admin di WordPress e verificare che il tema sia stato creato e sia di conseguenza attivabile. Per farlo, eseguiamo le seguenti operazioni:

  • Effettuiamo la login nel nostro backend di WordPress
  • Rechiamoci nel menù Aspetto->Temi
  • Troveremo il nostro Child Theme
  • Clicchiamo su Attiva
Attivare theme child
Attivare il Theme Child

Adesso non ci resta che raggiungere il Frontend del nostro sito e verificare che tutto funzioni. Probabilmente, però, non otterrai il risultato sperato. Il tuo sito, in questa fase, apparirà sformattato.

Tutto nella norma. Ricordi il file functions.php che abbiamo creato in precedenza? Adesso è il momento giusto per utilizzarlo. Dovremo, infatti, richiamare lo style.css del tema genitore, in questo modo caricheremo correttamente gli stili e i tuoi contenuti torneranno ad avere l’impaginazione giusta.

Per fare questo, dovrai avvalerti, della funzione di wordpress wp_enqueue_style. Apri il file functions.php ed inserisci le seguenti righe di codice

 
<?php
 
add_action( 'wp_enqueue_scripts', 'parent_theme_style' );
 
function parent_theme_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Salva il file. Torna nel frontend del tuo sito ed effettua un refresh della pagina premendo CTRL+F5 o, se utilizzi un sistema operativo Mac, Mela + R.

Se tutto è andato per il verso giusto, dovresti vedere la pagina impaginata in modo corretto!

Ora non ti resta che effettuare tutte le operazioni che vuoi sul tuo tema figlio, senza dover toccare il sorgente del padre. Se avrai bisogno di effettuare una modifica sul file header.php, ad esempio, ti basterà fare una copia di quel file e riporlo nella cartella del Child Theme e lavorare su quest’ultimo.

Plugin per la creazione di un Child Theme

Se la procedura appena illustrata ti sembra complessa e non vuoi rischiare, puoi sempre avvalerti di un plugin per la creazione di un Tema Figlio che effettuerà l’operazione al posto tuo.

Chiaramente, l’installazione di un plugin è sempre un’operazione abbastanza invasiva per il tuo sito e che, se possibile, andrebbe evitata. Quindi valuta la creazione di un tema child attraverso la semplice guida contenuta nel paragrafo precedente. Capisco, però, che potresti non essere in grado di effettuare le modifiche in autonomia, ragion per cui ho deciso di inserire questa seconda opzione.

Child Theme Configurator

Child Theme Configurator Plugin
Child Theme Configurator Plugin

Uno dei plugin più utilizzati per adempiere a questo compito, è Child Theme Configurator.

Sviluppato dalla Lilaea Media, si tratta di un plugin molto sicuro, tanto da contare più di 300.000 installazioni attive. Testato con le ultime versioni di WordPress, ti permette di creare un Child Theme con un solo click.

Ti basta scaricarlo dalla directory di WordPress o installarlo direttamente dal backend del tuo sito. Questo plugin ti permette di analizzare ogni tema per evitare problemi conosciuti. Creerà per te il child theme e ti consentirà di configurarlo attraverso le opzioni del “Customizer” che troverai nel backend del tuo sito.

Conclusioni

Come avrai avuto modo di vedere, la creazione di un Child Theme rientra tra le operazioni di routine nella gestione del tuo sito WordPress.

Si tratta di un’operazione semplice da eseguire e che, a mio avviso, andrebbe sempre effettuata, soprattutto se si ha intenzione di apportare delle modifiche al tema.

In passato, infatti, mi è capitato spesso, per la fretta o la poca voglia, di non creare un tema figlio. Con il senno di poi posso dirti che si è rilevato un grave errore, poiché al primo aggiornamento mi ritrovavo a dover effettuare di nuovo le modifiche.


Ti è piaciuto questo articolo?
Vuoi restare aggiornato sul mondo del web attraverso i miei articoli? Iscriviti alla newsletter!
Solo contenuti utili e zero spam, parola di lupetto

Luigi Sabbetti

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Mi piace scrivere e condividere conoscenze informatiche attraverso il mio sito web. Vuoi chiedermi qualcosa? Contattami su Linkedin