Home>Guide>Come creare un tema child per WordPress

Come creare un tema child per WordPress


Come creare un tema child per WordPress


Un tema figlio (child theme) è un tema che eredita la funzionalità e lo stile di un altro tema, chiamato tema padre o tema genitore (parent theme). I temi figli sono non solo il metodo consigliato di modificare un tema esistente, ma sicuramente sono di gran lunga il modo più sicuro e semplice per farlo. Così, anziché modificare direttamente i file del tema, puoi adottare l’utilizzo di un tema child che per sua natura eredita tutti i template e funzionalità del suo diretto genitore, ma sovrascrivendo i file dello stesso.

  • Leggi l'articolo, ti bastano solo 1 minuto, 24 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

Perché usare un tema child

Ma perché creare un tema child? Perché creare un altro tema per apportare delle modifiche e non modificare direttamente il tema genitore?
Il problema nasce principalmente quando si utilizza un tema di terze parti, acquistato ad esempio su marketplace come themeforest. Di tanto in tanto, i temi possono ricevere degli aggiornamenti, molto importanti perché possono:

  • Aggiungere nuove funzionalità
  • Correggere bug
  • Migliorare la sicurezza o correggere eventuali falle
  • Aggiornare la compatibilità con nuove versioni di WordPress

Ma aggiornando il tema, i file della nuova versione sostituiscono i precedenti ed ogni eventuale modifica ai file dello stesso, andrebbe persa.
Creando un tema child, invece, il tema padre può essere aggiornato e le tue personalizzazioni resteranno invariate nel tema figlio.

Inoltre, un tema child per WordPress permette agli sviluppatori di avere una base di partenza fissa (parent) con eventuali diverse ramificazioni differenti tra loro (child), incrementando così la velocità di sviluppo e la riutilizzabili del codice.


Come creare un tema child

Il processo di creazione di un tema child per WordPress è davvero molto semplice, eccolo punto per punto:

1. Entra nella cartella contenente i temi di WordPress:

wp-content/themes/

2. Crea una nuova cartella, convenzionalmente chiamata con lo stesso nome del tema genitore seguito dal suffisso -child.
Ad esempio, per creare un tema child per il tema di default Twenty Seventeen, il nome sarà:
twentyseventeen-child

3. All’interno della nuova cartella, crea un file chiamato style.css.
Questo file è l’unico strettamente necessario per permettere al tema child di funzionare.

4. Modifica il file style.css appena creato, inserendo al suo interno le righe di codice:

/*
	Theme Name:     TwentySeventeen Child by Code4Life
	Theme URI:         https://code4life.it/
	Description:        Tema Child per il tema TwentySeventeen
	Author:                Code4Life
	Author URI:         https://code4life.it/
	Template:            twentyseventeen
	Version:               1.0.0
*/

Tieni a mente che le uniche righe obbligatorie, sono:
Theme Name, che indica il nome che desideri dare al tuo tema child;
Template, che indica il tema genitore da cui ereditare le funzionalità (va indicato il nome della cartella in cui si trova il tema padre).

Le operazioni principali sono terminate, il tuo tema child è già pronto per essere utilizzato!


Ereditare dal tema genitore

È bene precisare che quando procederai ad attivare il tuo nuovo tema child per WordPress, il foglio di stile utilizzato dal CMS sarà quello del child. Ma se il foglio di stile del tema padre contenesse regole CSS necessarie alla corretta visualizzazione della grafica?
In questo caso, è possibile (ed è consigliato) includere il foglio di stile del tema genitore nel tema child, così da garantire al 100% l’ereditarietà. Per farlo, entra nella cartella del tuo tema child e crea un nuovo file, chiamato functions.php, inserendo il seguente codice:

<?php

// Aggiunge il foglio di stile del tema parent
add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
} );

File e override

L’utilizzo dei temi child di WordPress, prevede un sistema di override dei file. Ma cosa significa?
Vuol dire, in poche parole, che i file presenti nel tema child andranno a sovrascrivere i file del tema genitore. Ad esempio, quando WordPress cercherà i file di template, come il file page.php, lo cercherà prima nel tema child, altrimenti lo andrà a prelevare dal tema parent. Quindi, per fissare il concetto, i file del tema child hanno la priorità rispetto ai propri omologhi presenti nel tema genitore. Naturalmente, questo discorso vale per ogni file del tema.

Fa eccezione però il file functions.php; in questo caso, il file viene caricato da entrambi i temi, nella sequenza: figlio, padre.

Ricapitolando, quando viene richiamata una pagina di WordPress con un tema child attivo, viene richiamato il file functions.php del tema child, poi il file functions.php del tema genitore, poi via via gli altri file dal tema child, se presenti, altrimenti dal tema genitore.

Bene, ora non ci resta che procedere con l’attivazione del nostro tema child.


Come attivare un tema child

Attivare un tema child per WordPress è un’operazione estremamente semplice e non differisce di una virgola dalla normale procedura di attivazione di un qualsiasi altro tema.
Accedi quindi al backend del tuo sito WordPress e portati nella sezione:

Aspetto > Temi

seleziona il tema child appena creato e clicca su “Attiva”… Fatto? Perfetto! Ora non ti resta che mettere in pratica tutte le personalizzazioni al tema che preferisci.



Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come anonimizzare Google Analytics

Come anonimizzare Google Analytics


Scopri come rendere anonimi gli IP in Google Analytics, così da poter considerare i suoi cookie come tecnici rispettando le normative su cookie e privacy.

Come aggiungere gli attributi prev e next

Come aggiungere gli attributi prev e next


Ecco un semplice trucchetto che può aiutare il tuo sito a “piacere di più” ai motori di ricerca: gli attributi rel="prev" e rel="next".

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Informativa sulla privacy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Informativa sulla privacy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Informativa sulla privacy)