Tema Child di WordPress: Cos’è, come crearlo e quando usarlo

Prima di iniziare a creare temi figlio, parliamo prima del loro scopo e del motivo per cui vorresti usarli. Per questo, dobbiamo iniziare parlando di temi WordPress in generale.

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.

La bellezza di WordPress (e uno dei motivi principali del suo successo) è che la piattaforma è completamente personalizzabile. Non c'è praticamente nulla che non puoi cambiare o modificare. Non devi nemmeno conoscere il codice per farlo. 

Plugin e temi ti consentono di aggiungere funzionalità e modificare l'aspetto e il comportamento del tuo sito con pochi clic. Basta scaricare, installare e - bam - il tuo sito funziona e ha un aspetto completamente diverso. 

In aggiunta a ciò, i temi sono costituiti da file modificabili, quindi, con una certa conoscenza del codice, puoi apportare al tuo sito le modifiche che desideri. Tuttavia, la modifica diretta del tema principale comporta molti problemi. Tutto questo ha portato società come Elementor, Thrive Themes o Divi a implementare funzionalità che permettono di gestire e personalizzare praticamente ogni parte del tema in modo visuale senza conoscere codice.

Il tema child è una genialata, ti permette di apportare modifiche al tema senza rinunciare agli aggiornamenti. Esso può essere creato solo per temi che ne prevedano l'esistenza, per esempio se usi Thrive Theme Builder non puoi usare un tema child perché non è necessario  non è previsto in quanto il tema viene costruito, da te, in ogni singola parte con un builder visuale. Se vuoi saperne di più leggi Recensione Thrive Theme Builder: un tema completamente differente rispetto a tutti gli altri.

Ci sono comunque temi più adatti di altri, ovvero scritti in modo tale da essere particolarmente predisposti ad vere un tema child. Ad esempio, il tema Genesis di StudioPress (ora di proprietà di WP Engine ) è un framework di temi creato appositamente per essere modificato da temi child. Il tema principale di solito è presente solo per fornire la struttura e le funzionalità di base, tutto il resto è gestito nel tema child (di cui ne offrono molti sul loro sito ). Un altro tema predisposto all'utilizzo del tema child è Astra, se acquisti Astra Pro inoltre avrai anche una funzionalità di creazione del tema child che ti permetterà di configurarlo da zero con pochi semplici click.

Come vedrai di seguito, un child theme non ha bisogno di molto. Alla fine, si tratta di una cartella, un foglio di stile e un file php chiamato functions.php. 

Per l'esempio seguente, userò Twenty Twenty. Puoi eseguire i passaggi successivi direttamente sul tuo server tramite FTP o CPanel se usi hosting come Scala. Tuttavia, consiglio di utilizzare un ambiente di sviluppo locale o un sito web di prova invece di un sito live in modo da poter commettere errori senza che nessuno se ne accorga. Dopodiché, comprimi semplicemente il tema figlio e installalo tramite Aspetto> Temi come qualsiasi altro.

Iniziamo.

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
*/

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

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.

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.

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.

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.

Un problema tipico è che il foglio di stile del tema child non viene caricato. In tal caso, ci sono diverse opzioni per scoprire cosa sta succedendo:

• Controlla la tua chiamata all'interno functions.php : Tralasciare solo un punto e virgola o un altro piccolo elemento può generare un errore e non far funzionare il codice. Quindi, la prima cosa da controllare quando il tuo CSS non funziona è la chiamata PHP. Indica il percorso giusto, comprese eventuali sottocartelle? Ci sono meri errori di battitura sul percorso del file? Controlla sempre prima le cose più semplici.
• Rivedi l'architettura del tema principale : alcuni temi non utilizzano un singolo style.css. Possono usare diversi file CSS in directory diverse. In tal caso, è necessario assicurarsi di mantenere le dipendenze del genitore e accodare i fogli di stile di conseguenza. Ciò significa che se il foglio di stile del tema principale ha un nome diverso e risiede in una sottocartella del tema (ad esempio css/main.css), è necessario fare lo stesso nel tema figlio e utilizzare il percorso quando si accodano gli stili padre. 
• Modificare la priorità : se non accodate gli stili padre e figlio nella stessa funzione (determinando così il loro ordine), a volte può accadere che gli stili padre vengano caricati dopo gli stili figlio. In tal caso, sovrascriveranno le modifiche dal tema figlio anziché il contrario. Un possibile rimedio a ciò è modificare la priorità della funzione che richiede quella del child style.css. Per questo, aggiungere un terzo parametro alla funzione in questo modo: add_action( 'wp_enqueue_scripts', 'ns_enqueue_styles', 11 );. Notare l'11 alla fine. Poiché 10 è la priorità predefinita, ciò significa che questa funzione viene eseguita più tardi di qualsiasi altra cosa. Prova numeri ancora più alti se continua a non funzionare.

Il CSS del tema figlio non sovrascrive il padre

Un altro problema comune in cui incappare è che il foglio di stile si sta ovviamente caricando (ad esempio, appare nel codice sorgente della pagina) ma le tue modifiche non vengono ancora visualizzate. In tal caso, potrebbe essere uno dei problemi seguenti.

• Il tuo selettore CSS non è abbastanza specifico - A volte, quando provi a sovrascrivere uno stile, devi usare un selettore CSS molto specifico per cambiare un elemento. Ad esempio, se si utilizza  .navigation-top a all'interno del foglio di stile del tema figlio ma il tema principale utilizza .navigation-top li a, gli stili padre sono più specifici. Pertanto, il tema figlio non li sovrascriverà. Per risolvere questo problema, è necessario utilizzare lo stesso selettore o uno più specifico per sovrascrivere correttamente gli stili principali. Dai un'occhiata a questo post per ulteriori informazioni su questo argomento.
• Stai importando gli stili genitore alla fine del tuo foglio di stile - Se stai usando @import per caricare i tuoi stili genitore (cosa che ti ho ripetutamente sconsigliato, ma vabbè), assicurati assolutamente che @import sia posta all'inizio del figlio foglio di stile del tema. Se posizionato alla fine, caricherà semplicemente gli stili padre dopo gli stili figlio e quindi li sovrascriverà.
• Potrebbe essere un problema di cache: se hai un plug-in di memorizzazione nella cache attivo (o un CDN - Content Delivery Network), a volte può impedire al browser di riconoscere le modifiche. In tal caso, prova a disattivare la memorizzazione nella cache. 

Functions.php non funziona

Dopo il foglio di stile anche il file PHP può essere origine di errori. Ecco cosa controllare se pensi che sia il problema.

• Manca tag di apertura PHP o posizione errata - il tag <?php è un indicatore importante. Definisce dove inizia il file. Di conseguenza, l'aggiunta di qualsiasi cosa prima di questo punto non verrà eseguita nel tema e potrebbe effettivamente finire stampata sul tuo sito.
• Priorità sbagliata - Abbiamo già parlato della priorità per i problemi del foglio di stile in precedenza. Può anche essere in questione per altre funzioni nel file. Poiché le funzioni padre vengono eseguite dopo le funzioni figlio per impostazione predefinita, possono sovrascrivere le seconde. Per evitare che ciò accada, è necessario aumentare la priorità delle funzioni figlie per farle eseguire in seguito.
• Priorità mancante durante la rimozione delle funzioni genitore - Se stai tentando di sostituire una funzione genitore ma non funziona, tieni presente che devi includere tutte le priorità presenti nell'originale. Quindi, se la funzione genitore è add_action( 'widgets_init', 'parent_function', 15 );, è necessario rimuoverla nel tema figlio come remove_action( 'widgets_init', 'parent_function', 15 ); affinché abbia effetto.

File modello tema figlio non funzionante

Infine, potresti trovarti nella situazione in cui il tuo tema figlio non sembra sovrascrivere i file principali. In tal caso, ecco come potresti risolverlo:

• Targeting di qualcos'altro oltre ai file modello? - Prima di tutto, è necessario rendersi conto che l'override funziona solo per i file template. Ciò significa file che forniscono una struttura alla visualizzazione delle pagine. Hanno rigide convenzioni di denominazione, che puoi trovare nella gerarchia dei  template . Non è possibile sovrascrivere arbitrariamente qualsiasi file PHP nel tema principale includendo una copia modificata nel tema figlio.
• Controlla nomi e percorsi dei file : se l'override continua a non funzionare, è probabile che ci sia qualcosa di sbagliato nel nome del file o nel percorso del file. Tieni presente che, per sovrascrivere un file principale, il file secondario deve avere lo stesso identico nome (o un nome più specifico, vedi la gerarchia) e risiedere anche nella stessa posizione relativa del tema principale. Quindi, se il file si trova in una sottocartella nel tema principale, deve trovarsi in una sottocartella con lo stesso nome nel tema figlio.