Che cos’è un tema child WordPress
Questa guida è stata aggiornata il
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.
- Accedi alla root del tuo sito. Puoi utilizzare due sistemi:
- Attraverso il File Manager del tuo hosting;
- Via FTP.
- Entra nella cartella wp-content e poi all’interno della cartella themes. Qui troverai tutti i temi installati sul tuo sito.
- 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.
- Crea un documento di testo, un semplice file txt che puoi creare con Blocco Note (o con Text Edit su Mac);
- Rinominalo chiamandolo style.css. Dovrai modificare quindi anche l’estensione del file, da .txt a .css.
- 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
*/ - 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.
- 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:
- 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.
- 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().'/style.css' );
} - 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.
e altri…
Ciao, ottimo articolo, come sempre. Purtroppo ho provato entrambi i metodi, aggiunta codice manualmente oppure creazione del tema child tramite il plugin indicato. Il risultato è identico in entrambi i casi: diversi problemi, il titolo del blog in alto sparisce, invisibile, il colore dei caratteri del menù diventa trasparente, i pulsanti “read more” diventano stranamente verdi, i pulsanti dei social diventano grigi e forse altro che non ho notato. La cosa più curiosa è che andando a modificare il tema child per cercare di ripristinare colori dei caratteri, dimensioni, colori dei pulsanti, etc. nelle opzioni di modifica è sparita la funzione, e questo sia nel tema child sia nel tema parent. La vedo più dura del previsto. Per ora ripristinato tutto all’ultima versione funzionante con il backup di siteground. Qualche consiglio?
Ciao Stefano, che tema stai utilizzando?
Ciao, sto usando Evolve di Theme4Press, uno dei temi proposti da WordPress, attualmente ho la versione 3.6.7. Richiede il plugin Redux Framework. Oltre al problema con il tema Evolve da aggiornare, aggiornando Redux l’intero sito va in crash, forse a causa di un problema di compatibilità con la versione vecchia del tema, ho quindi ripristinato anche la versione precedente di Redux (3.6.18), mentre con la 4.1.11 il sito collassa. A parte Redux e Evolve tutto il resto è aggiornato.
Che versione di PHP stai usando sul server?
Ho impostato la gestione automatica di PHP con SG Optimizer e attualmente è in uso la versione 7.3. Ho scritto anche a Theme4Press (creatore di Evolve) per info e ho scoperto che le ultime versioni di Evolve sono basate su un plugin diverso da Redux Framework, utilizzano Kirki. Mi chiedo quindi se un tema child di una versione vecchia di Evolve basato su Redux, se riuscirò mai a crearlo senza errori, possa funzionare anche con le ultime versioni basate su Kirki. Stavo quasi pensando di utilizzare un ambiente di test, aggiornare Evolve brutalmente senza child e vedere cosa succede, se riesco a ripristinarlo modificando i parametri per renderlo simile al mio. Poi mi basterebbe creare il tema child dell’ultima versione. Ho notato tuttavia che nel sito di Theme4Press suggerisce di creare il child con @import url(“../evolve/style.css”); invece che con wp_enqueue_style come consigliato da WordPress e da altri (link: https://theme4press.com/create-wordpress-child-theme/). Comincio ad avere qualche dubbio sulla validità di questo tema.
Prova intanto a lavorare su un backup del sito, per capire se questa soluzione può essere comunque seguita.
Ciao.
come ho letto negli altri commenti, il tema padre non va mai attivato, ma va usato solo per gli aggiornamenti : intendete solo aggiornamenti globali del template oppure anche gli aggiornamenti dei plugin? oppure i plugin li posso aggiornare anche dal child theme?
Ciao Alice, i plugin non si aggiornano dal tema ma a parte. Prosegui quindi ad aggiornarli come hai sempre fatto, nessun problema.
Ciao,
innanzitutto grazie per l’articolo.
Ho seguito alla lettera tutti gli step, ma il tema child non è del tutto corretto e volevo sapere il motivo e come sistemarlo.
In particolare:
Il font è diverso, sia quello generico che dei vari formati (H1, H2 ecc.).
Il colore del menu e dei link è quello del tema predefinito, blu, mentre io l’ho cambiato ieri in arancione. Stessa cosa con il colore dei pulsanti. C’è un problema anche con il colore in background del menu, quando seleziono una parola mi si oscura tutta quella parte del menu e non si legge, quindi è un altro problema con i colore dell’active text color e active background color.
Ci sono anche altri errori mi sa.
È come se avesse preso dal parent tutte le pagine ma non le modifiche generali che ho fatto negli ultimi giorni (il font, i colori del sito ecc.). Sono modifiche che non ho fatto nelle singole pagine ma dal menu generico del tema.
(Uso il tema theGem)
Qualche consiglio?
Grazie in anticipo.
Ciao Davide, hai installato il tema child che è fornito direttamente nel folder del tema theGem? Un saluto!
Salve, ottimo articolo. Ho un tema premium e sia con il codice che con il plugin, il tema child si aggiorna male. Nel senso che i colori del font ed il font stesso tornano quelli originali di quando ho installato il tema, poi su alcune pagine compare la sidebar che ho solo nello spazio blog. Devo comunque attivare il child e modificarlo? Eventualmente posso tornare indietro al tema attuale? Grazie
Ciao Luigi, aggiorni direttamente il child quindi?
Fino ad ora ho sempre aggiornato il tema genitore, ora con il child attivo immagino che le modifiche le effettuerò direttamente su quello, giusto? Oppure continuo ad aggiornare il genitore e le modifiche si riflettono sul child? In ogni caso il child ad ora non ha le modifiche fatte sul genitore
Si, lavorerai solo sul child, il genitore lo utilizzerai solo per gli aggiornamenti.
Cosa significa?
I contenuti vanno messi sul child e il parent si aggiorna in automatico?
Il child è sempre l’unico attivo, o in alcuni momenti si deve attivare il parent?
No, il parent non si attiva mai. Però, è su di esso che si fanno gli aggiornamenti necessari.
Ciao, molto utile l’articolo, ma io vorrei chiarirmi un dubbio, quale tema deve essere attivato per il sito …. tema child oppure tema genitore? Io ho un tema boxshop con incluso il tema child, quale dei 2 devo attivare? Poi ho anche il tema di wp twenty nine. In health site mi dice di cancellare i temi non attivi … quindi posso cancellare questo di wordpress? Attualmente e da sempre ho avuto come tema attivo il tema genitore boxshop … ho provato a cambiarli e ho fatto un bel casino…con il plugin … grazie!
Ciao, devi attivare il tema child, lasciando non attivo il tema genitore ma senza cancellarlo. Non ti consigliamo invece di eliminare i temi default di WordPress, puoi eliminare invece gli altri temi. Un saluto!
Buongiorno,
se il mio sito è un e-commerce, quando escono aggiornamenti sul tema genitore, il Tema child non si aggiornerà corretto? Quindi poi come posso inserire gli aggiornamenti sul mio e-commerce e quindi sul mio Tema child?
Grazie
Ciao Marta, gli aggiornamenti del tema genitore si riflettono sul child, che non deve essere aggiornato. Un saluto!