Wordpress: creare un tema child


Come creare un tema child in WordPress che erediti tutte le caratteristiche e funzionalità di un tema base

29/12/2017

Nel mondo dell’informatica il paradigma di ereditarietà permette ad un entità figlio di ereditare tutte le caratteristiche e funzionalità di un’entità padre. Ciò conferisce al software estensibilità e manutenibilità nel tempo. Quando si sviluppa un sito web in wordpress e in particolare un tema è buona norma partire da un tema di base, estendendo e personalizzando ciò che il tema offre. Questo fa risparmiare una quantità considerevole di tempo e dà la possibilità di focalizzarsi solamente su alcuni aspetti del tema, senza dover reinventare la ruota. È tuttavia una cattiva prassi quella di modificare un tema esistente, soprattutto se si tratta di temi sviluppati da terzi. La ragione è semplicemente legata al fatto che un futuro aggiornamento andrà inevitabilemente a sovrascrivere le modifiche, rendendo vano il lavoro svolto. Dall’altro lato è scelta poco saggia quella di decidere di non aggiornare temi e plugin. La soluzione in questo caso è quella di creare un tema child che erediti tutte le caratteristiche e funzionalità del tema base, incluse funzioni php, fogli di stile e javascript e che permetta inoltre di aggiungere le proprie.

Come creare un tema child

Creare un tema child è un’operazione piuttosto semplice, che richiede all’incirca cinque minuti e competenze tecniche basilari. Supponiamo di voler creare un tema child per touchmultimedia che erediti dal tema base Twenty Thirtheen:

  • Navigare al’interno della cartella wp-content/themes
  • Creare una cartella con il nome del tema che si vuole creare, in questo caso touchmultimedia-child. È buona prassi, sebbene non obbilgatorio, nominare il tema con il suffisso -child, in modo da rendere subito chiaro che si tratta di un tema child
  • All’interno della cartella creare il file style.css che conterrà la configurazione del tema. Questo è l’unico file obbilgatorio per creare un nuovo tema
/*
Theme Name: Touch Multimedia Child
Theme Uri: http://example.com
Theme Description: Tema child di Touch Multimedia
Author: Luca De Franceschi
Template: twentythirteen
Version: 0.1.0
*/

L’opzione Template è fondamentale, in quanto indica il tema di base. È importante assicurarsi che all’interno della cartella dei temi sia presente una cartella con lo stesso nome indicato, in questo caso twentythirteen, e che la cartella ovviamente contenga un tema wordpress. A questo punto navigando nella pagina dei temi da pannello di controllo comparirà il nuovo tema, la cui personalizzazione sarà identica a quella del tema base, in quanto appunto il tema avrà ereditato tutte le funzionalità del tema base, compresa l’interfaccia di amministrazione e le opzioni di configurazione.

Creare uno stile personalizzato

Una delle prime operazioni che si vuole effettuare su un tema child è quella di creare uno stile personalizzato, che sovrascriva alcuni aspetti del tema base, come ad esempio i colori, le spaziature o i margini. Quando si sviluppa fogli di stili è molto importante considerare l’ordine in cui vengono caricati. La regola prevede una sovrascrittura a cascata, per cui il foglio che viene caricato successivamente sovrascrive tutte le regole dichiarate dai fogli precedenti. È importante dunque assicurarsi che prima venga caricato lo stile del tema base e poi lo stile del tema child. In questo modo non ci saranno dubbi sul fatto che le modifiche vengano applicate e si eviteranno cattive gestioni dei fogli di stile, come ad esempio la dichiarazione !important.

Per ottenere ciò è necessario creare un file chiamato functions.php e inserirlo nella cartella del tema. Al suo interno verrà chiamata la funzione wp_enqueue_style(), che molto semplicemente si occuperà di accodare un foglio di stile.

<?php

/**
 * @file functions.php
 */

add_action('wp_enqueue_script', 'touchmultimedia_enqueue_styles');

function touchmultimedia_enqueue_styles() {
  wp_enqueue_style('twentythirteen', get_template_directory_uri() . '/style.css');

  // il terzo parametro è un array contenente le dipendenze
  wp_enqueue_style('touchmultimedia', get_stylesheet_directory_uri() . '/css/touchmultimedia.css', [ 'twentythirteen' ]);
}

In questo esempio si sta cercando di accodare il file touchmultimedia.css ed inserirlo solo dopo che è stato incluso il tema base. Per fare ciò nella funzione prima di tutto viene incluso lo stile del tema base (la funzione get_template_directory_uri() restituisce il percorso della cartella del tema base) poi in seguito viene accodato il css del tema figlio, dichiarandolo dipendente dal tema twentythirteen. In questo modo il file verrà caricato dopo i file css del tema figlio.

File di template

Il tema chiild può sovrascrivere qualsiasi file o funzione del tema base. Per sovrascrivere un file è necessario inserire lo stesso file con lo stesso nome nella cartella del tema child e questo sovrascriverà l’equivalente file presente nel tema base. Ovviamente è possibile includere file php che non sono presenti nel tema base. Vi è tuttavia un’eccezione ed è rappresentata dal file functions.php. Questo file non viene sovrascritto ma al contrario viene caricato in aggiunta del corrispettivo file del tema base. In questo modo è possibile andare a modificare solamente determinate funzioni, senza intaccare le funzionalità del tema base.

Conclusioni

Il riuso è un pilastro fondamentale nell’informatica ed è importantissimo sviluppare il proprio lavoro a partire da progetti già esistenti, sopratutto se non si è esperti. Questo articolo fornisce una guida introduttiva su come creare un tema child per un sito wordpress, molto semplice anche per chi non possiede competenze di programmazione. Vi sono ovviamente sono casi d’uso più complessi e che richiedono competenze più elevate ed essi verranno trattati separatamente.