I temi child WordPress sono uno degli aspetti che la maggior parte dei neofiti ignora quando crea il proprio sito. In questo articolo vediamo cosa sono, quanto utilizzarli e come crearli.

Imparare a creare un tema child WordPress è un'abilità cruciale per chiunque desideri ottenere il massimo dal proprio sito. I temi child sono il modo più sicuro per personalizzare WordPress e ti consentono di cambiare letteralmente qualsiasi cosa sul tuo sito web.

La creazione di un tema child WordPress è anche un ottimo modo per migliorare le tue capacità di web design e saperne di più sulla piattaforma WordPress. 

In questo articolo, ti fornirò un'introduzione passo passo su come creare un tema child WordPress. 

Cosa sono i temi child WordPress?

I temi child di WordPress sono temi che ereditano le funzionalità e il design di un altro tema, chiamato tema genitore (parent theme). Vengono utilizzati principalmente per personalizzare un tema senza modificare direttamente i file del tema genitore, evitando così problemi durante gli aggiornamenti futuri.

Vediamo più in dettaglio questo concetto.

Perché utilizzare un tema child WordPress?

Prima di scoprire come creare un tema child WordPress, è importante capire il loro scopo e i motivi per cui dovresti utilizzarli. Per farlo, dobbiamo partire da una panoramica generale sui temi WordPress.

In altri articoli ho parlato di come scegliere un tema di WordPress e quali differenze ci sono tra un tema Free e un tema Pro. In questo articolo entreremo un po' più nel tecnico analizzando come è fatto un tema, in modo da capire meglio come creare e usare un tema child WordPress.

I temi determinano il design del tuo sito web

Il problema è modificare il tema principale

Anche utilizzando i builder menzionati in precedenza, potremmo comunque avere la necessità di aggiungere funzionalità specifiche al nostro sito o di apportare modifiche particolari al layout che richiedono l’intervento diretto sui file del tema.

Molti utenti, soprattutto i principianti, tendono a modificare direttamente il tema principale di WordPress (spesso lavorando su un sito live e copiando frammenti di codice trovati online) utilizzando l'editor disponibile nel pannello di amministrazione. 

Mi è capitato di vedere siti WordPress non aggiornati perché i proprietari avevano modificato direttamente le pagine del tema principale. Con il tempo, questa situazione si è rivelata una vera e propria bomba a orologeria, compromettendo sia la sicurezza del sito sia la compatibilità con le nuove versioni di WordPress.

Infatti, non aggiornare il tuo sito è una pessima idea: lo espone a vulnerabilità di sicurezza e può causare diversi problemi di funzionalità.

Quando modifichi il tema principale, ti trovi davanti a un bivio: o rinunci ad aggiornare il sito per non perdere le modifiche, o aggiorni il tema rischiando di vedere vanificato tutto il tuo lavoro. In entrambi i casi, il risultato è decisamente problematico

Creare tema child WordPress

Fatto questa necessaria panoramica torniamo ai temichild WordPress. In che modo risolvono i problemi appena citati? Consentendoti di apportare modifiche a un tema esistente indipendenti dal tema stesso.

Vediamo come funzionano i temi child WordPress. Essi non sono come i temi normali ma dipendono dal tema principale o genitore senza il quale non potrebbero funzionare.

Fondamentalmente, ogni volta che il tuo sito viene caricato, WordPress prima verifica se c'è un tema child e se non lo trova carica il tema principale.

Un tema child WordPress consente di modificare e ampliare tutto ciò che è già presente nel tema genitore. Può includere file come modelli di pagina, CSS, JavaScript, immagini e molto altro (anche se non è obbligatorio). Grazie a un tema child, puoi personalizzare il design, le funzionalità, il layout e altri aspetti del tema genitore senza dover sviluppare un tema completamente nuovo.

Un tema child può essere creato per qualsiasi tema?

Il tema child è una soluzione geniale che ti consente di personalizzare il tuo sito senza rinunciare agli aggiornamenti del tema genitore. Tuttavia, può essere creato solo per temi che supportano questa funzionalità.

Ad esempio, se utilizzi Thrive Theme Builder, non puoi usare un tema child, poiché non è necessario né previsto. Questo perché Thrive Theme Builder ti permette di costruire ogni parte del tema utilizzando un builder visuale. Se vuoi approfondire, leggi la mia guida 'Recensione Thrive Theme Builder: un tema completamente differente rispetto a tutti gli altri'.

Ci sono comunque temi più adatti di altri all'uso di un tema child, in quanto progettati per questo scopo. Ad esempio, il tema Genesis di StudioPress (ora di proprietà di WP Engine) è un framework sviluppato appositamente per essere personalizzato tramite temi child. Il tema genitore fornisce la struttura e le funzionalità di base, mentre tutto il resto è gestito dal tema child, di cui StudioPress offre numerosi esempi sul proprio sito.

Un altro esempio è il tema Astra, particolarmente predisposto per l’utilizzo di un tema child. Gli sviluppatori di Astra hanno messo a disposizione un generatore di temi child, facilmente accessibile e utilizzabile da chiunque. Questo strumento, disponibile a questo link, ti consente di creare un tema child compatibile con Astra in modo semplice e veloce.

Vantaggi dei temi child WordPress

Come accennato, il vantaggio principale dell'utilizzo di un tema figlio è che ti consente di apportare modifiche al tuo sito in modo sicuro. Tuttavia, questo comporta altri vantaggi:

• Risparmio di tempo : i temi child di WordPress eliminano la necessità di creare un intero tema. Invece puoi usare le risorse esistenti e costruirle sopra.
• Concentrati sul design : puoi utilizzare le sofisticate funzionalità dei framework dei temi e dei temi principali personalizzando il design a tuo piacimento.
• Migliore organizzazione : conserva tutte le modifiche nello stesso posto. Non c'è bisogno di rintracciarli in seguito in un tema che può contenere migliaia di righe di codice.
• Facilmente reversibile : disattiva tutte le personalizzazioni semplicemente disattivando il tema child.
• Impara facendo : la creazione di temi child ti consente di saperne di più sul web design, i temi e il funzionamento interno di WordPress sul lavoro.

A questo punto potrebbe sembrare che usare un tema child sia sempre la scelta migliore quando si utilizza WordPress. In realtà, non è sempre così.

Se le modifiche che desideri fare sono piccole, come cambiare un colore o un carattere, potrebbe essere sufficiente utilizzare i CSS personalizzati disponibili nelle opzioni di personalizzazione del tema. Allo stesso modo, se hai bisogno di aggiungere shortcode o funzioni specifiche, potresti ricorrere a plugin per snippet, come Fluent Snippet, senza la necessità di creare un tema child.

Tuttavia, quando si tratta di modifiche più consistenti, come la personalizzazione del layout, la creazione di nuovi modelli di pagina o altre operazioni complesse, l'uso di un tema child è sicuramente la strada migliore da percorrere.

Detto questo, vediamo ora, passo dopo passo, come creare un tema child.

Come creare un tema child WordPress

Come vedrai nei prossimi passaggi, creare temi child WordPress è più semplice di quanto sembri. In pratica, un tema child è costituito da una cartella, un foglio di stile (style.css) e un file PHP chiamato functions.php.

Per l’esempio che segue, utilizzerò il tema Twenty Twenty. Puoi configurare i temi child WordPress direttamente sul tuo server tramite FTP, cPanel (se usi hosting come Scala) o Plesk (se utilizzi uno dei nostri server condivisi). Tuttavia, ti consiglio di lavorare in un ambiente di sviluppo locale o su un sito di prova, per poter sperimentare senza rischi.

Una volta creato, puoi comprimere il tema child in un file .zip e installarlo tramite Aspetto > Temi, proprio come faresti con qualsiasi altro tema.

Ora vediamo insieme come creare e configurare temi child WordPress passo dopo passo!

1. Crea una nuova cartella all'interno della directory dei temi

Inizieremo con la cartella del tema child. Deve trovarsi nella directory dei temi del tuo sito. Lo trovi nella tua installazione di WordPress sotto wp-content/themes.

Dopo aver navigato in questa posizione, tutto ciò che devi fare è fare clic con il tasto destro e creare una nuova directory. Nomina la cartella come il tema principale con l'aggiunta di
-child. 

Diciamo che questo modo di nominare la cartella è una convenzione, teoricamente puoi nominare la nuova directory come preferisci. Assicurati solo di adattare di conseguenza gli esempi di codice seguenti. Inoltre, non includere spazi nel nome della directory!

Seguirò il percorso classico e chiamerò semplicemente la mia directory twentytwenty-child.

2. Creare il foglio di stile

Il prossimo passo nella creazione di un tema child di WordPress è la configurazione del foglio di stile. Questo è il file che contiene il codice CSS del tema. Determina gran parte del design del tuo tema.

I temi possono avere più fogli di stile, ma per ora uno è sufficiente. Tutto ciò che serve è creare un file di testo e assegnargli il nome style.css. 

Per farlo funzionare in WordPress, è necessario aggiungere un'intestazione del foglio di stile. Questo è un pezzo di codice che contiene informazioni importanti sul tema child. Di seguito è riportato un esempio, che ho preso dal Codex di WordPress .

/*
 Theme Name: Twenty Fifteen Child
 Theme URI: http://example.com/twenty-fifteen-child/
 Description: Twenty Fifteen Child Theme
 Author: John Snow
 Author URI: http://example.com
 Template: twentyfifteen
 Version: 1.0.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain: twentyfifteenchild
*/

Ecco cosa significano le diverse linee:

• Nome del tema : il nome del tema child. Questo verrà visualizzato nel back-end di WordPress.
• Theme URI - Un sito web o una pagina demo che appartiene a questo tema. Questo o l'URI di un autore è obbligatorio affinché un tema venga accettato nella directory dei temi di WordPress .
• Descrizione : una descrizione del tema che viene visualizzata anche nel back-end di WordPress.
• Autore : il nome dell'autore del tema. Puoi mettere il tuo nome qui.
• Modello : questa parte è la più cruciale. Qui va il nome del tema principale, ovvero il nome della directory nella cartella del tema. Se ciò non è corretto, il tema child non funzionerà.
• Versione : la versione del tema figlio, solitamente 1.0.
• Licenza : la licenza con cui è disponibile il tema figlio. I temi nella directory di WordPress sono generalmente rilasciati con licenza GPL . Dovresti mantenere la stessa licenza del tema principale.
• URI della licenza : un collegamento a una descrizione dettagliata della licenza. Di nuovo, segui quello che dice il tuo tema principale.
• Tag : i tag aiutano gli altri a trovare temi all'interno della directory di WordPress.
• Dominio del testo : informazioni importanti per internazionalizzare il tema e renderlo traducibile. Una pratica comune consiste nell'usare l'URL del tuo tema nella directory.

A dire il vero non tutte le voci viste fino ad ora sono necessarie perché il tema child funzioni basterebbe solo il nome ed il template. Possiamo quindi ridurre il codice a come segue:

/*
 Theme Name: Twenty Twenty Child Theme
 description: A child theme of the Twenty Twenty default WordPress theme
 Author: John Snow
 Template: twentytwenty
 Version: 1.0.0
*/

3. Attiva il tema child

Una volta che la tua directory è a posto e il foglio di stile inserito all'interno, sei già in grado di attivare il tuo child theme di WordPress. Per questo, vai su Aspetto> Temi . 

Per attivare il tuo tema, passa semplicemente sopra di esso e fai clic sul pulsante Attiva. Questo dovrebbe cambiare il tema attivo del tuo sito con il tuo nuovo child theme. Tuttavia, c'è un problema: quando ora vai al tuo front-end, il tuo sito ha un aspetto simile a questo:

Che robaccia! Non preoccuparti però, perché era tutto previsto. In realtà il foglio di stile che abbiamo creato precedentemente è vuoto e quindi WordPress non ha indicazioni su quale stile caricare. Quello che faremo nel prossimo passo sarà di andare ad ereditare lo stile del tema padre tramite poche righe di codice PHP.

4. Crea functions.php

Nella cartella del tema child crea la pagina functions.php. Questa è la parte del tema che ti consente di apportare importanti modifiche alle funzionalità al tuo sito. Tramite questo file puoi aggiungere funzionalità o modificare il layout di WordPress tramite codice PHP.

Ad esempio, puoi usarlo per creare nuove aree widget , aggiungere caratteri al tuo sito e molto altro ancora . 

Dopo aver creato il file aprilo e incolla il seguente pezzo di codice: <?php

5. Eredita gli stili del tema principale

Ora che il file functions.php è creato andiamo ad inserire il codice che permetterà al tema child di ereditare lo stile del tema padre. 

Potremmo importare il foglio di stile direttamente dentro il file css del tema child tramite la chiamata:

@import url("../twentytwenty/style.css");

Questo sistema però è sconsigliato perché alcuni temi hanno più file css e questo rallenta il caricamento del sito, infatti costringerà il browser a scaricarli uno dopo l'altro invece che tutti in una volta. 

Con il PHP possiamo utilizzare wp_enqueue_style(), una funzione di WordPress creata appositamente per il caricamento dei fogli di stile. Ecco il codice che andremo ad inserire:

// enqueue parent styles

function ns_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

add_action( 'wp_enqueue_scripts', 'ns_enqueue_styles' );

Twenty Twenty e altri temi di WordPress (come Astra) sono impostati in modo che tutto ciò che aggiungi a style.css del tema child verrà eseguito dopo gli stili principali. 

Assicurati di incollare il codice all'inizio del file delle funzioni (ma dopo il tag  <?php 
di apertura ). Dopo averlo salvato nella directory del tema child, ricarica il tuo sito e ora il layout dovrebbe essere ok.

6. Aggiungere un'anteprima del tema

Non ci resta altro da fare che aggiungere una miniatura del tema.

Crea una immagine del tema chiamata screenshot.png.

Puoi fare lo screenshot del tema con un'estensione di Chrome come Nimbus, oppure usare Firefox facendo semplicemente clic con il pulsante destro del mouse su una pagina o utilizzando il menu Azioni pagina e scegliendo Acquisisci schermata.

La dimensione consigliata è 880 × 660 pixel, anche se 387 × 290 è sufficiente. La risoluzione più alta fa solo in modo che abbia un bell'aspetto su schermi più grandi. Inoltre, puoi anche utilizzare un JPG o GIF, tuttavia, PNG è il formato consigliato.

Se non hai necessità di farlo quando il tuo tema child è completato e quindi differente dal tema genitore puoi anche salvare direttamente lo screenshot del tema genitore dalla dashboard di WordPress facendo semplicemente tasto destro sull'immagine e poi salva con nome.

Una volta salvata l'immagine caricala nella cartella del tema child e apparirà l'anteprima nella dashboard di WordPress.

Creazione di un tema child WordPress tramite plug-in

Se desideri utilizzare un plugin per creare un child theme di WordPress, ci sono diverse opzioni. Questi includono Child Theme Creator di Orbisius ,  Child Theme Wizard e Child Theme Generator .

Il più popolare è Child Theme Configurator , che è quello che useremo qui.

Dando per scontato che sai come installare un plugin (se non lo sai leggi Plugin di WordPress, cosa sono, a cosa servono e come installarli), andiamo direttamente all'utilizzo di Child Theme Configuration.

1. Avviare il processo

Dopo l'installazione, trovi le opzioni per creare un nuovo tema figlio in Strumenti> Child Theme :

In questa schermata, scegli prima l'azione che desideri eseguire. In questo caso si tratta di creare un nuovo tema figlio. Quindi, utilizza il menu a discesa in basso per scegliere il tema principale (Twenty Twenty in questo esempio). Premi Analyze. Il plugin controllerà quindi il tema principale per eventuali dipendenze e potenziali problemi.

2. Configurazione

Al termine, ti mostrerà il risultato dell'analisi e opzioni aggiuntive.

Ecco come compilarli:

• Assegna un nome alla nuova directory del tema : scegli un nome di directory per il tuo tema figlio.
• Seleziona dove salvare nuovi stili : scegli se salvare stili aggiuntivi nel foglio di stile principale del tema figlio o crearne uno separato. Lo lascio così com'è.
• Gestione dei fogli di stile : ha a che fare con l'importazione degli stili principali di cui abbiamo parlato in precedenza. Nella maggior parte dei casi, dovrebbe rimanere così com'è. Presta attenzione all'impostazione Ignora i fogli di stile del tema principale quando lavori con un framework di temi come Genesis .
• Personalizza gli attributi del tema secondario : quando fai clic sulla casella grigia, puoi modificare il nome del tema secondario, il sito Web, l'autore e altre cose che abbiamo aggiunto in precedenza all'intestazione del foglio di stile.
• Copia menu, widget, ecc .: Consente di sovrascrivere menu, widget e altre impostazioni di Customizer nel tema figlio con quello del genitore. Lo lascio disattivato.

Dopo aver compilato tutto, premi il grande pulsante blu che dice Crea un nuovo tema figlio .

3. Controlla il tuo lavoro

Una volta dato l'ok il plugin creerà il tema child e controllerà se tutto funziona correttamente. Oltre a ciò, ti fornirà un collegamento nella parte superiore dello schermo in cui puoi visualizzare in anteprima il tema figlio prima di attivarlo. 

A parte questo, quando navighi nella directory del child theme sul tuo server, vedrai che contiene esattamente gli stessi file che abbiamo creato, a mano, in precedenza. All'interno troverai anche un'intestazione del foglio di stile molto simile e una funzione per accodare gli stili principali.

Ovviamente, il plugin Child Theme Configurator offre molte più funzionalità per personalizzare il tuo tema child che non facendolo a mano anche se con questa seconda opzione hai più libertà di movimento.

Il tema child WordPress non funziona? - Problemi comuni e soluzioni

Creare temi child WordPress, come hai visto, è un processo semplice che si riduce a poche operazioni come copiare e incollare file. Una volta appreso il procedimento, puoi ripeterlo ogni volta che vuoi. Tuttavia, non sempre tutto fila liscio. Ecco i problemi più comuni che potresti incontrare e le relative soluzioni.

1. Il tema child di WordPress non carica il file style.css

Uno dei problemi più frequenti è il mancato caricamento del foglio di stile. Ecco cosa verificare:

• Errore nella chiamata di functions.php: Anche un semplice errore di sintassi, come un punto e virgola mancante, può causare problemi. Controlla che il percorso del file sia corretto e che non ci siano errori di battitura o incongruenze con eventuali sottocartelle.
• Architettura del tema genitore: Alcuni temi non utilizzano un unico style.css, ma più file CSS situati in directory diverse. Se il tema genitore usa, ad esempio, css/main.css, devi accodare correttamente anche questo file nel tema child, rispettando il percorso.
• Ordine di caricamento degli stili: Se gli stili del genitore vengono caricati dopo quelli del child, le tue modifiche saranno sovrascritte. Puoi risolvere modificando la priorità con cui vengono accodati gli stili. Ad esempio:

  add_action( 'wp_enqueue_scripts', 'ns_enqueue_styles', 11 );
  

  
  Aumenta il valore della priorità per assicurarti che il file del tema child venga caricato successivamente.

2. Il CSS del tema child non sovrascrive quello del genitore

Se il file style.css del tema child viene caricato ma le modifiche non sono visibili, potrebbe essere dovuto a:

• Selettore CSS non abbastanza specifico: Devi utilizzare selettori più specifici per sovrascrivere gli stili del tema genitore. Ad esempio, se il genitore usa .navigation-top li a, devi fare altrettanto o essere ancora più specifico.
• Uso scorretto di @import: Se stai importando gli stili del genitore con @import, assicurati che sia posizionato all'inizio del file style.css. In alternativa, evita del tutto questa pratica, che è meno performante.
• Problemi di cache: Se utilizzi un plugin di caching o un CDN, potrebbe non aggiornare correttamente gli stili. Prova a svuotare la cache o a disattivarla temporaneamente.

3. Il file function.php del tema child non funziona

Anche il file PHP del tema child può causare errori. Ecco cosa controllare:

• Tag di apertura PHP mancante o errato: Assicurati che il file inizi correttamente con <?php. Qualsiasi cosa scritta prima di questo tag non verrà eseguita.
• Priorità errata: Le funzioni del tema genitore vengono eseguite dopo quelle del tema child. Per evitare conflitti, aumenta la priorità della funzione nel tema child.
• Errore nella rimozione delle funzioni del genitore: Se stai cercando di rimuovere una funzione del tema genitore, devi rispettare esattamente la priorità originale. Ad esempio:

  remove_action( 'widgets_init', 'parent_function', 15 );
  

4. Il file modello del tema child non funziona

Se i tuoi file modello non sovrascrivono quelli del genitore, verifica quanto segue:

• Solo i file modello possono essere sovrascritti: I temi child possono sovrascrivere solo file template che seguono le convenzioni di WordPress (ad esempio, page.php o single.php). File PHP generici non saranno sovrascritti automaticamente.
• Nomi e percorsi corretti: Per sovrascrivere un file, il nome e il percorso nel tema child devono corrispondere esattamente a quelli del genitore. Ad esempio, se il file si trova in una sottocartella nel tema genitore, deve trovarsi in una sottocartella con lo stesso nome nel tema child.

Temi Child WordPress- Considerazioni Finali

I temi child WordPress sono una delle migliori caratteristiche di WordPress. Consentono di modificare i temi in modo sicuro, flessibile e altamente economico. Per questo motivo, imparare a creare un child theme di WordPress è una delle prime cose da fare quando si approfondisce il lavoro con WordPress.

Sopra hai imparato tutto quello che c'è da sapere su questo argomento. Abbiamo parlato di quando è ragionevole utilizzare un child theme e di quando altre soluzioni sono più appropriate. Abbiamo esaminato come creare un tema figlio di WordPress passo dopo passo a mano e tramite plug-in e abbiamo anche dato dei suggerimenti per la risoluzione dei problemi quando il child theme di WordPress non funziona.

A questo punto, probabilmente ti sarai reso conto che creare un tema figlio non è difficile. In effetti, ha bisogno di pochissimo, solo una directory e due file. Tuttavia, con questa semplicità arrivano molte possibilità. Puoi utilizzare temi figlio per rinnovare completamente il tuo sito senza dover modificare alcun file del tema principale o principale. Dalle singole modifiche allo stile alle funzioni e all'intero file modello, non c'è nulla che non puoi modificare o aggiungere al tuo sito.

Se qualcosa non è chiaro, non esitate a scrivermi nei commenti o contattarmi . Sarei felice di aiutarti.