Lavorando in ambiente WordPress, avere a disposizione un buon tema è la prassi, ma a volte questo non basta per “proteggersi” da bug e aggiornamenti inattesi.
Nella maggior parte dei casi, la soluzione è il tema child.
Indice dei Contenuti
Cos’è un tema child e come funziona?
Parto veramente dall’inizio e ti dico semplicemente che un Tema Child ( o “Child Theme”) è una sorta di estensione al tema principale (o “Parent theme”).
Un tema child, all’atto pratico è un vero e proprio tema fisicamente a sè stante e contenuto in una sua specifica cartella.
La sua peculiarità è quella di essere direttamente collegato e dipendente dal tema parent, tramite codice.
Riepilogando:
- il tema child è un’aggiunta opzionale al tema principale
- va installato a parte, in seguito all’installazione del parent theme
- è una componente specifica è non può funzionare senza il suo parent theme
I vantaggi di un tema child
Il tema child porta tre principali benefici all’architettura di un sito WordPress:
- Estensione delle funzionalità
- Maggiore sicurezza generale
- Maggior controllo sul CMS stesso
Entriamo più nel dettaglio.
1- Estensione delle funzionalità
All’interno del child theme è possibile inserire porzioni di codice PHP personalizzato, per aggiungere funzionalità non esistenti nel tema genitore.
Ciò significa che, ipotizziamo per assurdo, se il tema Parent non da la possibilità di aggiungere immagini in evidenza agli articoli del blog, è possibile sopperire a questa mancanza aggiungendo la funzionalità direttamente tramite il tema child, senza utilizzare un plugin o far modificare il tema principale.
Questo è solo un semplice esempio di estensione funzionalità, ma in realtà devi sapere che il child theme è una risorsa molto potente e ti permette persino di creare tipologie di contenuti totalmente personalizzati (i Custom Post-Type) ed estendere quindi le funzionalità di WordPress stesso!
2- Maggiore sicurezza generale
Mi è capitato spesso, durante una Audit di un sito web WordPress, di vedere siti customizzati direttamente da parent theme, cosa che sconsiglio fortemente.
Perchè?
Questa è una cosa che di solito si scopre nel peggiore dei modi: apportare modifiche al parent theme e poi aggiornarlo significa, nel 99% dei casi, perdere tutte le modifiche effettuate fino a quel momento.
Come evitarlo? Con il tema child, ovviamente.
Un tema child correttamente installato permette di salvare le personalizzazioni del proprio parent su sè stesso. Grazie a questa funzionalità nativa dei temi child è possibile aggiornare il tema parent senza alcuna preoccupazione, in totale sicurezza.
A primo impatto, questa sembra una cosa non direttamente correlata alla sicurezza del sito, ma ragioniamoci un attimo insieme.
Immagina questo scenario di partenza: gestisci un sito WordPress con un tema premium, magari acquistato dal famosissimo Themeforest, al quale non hai mai associato un child theme perchè forse “non serviva”. Col passare del tempo, però, hai dovuto effettuare diverse personalizzazioni CSS e aggiunte di funzionalità tramite PHP per stare al passo coi tempi, ovviamente dopo aver letto la nostra intervista a Filippo Trocca hai anche inserito lo snippet di Google Analytics direttamente nell’head per avere un resoconto oggettivo di ciò che accade nel sito, e giusto per essere sicuro di avere un sito GDPR compliant hai implementato il codice di Iubenda.
Bene.
Ricevi una mail: “nuovo aggiornamento disponibile per <IlTuoTema>”.
Gli sviluppatori del tema hanno rilasciato un importante aggiornamento di sicurezza che va a correggere diversi bug noti e migliorare al contempo le performance di caricamento, si tratta di un aggiornamento dalla versione 2.6 alla versione 3.0!
Fermiamoci qui.
In questo scenario, l’aggiornamento del tema è a dir poco obbligatorio anche se potrebbe causare un dowtime del sito e mandarlo totalmente offline. Per contro, mantenere una versione vecchia del tema significa non correggere bug noti e mettere a rischio la sicurezza del sito, quindi non è auspicabile.
La soluzione migliore da applicare è: creare un tema child, replicare al suo interno le modifiche e solo in seguito aggiornare il tema parent all’ultima versione.
Ecco cosa intendevo con “Maggiore sicurezza generale”.
3- Maggior controllo sul CMS stesso
Ammetto che questo terzo vantaggio del child theme è una conseguenza diretta dei primi due.
Aggiungere o limitare le funzionalità del tema genitore o di WordPress stesso tramite il tema child può essere etichettata come una attività di controllo (o monitoraggio se vogliamo), ma avere il controllo sul CMS significa anche poter agire in libertà senza il vincolo delle componenti.
Nello scenario visto in precedenza, l’aggiornamento senza child theme è vincolante e non controllato.
Avere maggior controllo sul CMS significa anche poter ottimizzare le performance del sito web, per esempio tramite il tema child è possibile:
- decidendo in che ordine caricare i fogli di stile e javascript
- controllare le dimensioni delle immagini generate dal tema
- e molto altro
Come si installa un tema child?
Se hai un tema child a disposizione e ti ho convinto della sua utilità, procedi pure nella lettura: installare un child theme è veramente semplice.
Pur essendo un’estensione del tema parente è installabile esattamente come un qualsiasi altro tema, quindi via FTP o upload diretto da WordPress.
Installazione via FTP
È sufficiente caricare l’intera cartella del child theme nella directory dei temi “wp-content/themes” della tua installazione di WordPress, utilizzando un client FTP come FileZilla.
Perchè l’operazione abbia successo devi caricare la sola cartella del child theme, un archivio .zip.
Ricorda: la cartella del tema child deve avere un nome diverso da quella del tema genitore, altrimenti rischi di sovrascriverne il contenuto.
Upload diretto da WordPress
È sufficiente navigare tramite il backoffice di WordPress nella directory “Aspetto > Temi” e cliccare il pulsante “Aggiungi nuovo tema” e in seguito “Carica tema”.
In questo caso è necessario comprimere la cartella del tema child in formato “.zip” prima di avviare l’upload, altrimenti l’operazione non andrà a buon fine.
Come creare un tema child?
Se non hai a disposizione un child theme da installare, è il caso di crearne uno! Per creare un child theme è d’aiuto avere alcune conoscenze di base del linguaggio di programmazione PHP e del CMS WordPress, ma non è obbligatorio. Di solito la creazione di un tema child dura veramente pochi minuti e tutto ciò che ti serve è:
- Un editor di codice
Nelle schermate a seguire vedrai il mio preferito: Sublime Text (disponibile su Mac, Windows e Linux), ma tu puoi utilizzare qualsiasi altro editor come Atom, VS Code, Brackets o anche il più spartano NotePad++ (solo su Windows). - Un programma di grafica – livello base (opzionale)
Puoi usare Gimp, Photoshop, ma anche Paint. Ti servirà semplicemente per aggiungere una foto personalizzata al tuo child theme, che seppur essendo un requisito opzionale, aggiunge un tocco di stile al tuo progetto.
Lista dei file da creare
Gli unici file necessari per far funzionare correttamente un child theme sono due:
- functions.php
- style.css
functions.php
Contiene le direttive da eseguire dopo l’attivazione e rappresenta il punto d’incontro con il Parent Theme. Ogni script per l’implementazione di nuove funzionalità va inserito qui.
style.css
È il foglio di stile del child theme, contiene le informazioni di intestazione del tema tra le quali figurano Nome, Autore, Descrizione e numero di versione. Si tratta di dati comunque essenziali per il corretto funzionamento del tema. È ovviamente possibile aggiungere regole CSS in questo file per modificare lo stile del tema parent.
Creazione del tema child
Per iniziare, crea la cartella che conterrà i file del tema child, puoi darle il nome che preferisci, tuttavia ricorda che è buona prassi utilizzare solo lettere minuscole e separare le parole con un trattino alto (senza usare spazi).
Il nome che ho scelto per il mio tema child è “semprofile-child”.
Ora apri il tuo editor di codice preferito e trascina la cartella appena creata al suo interno, in questo modo avrai una panoramica completa dei file.
Crea un nuovo file utilizzando la combinazione di tasti CTRL+N (per Windows) o CMD+N (per Mac), il nome che devi dare a questo primo file è “functions.php”.
Ripeti l’operazione, stavolta devi creare il file “style.css”.
Se hai fatto tutto nel modo corretto dovresti vedere esattamente quanto mostrato negli screenshot di seguito.
A questo punto è necessario aggiungere del contenuto ai file appena creati, altrimenti il tuo child theme non potrà essere riconosciuto da WordPress.
Iniziamo proprio dal file “style.css”, le prime righe di questo file rappresentano l’intestazione, letta e validata da WordPress, durante l’attivazione del tema child.
Per sapere cosa scrivere è sufficiente dare uno sguardo al codex di WordPress. Copia e incolla le seguenti righe all’interno del tuo style.css:
/*
Theme Name: Twenty Fifteen Child
Theme URI: https://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: https://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyfifteenchild
*/Vediamo brevemente il significato di queste righe:
- Theme Name
Il nome per esteso del tema child. In questo caso puoi utilizzare lettere, numeri, simboli e spazi. Io opto per “SEMprofile Child Theme”. - Theme URI
Rappresenta l’URL tramite il quale è possibile vedere il tema in azione. È sufficiente scrivere l’URL completo del sito web sul quale dovrai installarlo, con tanto di “https://”. - Description
Una breve descrizione del tema. - Author
Il nome dell’autore del tema, puoi semplicemente scrivere il tuo nome. - Author URI
L’URL del sito web dell’autore del tema, se hai un sito personale incolla qui il link. - Template
Il nome del tema parente che il child theme andrà ad estendere, ci torneremo a breve. - Version
La versione, in formato numerico, del child theme, 1.0 andrà benissimo. - License
Il nome della licenza correlata al child theme. Tutto ciò che viene sviluppato su base WordPress ne condivide la licenza, puoi quindi lasciare il nome di default. - License URI
Il link al quale sono reperibili le condizioni di licenza, anche in questo caso puoi lasciare il valore di default. - Tags
Una serie di parole che descrive in modo telematico le funzionalità o le componenti del child theme, possono essere aggettivi (leggero, performante, ottimizzato) oppure veri e propri nomi di componenti (sidebar- sticky, parallax). In questo puoi semplicemente limitarti a copiare i tags dal tema parente, ti mostrerò a breve come fare. - Text Domain
Si tratta del nome identificativo del child theme, questo nome potrà essere utilizzato in seguito all’interno del codice PHP per identificare il child theme stesso. Il mio consiglio è quello di dare lo stesso nome della cartella, quindi nel mio caso “semprofile-child”.
Se sei un lettore attento, avrai sicuramente notato che ho grassettato le parole “Theme Name” e “Template“. Ho voluto evidenziarle per spiegarti che questi due dati sono gli unici veramente obbligatori per il corretto funzionamento del tema child, tutti gli altri seppur utili sono opzionali e sta a te decidere di inserirli o meno.
Ricorda: un eventuale errore in queste prime righe potrebbe determinare il malfunzionamento del tema, quindi fai un secondo controllo dopo aver terminato di scrivere.
Ecco come ho compilato l’intestazione del mio tema child:
Ora passiamo al functions.php
Questo file ha una responsabilità non da poco: regolare il caricamento del foglio di stile includendo il proprio “style.css”.
Ecco il codice PHP che puoi copiare e incollare nel tuo functions.php:
<?php
// Funzione PHP per includere i fogli di stile 'parent' & 'child'
function child_theme_enqueue_styles() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
// documentazione: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
}
add_action('wp_enqueue_scripts', 'child_theme_enqueue_styles');
?>Non è necessario apportare alcuna modifica al codice dopo averlo incollato.
Ecco il risultato all’interno del mio editor:
Salva style.css e functions.php e il tuo tema child è pronto per essere installato!
[Bonus] Miniatura del tema
La miniatura è un semplice file “screenshot.jpg” con dimensioni 880x660px da inserire nella cartella del tema.
Se presente, questo file viene letto da WordPress e mostrato come miniatura nell’archivio dei temi installati.
Non ci sono regola su cosa inserire nella miniatura, puoi utilizzare un logo su fondo bianco, o una scritta su fondo colorato realizzata con Canva.
Test in locale
Prima di attivare il child theme, sopratutto se il tuo progetto è già a uno stato avanzato, è sempre bene effettuare un backup dell’intero sito e testare il tutto in un ambiente di staging protetto.
Se il tuo server non dispone di un ambiente di staging attivabile in un click il mio consiglio è quello di installare wordpress in locale con XAMPP proprio come ho fatto io, e verificare che il tuo nuovo child theme funzioni correttamente.
Tema child non funziona
A volte può capitare che il tema child non funzioni correttamente o non venga attivato per via di un errore.
La maggior parte delle volte è da imputare a qualche errore di battitura nell’intestazione dello style.css, quindi controlla bene prima di caricare i file e attivare il tuo child theme.
Il tema padre è mancante…
In questo specifico caso WordPress ci informa che il tema child non è attivabile perchè manca il tema parent. Le soluzioni sono due:
- Il tema genitore non è installato o presenta degli errori che non lo rendono identificabile da parte di WP
- Nello style.css del child theme manca il dato “Template” o il suo valore è errato.
Qualora riscontrassi errori di altro tipo, ti consiglio di rivolgerti a un esperto, risparmierai tempo e magari anche un mal di testa!