Che cos’è un tema child WordPress
Questa guida è stata aggiornata il
Se vuoi puoi leggere la guida in inglese sul sito di WordPress.org, oppure seguire la mia super guida!
In questo articolo ti spiegherò…
Che cos’è un tema child WordPress e come crearlo
Tema child WordPress, di che si tratta?
Un tema child (“bambino” o “figlio” in inglese) WordPress è un template che importa tutte le funzionalità e caratteristiche di un altro tema, chiamato parent theme (il tema “genitore”). Creare un tema child, ti permette di modificare e/o aggiungere funzionalità al tuo template senza dover sovrascrivere alcun file del parent theme, rischiando di commettere errori o di perdere il tuo lavoro quando effettui aggiornamenti.
Quando è necessario utilizzare un tema child WordPress?
Molto probabilmente ti sarai già trovato o ti troverai nella condizione di dover effettuare modifiche al tuo template WordPress, per renderlo più adatto al tuo sito web e a seconda delle tue reali necessità.
L’utilizzo di un tema child WordPress può essere una soluzione ottimale per effettuare i cambiamenti che desideri, senza modificare il codice del tuo tema parent, ovvero quello originario del template che hai scelto di utilizzare per il tuo sito web. Quali sono le ragioni fondamentali per scegliere questa soluzione?
- Non sei molto pratico di temi WordPress, e hai bisogno di testare maggiormente quello che hai installato
- Hai poco tempo a disposizione e devi effettuare modifiche al tuo tema in breve tempo
- Se modifichi il tuo tema corrente e questo viene aggiornato, tutte le tue modifiche andranno perse. Con un tema child, puoi effettuare l’update del tuo parent theme senza perdere le modifiche che hai fatto su quello child.
Se sei all’inizio nella creazione del tuo sito WordPress, ti consiglio di iniziare a lavorare su un tema child WordPress per prendere dimestichezza con i codici utilizzati ed effettuare le modifiche in tutta sicurezza.
Come si crea un tema child WordPress?
Ti illustrerò adesso come creare un tema child WordPress partendo da Twenty Eleven, uno dei temi default WordPress. Basta seguire i seguenti passaggi:
- dal pannello di controllo del tuo spazio hosting, accedi al File Manager (se usi cPanel o equivalente) e vai alla cartella wp-content/themes nella root principale del tuo sito. All’interno troverai una cartella con il nome di ciascun tema che hai installato sul tuo sito.
- Crea una nuova cartella, a cui darai il nome del tema parent, seguito da “-child“. Per esempio, la cartella del tema child di Twenty Elevent sarà chiamata twentyeleven-child.
- Entra all’interno della cartella twentyelevent-child e crea un file di testo vuoto, che dovrai chiamare style.css
- Apri ora il file style.css e copia dentro i codici che vedi qui sotto (dovrai adattare i campi a seconda del tema parent che stai utilizzando):
/*
Theme Name: Twenty Eleven Child
Theme URI: http: //example.com/twenty-elevent-child/
Description: Tema Child di Twenty Eleven
Author: Il tuo nome e cognome
Author URI: https://example.com/
Template: twentyeleven
Version: 1.0.0
Tags: tag che possono essere applicati al tuo tema separati da virgola
Text Domain: twenty-eleven-child
*/
Come vedi stai compilando il file style.css, che determina lo stile del tuo spazio web, inserendo i campi previsti per le informazioni generali sul tema. 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.
Modificare il file functions.php
Il passaggio successivo consiste nell’aggiungere alla coda i file parent e child.
Se, infatti, andassi ad attivare il tema child su WordPress, potresti vederlo dopo aver ricaricato il tuo sito. Noteresti, però,14 che i file del tema sono stati caricati, ma non il file CSS.
Il vecchio metodo per importarli usando @import non è più consigliabile, perché aumenta il tempo di caricamento dei file style.css e, quindi, ha un impatto sulla velocità del sito.
- Per far sapere a WordPress quale sia il file style.css del tema parent da caricare, dovrai creare file functions.php nella cartella del tema child.
- Apri functions.php con un editor di testo e inserisci il codice che trovi qui di seguito:
<?php
add_action( ‘wp_enqueue_scripts’, ‘carica_stili_parent’ );
function carica_stili_parent’ () {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
?>
Adesso puoi inserire i codici css che desideri, facendo modifiche al tema child WordPress che saranno visibili sul tuo sito live, ma lasciando inalterato il tema parent.
Per attivare il tema child, selezionalo nella sezione Aspetto > Temi della tua Bacheca WordPress. Visualizzerai quindi il tema Twenty Eleven, ma il menu adesso apparirà di colore rosso.
Hai ora creato ed attivato un tema che ha tutte le caratteristiche di Twenty Eleven, e che puoi continuare a modificare come desideri senza perdere il lavoro fatto ad ogni aggiornamento.
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
Le possibilità di modifiche attraverso un tema child WordPress non si esauriscono nel foglio di stile style.css. Puoi infatti intervenire su altre funzionalità del tuo spazio WordPress modificando il file functions.php che hai creato dentro alla cartella del tuo tema child. All’interno del file functions.php puoi inserire i codici dentro i tag php.
A differenza del foglio di stile style.css, il functions.php non sovrascrive quello del tema parent, bensì viene caricato subito prima di quello del tema genitore. Non hai bisogno di copiare tutto il testo del functions.php del tema parent in quello del tema child.
Puoi inserire nel functions.php del tema child solamente i codici php richiesti per ottenere determinate funzionalità, come aggiungere o togliere aree widget nel tuo tema, modificare un testo nel footer o rimuovere la funzione di ricerca in WordPress.
Queste sono tutte modifiche che puoi fare senza appesantire il tuo sito con ulteriori plugins, aggiungendo poche righe al tuo file functions.php.
Nota: per lavorare agevolmente sul file functions.php è necessario avere una buona conoscenza del linguaggio PHP.
Come installare un Tema Child WordPress con un solo click
I passi per installare un Tema Child WordPress possono essere ulteriormente velocizzati attraverso l’utilizzo di questo plugin: Child Theme Configurator.
Dopo aver installato e attivato il plugin, troverai una nuova voce, Child Themes, nel menu Strumenti di WordPress.
Child Theme Configurator ti permette di creare facilmente un tema child a partire da quelli installati sul tuo sito. Clicca su Analyze per controllare che il tema scelto possa essere usato come child.
Scorrendo in basso, al punto 7 potrai personalizzare nome, descrizione, autore e versione del tema child, come puoi fare attraverso il file style.css.
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.
Con questo plugin puoi facilmente trovare le parti del tema parent che vuoi modificare, senza dover rintracciare autonomamente classi e altri selettori del css.
Conclusione
Ti ho spiegato l’importanza di un tema child WordPress e 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.
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.
e altri…
Ciao Andrea
ho una domanda da autodidatta e non addetta ai lavori, devo modificare l’immagine del logo, a suo tempo inserita, nel tema child da un amico al momento irreperibile.
Devo creare un nuovo tema child o come spero basta modificare in contenuti dell’asset da cui pesca questo tema?
Se la risposta è la seconda, come faccio a sostituire questa immagine nell’asset, come ci arrivo?
Ciao Giovanna, puoi lavorare sullo stesso tema child, dovresti riuscire a modificare il logo andando su Aspetto>Personalizza. Rimaniamo a disposizione, un saluto!
Ciao, ho seguito passo passo la vostra guida e sarebbe andato tutto perfetto ma aimè il tema child di twentyseventeen appare tutto sgangherato, nel senso che il logo, ad esempio, non appare più nell’immagine dell’header e altre cose del genere. Da cosa potrebbe dipendere? Grazie
Ciao Rossella, il tema parent è sempre presente, anche se non attivo?
Ricapitolando:
1 Creare il tema child seguendo le vostre istruzioni.
2 Attivare il tema child.
3 Aggiornare il tema genitore.
Il tema child sostituirà per sempre il tema genitore, e il tema genitore verrà utilizzato solo per gli aggiornamenti.
E’ corretto?
Esatto, proprio così! Un saluto e grazie del tuo commento.
Ciao, avrei bisogno di un suggerimento se possibile perché fino ad ora non ho mai utilizzato un tema “child” utilizzando prevalentemente DIVI.
Ho dovuto acquistare, per un cliente, un tema diverso da DIVI (Bauhaus) su Themeforest.
Ho visto che nella cartella oltre il tema, è presente anche uno zip denominato “bahaus_child”.
Al suo interno però c’è solo il file “style.css” ed uno screenshot.png mentre non c’è il file “functions.php”.
Contattando lo sviluppatore mi ha risposto che funziona lo stesso anche senza, però leggendo la tua guida ho capito che utilizzerebbe un metodo vecchio che appesantirebbe il caricamento del sito.
I consigli che ti chiedo sono:
1) Mi suggerisci di creare comunque il file mancante “functions.php” ed inserirlo nella cartella “child” e poi importare “_child.zip”?
2) Per creare il file “functions.php” basta creare un file vuoto (ad es con “TextEdit” o “Dreamveawer” ed inserire all’interno il codice che hai riportato nell’articolo?
3) Una precisazione: essendo già presente la cartella “child” nel tema acquistato, è ancora necessario utilizzare un plugin tipo “Child Theme Configurator” oppure creare la cartella “child” nel file manager oppure basta semplicemente caricare la cartella “child” attraverso il dashboard di WP come quando si carica un tema…?
Grazie per le risposte e complimenti per l’articolo!
Ciao, non serve inserire anche il functions.php, perché a differenza degli altri file il functions.php non viene sovrascritto.Non è necessario installare il plugin, carica la cartella del tema child come se fosse il tema genitore, quindi attivalo. Un saluto e buon lavoro!
Salve,
Mi è sorto un problema ma non so da quanto perché al progetto al quale sto lavorando lo avevo accantonato per diversi mesi e l’ho ripreso da una settimana.
Mi è apparso un messaggio di errore nella sezione aspetto/temi:
Tema corrotto
I seguenti temi sono installati ma incompleti.
Nome Descrizione
Greta Child Il tema padre è mancante. Installare il tema padre “greta”.
Quando avevi installato il tema a suo tempo avevo messo sia il child che il padre è non avevo riscontrato nessun messaggio di errore. Nel frattempo il tema si é aggiornato dalla ver 1.0 alla 1.6 e adesso è stato tolto da themeforest e io mi ritrovo ad avere salvata in un file rar la versione 1.5. Ora non capisco come è sorto il problema se sono stati gli aggiornamenti di wordpress o altro. Il sito è online e non riscontro problemi… ho provato a nettere il tema padre 1.5 ma l’errore rimane. Come posso risolvere? Se lascio tutto com’e’ in avanti riscontrato problemi o no?
Se ce un modo per sistema la situazione aiutatemi pls 🙁
Ciao Giuseppe, il tema si chiama semplicemente “Greta”? A quando risale l’ultimo aggiornamento?
Ciao.
Se scelgo un theme free (che ha una versione a pagamento), posso creare un child per usare funzionalità disponibili solo nella versione a pagamento? Violo qualche norma?
Nello specifico, vorrei cambiare il font, ma tale opzione è disponibile solo nella versione a pagamento.
Ciao Luca, non infrangi alcuna norma se lavori sul tema child del free per aggiungere funzionalità mediante integrazioni via codice. Un saluto!
Grazie mille!
Altro dubbio simile.
Che copyright dovrei indicare? Qualcosa del tipo
[Parent child theme] by [mio nome]. [Parent theme] is a theme by [autore del Parent theme]. Copyright 2018. All Rights Reserved.
Si Luca, va bene.
Ciao,
sono relativamente nuovo a WordPress e non ho pensato di utilizzare Child Theme, dunque dopo aver letto su questo argomento mi sono reso conto che è necessario creare un Child Theme, ma a questo punto mi chiedo posso farlo adesso dopp aver lavorato oer un certo periodo sul parnt thema?
grazie
Ciao Aldo, certamente. Puoi creare il tuo child theme anche dopo aver lavorato sul tuo tema, usando questo ottimo plugin https://it.wordpress.org/plugins/child-theme-configurator/. Il child sarà una esatta copia del tema genitore, tu potrai quindi lavorare direttamente su quello e utilizzare l’altro solo per gli aggiornamenti. Un saluto e buon lavoro!
grazie
Ciao,
io non comprendo una questione. Se ho necessità di modificare dei codici proprio nel file style.css (dei colori per intenderci), ma nel file functions.php ho detto al mio tema child di prendere tutte le impostazioni di stile dal tema parent, come posso fare?
Ho provato a copiare i codici dal style.css del parent e a incollarli con le relative modifiche nel style.css del child, ma ovviamente non le modifiche non vanno.
Per intenderci: vorrei modificare il file style.css del mio child senza creare danni al parent. È possibile? Se sì, come devo fare?
Grazie
Ciao Valentina, non devi copiare tutto lo style.css nel file del tema child. Nel file style.css del tema child, inserisci SOLO le modifiche che desideri apportare. Che tema stai utilizzando?
Sto usando Baskerville. Ok, quindi se indico solo le voci in cui voglio che si modifichino i colori di determinate voci, lui modifica quelle, mentre il resto lo prende dal tema genitore.
Grazie