Quando installi e attivi un nuovo tema WordPress, la cosa più importante da fare immediatamente è attivare la versione child del tema e applicare le personalizzazioni esclusivamente sul tema child.
In questa guida vi spiegherò che cos’è il tema child WordPress, perché è importante usarlo e se non è stato fornito nell’acquisto come crearlo.
Che cos’è un tema child WordPress
Un tema child WordPress (o tema figlio) è sostanzialmente una copia del tema “parent” (genitore), cioè il tema che vorrete utilizzare e che eventualmente avrete comprato.
In questa copia, vengono importate tutte le funzionalità e le caratteristiche del tema, in modo tale da poter effettuare tutte le personalizzazioni senza sovrascrivere i file originali.
A cosa serve un tema child WordPress
Tutte le volte che personalizzate il tema, i file che lo compongono vengono modificati.
Periodicamente gli sviluppatori del tema rilasciano degli aggiornamenti con lo scopo di garantire maggiore sicurezza e introdurre nuove funzionalità, tali aggiornamenti sono sempre consigliabili effettuarli.
Il grosso problema è che l’aggiornamento di un tema comporta la sovrascrittura di tutti i file che lo compongono e se voi avete effettuato delle modifiche, queste verranno perse e tornerete al momento in cui avete installato il tema per la prima volta perdendo tutto il lavoro fatto magari anche in mesi.
L’utilità del tema child WordPress salta fuori in questi momenti. Utilizzando il tema child tutte le modifiche/personalizzazioni al vostro tema non verranno perse ad ogni aggiornamento e allo stesso tempo potrete godervi le nuove migliorie del tema.
In altre parole, alla base avrete il vostro tema parent, ma sopra di esso ci sarà il tema child che ha il compito di applicare le vostre modifiche.
Come si crea un tema child WordPress
- Devo costruirlo io?
- Come faccio a installarlo?
- Si utilizza come un tema normale?
In realtà, a queste domande ci sono diverse risposte, dipende dal tema che usate.
Nota: prima di effettuare qualunque modifica ai codici o al tema del vostro sito web, assicurarsi di effettuare un backup di tutto il sito per evitare di perdere contenuti o configurazioni importanti. Se ritenete che questa procedura non sia alla vostra portata, contattatemi attraverso la pagina Contatti e ci penso io!
Tema child incluso nel tema parent
Alcuni temi vengono già forniti con il tema child. Soprattutto se parliamo di temi premium.
Quando scaricate la cartella zip del tema troverete al suo interno la cartella del tema parent e la cartella child.
Prima si installa il file .zip del tema parent e successivamente lo zip del tema child.
Per installare i temi: Dashboard (Bacheca) > Aspetto > Temi e poi bottone in alto “Aggiungi nuovo”.
Una volta installato il child, lo dovrete attivare e a questo punto potrete fare tutte le modifiche che vorrete.
Screenshot 1: I due temi evidenziati sono lo stesso tema e quello in alto a sinistra è la versione child in uso
Tema child non incluso nel tema parent
Ci sono però molti temi, praticamente solo quelli non premium, che non includono il child già pronto e quindi bisognerà costruirlo da zero.
La creazione di un tema child WordPress prevede alcuni passaggi, possono risultare un pò complicati ai non addetti ma ora vi fornirò tutte le istruzioni per non commettere errori.
Creazione cartella del tema child WordPress e file CSS
Supponiamo che vogliate usare uno dei temi di default di WordPress. Per esempio nello screenshot 1 abbiamo Twenty Twenty-One
- Fare Backup del sito o cartella dove è installato WordPress;
- Accedete alla root del vostro sito. Solitamente con:
- Via FTP tipo FileZilla;
- Attraverso il File Manager del tuo hosting.
- Entrate nella cartella wp-content e poi all’interno della cartella themes. Qui troverete tutti i temi installati sul vostro sito.
- Create una nuova cartella e chiamatela con il nome del vostro tema seguito da “-child”. Nel caso di Twenty Twenty-One sarà quindi twentyone-child.
Ora che abbiamo la cartella, dobbiamo inserire al suo interno il file CSS necessario.
- Create un documento di testo, un semplice file txt che potete creare con Blocco Note (o con Text Edit se siete su Mac);
- Rinominatelo chiamandolo style.css. Dovrete modificare l’estensione del file, da .txt a .css.
- Aprite il file utilizzando un qualsiasi editor di testo e incollate al suo interno il codice seguente
/*
Theme Name: Twenty Twenty One Child
Theme URI: http://example.com/
Description: Tema Child per il tema Twenty Twenty One
Author: Inserisci il tuo nome
Author URI: http://example.com/about/
Template: twentyone
Version: 0.1.0
*/- Correggete le parti di ciascuna riga dopo i due punti per adattare il codice al tema che utilizzate. Come vedete, qui ho fatto l’esempio con il tema Twenty Twenty One.
- Caricate questo file all’interno della cartella wp-content/themes/twentyone-child (o /tuotema-child) del vostro spazio web.
Ricapitolando, avete dato il nome al tema che state creando e nel campo Template avete inserito il tema “parent” quello cioè già installato e di cui volete ereditare funzionalità e caratteristiche.
Creazione del file functions.php
Ora che avete creato lo stile del tema child bisognerà fare in modo che esso erediti lo stile del tema parent.
- Create un file di testo sul vostro computer e rinominatelo in functions.php. La procedura è la stessa che avete utilizzato per creare il file style.css.
- Aprite il file con un editor di testo e incollate questo codice
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style',
get_template_directory_uri().'/style.css' );
}
?>- Caricate anche questo file all’interno della cartella wp-content/themes/twentyone-child (o tuo-tema-child).
A differenza del CSS non dovrete effettuare modifiche, copiate e incollate il codice esattamente così com’è.
Qualcuno, sopratutto chi è pratico di CSS potrebbe chiedersi come mai non ho usato @import per ereditare lo stile, in realtà non è consigliabile farlo perché questo sistema comporta un’aumento dei tempi di caricamento della pagina e peggiorerebbe le performance del sito
A questo punto non vi resta che attivare il tema child dalla Bacheca WordPress. Lo troverete all’interno di Aspetto > Temi insieme a tutti gli altri temi installati.
Avendo creato voi stessi la cartella al posto giusto non è necessario installarlo, ci avete già pensato manualmente voi.
Una volta attivato il tema potrete fare tutte le modifiche che desiderate mantenendo inalterato il tema parent, ma allo stesso tempo sfruttarne completamente tutte le sue funzionalità.
Col tema child WordPress possiamo fare anche altro?
Fino a questo momento ho parlato dei vantaggi lato personalizzazione grafica al momento dell’aggiornamento ma il suo potenziale non si ferma qui. E’ possibile modificare anche le funzionalità del tema tramite il file appena creato functions.php, che lavora insieme al functions del tema parent.
Potrete creare le vostre funzioni personalizzate a patto che abbiate conoscenza del linguaggio di programmazione PHP (acronimo ricorsivo di “PHP: Hypertext Preprocessor”).
Alcuni esempi dell’uso del file functions possono essere l’aggiunta o l’eliminazione di aree widget nel vostro tema, la modifica di un testo nel footer e tante altre.
Se avete conoscenza a sufficienza del linguaggio PHP, ciò vi eviterà di dover installare plug-in ulteriori che appesantiscono ulteriormente il vostro sito, garantendone una buona efficienza.
Come installare un tema child WordPress con un plugin
Ma si può creare un tema child senza lavorare direttamente sul codice?
La risposta è Sì e ci viene in soccorso Child Theme Configurator che vi creerà automaticamente il nuovo tema .
Conclusioni
Ora sapete quanto sia importante l’utilizzo di un tema child WordPress e se ne avrete la necessità, saprete come crearlo in pochi passi. Sicuramente, un tema child è molto utile per testare le funzionalità e opzioni del vostro sito web, oltre che a risparmiarvi tempo e lavoro al momento degli aggiornamenti del template.
Spero che l’articolo sia stato di gradimento.
Ci vediamo con un nuovo articolo. A presto! ????
Crediti
Immagine di copertica creata con Canva e icona di monkik da Flaticon
