Categorie
Web development WordPress

Creare child theme WordPress

Un child theme in WordPress permette di effettuare delle modifiche all’aspetto grafico / funzionale di un sito, senza modificare il codice sorgente del tema principale.

Il tema principale viene definito parent theme (tema genitore).

Cosa è un parent theme in WordPress

I parent themes comprendono tutti i files necessari per un tema affinché sia garantito il corretto funzionamento di WordPress.

Se sei interessato a conoscere le funzionalità di un tema WordPress, ti invito ad approfondire l’argomento sulla pagina di Wikipedia dedicata a WordPress.

Cosa è un child theme in WordPress

Un tema child consente di estendere un tema parent.

In pratica, un tema child eredita il look & feel e le funzionalità del tema parent.

Il tema child permette di:

  • Rendere le modifiche esportabili e replicabili
  • Separare le personalizzazioni dal codice originale del tema
  • Permettere l’aggiornamento del parent theme senza perdere le personalizzazioni effettuate
  • Trarre beneficio dallo sforzo d’implementazione e testing speso per il parent theme
  • Risparmiare tempo nello sviluppo, sfruttando il codice presente nel parent theme
  • Apprendere le basi dello sviluppo di temi WordPress

Creare child theme WordPress

Gli steps per creare un child theme in WordPress sono i seguenti:

  • Creare la cartella per il child theme, nel percorso wp-content/themes/nome-del-tema-parent-child
  • Scrivere un file style.css nella cartella creata al passo precedente
  • Creare un file functions.php nella cartella creata al passo precedente

I dettagli riguardo alla creazione dei files sono forniti nel seguito dell’articolo.

Struttura del file style.css

Il file CSS dovrà contentere le seguenti informazioni, nella sua prima parte.

/*
 Theme Name:   Nome Tema Parent Child
 Theme URI:    http://sito.com/nome-tema-child/
 Description:  Nome Tema Parent Child
 Author:       John Doe
 Author URI:   http://example.com
 Template:     nome-cartella-tema-parent
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  tema-parent-child
*/

WordPress utilizzerà queste informazioni per caricare il tema, mostrandolo tra i temi disponibili nell’apposita sezione.

Di queste, le informazioni necessarie sono:

  • Theme Name: deve essere unico tra tutti i temi presenti nella propria installazione di WordPress
  • Template: il nome della cartella che contiene il tema genitore

Struttura del file functions.php

Il file functions.php dovrà avere il seguente contenuto.

function my_theme_enqueue_styles() {
    // Nome del file css del parent-theme.
    $parenthandle = 'parent-style'; 
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        // inserire qui eventuali dipendenze
        array(),
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(),
        array( $parenthandle ),
        // questo funziona solo se la versione è presente nella
        // parte iniziale di style.css del child theme.
        $theme->get('Version') 
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

In questo modo, oltre al file css del parent theme, verrà caricato anche quello del child theme.

Come attivare child theme

Per attivare il child theme è sufficiente accedere al percorso Aspetto -> Temi disponibile nell’area di amministrazione di WordPress.

Conclusioni – creare child theme WordPress

In questo articolo hai appreso come creare un child theme in WordPress e quali vantaggi porti.

Se fossi interessato ad approfondire ulteriormente la tua conoscenza di WordPress, ti invito a consultare gli articoli dedicati a WordPress.