Avete il vostro sito WordPress da un po’ di tempo e fa tutto quello che vi serve. Ma ora, decidete di personalizzarlo.
Oppure state creando il vostro sito con un tema scaricato dalla directory dei temi oppure uno che avete acquistato e vi rendete conto che non funziona proprio come dovrebbe.
Allora cosa fate?
Potete trovare un plugin che offra la personalizzazione di cui avete bisogno, o passare a un nuovo tema. E se siete soddisfatti del tema attuale e non riuscite a trovare un plugin che aggiunga le funzionalità di cui avete bisogno?
Risposta: dovrete personalizzare il vostro tema. E le migliori prassi dicono: fatelo con i child theme (di WordPress).
In questo post, vi mostrerò esattamente come creare un child theme in WordPress, come utilizzarlo per personalizzare il vostro sito e come funzionano i child theme. Spiegherò anche il concetto di parent theme e descriverò il modo in cui il tema principale del vostro sito interagisce con un child theme:
Prima di immergerci nella creazione di un child theme, individuiamo i 3 metodi che potete utilizzare per personalizzare il vostro sito WordPress.
Metodi di Personalizzazione di WordPress
Personalizzare un tema comporta dei rischi. Se modificate il codice in un tema di terze parti (ad esempio uno che avete acquistato su un marketplace), al successivo aggiornamento del tema, tutte le modifiche andranno perse. Ciò significa che non solo il vostro sito torna ad apparire come era prima, ma tutto il vostro lavoro è andato sprecato.
Esistono tre modi per personalizzare il vostro sito WordPress:
- Modificare direttamente il tema.
- Installare un plugin.
- Creare un child theme del tema corrente.
Analizziamoli uno alla volta.
Cosa è un Child Theme di WordPress (Glossario):
Un child theme di WordPress è un tema che funziona in tandem con un altro (chiamato tema principale) dal quale eredita tutte le funzionalità e lo stile.
Le migliori prassi di sviluppo raccomandano di utilizzare i child theme per modificare, aggiornare o personalizzare i temi di WordPress come metodo sicuro per mantenerne il design e il codice.
Modificare il Vostro Tema
Se il vostro sito ha un tema WordPress personalizzato, cioè il tema è stato sviluppato appositamente per il vostro sito, avete la possibilità di modificarlo in modo sicuro perché non c’è il rischio di perdere le personalizzazioni al successivo aggiornamento del tema.
Piuttosto, se voi o il vostro sviluppatore apportate delle modifiche al tema, è la versione personalizzata del tema che starete modificando, e non la versione originale precedente alle modifiche.
Ciò non significa che la modifica del tema non avvenga senza rischi. Se non avete esperienza nella codifica dei temi, potrebbe essere ancora più sicuro creare un child theme (vedremo come tra un minuto). Questo è quello che faccio: ho un tema di base che utilizzo su tutti i miei siti, con layout, hook e funzioni standard, che poi personalizzo su ogni sito con un child theme.
Se modificate direttamente il tema, assicuratevi di fare un backup del tema originale, non modificate il tema nel sito live (utilizzate invece un sito di sviluppo o di staging) e utilizzare il controllo versioni per tenere traccia delle modifiche.
E se state utilizzando un tema di terze parti, non dovreste mai modificarlo direttamente. Invece, utilizzate un plugin oppure create un child theme.
Aggiungere un Plugin
La seconda opzione per personalizzare un tema WordPress è installare o creare un plugin.
Se le personalizzazioni che volete effettuare sono funzionali anziché relative al design, creare un plugin è la soluzione più appropriata. Quindi, se volete inserire del codice aggiuntivo, potrebbe essere preferibile creare un plugin.
I plugin non devono essere grandi o complessi: se dovete aggiungere del codice extra al file functions.php del vostro tema, create un semplice plugin per aggiungere alcune righe di codice al vostro sito. Un buon esempio è la registrazione di un custom post type.
Potresti essere tentati di aggiungere il codice al file functions.php del vostro tema, ma l’aggiunta di un tipo di post è una modifica funzionale al sito, non riguarda il design. Se doveste cambiare tema in futuro, non dovrete perdere quei tipi di post e tutti i post che avete creato di quel tipo. Ecco perché dovreste, invece, installare o creare un plugin.
A volte sarete in grado di trovare un plugin esistente che fa esattamente quello che vi serve, ma a volte potreste dover programmare voi stessi il plugin.
In caso di dubbi sulla necessità di creare un plugin o personalizzare il tema (o il child theme), fatevi questa domanda: se in futuro volessi cambiare il design del mio sito e installare un nuovo WordPress tema, vorrei che queste modifiche rimanessero? Se la risposta è sì, significa che il cambiamento è funzionale e non estetico, e dovrebbe essere realizzato con un plugin.
Creare un Child Theme
La terza opzione per personalizzare il tema di WordPress è creare un child theme.
Ecco alcuni scenari in cui dovreste usare un child theme:
- Volete apportare modifiche al design del sito, non alle funzionalità.
- Nel vostro sito è in esecuzione un tema di terze parti o un tema che desiderate utilizzare nuovamente nello stato attuale.
- Non volete modificare direttamente il tema esistente nel caso in cui questo possa causare problemi (forse non siete uno sviluppatore di temi con esperienza).
- Nel vostro sito è in esecuzione un tema progettato per essere un parent theme, ad esempio un tema framework. Questi sono temi con molte opzioni di personalizzazione come gli hook, progettati per essere aggiunti vostro child theme.
I child theme costituiscono, quindi, un modo efficace e sicuro per aggiungere personalizzazioni al vostro sito. Diamogli un’occhiata in modo più approfondito.
Che Cosa è un Child Theme di WordPress?
Quindi, cos’è esattamente un child theme di WordPress? Come funziona?
Un child theme è un tema che funziona in coppia con un altro tema, che è indicato come parent theme.
Contiene alcune istruzioni specifiche per dire a WordPress che si tratta di un child theme e qual è il suo parent theme. WordPress utilizza quindi il codice del tema principale nella maggior parte dei casi, ma lo sostituirà con il codice del child theme (se necessario). Se vi imbattete in un sito che usa un tema child e che vi piace, usate il nostro strumento di rilevamento del tema per scoprire qual è il tema genitore.
I File di un Child Theme di WordPress
Ogni child theme di WordPress deve avere almeno due file: un foglio di stile e un file di funzioni. Il foglio di stile conterrà in alto il testo commentato che dice a WordPress che questo è un child theme e qual è il tema genitore. Il file delle funzioni includerà una funzione che accoda il foglio di stile del tema principale.
Nota: potreste trovare delle guide che vi dicono di invocare il foglio di stile del tema principale dal foglio di stile del child theme. Questo non è più il modo corretto per farlo e dovreste invece usare l’accodamento nel file functions.php. Vi mostrerò a breve come fare.
Il child theme non deve includere altri file. A differenza del tema principale, non è necessario un file index.php come fallback se non ci sono file più specifici nel tema. Questo perché, se non esiste un template file nel child theme, WordPress utilizzerà il file del tema principale.
Quindi, a seconda di ciò che volete che faccia il vostro child theme, aggiungerete un codice extra al foglio di stile, al file delle funzioni, oppure creerete file extra nel child theme per sovrascrivere il tema genitore. Questi potrebbero includere uno o più di:
- Template files per sovrascrivere lo stesso file del tema principale, come page.php, quando si desidera personalizzare la visualizzazione di pagine statiche.
- Template part come header.php o footer.php, quando si desidera personalizzare queste parti del design del sito.
- Template part extra invocate dai template file del child theme. Quindi, se si desidera personalizzare l’intestazione durante la visualizzazione di pagine statiche, è necessario creare un file nel child theme denominato header-page.php e un template file denominato page.php, che sostituisca il page.php del tema principale. Questo template file sarebbe identico a quello del tema principale, ad eccezione della chiamata al file header, che invocherebbe header-page.php invece di header.php.
- Inclusioni extra di file per altre funzionalità. Se volete aggiungere molto codice funzionale e organizzarlo, potreste creare file da includere per ogni set di funzionalità e quindi invocarli nel file functions.php del vostro child theme. Ad esempio, se si desidera aggiungere maggiori opzioni per il Customizer, potrete aggiungere un file di inclusione chiamato customizer.php nel child theme e quindi invocare tale file dal file delle functions del child theme.
Ma se aggiungete file e funzioni extra, come fa WordPress a sapere quale usare? Quelli del tema genitore o quelli del child theme? Questo è ciò che chiariremo ora.
Come WordPress Sceglie i Template Files
Il modo in cui WordPress sceglie i template file dal tema durante la visualizzazione del contenuto sul vostro sito è facendo riferimento alla gerarchia dei template.
WordPress utilizza questa gerarchia per elaborare i template file del tema e trovare quello giusto da utilizzare quando si visualizza un determinato tipo di contenuto. Inizierà dall’alto (sul lato sinistro nell’immagine qui sopra) e cercherà a turno ciascun file per il tipo di contenuto specificato. Quando trova un file per visualizzare quel contenuto, lo utilizzerà.
Immaginate che il vostro tema abbia un file archive.php e un file category.php, ma nessun file tag.php. Durante la visualizzazione di un archivio di categorie, WordPress utilizzerà category.php in quanto è più specifico per il tipo di contenuto. Quando visualizza un archivio di tag, utilizzerà invece archive.php.
Se WordPress non trova un template file per il tipo di contenuto specificato, passerà di default al file index.php acchiappa tutto, motivo per cui ogni tema autonomo (cioè non un child theme) deve avere un file index.php .
Lo stesso vale per singoli post e pagine. Supponiamo che il vostro tema abbia un file singular.php, che è il punto di riferimento per singoli post di qualsiasi tipo di post (inclusi pagine e custom post type). Ha anche un file page.php. Quando viene visualizzata una singola pagina, utilizzerà page.php. Durante la visualizzazione di un post, utilizzerà singular.php. E se registrate un custom post type e non aggiungete un template file per quel tipo di post, utilizzerà di nuovo singular.php.
Quando utilizzate un child theme, WordPress utilizza ancora la gerarchia dei template per decidere quale file utilizzare quando invia il contenuto sul vostro sito. Guarda i file in entrambi i temi, padre e figlio, e utilizza il primo file che incontra.
Quindi immaginate che il vostro child theme abbia singular.php e post.php, e che il vostro tema principale abbia page.php e index.php. Quando genera un singolo post, WordPress utilizzerà post.php dal child theme. Quando genera una pagina, utilizzerà page.php dal tema principale. E quando viene pubblicato un singolo post di un tipo di post personalizzato, verrà utilizzato singular.php dal child theme.
E se entrambi i temi, child e parent, hanno copie dello stesso file?
Immaginiamo di aggiungere un file page.php al child theme nell’esempio precedente. Poiché tale tema si trova nel child theme, sostituisce lo stesso file del tema principale. Quindi, quando si visualizza una singola pagina, WordPress usa il nuovo file page.php del child theme.
Ecco perché la creazione di un child theme vi consente di personalizzare il tema principale. Se copiate un template file dal tema principale al vostro child theme e poi lo modificate per includere le personalizzazioni che desiderate, WordPress utilizzerà questo nuovo template file anziché quello del tema principale. Ciò significa che le personalizzazioni verranno utilizzate durante la visualizzazione del contenuto, senza che voi abbiate modificato il tema principale. Bello!
Come WordPress Esegue le Funzioni dai Temi Parent e Child
Cosa succede se volete personalizzare non i template file del tema, ma le funzioni?
Potete farlo anche voi. Innanzitutto, dovete assicurarvi che il modo giusto per farlo sia tramite un child theme e non un plugin. Un esempio potrebbe essere il punto in cui si desidera modificare una funzione che è già nel tema principale, ad esempio la funzione che genera il colophon nel footer.
Quindi aggiungete le nuove funzioni al file functions.php del child theme o a un file di inclusione che invocate dal file functions.
Per garantire che la nuova funzione abbia la precedenza su quella del tema principale, è necessario capire come sovrascrivere le funzioni. Esistono tre modi per farlo:
- Scrivendo una nuova funzione con lo stesso nome di una funzione collegabile nel tema principale.
- Sganciando la funzione del tema principale dall’hook a cui era collegata e quindi scrivendo una nuova funzione per sostituirla.
- Scrivendo una nuova funzione con priorità più alta rispetto alla funzione originale e invocandola tramite lo stesso hook, il che significa che è invocata dopo la funzione originale e può, quindi, sostituirla o accrescerla.
Esamineremo come fare tutto questo più avanti in questo post. Ma prima, diamo un’occhiata agli scenari in cui dovreste o non dovreste utilizzare un child theme.
Quando Utilizzare un Child Theme in WordPress (Vantaggi)
Ora sapete cosa sono i child theme e come utilizzarli per sovrascrivere i template file o le funzioni del tema principale.
Come breve riepilogo, dovreste utilizzare un child theme se desiderate eseguire una o più delle seguenti operazioni:
- Modificare uno o più template file.
- Aggiungere funzioni extra legate alla visualizzazione e non alle funzionalità.
- Sovrascrivere una o più funzioni del tema principale.
- Aggiungere template file extra.
Tra i vantaggi ricordiamo:
- Facile estensione e personalizzazione: come è ovvio, un child theme estende la funzionalità del tema principale. Avete già un template pronto al vostro servizio sotto forma di un tema principale e tutto ciò che dovete fare è creare un file style.css separato per il vostro child theme e aggiungere le modifiche per personalizzarlo secondo le vostre esigenze.
- Aggiornamenti senza problemi: con lo sviluppo di WordPress, i temi e i plugin devono essere aggiornati molto spesso. Se apportate modifiche e personalizzazioni al tema principale, potreste finire per perdere tutto se aggiornate il tema. Pertanto, è consigliabile apportare tali modifiche a un child theme, in modo tale che, anche se vi viene richiesto di aggiornare il tema principale, non dovete temere di perdere le modifiche.
E quando non dovreste utilizzare un child theme?
Quando Non Utilizzare un Child Theme in WordPress (Svantaggi)
A volte non dovreste utilizzare un child theme ma scegliere un metodo diverso per personalizzare il vostro sito. Questo si verifica:
- Se il vostro tema lo avete sviluppato voi stessi (o lo ha fatto qualcun altro per voi) e non avete bisogno di utilizzarlo altrove. Modificate il tema, assicurandovi di utilizzare il controllo versione.
- Se le personalizzazioni che desiderate apportare sono funzionali, ad esempio quando si aggiunge un custom post type, e vorreste mantenerle anche cambiando tema in futuro. Utilizzate un plugin.
Tra gli svantaggi ricordiamo:
- Scegliere il tema genitore giusto: non tutti i temi si comportano come buoni genitori! Alcuni temi di WordPress, ad esempio, potrebbero non essere aggiornati regolarmente e quindi tendono a mancare delle funzionalità più recenti. Allo stesso modo, non tutti i temi di WordPress sono creati pensando ai temi secondari e, in quanto tali, possono non essere adatti. Dovete scegliere il parent theme perfetto per estenderlo correttamente e utilizzarlo come base per i vostri child theme.
- Sforzi di personalizzazione: un child theme cerca sostanzialmente di estendere e personalizzare un modello di design esistente. Pertanto, se avete già creato un sito web attorno al tema principale, potreste dover riconsiderare la personalizzazione di elementi come menu, opzioni del tema, barre laterali, intestazione, ecc. quando passate ad un child theme.
Ora che sapete quando (e quando non) utilizzare un child theme, è tempo di mettersi al lavoro e imparare a creare un child theme in WordPress.
Come Creare un Child Theme di WordPress
L’impostazione di un child theme di base in WordPress richiede la creazione di due file: il foglio di stile e il file functions. Analizziamoli entrambi.
Il Foglio di Stile
Prima di creare il vostro file, dovrete creare una cartella per contenere il tema. Questa va nella cartella wp-content/themes della vostra installazione di WordPress.
Ricordate: non fatelo nel vostro sito live. Aggiungete prima il codice a un sito di sviluppo, quindi testatelo sul sito di staging. Una volta che siete soddisfatti, potete trasferirlo sul vostro sito live. Tutti i piani di hosting di Kinsta includono lo staging.
Nella cartella del nuovo tema, create un file e nominatelo style.css. Aggiungete quanto segue:
/*
Theme Name: My Child Theme. Child for Twenty Nineteen.
Theme URI: https://rachelmccollin.com
Description: Theme to support tutsplus tutorial. Child theme for the Twenty Nineteen theme.
Author: Rachel McCollin
Textdomain: mccollin
Author URI: https://rachelmccollin.com/
Template: twentynineteen
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
Questo testo è commentato. Non è codice che esegue alcunché sul vostro sito né fornisce alcuna funzionalità. Invece, dà a WordPress informazioni sul tema. Avete bisogno di un testo come questo in ogni tema, altrimenti WordPress non può riconoscerlo come tale.
Analizziamo ognuna di queste righe per capire ciò che fanno:
- Theme Name: il nome univoco del tema.
- Theme URI: dove gli utenti possono trovare il codice o la documentazione del tema.
- Description: testo descrittivo per aiutare gli utenti a capire cosa fa il tema.
- Author: il vostro nome
- Textdomain: utilizzato per l’internazionalizzazione. Utilizzate il text domain come secondo parametro in tutte le funzioni per l’internazionalizzazione.
- Author URI: il sito web dell’autore.
- Template: la cartella in cui è collocato il tema principale. Utilizzate il nome della cartella e non il nome del tema. Senza questa riga, il tema non funzionerà come child theme.
- Version: il numero di versione
- License: la licenza, che deve essere GNU. [Link]
- License URI: il link alle informazioni sulla licenza.
La riga più importante per un child theme è la riga Template. Senza questa riga, il tema non funzionerà come child theme. Solo i child theme avranno questa riga.
Aggiungetela al foglio di stile del vostro tema, modificandolo per aggiungere i vostri dati al posto dei miei. Dovrete modificare la riga Template e inserire la cartella in cui è archiviato il tema esistente, perché sarà il tema principale.
Ora salvate il file. Se doveste guardare la schermata dei dettagli del tema nel vostro sito ora, vedreste questo:
Non sembra brillante perché non c’è immagine di anteprima. Questa è un’immagine che dà un’idea di come appare il tema. A meno che il tema non sia molto diverso dal tema principale, basta copiare il file screenshot.png dal tema principale e incollarlo nel child theme.
Il File Functions
Il prossimo successivo è aggiungere un file functions al child theme. Ne avete bisogno per accodare il foglio di stile del tema principale. Senza di questo, il vostro sito non avrebbe affatto uno stile e sarebbe simile a questo:
Non va bene, sono sicura che sarete d’accordo! Quindi aggiungiamo lo stile per dargli l’aspetto che dovrebbe avere.
Nella cartella del child theme, aggiungete un file chiamato functions.php. Apritelo e aggiungete questo codice:
<?php
/* enqueue script for parent theme stylesheeet */
function childtheme_parent_styles() {
// enqueue style
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'childtheme_parent_styles');
Questo utilizza la funzione wp_enqueue_style()
per accodare il foglio di stile del tema principale, con la funzione get_template_directory_uri()
che individua la location dove è archiviato quel file. La funzione è all’interno di una funzione creata da me chiamata kinsta_parent_styles()
, agganciata all’hook wp_enqueue_scripts
.
Potrebbe chiedervi perché utilizza una funzione chiamata wp_enqueue_scripts
e non wp_enqueue_styles
. Questo perché wp_enqueue_scripts
è utilizzata sia per gli script che per gli stili e non esiste un hook wp_enqueue_styles
.
Modificate pure il mio codice per aggiungere il vostro prefisso al nome della funzione. Io ho utilizzato “childtheme” come prefisso per essere sicura che la mia funzione non andasse in conflitto con altre funzioni del tema principale o di eventuali plugin.
Ora salvate il vostro file.
Come Attivare il Child Theme di WordPress
Una volta che il child theme è pronto, è necessario attivarlo. Se vi viene il dubbio che l’attivazione del child theme possa disattivare il tema principale, non preoccupatevi: WordPress saprà di dover usare i file del tema principale a meno che voi non aggiungiate nuovi file al child theme che li sovrascrivano. Finora non avete aggiunto file o funzioni extra al child theme, quindi il vostro sito funzionerà esattamente come farebbe con il tema principale attivo.
Ricordate: eseguite questa operazione prima sul vostro sito di sviluppo o di staging. Non attivate il child theme sul vostro sito live fino a quando non lo avrete testato.
Nel pannello di amministrazione di WordPress, andate su Aspetto > Temi. Tra i temi installati sul vostro sito, troverete anche il vostro child theme.
Passate il mouse sul tema e fate clic sul pulsante Attiva. Questo attiverà il vostro child theme. Ora, quando visitate il vostro sito live, apparirà esattamente lo stesso di prima:
Avrà lo stesso aspetto perché non avete ancora aggiunto alcuna personalizzazione. Ma ora avete un child theme in funzione. Molto bene!
Come Personalizzare il Vostro Child Theme in WordPress
Ora che avete un child theme in funzione per il vostro sito WordPress, è il momento di aggiungere le vostre personalizzazioni. Qui vi mostrerò come aggiungere i template file per sovrascrivere quelli del tema principale, come aggiungere lo stile al child theme e come aggiungere nuove funzioni.
Cominciamo con i template file.
Come Aggiungere Template File al Child Theme di WordPress
Abbiamo già esaminato il modo in cui WordPress sceglie quale template file utilizzare per visualizzare i contenuti del vostro sito. Ci sono due cose da ricordare:
- WordPress utilizzerà il file che viene prima nella gerarchia, sia del child theme che del genitore.
- Se esiste un template file (o un template part come header.php) con lo stesso nome in entrambi i temi, genitore e figlio, WordPress utilizzerà quello del child theme.
Per aggiungere personalizzazioni, trovo più facile iniziare facendo una copia dal tema principale del file corrispondente, aggiungendolo al child theme e quindi modificandolo.
Questo vale sia nel caso in cui il file del child theme è lo stesso file indicato nel tema principale, sia se è un nuovo file per visualizzare un diverso tipo di contenuto, oppure uno che è più in alto nella gerarchia.
Quindi, se al mio child theme sto aggiungendo una nuova versione di page.php che sostituirà il page.php del tema genitore, copierò page.php dal tema genitore al tema figlio e poi lo modificherò. Assicuratevi di copiare il file: non spostatelo, in quanto non dovete apportare modifiche al tema principale.
E se, ad esempio, voglio un template di pagina personalizzato nel mio child theme, copierò page.php nel child theme, lo rinominerò e poi lo modificherò.
In questo modo, puoi assicurarvi che tutti gli aspetti del file che non è necessario personalizzare funzionino correttamente. Lo stesso vale per i template part.
Come Aggiungere lo Stile al Vostro Child Theme di WordPress
Potete anche aggiungere uno stile al file style.css del child theme. Questo aumenterà o sovrascriverà lo stile dello stylesheet del tema principale.
WordPress invocherà prima il foglio di stile del tema principale, poi il foglio di stile del child theme. Ciò significa che se aggiungiete lo stile al child theme che punta agli stessi elementi dello stile del tema principale, il primo sostituirà lo stile del tema principale fintanto che utilizzerete gli stessi selettori.
Quindi immaginate di voler cambiare il colore del titolo del sito. Nel tema principale, questo potrebbe avere uno stile simile a questo:
h1.site-title {
color: #000;
}
Per sovrascrivere questo stile nel child theme, aggiungete questo:
h1.site-title {
color: #303030;
}
Dato che il browser si imbatterà in questo stile dopo lo stile del tema principale, lo sostituirà e lo utilizzerà al suo posto.
Come Aggiungere Funzioni al Child Theme di WordPress
Quindi, avete creato un child theme in WordPress non perché volete modificare un template file, ma perché volete aggiungere funzionalità extra o sovrascrivere una o più delle funzioni nel tema principale.
Scrivere funzioni nel child theme è un po’ più complicato dell’aggiunta di template file, ma è possibile.
Se volete aggiungere una nuova funzione che non interagisce con nessuna delle funzioni del vostro tema principale, potete procedere e farlo tranquillamente. Basta aggiungere la funzione al file functions.php del child theme, agganciarlo all’azione o al filtro pertinente e il gioco è fatto.
Ma se prevedete di sovrascrivere o modificare una funzione nel tema principale, dovete comprendere i metodi giusti per farlo. Esistono tre modi per sovrascrivere una funzione del tema principale nel child theme:
- Se la funzione nel tema principale è integrabile, dovete semplicemente scrivere un’altra funzione nel tema secondario con lo stesso nome e WordPress eseguirà quella funzione anziché quella del tema principale.
- Se desiderate interrompere l’esecuzione della funzione del tema principale, è possibile scrivere una funzione nel child theme che la sgancia dall’hook a cui è agganciata.
- Se desiderate estendere una funzione, potete aggiungere un’altra funzione (con un nome diverso) nel child theme e accertarvi che venga eseguita dopo quella del tema principale.
Diamo un’occhiata più da vicino ad ognuna di queste situazioni.
Sovrascrivere una Funzione Integrabile
Una funzione integrabile è identificata dal controllo condizionale all’interno del quale è inserita. Questo verifica se c’è un’altra funzione con lo stesso nome che è già stata attivata. In tal caso, non esegue la funzione.
WordPress eseguirà le funzioni del vostro child theme prima di quelle del tema principale. Se viene rilevata una funzione integrabile nel tema principale, e avete aggiunto una funzione al tema secondario con lo stesso nome, la funzione integrabile non verrà eseguita.
Un esempio è la funzione che genera il colophon nel tema Storefront per i siti WooCommerce. Ecco la funzione senza il suo contenuto:
if ( ! function_exists( 'storefront_credit' ) ) {
function storefront_credit() {
// contents for function here
}
}
Se volete sovrascriverla, dovrete scrivere un’altra funzione con lo stesso nome (storefront_credit()
) e agganciarla allo stesso hook del tema principale.
Sganciare una Funzione del Tema Principale
Se la funzione del tema principale non è integrabile, è comunque possibile impedirne l’esecuzione. Immaginate che il vostro tema genitore abbia una funzione chiamata parent_function()
, che è agganciata all’hook init con una priorità di 20
. Volete impedirne l’esecuzione in modo da poterla sostituire con una vostra funzione.
Ecco come potrebbe apparire la funzione del tema principale:
function parent_function() {
//contents of function here
}
add_action( 'init', 'parent_function', 20 );
Per sganciarla, dovreste aggiungere questo codice nel vostro child theme:
function remove_parent_function() {
remove_action( 'init', 'parent_function', 20 );
}
add_action( 'wp_head', 'remove_parent_function' );
Si noti che viene agganciata la seconda funzione all’hook wp_head, che viene eseguito nella parte superiore di ogni pagina e che è necessario includere lo stesso valore del parametro di priorità della funzione originale. Se la funzione add_action()
originale non aveva una priorità, potete ometterla dalla funzione remove_action()
del vostro child theme.
Nota: se la funzione originale fosse agganciata a un filter hook anziché a un action hook, va utilizzato remove_filter()
allo stesso modo.
Estendere una Funzione con un’Altra Funzione
Invece di sovrascrivere o rimuovere una funzione, a volte potreste doverla estendere. In questo caso, dovreste scrivere una nuova funzione con un nome diverso e collegarla allo stesso hook.
Immaginiamo che ci sia un action hook per footer nel tema principale chiamato parent_footer
. Qualsiasi funzione collegata a quell’hook sarà eseguita nel punto in cui si trova l’hook.
Nel tema principale, esiste già una funzione chiamata parent_footer_content()
che popola il footer. E se voleste aggiungere del codice extra?
Ecco come potrebbe apparire la funzione parent_footer_content()
nel tema principale:
function parent_footer_content() {
// content of function here
}
add_action( 'parent_footer', 'parent_footer_content' );
Ora, se volete aggiungere altri contenuti dopo questi, dovreste creare una funzione nel child theme, agganciata allo stesso action hook, con una priorità che fa sì che venga eseguita dopo la prima funzione. Dato che la priorità non è impostata per la funzione del tema principale, di default è 10. Quindi è necessario utilizzare un numero più alto, in modo che venga eseguita dopo.
function child_footer_extra_content() {
// contents of function here
}
add_action( 'parent_footer', 'child_footer_extra_content', 20 );
Questo aggiungerebbe il codice della funzione del child theme dopo il codice dalla funzione del tema principale.
Come Risolvere i Problemi tra Child Theme e Parent Theme
Quindi ora sapete come creare un child theme in WordPress e come usarlo per sovrascrivere i template file, aggiungere uno stile e funzionalità extra al vostro sito.
Ma cosa succede se il vostro child theme non funziona come previsto? Cosa succede se il contenuto non viene visualizzato nel modo previsto o se una funzione non viene attivata?
Utilizzate questa checklist per risolvere i problemi dei vostri child theme:
- Verificate di aver attivato il child theme e che il tema principale non sia ancora in esecuzione. È sorprendentemente facile dimenticare questo passaggio!
- Aggiornate la cache del browser e la cache creata da qualsiasi plugin presente sul vostro sito.
- Impostate wp-debug su true nel file wp-config.php. Se state guardando uno schermo bianco, dovrebbe esserci un messaggio che vi dice quale codice ha causato il problema e in quale file si trova. Questo vi aiuterà a identificare il bug e quale file viene utilizzato.
- Controllate il codice di output della vostra pagina, post o archivio. Trovate l’elemento body e vedete quali classi ha. Queste vi diranno quale tipo di contenuto state guardando, cosa che vi aiuterà a identificare il template file che viene utilizzato. A volte non è quello che vi aspettate. Ad esempio, la pagina principale del blog non usa mai archive.php, anche se mostra un archivio dei vostri post.
- Verificate di aver assegnato correttamente i nomi ai vostri file. Fate riferimento alla gerarchia dei template per essere sicuri di aver utilizzato la sintassi corretta.
- Se avete duplicato un file del tema principale e l’avete aggiunto al tema secondario, verificate di aver salvato le modifiche.
- Se una funzione per sovrascrivere una funzione integrabile non funziona, verificate di averle assegnato esattamente lo stesso nome della funzione integrabile e che la funzione nel tema principale sia effettivamente integrabile.
- Se una funzione rimossa viene ancora eseguita, verificate di aver aggiunto la priorità corretta e che l’ortografia sia identica all’ortografia della funzione e dell’hook presenti nel tema principale.
- Se avete utilizzato la priorità per ignorare o estendere una funzione, provate ad aumentare il valore della priorità, in modo da poter essere assolutamente sicuri che scatti per ultima. Verificate che non ci siano altre funzioni collegate a quell’hook che interferiscono con il vostro codice.
Auspicabilmente, uno o più di questi passaggi vi aiuteranno a identificare il problema del vostro child theme e a risolverlo. Ricordate: non modificate direttamente il tema principale.
Suggerimenti Utili per Quando si Lavora con i Child Theme di WordPress
Accidenti! I child theme sono una funzionalità incredibilmente preziosa di WordPress. Li uso su ogni sito che costruisco.
Ecco i miei suggerimenti per aiutarvi a trovare i metodi da utilizzare per sfruttare al meglio i child theme:
- Se dovete modificare un tema di terze parti, utilizzate sempre un child theme. In questo modo, le modifiche non vengono perse quando si aggiorna il tema.
- Ogni child theme richiede un foglio di stile e un file di funzioni.
- WordPress utilizzerà la gerarchia dei template per determinare quale template file utilizzare durante l’output del contenuto. Se trova due file con lo stesso nome, utilizzerà quello del child theme.
- Potete sovrascrivere una funzione integrabile del tema principale scrivendo una funzione con lo stesso nome nel child theme.
- Potete sganciare una funzione dal tema principale usando una funzione con
remove_action()
oremove_filter()
nel child theme e quindi scrivendo una nuova funzione. - Potete estendere una funzione nel vostro parent theme scrivendo una funzione nel vostro child theme e collegandola allo stesso action o filter hook.
- Non dimenticate di attivare il child theme dopo averlo caricato. E assicuratevi che nessuno elimini il tema principale dall’installazione di WordPress: senza di questo, il child theme non funzionerà.
Riepilogo
I child theme sono una funzione utile di WordPress che vi consente di personalizzare un tema senza modificarne direttamente il codice. Potete usarne uno per aggiungere funzionalità a un tema, personalizzare lo stile o creare/modificare template file.
Se seguite i consigli di questo articolo, sarete in grado di creare child theme in WordPress seguendo le migliori prassi e sfruttarli per una varietà di scopi. E senza perdere le modifiche e le personalizzazioni quando aggiornerete il tema principale.
Complimenti per la spiegazione: chiara e dettagliata. Una domanda, ma se qualcuno, per inesperienza, avesse fatto tutto sul parent theme, ha la possibilità di inserire il child DOPO, che so, un anno? O è una cosa che non si può più fare ormai?
Grazie mille
Ciao Cristina. Dipende dalle modifiche che sono state apportate al parent. Se riesci a individuare tutte le modifiche apportate, puoi aggiornare il tema parent alla versione ufficiale corrente e creare un child theme apportando quelle sole modifiche che ti servono. Se hai fatto tu stessa le modifiche al tema, potresti riuscire a ripristinare tutto. Se le modifiche sono state apportate da altri, potrebbe essere più complicato.
ciao, ho seguito la tua guida, non sono esperto ma sono riuscito a fare il child theme e farlo funzionare correttamente
però una volta che faccio l’aggiornamento al tema principale, le modifiche che il child dovrebbe apportare non si vedono più
comemai ?
grazie
p.s. non so se fa differenza ma sto lavorando in remoto con xampp
Ciao Andrea, gli aggiornamenti del tema principale non dovrebbero influenzare il codice del child theme se questo è configurato correttamente. Forse è meglio controllare se i nomi dei file nel tema principale sono cambiati – nel qual caso i nomi dei template file del child theme dovrebbero essere cambiati a loro volta. Oltre a questo, bisogna assicurarsi che il child theme sia il tema attivato, cancellare la cache, ecc.
Ho modificato una funzione e l’ho messa nel child functions.php, la funzione originale si trova in ./wp-includes/general-template.php però mi da conflitto, in pratica non mi apre il sito e appare “Si è verificato un errore critico sul tuo sito web.”
Come mai questo conflitto?
Se invece tolgo la funzione originale e lascio quella modificata nel child, il sito funziona.
Ciao Alberto, nella directory ./wp-includes/ ci sono i file del core. Ridefinendo una funzione core è normale che sorga un conflitto. Dato che il framework di WordPress permette di fare di tutto senza toccare le funzioni core, dovresti individuare un hook adatto ai tuoi obiettivi senza ridefinire le funzioni del core.
Salve. Una domanda. Ho creato il sito anche abbastanza complesso però sul tema principale, non facendolo sul tema child. Adesso che ci sono degli aggiornamenti da fare, mi hanno sconsigliato di farli perchè rischio di perdere tanto lavoro fatto, come anche tutte le varie traduzioni della lingua. Metto in evidenza che si tratta di ecommerce, multimarke, perciò immaginate tantissimi prodotti caricati ecc. ecc. come posso fare per aggiornare il tema. C’è la possibilità di copiare tutto il tema parent sul child? Grazie
Ciao Omar, sicuramente c’è il modo, ma bisogna essere molto attenti perché si rischia di perdere il lavoro fatto. Prima di azzardare qualsiasi modifica, fai un back-up del sito e del tema in modo da poter ripristinare tutto se le modifiche dovessero creare dei danni.
Poi crea un child theme e comincia a riportare nel child le modifiche che avevi fatto al tema originale. Se hai modificato solo gli stili, non dovresti trovare grandi difficoltà. Ma se hai modificato anche il file delle funzioni e i template, allora bisogna essere più prudenti. Cerca di fare quest’operazione in un ambiente di staging o di sviluppo e non direttamente in produzione.
In pratica ci sono installati vari plugin per il multivendor e poi anche per il multilingua. Credi che questi possano essere cancellati? Per il resto qualche modifica l’ho fatta io a mano, ma riesco a farla nuovamente, la mia paura è quella di dover rifare tutto nel multivendor o nelle trsudzioni…allora diventa un grosso problema. Anche se il mio host fa il back-up ogni 4 ore.
Gran bella guida la rileggo sempre con piacere ogni volta che ho la necessità di un child theme, grazie per il lavoro svolto.
Grazie Pasquale. Siamo lieti che le pubblicazioni del blog siano utili.
Ciao, ho seguito tutta la guida… perfetto… ma l’header e il footer, sono rimasti come il tema in origine, prima che io creassi il sito web….come mai?
Per far si che possa utilizzare il child theme, devo apportare la modifica sul child?
Grazie
Ciao Annalisa, per modificare header e footer devi copiare i file originali e riportarli nella stessa posizione nel child theme. Prima di procedere, dovresti analizzare con attenzione la struttura del tema genitore perché questa cambia da tema a tema.
Buongiorno, se devo modificare un file del tema principale posizionato in varie sottocartelle, devo ricreare lo stesso identico percorso nel tema child?
Sì, Franco. Il child theme deve rispecchiare la struttura del tema genitore
Buongiorno. Guida sempre utilissima ed utilizzata ogni volta per “rinfrescare” la memoria.
Ora però ho un problema apparente sciocco ma che non riesco a risolvere.
Ho installato su un sito il tema Ashe Pro e ho anche scaricato i file per il tema child da loro proposto.
Usando POedit ho tradutto alcune stringhe e ho copiato i file it_IT.po e it_IT.mo sulla directory languages del tema Ashe Pro.
Accade che le traduzioni funzionano se attivo il tema genitore ma non se attivo il tema child.
Ho anche provato a creare nel folder del tema child una directory languages con dentro i file .po .mo e .pot ma, niente, continua a non funzionare.
Dove sbaglio?
Grazie.
Buongiorno,
la guida è precisa e breve, proprio come piace a me, per questo i miei più sentiti complimenti. Io ho un dubbio riguardo il mio sito web su WordPress: ho effettuato modifiche sul tema principale (modifiche di: header, footer, menù, personalizzazione e tutto il resto modificabile da WordPress, senza scrivere una linea di codice. Ovviamente ho anche installato alcuni plugin.) è quindi pericoloso aggiornare il tema?
Grazie in anticipo.
Ciao Francesco, sì, in effetti se hai modificato i file del tema principale, al primo aggiornamento del tema potresti perdere tutte le tue modifiche. Per evitare che succeda, dovresti creare un child theme inserendo all’interno i file che hai modificato e poi aggiornare il tema genitore. Fai attenzione, però. È sempre meglio fare prima delle prove in locale o in un ambiente di staging
Buongiorno, mi scuso per il distrubo.
Ho seguito la guida ma non riesco a visualizzare il tema in maniera corretta.
Mi spiego: creando il file function come indicato , la visualizzazione mi risulta sempre base…con l’elenco delle voci ecc. Come posso risolvere?
Complimenti davvero utile!
Ottimo post ben scritto.