Che cos’è un tema child WordPress

Questa guida è stata aggiornata il 12 Febbraio, 2020

Quando installi e attivi un nuovo tema WordPress, la cosa più importante da fare immediatamente è creare un tema child.

In questa guida ti spiegherò che cos’è il tema child WordPress, perché è importante e come si crea.

Che cos’è un tema child WordPress

Un tema child WordPress (o tema figlio) è una sorta di copia del tema “parent” (genitore), cioè il tema che installi sul tuo sito web.

In questa copia, vengono importate tutte le funzionalità e le caratteristiche del tema parent, in modo tale da poter effettuare tutte le modifiche che vuoi senza sovrascrivere i file originali.

Esiste un motivo decisamente valido per evitare di modificare i file del tema, e ora te lo spiego subito.

A cosa serve un tema child WordPress

Ogni volta che personalizzi il tuo tema, i file che lo compongono vengono modificati.

Di tanto in tanto, però, gli sviluppatori del tema rilasciano degli aggiornamenti, che è sempre consigliabile effettuare, poiché garantiscono maggiore sicurezza e introducono nuove funzionalità.

Ma c’è un grande problema: l’aggiornamento di un tema comporta la sovrascrittura di tutti i file che lo compongono.

Se tu hai fatto delle modifiche, specialmente se sei intervenuto nei file CSS o addirittura nei file PHP, queste spariranno nel nulla e verrà invece utilizzata la versione base rilasciata dagli sviluppatori.

Conseguenza: un sacco di lavoro perso e tutto da rifare.

Ecco, qui salta fuori la grande utilità di un tema child WordPress.

Utilizzando un tema child, avrai da un lato il tema parent bello pulito e aggiornato, dall’altra le tue modifiche, senza sovrascrivere i file originali. Infatti, i file del child non fanno altro che lavorare insieme ai file del parent, complementandoli.

In altre parole, alla base avrai il tuo tema parent, ma sopra di esso ci sarà il tema child, che ha il compito di aggiungere le tue modifiche.

E quindi qualsiasi tua personalizzazione rimarrà sempre al sicuro.

Come si crea un tema child WordPress

Ma come utilizzare un tema child?

Bisogna crearlo da zero o esiste già?

E come si installa?

In realtà, a queste domande ci sono diverse risposte, dipende dal tema che usi.

Nota: prima di effettuare qualunque modifica ai codici o al tema del tuo sito web, assicurati di effettuare un backup di tutto il sito per evitare di perdere contenuti o configurazioni importanti.

Tema child incluso nel tema parent

Alcuni temi hanno al loro interno un tema child già pronto all’uso.

È questo il caso, ad esempio, di Avada, uno dei migliori temi WordPress secondo il mio parere.

Quando scarichi la cartella zip del tema, troverai al suo interno la cartella Avada Theme, con dentro Avada.zip e Avada-Child-Theme.zip.

La prima è la cartella del tema parent, che dovrai installare per primo dalla sezione Aspetto > Temi della tua Bacheca.

La seconda contiene invece il tema child, e andrà installato esattamente come qualsiasi altro tema. Una volta installato il child, lo dovrai attivare e in questo modo lavorerai con Avada e potrai fare tutte le modifiche che desideri.

Tema child non incluso nel tema parent

Ci sono però molti temi che non includono il child già pronto, e quindi sarà necessario crearlo da zero.

La creazione di un tema child WordPress prevede alcuni passaggi, ma non sono complicati e ora ti fornirò tutte le istruzioni per non commettere errori.

Seguimi attentamente.

Creazione cartella del tema child WordPress e file CSS

Prendiamo come esempio il tema Twenty Nineteen, uno dei temi default di WordPress.

La prima cosa da fare è creare la cartella del tema child.

1. Accedi alla root del tuo sito. Puoi utilizzare due sistemi:
   1. Attraverso il File Manager del tuo hosting;
   2. Via FTP.
2. Entra nella cartella wp-content e poi all’interno della cartella themes. Qui troverai tutti i temi installati sul tuo sito.
3. Crea una nuova cartella chiamata con il nome del tuo tema seguito da “-child”. Nel caso di Twenty Nineteen sarà quindi twentynineteen-child.

Perfetto, ora che abbiamo la cartella, dobbiamo inserire al suo interno il file CSS.

Vediamo come crearlo.

1. Crea un documento di testo, un semplice file txt che puoi creare con Blocco Note (o con Text Edit su Mac);
2. Rinominalo chiamandolo style.css. Dovrai modificare quindi anche l’estensione del file, da .txt a .css.
3. Apri il file utilizzando un qualsiasi editor di testo e incolla al suo interno questo codice:

   /*
   Theme Name: Twenty Nineteen Child
   Theme URI: http://example.com/
   Description: Tema Child per il tema Twenty Nineteen
   Author: Inserisci il tuo nome
   Author URI: http://example.com/about/
   Template: twentynineteen
   Version: 0.1.0
   */

4. Correggi le parti di ciascuna riga dopo i due punti per adattare il codice al tema che utilizzi. Come vedi, qui ho fatto l’esempio con il tema Twenty Nineteen.
5. Carica questo file all’interno della cartella wp-content/themes/twentynineteen-child (o /tuotema-child) del tuo spazio web.

Ricapitolando, hai dato il nome al tema che stai creando, e nel campo Template hai inserito il tema “parent”, quello cioè già installato e di cui vuoi ereditare funzionalità e caratteristiche.

Creazione del file functions.php

Ora che hai creato lo stile del tema child, devi fare in modo che esso erediti lo stile del tema parent.

Chi è già pratico di CSS potrebbe pensare che la via più semplice sia utilizzare il metodo @import, ma in realtà non è consigliabile. Infatti, questo sistema comporta un aumento dei tempi di caricamento della pagina e quindi un peggioramento delle performance del sito.

Segui invece questa procedura:

1. Crea un file di testo sul tuo computer e rinominalo in functions.php. La procedura è la stessa che hai utilizzato per creare il file style.css.
2. Apri il file con un editor di testo e incolla questo codice:

   <?php
   
   add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
   function enqueue_parent_theme_style() {
       wp_enqueue_style( 'parent-style', get_template_directory_uri().'https://mk0soswptajfmr4mgn8.kinstacdn.com/style.css' );
   }

3. Carica anche questo file all’interno della cartella wp-content/themes/twentynineteen-child (o tuo-tema-child).

Qui, a differenza del CSS, non sarà necessaria alcuna modifica. Copia e incolla il codice esattamente così com’è.

A questo punto non ti resta che attivare il tema child dalla tua Bacheca WordPress. Lo troverai all’interno di Aspetto > Temi insieme a tutti gli altri temi installati.

Avendo creato tu stesso la cartella al posto giusto, non è necessario installarlo, ci hai già pensato tu manualmente.

Una volta attivato il tema, potrai fare tutte le modifiche che desideri mantenendo inalterato il tema parent, ma comunque sfruttandone completamente tutte le sue funzionalità.

Apro e chiudo parentesi: se vuoi sapere come individuare con il tuo browser i codici su cui lavorare per modificare il tuo tema leggi questo articolo su come modificare un tema WordPress.

Ulteriori funzionalità di un tema child WordPress

Finora abbiamo messo in risalto soprattutto i vantaggi riguardanti il CSS di un tema child. Ma il suo potenziale non si esaurisce qui.

Infatti, è possibile modificare anche le funzionalità del tuo tema, poiché hai creato un file functions.php, che può lavorare insieme al functions del tema parent.

Se hai esperienza di PHP, puoi creare le tue funzioni e aggiungerle a questo file. Esso verrà caricato prima di quello genitore, unendo quindi il tuo codice a quello del tema parent.

Alcuni esempi dell’uso del file functions possono essere l’aggiunta o l’eliminazione di aree widget nel tuo tema, la modifica di un testo nel footer o la rimozione della funzione di ricerca in WordPress.

Se hai la possibilità di realizzare tutte queste modifiche senza l’uso di plugin, e quindi senza appesantire ulteriormente il tuo sito, ne trarrai un grande vantaggio.

Mi raccomando, però, assicurati di conoscere a sufficienza il linguaggio PHP prima di mettere mano su questo file!

Come installare un tema child WordPress con un plugin

Non ti piace lavorare su file e codici?

Nonostante i passaggi per la creazione di un tema child WordPress non sia particolarmente complessa, tante persone hanno un po’ di timore nei confronti di operazioni così delicate.

Ma non c’è nessun problema, perché un plugin semplicissimo da usare ti verrà incontro.

Child Theme Configurator creerà automaticamente il tuo tema child.

Dopo aver installato e attivato il plugin, troverai la voce Strumenti > Child Themes.

Scegli il tema del quale creare il child e clicca su Analyze per controllare se è possibile la creazione automatica.

Lascia tutte le impostazioni così come sono di default, ma al punto 7 personalizza gli attributi, inserendo il tuo nome, la descrizione ecc.

Al punto 8, puoi selezionare l’opzione per copiare menu, widget e altre impostazioni dal tema parent.

Clicca infine su Create New Child Theme per creare un nuovo tema child. Controlla sempre l’anteprima del tema child prima di attivarlo, in modo da verificare che non ci siano errori.

Una volta creato, il plugin ti permette anche di modificare le impostazioni degli attributi, di duplicare il tema child oppure di ripristinarlo da zero. Quest’ultima opzione eliminerà qualsiasi tua modifica effettuata sui file style e functions, quindi attenzione!

Conclusione

Ora conosci bene l’importanza di un tema child WordPress e sai come crearlo in pochi passi. Sicuramente, un tema child è molto utile per fare esperienza e testare funzionalità e opzioni del tuo sito web, oltre che a risparmiarti tempo e lavoro al momento degli aggiornamenti del template.

Hai mai utilizzato un tema child WordPress?

È stato facile crearlo oppure hai avuto difficoltà?

Lasciaci un commento qui sotto, e condividi con noi la tua esperienza.