Come creare un tema Child di WordPress

Come creare un tema Child (Child Themes) da un tema genitore per personalizzare il tuo sito WordPress.

 

Introduzione

Nell’articolo Come provare in locale un sito WordPress hai visto come installare e configurare sul tuo PC un sito in WordPress.

In questo articolo trovi alcuni suggerimenti sull’utilizzo di un Tema Child per fare modifiche al codice del sito che non vengano cancellate all’aggiornamento del tema.

 

Cos’è un tema Child

Un tema Child tradotto letteralmente come tema figlio è un modello WordPress che eredita tutte le funzionalità del tema genitore principale.
Modificando il  tema figlio non si corre il rischio che eventuali update del tema genitore vadano a sovrascrivere le nostre modifiche.
Le modifiche al tema child possono riguardare solo alcune porzioni di codice. Per tutto ciò non modificato, vale il codice del tema genitore.

 

Perché usare un tema Child

WordPress ha la grande funzionalità di poter personalizzare il layout del nostro sito con uno dei tantissimi temi presenti nella sua galleria. Può accadere che il tema che vogliamo utilizzare non soddisfi tutte le nostre richieste di design o di funzioni. Il WordPress developer provvede, a questo punto, a fare delle modifiche al codice per meglio rispondere alle sue esigenze o quelle del committente del lavoro.

Il problema da risolvere è di evitare che le modifiche al tema vengano cancellate da aggiornamenti e nuove versioni rilasciate dall’autore. Per evitare che vengano perse le nostre modifiche, gli sviluppatori di Wordopress hanno previsto la creazione di un tema Child.
Questo tema eredita tutte le funzionalità del tema genitore ma ti offre la possibilità di modificare al codice mantenendo intatto il tema originale.

Un tema child ti permette la creazione di siti web  sperimentali con la consapevolezza che basta cancellare tema Child per ripristinare la piena funzionalità del tema genitore.

Ecco come procedere per la creazione del tema Child.

 

Come creare un tema Child

La procedura di creazione di un tema Child è molto semplice. Abbiamo bisogno di un editor di file testo per la creazione di codice e l’accesso al pannello di controllo del tuo hosting per caricare i relativi file oppure ad un client FPT come Filezilla.

Leggi: Editor offline di file testo per programmatori – Giampietro Meneghelli (giampimen.it)

  • Per prima cosa creiamo un directory dove salvare tutti i file del tema Child.
    Se stai creando un sito test in locale il percorso della cartella sarà c:\XAMPP\HT-DOCS\Wordpress\wp-content\Themes
    mentre online dovrai sfogliare il percorso del sito fino a trovare la cartella /www/Wordpress/Wp-content\themes.
    Attenzione! A seconda del provider, la root del sito può essere www, public oppure public-html
  • Il tema di esempio ha il nome di Generic quindi il percorso dove trovare il nome genitotore è /Wp-content/Generic.
    Come consuetudine chiameremo la cartella del sito figlio Generic-Child.
  • All’interno della directory Generic-child dovremo creare due file style.css e function.php. Servirà un  terso file Screenshot.jpg con l’immagine da visuallizare nella finestra di gestione dei temi WordPress.
  • Ora apriamo un editor e incolliamo il codice simile a quello sotto indicato.
    Ovviamente dovrete sostituire i riferimenti a Generic-Child e a Template con il nome del Vostro tema. Solitamente l’autore di un tema fornisce anche il codice Child.
  • Il foglio di stile deve iniziare con le seguenti linee:
/*
Theme Name: generic-child
Description: Child theme by Giampietro Meneghelli
Author: n/d
Author URL: https://www.giampimen.it
Template: generic
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generic
*/
  • Le due righe obbligatorie nel file style.css sono Theme Name e Template.
    Il Template name da riportare anche in Theme Name con il suffisso -child lo trovi nel file style.css del tema genitore.
  • Ora procediamo alla creazione di un file function.php inserendo le seguenti righe:
<?php
/*Questo file è parte di test, generic child theme.Tutte le funzioni di questo file saranno caricate prima delle funzioni del tema genitore.
Per saperne di più https://codex.wordpress.org/Child_Themes.
Nota: questa funzione carica prima il foglio di stile genitore, poi il foglio di stile figlio
*/if ( ! function_exists( ‘suffice_child_enqueue_child_styles’ ) ) {
function test_enqueue_child_styles() {
// loading parent style
wp_register_style(
‘parente2-style’,
get_template_directory_uri() . ‘/style.css’
);wp_enqueue_style( ‘parente2-style’ );
// loading child style
wp_register_style(
‘childe2-style’,
get_stylesheet_directory_uri() . ‘/style.css’
);
wp_enqueue_style( ‘childe2-style’);
}
}
add_action( ‘wp_enqueue_scripts’, ‘test_enqueue_child_styles’ );/*Scrivi qui le tue funzioni */
  • Il codice inserito in function.php ti permette di includere il foglio stile del tema genitore al tema Child.

Modifiche al tema

Creati i file style.css e function.php puoi procedere rispettivamente all’inserimento di selettori CSS e di funzioni PHP e WordPress.

Ora devi procedere all’attivazione del tema Child. Lo fai attraverso la bacheca di WordPress, cliccando sul menu Aspetto, poi un clic alla voce Temi.

Ora puoi aggiungere nel file Style.css eventuali modifiche a classi CSS. Ti consiglio di far seguire la regola CSS che aggiungi dalla regola !IMPORTANT.

Per quanto riguarda le modifiche ai file del tema, devi duplicare il file che vorrai midificare all’interno della cartella Child, rispettando la struttura delle cartelle.
Con un editor puoi fare le modifiche che ritieni necessarie.

Ogni eventuale aggiornamento del tema madre non andrà ad sovrascrivere le modifiche fatte al tema figlio.

Per i fogli di stile ti consiglio l’utilizzo della regola !IMPORTANT che da priorità al selettore CSS del tema Child rispetto al tema genitore.

Per esempio: table { border: 1px solid !IMPORTANT;}

Attenzione! Anche se hai attivato il tema Child, è obbligatorio mantenere in anche il tema gentotre.

Creare un tema Child con plugin

Alcuni temi commerciali offrono già il tema Child all’interno del pacchetto di installazione. In questo caso si può trasferire all’interno dello spazio web via ftp la cartella Child e i relativi file.

Se non hai a disposizione questo tema e non vuoi crearlo manualmente, ti può essere comodo creare un tema Child con un plugin di WordPress.

Personalmente ho provato Child Theme Generator. Questo plugin può generare un tema figlio in maniera automatica con pochi passaggi in modo rapido e sicuro.

Conclusione

Qualora tu voglia mettere mano al codice o personalizzare il layout di un tema WordPress, è sempre consigliato creare un tema Child.
Utilizzalo per evitare di perdere le eventuali modifiche da te effettuate.

Per approfondire

Codex.Wordpress.org: temi Child

Come Creare un Child Theme in WordPress (Guida Estesa) (kinsta.com)