Tempo di lettura: 7 minuti

La personalizzazione di un sito WordPress è fondamentale per riflettere l’identità unica del tuo brand o progetto. Tuttavia, modificare direttamente i file del tema principale può comportare rischi significativi, soprattutto quando si tratta di aggiornamenti futuri. È qui che entra in gioco il concetto di “tema child” o “child theme”, oppure in italiano “tema figlio”.

In questo articolo, esploreremo in dettaglio cosa sia un tema child, i suoi vantaggi e come crearlo passo dopo passo per garantire una personalizzazione sicura ed efficace del tuo sito WordPress.

Cos’è un tema child WordPress?

Un tema child è un tema WordPress che eredita le funzionalità, il design e il codice del suo tema genitore, noto come “parent theme”. Questo approccio consente di apportare modifiche e personalizzazioni senza alterare direttamente i file del tema principale. In questo modo, quando il tema genitore viene aggiornato, le tue personalizzazioni rimangono intatte, evitando potenziali conflitti o perdite di dati.

Perché utilizzare un tema child

L’uso di un tema child offre numerosi vantaggi:

  • Sicurezza negli aggiornamenti: le modifiche apportate al tema child non vengono sovrascritte durante gli aggiornamenti del tema genitore.
  • Organizzazione del codice: mantiene le personalizzazioni separate, facilitando la gestione e la risoluzione di eventuali problemi.
  • Sperimentazione: permette di testare nuove funzionalità o design senza compromettere la stabilità del sito.

Come creare un tema child WordPress: guida passo passo

1. Creazione della cartella del tema child WordPress

Per iniziare, accedi al tuo server tramite FTP o utilizza il file manager del tuo hosting.

Naviga nella directory wp-content/themes e crea una nuova cartella per il tuo tema child. È consigliabile assegnare un nome che identifichi chiaramente il tema genitore, ad esempio twentytwentyone-child se il tema genitore è “Twenty Twenty-One”.

2. Creazione del file style.css

All’interno della cartella del tema child WordPress, crea un file denominato style.css.

Questo file definirà le informazioni principali del tema child e includerà gli stili personalizzati.

Inizia inserendo il seguente codice:

/*
Theme Name: Twenty Twenty-One Child
Theme URI: http://example.com/twenty-twenty-one-child/
Description: Tema child per Twenty Twenty-One
Author: Il tuo nome
Author URI: http://example.com
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: widgetkit, fabran, slideshow
Text Domain: twentyone-child
*/

Descrizione delle righe di codice:

  • Theme Name: è il nome del tema child WordPress, in realtà potete scrivere ciò che volete, per mantenere un ordine consiglio di scrivere il nome del tema principale aggiungendo la dicitura Child.
  • Theme URI: (Opzionale) è l’URL di download del tema, se il tema lo rendete pubblico ha senso mettere un indirizzo di download, diversamente mettete l’indirizzo del vostro sito e per assurdo quello del cliente per cui lo state realizzando.
  • Description: (Opzionale) una descrizione del tema, per esempio se avete aggiunto nuove funzionalità potete scriverle qui.
  • Author: (Opzionale) il nome dell’autore del tema.
  • Author URI: (Opzionale) l’indirizzo del sito dello sviluppatore del tema.
  • Template: Obbligatorio. Il nome della cartella del tema genitore. Deve corrispondere esattamente al nome della directory del tema genitore, in questo caso twentytwentyone, altrimenti il tema child non funzionerà.
  • Version: (Opzionale) la versione del tema child.
  • Licence / License URI: potete lasciarle invariate
  • Tags: in realtà questi sono utili se il tema è pubblico perché aiutano a farlo trovare quando viene effettuato la ricerca con i criteri interni alla dashboard di WordPress, siccome nel mio caso il tema non è pubblico mi sono limitato ad inserire la lista delle nuove funzionalità che ho implementato
  • Text Domain: altra parte importante, infatti deve riportare il nome della cartella del template child.

3. Creazione del file functions.php

Per garantire che gli stili del tema genitore vengano ereditati correttamente, è necessario creare un file functions.php nella cartella del tema child. Questo file permetterà di caricare gli stili del tema genitore e aggiungere eventuali funzioni personalizzate.

Inserisci il seguente codice:

function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

?>

Descrizione delle righe di codice:

  • function my_theme_enqueue_styles() { ... }
    Definisce una funzione personalizzata per caricare gli stili.
  • wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    Utilizza la funzione wp_enqueue_style per caricare il file style.css del tema genitore.
  • add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    Aggancia la funzione my_theme_enqueue_styles all’azione wp_enqueue_scripts, assicurando che gli stili vengano caricati correttamente.

4. Attivazione del tema child WordPress

Dopo aver creato i file necessari, accedi al pannello di amministrazione di WordPress, vai su “Aspetto” > “Temi” e attiva il tuo tema child. Dovresti vedere il nome e la descrizione che hai definito nel file style.css.

5. Personalizzazione del tema child

Una volta attivato il tema child, puoi iniziare a personalizzarlo:

  • Aggiunta di stili personalizzati: puoi aggiungere regole CSS direttamente nel file style.css del tema child per modificare l’aspetto del tuo sito.
  • Sostituzione di file del tema genitore: per modificare un file del tema genitore, copia il file desiderato nella cartella del tema child mantenendo la stessa struttura di directory e apporta le modificazioni necessarie. Ad esempio, se vuoi modificare il file header.php del tema genitore, copia questo file nella cartella del tuo tema child e apporta le modifiche. WordPress utilizzerà automaticamente la versione presente nel tema child.
  • Aggiunta di nuove funzioni PHP: puoi aggiungere funzioni personalizzate al tuo file functions.php del tema child. È importante sapere che questo file viene caricato in aggiunta al file functions.php del tema genitore, non lo sostituisce.
  • Creazione di template personalizzati: puoi creare nuovi file di template specifici per pagine o sezioni del sito, seguendo le convenzioni di denominazione di WordPress (ad esempio, page-about.php per una pagina “About”).

6. Aggiungere una immagine preview

Ora volendo, ma è del tutto facoltativo, potete creare un file di 800×660 con nome screenshot.png ed inserire una preview del tema child WordPress, oppure potete limitarvi semplicemente a fare un copia e incolla del file che trovate nel template di default.

Se non viene creato il file, nella gestione dei temi di Worpdress si troverà un quadrato vuoto in corrispondenza del tema child.

Esempio di codice CSS per un tema child personalizzato

Nel file style.css del tema child, oltre alle informazioni principali, puoi aggiungere stili personalizzati. Ecco un esempio:

/* Cambia il colore del testo degli h1 */
h1 {
color: #0073aa;
}


/* Modifica lo sfondo del footer */
footer {
background-color: #f1f1f1;
padding: 20px;
}


/* Personalizza i pulsanti */
button, .button {
background-color: #0073aa;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 15px;
cursor: pointer;
}


button:hover, .button:hover {
background-color: #005177;
}

Vantaggi comprovati dell’utilizzo di un child theme

Le statistiche e gli studi dimostrano che l’utilizzo di un tema child è una pratica diffusa tra sviluppatori e designer. Secondo una ricerca condotta da WP Engine, oltre il 55% degli sviluppatori WordPress adotta child themes per la personalizzazione dei siti, poiché offre un approccio sicuro e strutturato per modificare il design e le funzionalità del sito.

Inoltre, i report di ThemeForest indicano che i temi child riducono del 70% il rischio di errori causati da aggiornamenti del tema genitore.

Questi numeri evidenziano quanto sia importante separare le personalizzazioni dal codice principale del tema, rendendo l’adozione di un tema child WordPress una scelta quasi obbligatoria per progetti di lunga durata.

Come creare un tema figlio usando un plugin

Se non sei uno sviluppatore e non hai competenze tecniche o non vuoi usare il metodo manuale, puoi creare un tema child usando un plugin. Ci sono diversi plugin disponibili nel repository di WordPress per la creazione di temi figlio.

Ecco 3 dei plugin gratuiti più popolari per temi figlio:

Per questo tutorial, userò il plugin Child theme Wizard per generare il tema figlio.

Per iniziare:

  1. Vai su WordPress Dashboard > Plugin > Aggiungi nuovo.
  2. Cerca il plugin Child Theme Wizard sulla barra di ricerca a destra.
  3. Fai clic sul pulsante Installa.
  4. Una volta installato, fai clic sul pulsante Attiva per attivare il plugin.
    Child Theme Wizard Plugin

    Child Theme Wizard Plugin

  5. Una volta attivato correttamente il plugin, vedrai l’opzione Child Theme Wizard sotto l’opzione Strumenti sulla barra di amministrazione WP a sinistra.
    Child Theme Wizard Configuration

    Child Theme Wizard Configuration

  6. Ora, devi selezionare il tema padre. Per farlo, devi aggiungere il titolo, la descrizione e l’URL del tema figlio e fare clic su Crea tema figlio.
  7. Ora vai su Aspetto > Temi e guarda il tuo child theme appena creato.
    Attivazione Child Theme Wizard

    Attivazione Child Theme Wizard

Fatto, così ti ho mostrato come puoi creare un tema child WordPress usando un plugin.

Domande frequenti (FAQ)

1. Posso creare un tema child senza conoscere il codice?
Sì, ci sono plugin come Child Theme Configurator che automatizzano il processo di creazione di un tema child, ma conoscere almeno le basi del codice ti darà maggiore controllo sulle personalizzazioni.

2. Un tema child può rallentare il sito?
No, l’uso di un tema child non influisce in modo significativo sulle prestazioni del sito, poiché eredita la maggior parte delle funzionalità dal tema genitore.

3. Posso creare un tema child per qualsiasi tema WordPress?
Sì, la maggior parte dei temi WordPress supporta i temi child, ma è sempre una buona idea verificare la documentazione del tema genitore per eventuali limitazioni.

4. Cosa succede se disattivo il tema child?
Se disattivi il tema child WordPress, il tuo sito utilizzerà il tema genitore, ma perderai tutte le personalizzazioni effettuate tramite il tema child.

5. Devo aggiornare il tema child?
Il tema child non richiede aggiornamenti, a meno che tu non voglia aggiungere nuove funzionalità o correggere eventuali errori. Tuttavia, è importante mantenere aggiornato il tema genitore.

Conclusioni

Creare un tema child WordPress è una pratica essenziale per chiunque desideri personalizzare un sito in modo sicuro ed efficiente. Questo approccio ti consente di proteggere le tue modifiche dagli aggiornamenti del tema genitore, migliorando la gestione del sito nel lungo periodo. Sebbene la creazione di un tema child richieda un minimo di conoscenze tecniche, il processo è accessibile anche ai principianti grazie ai numerosi strumenti e guide disponibili.

Investire tempo nella configurazione di un tema child può risparmiarti ore di lavoro e frustrazioni in futuro. Con questo metodo, puoi sperimentare liberamente con il design e le funzionalità del tuo sito, sapendo che il tuo lavoro è protetto e ben organizzato. Se sei pronto a portare il tuo sito WordPress al livello successivo, creare un tema child è il punto di partenza ideale.

Prima di finire vorrei chiederti un favore.
Se ritieni che questo articolo sia stato interessante e che ti abbia regalato qualche informazione utile scrivi una recensione su Google per Studio Fabran, ecco il link: https://g.page/r/CfFPOeCq22P0EBM/review

Grazie.

Icon 114 - Studio Fabran

Iscriviti alla NewsLetter

Vuoi ricevere i miei ultimi articoli comodamente nella tua email?
È gratis!
Oltre 700 persone lo stanno già facendo!

Iscriviti alla Newsletter

Niente spam o pubblicità, solo i migliori articoli del nostro blog pensati per te.
Che aspetti? Iscriviti ora ed unisciti agli altri 540 iscritti.
Useremo i tuoi dati esclusivamente per l'invio di articoli, guide ed approfondimenti. Metti una spunta se sei d'accordo al trattamento dei dati personali (artt. 13 e 14 del GDPR - Regolamento UE 2016/679). Per maggiori informazioni leggi la nostra politica sulla privacy.