Che cos’è un tema child WordPress
Lungo la tua strada da creatore di un sito web, ti capiterà di dover apportare delle modifiche al tema che hai scelto. Per farlo, avrai bisogno del tema child. Se non sai cos’è, continua a leggere.
Non sai ancora cosa sia esattamente un tema child WordPress? Vuoi conoscerne le caratteristiche e sapere come crearne uno che potrà esserti utile nella gestione del tuo sito?
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.
Se dovessi avere domande o avere bisogno di un supporto professionale, puoi attivare oggi stesso la nostra Assistenza Prioritaria rapida e gratuita - inclusiva di 32 video del Corso WordPress - quando acquisti uno spazio hosting su SiteGround (o altri hosting) tramite il nostro link. Migliaia di persone si sono già affidate a noi e possiamo aiutare rapidamente anche te.
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: http://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.
Richiesta chiarimento xché ho un po’ di confusione: nel tema child devo copiare tutto il tema parent, oppure come descritto nel “passo 4 ” eredito tutte le funzionalità e caratteristiche semplicemente inserendo nel campo template il nome del tema parent? Ma, se il tema parent cambia completamente, anche se ho il tema child installato il layout del sito no sarà più come l’ho creato?
Ciao Livio, il tema parent non deve essere copiato tutto nel tema figlio. A parte il foglio di stile, deve contenere esclusivamente i file che saranno modificati e che quindi non devono essere sovrascritti quando si aggiorna il tema parent (genitore).
Ciao,
il file functions.php non dovrebbe avere il tag di <?php aperto, nel tuo esempio lo hai chiuso
Ma ho visto altri nel file di altri temi che non lo chiudono mai.
Si, non è obbligatorio chiuderlo.
Ciao Francesco,
non riesco a capire quale sia la procedura per creare un tema child su un tema con del contenuto demo importato.
Devo: 1 installare il tema parent, 2 installare il tema child, 3 importare il demo content (quindi anche widget e plugin) del tema parent?
L’ordine è sbagliato?
Ho già dovuto reinstallare wp perchè avevo provato a installare un child theme ma non mi aveva cambiato bene tutto e mi aveva scombussolato tutto..
Ciao Mary, prima di tutto fai un backup. Poi devi installare i demo content nel child, non nel parent. Il parent theme lo utilizzi solo per gli aggiornamenti, mentre lavorerai esclusivamente sul tema figlio. Un saluto e grazie del commento.. (chi è Francesco?) ;-)
Ciao, articolo molto utile ma vi chiedo comunque consiglio perché ho il terrore di fare danni.
Il mio tema ha un aggiornamento, per non perdere le modifiche fatte ho utilizzato il plugin child theme configurator, ho configurato il tema child e sembra a posto. Adesso cosa devo fare? C’è l’opzione Attiva&pubblica, devo attivarlo?
Poi ho un dubbio sullo step 6 della configurazione: si è settato automaticamente su “Do not add any parent stylesheet handling.”, che significa? E’ giusto così? Prima di aggiornare il tema devo fare altro? E dopo che lo avrò aggiornato che succede?
Ciao Valeria, prima di tutto fai un backup. Questo ti metterà al ripardo da eventuali problemi. Si, il child theme va attivato; il parent ti servirà solo per procedere agli aggiornamenti. Lascia flaggato quel campo, e procedi. Ricorda che devi aggiornare il parent, non il child!
Salve, ottima risorsa come sempre.
Una domanda: ma quando il tema Parent si aggiorna, come si fa ad aggiornare anche quello Child? Lo chiedo perché nel tema Parent vedo la nuova versione, mentre in quello Child è indicata ancora la versione precedente.
Grazie per l’aiuto.
Ciao, il Child recepisce direttamente gli aggiornamenti dal Parent, se creato correttamente. Un saluto!
Ciao, grazie per la risposta.
Il tema Child è creato direttamente dall’autore del tema, che lo fornisce insieme al tema parente.
Direi quindi che sotto questo punto di vista non dovrebbero esserci problemi.
Ma il problema resta comunque.
Lo hai contattato per rendergli noto questo comportamento?
Buongiorno !
Avrei una domanda : seguendo passo passo questa guida ho attivato dal File Manager del mio cPanel Aruba un tema Child inserendo manualmente i codici riportati.
Successivamente per completare al meglio la procedura ho però voluto utilizzare Child Theme configurator come da voi consigliato.
Vorrei quindi procedere all’eliminazione del primo tema Child, avendo attivato il secondo tramite il plugin, ma NON mi viene permesso ! La risposta ufficiale è infatti: “Cancellazione della directory /wp-content/themes/twentyseventeen-child fallita ”
Come posso procedere ?
Grazie già da ora del vostro prezioso supporto : )
Ciao Simo, prova a rimuovere il child via FTP come indicato in questa guida: https://sos-wp.it/come-aggiungere-un-tema-o-un-plugin-via-ftp/ (il procedimento è lo stesso, solo che nel tuo caso devi rimuovere e non trasferire la cartella del tema child)
Ciao Andrea sto facendo una semplice modifica di colore alla menu bar. Se faccio un’anteprima di modifica in “Analizza elemento” aggiungendo la voce background-color funziona perfettamente. Se la stessa modifica la applico al main.css o al child non funziona. Ho svuotato la cache. Cos’altro può essere che non fa funzionare le modifiche? Grazie per consiglio.
Ciao Sonia, utilizza l’apposito box CSS personalizzato (che trovi andando su Aspetto>Personalizza) per modificare il foglio di stile. Un saluto!
Ho provato anche da lì ma non ha alcun effetto. Questa la dicitura che ho riportato che in analizza elemento funziona.
.header-normal.pos-relative.lp-header-full-width {
width: 100%;
background-color: #ff006f;}
Vedi anomalie?
Ricordati di pulire la cache del browser.
Perfetto, funziona! Grazie mille per il supporto!
Bene :)
Ciao Andrea,
grazie per la guida, davvero utile e con il plugin creare il child diventa una banalità
Sono nuovo su wordpress e cms in genere ma lavoro nell’informatica da una ventina d’anni.
Mi chiedevo una cosa in merito al child. Ok serve per modificare tranquillamente il tema originale per personalizzarlo a piacere, capisco quindi l’utilità in una installazione con più siti (voglio usare lo stesso tema per due siti ma personalizzare ognuno in maniera diversa intervenendo sul codice) , invece non la capisco in caso di un sito solo, se lo scopo deve essere solo quello di evitare che aggiornamenti automatici del parent vadano a rovinare il child, perchè non disabilitare semplicemente gli aggiornamenti? inoltre volevo capire, se una volta che ho creato il child, ed esce un aggiornamento del parent, non lo posso più applicare?
grazie
Ciao Andrea, quando aggiorni un tema si sovrascrivono tutti i suoi file. Questo vuol dire, ad esempio, che se hai modificato il functions.php perderei tali modifiche. Il child permette di beneficiare dell’aggiornamento, senza perdere gli interventi effettuati direttamente sul codice. Il child non si danneggia con l’aggiornamento del tema parent (genitore) anzi! Sempre consigliato fare gli aggiornamenti, anche per questioni di sicurezza. Speriamo di aver chiarito il tuo dubbio, un saluto!
Grazie, articolo interessante e utile, ho creato in un attimo il tema child senza codice con il plugin consigliato. (con il codice a me non aveva funzionato :-) )
Ottimo, adesso puoi fare le tue personalizzazioni al codice (se vorrai) senza problemi. Grazie del tuo commento!
Ciao Andrea, ho seguito il tuo articolo, come sempre trovo molto professionale, ma mi dava sempre tema corrotto, perchè non trovava il tema padre, poi ho utilizzato un programma che genera tema chiedo, ma c’è qualcosa che non v’è, perchè purtroppose vado a variare il logo mi cambia le misure, insomma non è uguale al padre, ho forse sbagliato qualcosa? Gra mille!!
Ciao, il tema padre è correttamente installato?
Ho dovuto creare il tema child con un generatore perchè ogni volta mi dava tema corrotto, ma se devo fare una modifica devo modificare il foglio di stile del tema figlio, come mai non trovo scritto nulla?
Sul foglio di stile del tema figlio devi inserire solo eventuali modifiche al codice. Per le altre direttive, queste rimangono quelle dello style.css del tema genitore.
Buon pomeriggio si ben istallato, ora sono riuscita a risolvere. Grazie
Bene :)