Creare un tema child

Modulo 5: Temi e plugin · Tempo di lettura: 9 minuti

Obiettivo della lezione: dopo questa lezione saprà creare un tema child e saprà quando ne serve uno e quando no.

Concetti chiave: tema child, tema parent, Template: in style.css, functions.php, wp_enqueue_style, sovrascrivere un template, theme.json in un child, Create Block Theme

Il problema che un tema child risolve

Supponiamo che Lei voglia modificare leggermente l'intestazione del Suo tema classico, e per farlo modifichi header.php nella cartella del tema. Funziona. Tre settimane dopo esce un aggiornamento del tema, che Lei fa installare automaticamente (come si deve, lezione 7.2). L'aggiornamento sostituisce tutti i file del tema, e la Sua modifica scompare.

Un tema child è un piccolo tema che dice: "usa tutto dell'altro tema (il tema parent), tranne quello che ho io stesso." Lei inserisce le Sue modifiche nel tema child. Il tema parent continua a essere aggiornato normalmente, e le Sue modifiche restano.

Quando sì e quando no

Ha bisogno di un tema child se vuole modificare o integrare file di un tema:

• vuole un template diverso (in un tema classico un file PHP, in un tema a blocchi un template HTML);
• vuole un CSS proprio troppo grande per il campo CSS;
• vuole codice PHP proprio legato alla grafica (un formato immagine aggiuntivo, una posizione menu aggiuntiva).

Non ha bisogno di un tema child se:

• modifica un tema a blocchi nell'Editor del sito: quelle modifiche restano nel database e sopravvivono a un aggiornamento (lezione 5.1);
• aggiunge solo un po' di CSS tramite CSS aggiuntivo (in Personalizza per un tema classico, oppure in Stili nell'Editor del sito);
• vuole aggiungere una funzione che non ha nulla a che fare con la grafica (un modulo, un collegamento). Questa va in un plugin, così sopravvive a un cambio di tema.

Un tema child per un tema classico

Un tema child è una cartella in wp-content/themes/ con almeno un file: style.css. Supponiamo che il Suo tema parent si trovi in wp-content/themes/hoofdthema/. Crei allora una cartella wp-content/themes/hoofdthema-child/ con questo style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Personalizzazioni per example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* Il Suo CSS personalizzato viene inserito qui sotto. */
.site-header { border-bottom: 3px solid #e8a33d; }

La riga più importante è Template:. Lì va inserito il nome della cartella del tema parent (non il nome che vede nella Bacheca). Se non corrisponde esattamente (maiuscole, trattini), WordPress segnala in Aspetto > Temi che il tema parent manca.

Inoltre crei un functions.php per caricare i fogli di stile. Il modo corretto:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Se il tema parent carichi da solo il proprio foglio di stile dipende dal tema. Controlli la documentazione del Suo tema parent; alcuni richiedono di caricare nel child anche il foglio di stile del parent con get_template_directory_uri() . '/style.css'. Se il Suo sito, dopo l'attivazione, appare senza formattazione, significa che il foglio di stile del parent non viene caricato.

Se vuole modificare un template, copi quell'unico file (per esempio header.php) dal parent al Suo child e modifichi la copia. WordPress controlla prima il child, poi il parent. Non copi tutti i file: altrimenti non riceve più i miglioramenti del parent.

Il functions.php del child non sostituisce quello del parent, ma viene caricato prima di esso. Vengono eseguiti entrambi.

Un tema child per un tema a blocchi

Con un tema a blocchi funziona allo stesso modo, con i file dei blocchi:

• style.css con la stessa intestazione e Template:;
• theme.json: questo viene unito a quello del parent, quindi vi inserisce solo ciò che vuole modificare (per esempio la tavolozza dei colori);
• templates/ e parts/ che sostituiscono quelli del parent.

Un functions.php spesso non è necessario con un tema a blocchi, perché WordPress carica da sé gli stili da theme.json.

Esiste un plugin ufficiale, Create Block Theme, che dall'Editor del sito crea per Lei un tema child, incluse le Sue modifiche presenti nel database. Utile se ha modificato un tema a blocchi e vuole fissare quelle modifiche in file (per esempio per portarle su un altro sito).

Come impostarlo sul Suo sito

1. Crei la cartella e i file sul Suo computer e controlli la cartella del tema parent.
2. Carichi la cartella in wp-content/themes/ con Gestione file o tramite SFTP. Oppure comprima la cartella in uno zip e lo carichi in Aspetto > Temi > Nuovo tema > Carica tema.
3. Vada su Aspetto > Temi. Il Suo tema child è presente nell'elenco. Lo attivi.
4. Controlli il Suo sito: menu e widget potrebbero dover essere ricollegati dopo il passaggio a un child; le impostazioni di Personalizza valgono per singolo tema, quindi le reimposta oppure le esporta con un plugin.
5. Il tema parent deve rimanere installato. Non lo rimuova; il child non funziona senza di esso.

Preferibilmente faccia questo prima in un ambiente di staging (lezione 8.3), perché il cambio di tema su un sito live molto frequentato può creare un po' di confusione.

Riepilogo

• Un tema child conserva le Sue modifiche ai file del tema al di fuori del tema parent, così gli aggiornamenti non le sovrascrivono.
• Non serve per modifiche nell'Editor del sito o un po' di CSS aggiuntivo; le funzioni vanno in un plugin.
• Minimo necessario: una cartella con style.css in cui Template: indica esattamente la cartella del tema parent.
• Copi solo i template che modifica davvero; il functions.php del child si affianca a quello del parent.
• Il tema parent resta installato e continua a essere aggiornato.

Quiz

Esercizio

Esercizio A5.2: La configurazione di base è corretta? Crei un tema child per il Suo tema, sul Suo sito di prova o in staging (lezione 8.3), e lo attivi. Inserisca l'indirizzo del sito e il nome della cartella del tema child. Il programma richiede wp-content/themes/<cartella>/style.css e verifica: il file esiste, contiene un Theme Name: e un Template:, lo style.css del parent in quella cartella esiste anch'esso, e la homepage fa riferimento al tema child (quindi è attivo).

Esercizio D5.2: Cosa ha modificato e perché? Annoti quali file sono presenti nel Suo tema child, cosa ha modificato in ciascun file e perché non era possibile farlo nell'Editor del sito, in CSS aggiuntivo o in un plugin. Verifichi che il tema parent sia ancora installato e abbia gli aggiornamenti automatici attivi.

Per approfondire

Questi articoli descrivono i passaggi nei pannelli di WebOké; in altri pannelli funzionano in modo simile.

• Guida DirectAdmin 11.1: Apertura della Gestione file: le cartelle del Suo pacchetto
• Guida DirectAdmin 11.2: Caricare e scaricare file
• Guida DirectAdmin 11.7: Connessione con FileZilla (FTP, FTPS e SFTP)
• Child themes (developer.wordpress.org, Inglese): https://developer.wordpress.org/themes/advanced-topics/child-themes/