La tua guida definitiva per lavorare con i temi figlio di WordPress

Se vuoi personalizzare i temi che acquisti da noi su HeroThemes, magari se stai creando siti Web per te o per i tuoi clienti utilizzando un design su misura, allora essere in grado di sfruttare la potenza dei temi figlio di WordPress è qualcosa di cui avrai bisogno.

Nella loro forma più semplice, l'uso di temi figlio ti renderà più efficiente: mantenere il codice che usi per ogni progetto nel tuo tema principale o utilizzare un tema principale standard come uno dei nostri, significherà che stai aderendo a Principi DRY (non ripetere te stesso).

Ma ulteriormente, puoi utilizzare i temi figlio e padre per creare reti di siti con una base di codice di base, puoi creare temi personalizzati basati su framework di temi di terze parti o puoi persino creare il tuo tema genitore avanzato da utilizzare come framework di temi . In questo articolo darò una rapida panoramica degli elementi essenziali dei temi per bambini e poi ti mostrerò alcune tecniche più avanzate. Imparerai:

• come utilizzare un tema figlio per adattare un tema genitore di terze parti o una struttura tematica alle esigenze del tuo progetto
• come WordPress dà la priorità ai file modello in ciascuno dei temi padre e figlio
• come sovrascrivere le funzioni del tema principale nel file delle funzioni del tema figlio.

Comprensione dei temi genitori e figli

In teoria, qualsiasi tema può fungere da tema principale, anche se alcuni sono progettati meglio per questo ruolo (incluso il nostro!). Se stai usando uno dei nostri temi e vuoi modificarlo per il tuo progetto, è molto meglio usare un tema figlio per farlo piuttosto che hackerare il tema principale, il che significa che perderai tutte le modifiche quando aggiorni il tema alle versioni future. Per creare un tema figlio, devi semplicemente creare un nuovo tema e aggiungere quanto segue all'inizio del suo foglio di stile. Il mio esempio di seguito utilizza il tema HeroThemes HelpGuru come genitore, ma puoi utilizzare qualsiasi tema, incluso un altro prodotto di HeroTheme come KnowAll.

Inizia a costruire la tua Knowledge Base oggi stesso!

Il nostro tema KnowAll include un tema figlio per aiutarti a personalizzare il tuo sito di knowledge base

Ottieni il tema

/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

Le linee importanti sono queste due:

Template: helpguru
@import url("../helpguru/css/style.css");

La prima sezione specifica il modello, che dice a WordPress che questo è un tema figlio e che il suo genitore è il tema HelpGuru. Nota che qui usi il nome della cartella del tema principale e non il nome del tema (quindi sopra ho usato 'helpguru', non 'HelpGuru').

La seconda sezione importa il foglio di stile dal tema principale, il che significa che tutto lo stile del tema principale verrà attivato nel tema figlio. Quindi aggiungi il tuo stile sotto questa dichiarazione @import : ciò significa che verrà utilizzato lo stile di entrambi i temi, ma dove esiste una dichiarazione in entrambi i fogli di stile per lo stesso elemento, il CSS del tema figlio prevarrà a causa della cascata (come il tema del tuo figlio lo stile viene dopo lo stile del tema principale).

Un tema figlio può consistere in un foglio di stile e nient'altro, se lo desideri, nel qual caso tutto ciò che lo utilizzerai per sovrascrivere alcuni degli stili del tema principale. In alternativa puoi aggiungere file modello extra e/o un file di funzioni, nel qual caso dovrai capire come WordPress accede ai file modello dai tuoi temi genitore e figlio.

File modello tema padre e figlio

Il modo in cui WordPress utilizza i file modello nei temi padre e figlio è abbastanza semplice. Quando viene visualizzata una determinata pagina (o post o qualsiasi altro tipo di contenuto), WordPress utilizzerà il file modello più rilevante dal tema principale o secondario in base alla gerarchia del modello. Se trova due versioni dello stesso file modello, utilizzerà quella del tema figlio. Ciò significa che i file modello del tema figlio sostituiranno i file modello del tema principale in due scenari:

• se il tuo tema figlio contiene un file modello che è più in alto nella gerarchia rispetto a quelli nel tema principale;
• o se il tema principale e quello secondario contengono entrambi una versione del file modello richiesto.

Decidere sui file modello tema padre o figlio

WordPress utilizzerà la gerarchia dei modelli per determinare quale file modello utilizzare, ma questo interagisce con i file che hai in ciascuno dei tuoi temi padre e figlio. Per dirla semplicemente, WordPress passa attraverso tre passaggi:

1. Identifica il tipo di contenuto visualizzato.
2. Funziona attraverso la gerarchia dei modelli finché non trova un file per visualizzare quel contenuto, nel tema principale o secondario.
3. Se il file è presente sia nel tema padre che in quello figlio, utilizza quello del tema figlio.

Illustriamo questo con un esempio. La tabella seguente mostra l'insieme dei file modello in due temi ipotetici, uno dei quali è figlio dell'altro. I file che ho evidenziato hanno la precedenza.

Quindi, nell'esempio sopra, diamo un'occhiata a quali file modello verrebbero utilizzati per visualizzare determinati tipi di contenuto:

• I singoli post per il tipo di post personalizzato "prodotto" verrebbero visualizzati utilizzando single-product.php dal tema figlio.
• I singoli post per altri tipi di post (inclusi i normali post) verrebbero visualizzati utilizzando single.php dal tema figlio.
• Le pagine statiche verrebbero visualizzate utilizzando page.php dal tema principale.
• Gli elenchi per la categoria dei widget verrebbero visualizzati utilizzando category-widgets.php dal tema figlio.
• Altri elenchi di categorie verrebbero visualizzati utilizzando category.php dal tema principale.
• Altri elenchi di archivi verrebbero visualizzati utilizzando archive.php dal tema principale.
• I risultati della ricerca verrebbero visualizzati utilizzando search.php dal tema principale.
• 404 pagine verrebbero visualizzate utilizzando 404.php dal tema principale.
• Altre pagine senza un file modello specifico verrebbero visualizzate utilizzando index.php dal tema figlio.

Andare oltre: ignorare la funzionalità del tema principale

Oltre a sovrascrivere o integrare i file CSS e/o modello in un tema principale, puoi utilizzare un tema figlio per sovrascrivere la funzionalità nel tema principale o per aggiungere funzionalità extra.

Avvertimento! Se tutto ciò per cui stai utilizzando il tema figlio è aggiungere funzionalità extra, potresti fare meglio a scrivere un plug-in. Sfortunatamente i file delle funzioni nei temi padre e figlio non interagiscono allo stesso modo dei fogli di stile, infatti funzionano in modo opposto (confuso, lo so). WordPress chiama le funzioni del tuo tema principale dopo quelle del tuo tema figlio, il che significa che possono sovrascrivere le funzioni del tema figlio. So che sembra un po' una seccatura: hai creato un tema figlio perché è quello che vuoi nel tuo sito, giusto? Bene, fortunatamente ci sono modi per superare questo. Il primo metodo è quello che usi nel tuo tema figlio, ed è quello di impostare la priorità quando alleghi le tue funzioni all'azione pertinente o agli hook di filtro. Il secondo viene eseguito nel tema principale e serve a rendere le tue funzioni collegabili. Ci arriverò tra un momento, ma prima diamo un'occhiata al metodo nel tuo tema figlio.

Utilizzo della priorità per sovrascrivere la funzionalità del tema principale

Per attivare ogni funzione che aggiungi nel tuo tema figlio, dovrai collegarla a un hook di azione o a un hook di filtro usando add_action() o add_filter() . Le funzioni add_action() e add_filter() hanno tre parametri:

• $tag : l'identificatore univoco per l'azione o l'hook del filtro
• $function_to_add – il nome della tua funzione
• $priority – la priorità con cui vuoi agganciare la tua funzione (di cui più a breve)

Con add_filter() puoi utilizzare un quarto parametro opzionale, $arguments , ma non è particolarmente rilevante per i temi figlio. Nella maggior parte dei casi vengono utilizzati solo i primi due parametri (entrambi obbligatori), ma è possibile utilizzare il parametro opzionale $priority per sovrascrivere una funzione nel tema principale con la funzione nel tema figlio. Più alta è la priorità, più tardi viene caricata: l'impostazione predefinita è 10 , quindi se il tema principale non specifica una priorità, devi semplicemente impostare la priorità nel tema figlio su un numero maggiore di 10. Diamo un'occhiata a come questo lavori. Immagina di lavorare con un figlio del tema HelpGuru e di voler ignorare la funzionalità del menu e aggiungerne una tua. Questo tema include la funzione ht_theme_setup() per impostare il tema (inclusa la registrazione dei menu, l'aggiunta del supporto per le immagini in primo piano e altro), che è collegata all'action hook after_setup_theme . Il codice nel file delle funzioni di HelpGuru è il seguente:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

Per sovrascrivere gli elementi della funzione ht_theme_setup() (ma non tutta: ci arriveremo tra poco) nel tuo tema figlio, dovresti scrivere una funzione che sostituisce elementi della funzionalità fornita da HelpGuru e allegarla all'azione after_setup_theme hook, specificando una priorità maggiore di 10:

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

Quando WordPress incontra queste funzioni collegate allo stesso hook, attiverà prima quella con priorità più bassa, ovvero quella del tema principale. Verrà quindi attivato quello con priorità più alta dal tema figlio, il che significa che può sovrascrivere la funzione dal tema principale. Come accennato in precedenza, esiste un altro metodo, che è buona norma scrivere nei tuoi temi in modo che possano essere utilizzati più facilmente come temi principali, ed è quello di rendere le tue funzioni collegabili.

Utilizzo delle funzioni collegabili per consentire l'override di un tema figlio

Poiché WordPress passa la funzione nel tema principale dopo quelle nel tema figlio, puoi codificare le funzioni del tuo tema principale in modo che controllino la presenza di una funzione con lo stesso nome nel tema figlio e, se ne esiste una, la funzione del tema principale non lo è passato. Lo fai con una dichiarazione condizionale, come quella che abbiamo visto sopra in HelpGuru:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

Se nessuna funzione con lo stesso nome è già stata passata (ad es. nel tema figlio), verrà passata la funzione dal tema genitore. Ma se WordPress ha già incontrato una funzione con questo nome, ignorerà la funzione collegabile (cioè quella nel tema principale). Per farlo funzionare, devi semplicemente creare funzioni nel tuo tema figlio con lo stesso nome di quelle nel tuo tema principale che vuoi sovrascrivere. Quindi, per sovrascrivere la funzione ht_theme_setup() nella sua interezza, dovresti usarlo nel tuo tema figlio:

function ht_theme_setup() {
// contents of function
}

Questo è tutto! Basta scrivere un'altra funzione con lo stesso nome e sovrascriverà quella nel tema principale. Nota: questa tecnica funzionerà solo se stai creando il tuo tema principale: non essere tentato di modificare il file delle funzioni in un tema principale di terze parti per renderli collegabili. Dopotutto, lo scopo principale della creazione di un tema figlio è che non tocchi il genitore!

Riepilogo

Come spero di aver dimostrato, lavorare con i temi figlio può aumentare la tua efficienza ed efficacia come sviluppatore di WordPress, soprattutto se sviluppi siti personalizzati per i clienti o per te stesso. Per lo meno, l'utilizzo di un tema figlio di un tema esistente come uno dei nostri HeroThemes può rendere il tuo flusso di lavoro di sviluppo più veloce ed efficiente, poiché ti evita di fare lo stesso lavoro più e più volte.

Puoi andare oltre usando i file modello e le funzioni del tema figlio per sovrascrivere o integrare la funzionalità dal tema principale. E se vuoi davvero sfruttare al massimo i temi figlio, puoi creare il tuo tema principale, dandoti un rapido punto di partenza per tutti i nuovi progetti e permettendoti di aggiungere molto di più ai temi figlio con meno sforzo che iniziare da zero .