In questo articolo parleremo di temi di WordPress come installare un tema child e perché conviene usarli. Quindi tratteremo alcune situazioni in cui ha senso creare un tema child e vedremo come farlo.
Una delle cose migliori dell’utilizzo di WordPress è la sua personalizzazione quasi infinita ed i temi child sono fondamentali per aiutarci in questa attività.
Il tema child è un’opportunità fornita da WordPress, così come da molti altri CMS (Magento, Drupal, Joomla 4.1, ecc) che consente di personalizzare il tema in modo sicuro e mantenere tutte le modifiche organizzate.
Cos’è un tema child?
In soldoni è un tema che funziona in coppia con quello principale, che è indicato come genitore.
WordPress utilizzerà il codice del tema genitore nella maggior parte dei casi, ma lo sostituirà con il codice (personalizzazioni) del child quando necessario. Quindi il codice riportato nel child è prioritario rispetto al codice del tema genitore.
Perché usare un tema child su WordPress?
La personalizzazione di un tema sia a livello visivo che funzionale potrebbe comportare delle difficoltà se non c’è il tema child: ad ogni aggiornamento del tema, tutte le modifiche verranno perse quando saranno sovrascritti i file originali e di conseguenza si perderanno tutte le personalizzazioni, un sacco di lavoro perso e tutto da rifare.
Ecco che risulta palese la grande utilità di un tema child, si potrà infatti personalizzare a piacimento senza perdere le modifiche apportate perché da una parte c’è il tema genitore come fornito dallo sviluppatore ed aggiornato ad ogni nuovo rilascio, dall’altra. il tema child, con tutte le modifiche sempre al sicuro.
Se vuoi approfondire l’aspetto delle personalizzazioni dei temi di WordPress, leggi questo articolo
Precisiamo che nella maggior parte dei casi, gli sviluppatori di temi, in particolare i temi commerciali, forniscono anche il child da installare ed attivare come un tema normale o indicazioni per realizzarlo manualmente.
Quando utilizzare il tema child?
- Se si ha intenzione di apportare modifiche, permanenti o temporanee, alla funzionalità o allo stile del tema attivo.
- Se si sta utilizzando un tema che riceve aggiornamenti costanti (che è una buona cosa!) e non si vogliono perdere le personalizzazioni durante il processo di aggiornamento.
- Per testare le modifiche da implementare sul tema attivo usando un ambiente sicuro.
Ognuno degli scenari sopra elencati è un buon motivo per utilizzare il tema child.
Come installare un tema child di WordPress in 5 semplici passaggi
Prima di iniziare, come per qualsiasi modifica di un sito web, è sempre meglio fare un backup di tutti i file e del database.
Tempo richiesto: 10 minuti
Dovresti scegliere quale tema desideri utilizzare come genitore. Se lo stai facendo solo a scopo di test, sentiti libero di scegliere uno dei temi predefiniti di WordPress.
Per questo tutorial prenderemo come esempio il nuovo tema preinstallato “Twenty Twenty-Two” di WordPress.
- Crea una cartella per il tema child
Tutti i temi installati su WordPress si trovano nella directory a loro dedicata ed esattamente in /wp-content/themes/ ed all’interno di questa directory andremo a creare una cartella per il tema child.
Esistono molti metodi per interagire con la struttura dei file di un sito Web e siccome siamo affezionati a FTP utilizzeremo questa procedura tramite il comodo client “FileZilla“.
Se c’è bisogno di qualche nozione aggiuntiva puoi trovarle qui.
Ovviamente dovresti già avere i dati di accesso al tuo sito, diversamente puoi richiederli al tuo hosting provider.
Una volta installato FileZilla, accedi alla directory del tuo sito Web utilizzando le tue credenziali FTP. Questa directory viene spesso visualizzata come public_html ma su Webzone, l’impostazione predefinita è la directory “/web”.
Entra nella directory e raggiungi wp-content/themes/.
All’interno troverai una cartella unica per ciascuno dei temi installati su WordPress.
Ora, fai clic con il pulsante destro del mouse in un punto qualsiasi della finestra a destra dove c’è l’elenco dei temi, scegli l’opzione “Crea cartella”, quindi dai un nome alla nuova cartella: nel nostro caso sceglieremo: twentytwentytwo-child.
La cartella del tuo tema child può avere in realtà un nome qualsiasi. Tuttavia, per motivi pratici, consigliamo di assegnargli un nome facilmente riconoscibile, ad esempio “twentytwentytwo-child” in modo da capire al volo a quale tema principale è associato. - Crea un foglio di stile del tema
Come forse saprai, i fogli di stile sono i file CSS che forniscono alle pagine la maggior parte del loro stile grafico. Ogni tema viene fornito con il proprio foglio di stile unico ed il tema child deve averne uno in modo da apportare le eventuali personalizzazioni allo stile del sito. Infatti, per impostazione predefinita, il tema child erediterà tutti gli stili dal tema genitore che, in caso di necessità, puoi sovrascrivere aggiungendo nuovo codice al file style.css che stai per creare.
Per aggiungere il file style.css al tema child, è necessario entrare nella directory “twentytwentytwo-child”
In questo momento, la cartella dovrebbe essere vuota. Fare clic con il pulsante destro del mouse in un punto qualsiasi all’interno della finestra e scegliere l’opzione “Crea un nuovo file”. FileZilla ti chiede di digitare il nome per il nuovo file, digita style.css e conferma la tua decisione.
A questo punto, dobbiamo aggiungere un breve frammento di codice in quel file.
Fare clic con il tasto destro su di esso e scegliere “Visualizza/Modifica”. Questa opzione scaricherà una copia del file sul tuo computer e la
aprirà utilizzando il tuo editor locale (se FileZilla ti chiede di associare un editor per questo tipo di file, utilizza pure Notepad, quindi dovrebbe andar bene “Usa associazione di sistema”).
Quando il file è aperto, dovrai incollare il seguente codice:/*
Theme Name: Twenty Twenty-Two Child
Theme URI: https://example.com/
Author: Your name
Author URI: https://example.com/
Description: A child theme for TT2.
Requires at least: 5.8
Tested up to: 5.9
Requires PHP: 5.6
Version: 0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo-child
Template: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments
Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two Child is distributed under the terms of the GNU GPL.
*/
A prima vista, sembrano un sacco di informazioni, ma affinché un tema child funzioni, c’è solo un campo importante: Template.
Nel nostro esempio, puoi notare che abbiamo usato twentytwentytwo, che è il nome della directory del tema genitore.
A seguire, dopo aver incollato il codice, puoi salvare le modifiche del file style.css e chiudere l’editor di testo.
Ora, FileZilla ti chiederà se desideri sostituire il file sul server con la copia locale che hai appena modificato: a questo punto approva ed automaticamente il file modificato sarà caricato sul server.
Ora nella Bacheca di WordPress, nell’area dei temi dovresti trovare anche il tema child appena creato.
Ma non è ancora il momento di attivarlo, abbiamo ancora un paio di passaggi da eseguire. - Configura il tema child per ereditare lo stile del tema genitore
Il passaggio successivo è assicurarsi che il tema child erediti lo stile e le funzionalità del tema genitore. Per fare ciò, utilizzeremo un file denominato functions.php, che consente di istruire WordPress per aggiungere nuove funzionalità.
All’interno di quel file, aggiungeremo uno script per mettere in coda il foglio di stile del tema principale.
Successivamente, il tema child sarà pronto per l’uso.
Per iniziare, torna alla directory twentytwentytwo-child. All’interno, crea un nuovo file chiamato functions.php, esattamente come hai fatto con il file style.css durante il secondo passaggio.
Quindi apri il file usando l’opzione “Visualizza/Modifica” di FileZilla e incolla il seguente codice all’interno e salva come nella procedura precedente:<?php
function add_style() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_style' );
Per farla breve, questo frammento di codice dice a WordPress che dovrebbe caricare il foglio di stile del tema genitore, che è la parte fondamentale per far funzionare il tema child. - Attiva il tuo nuovo tema child
Per utilizzare il tema child, torna alla Bacheca di WordPress e vai alla scheda Aspetto > Temi.
All’interno dovrebbe esserci un tema che, diversamente dagli altri temi, non ha un’immagine predefinita: questo è il tuo nuovo tema child.
Fai clic sul pulsante Attiva accanto al nome del tema e apri il sito Web come faresti normalmente. Se hai seguito alla lettera i tre passaggi precedenti, il tuo sito dovrebbe apparire esattamente come prima di iniziare. - Aggiungi un’immagine al tema child (opzionale)
I temi child appena creati non hanno un’immagine predefinita, quindi volendo ne possiamo associare una affinché WordPress lo visualizzi nella sezione temi. Questo è un processo molto semplice: bisogna solo caricare tramite FileZilla un’immagine PNG chiamata screenshot.png (dimensioni 387 x 290) all’interno della directory del tema child.
Conclusioni
Creare un tema child è più semplice farlo che spiegarlo, ma alla fine risulterà molto utile. In conclusione, l’aggiunta di personalizzazioni al proprio tema dovrebbe fornirti una migliore comprensione di come funziona WordPress, i temi, gli stili e le personalizzazioni