spadamar

di Mario Spada

WordPress è in assoluto il più diffuso CMS al mondo e detiene il 40% delle installazioni sui siti web che utilizzano piattaforme CMS (cfr: http://trends.builtwith.com/cms).

Anche per questo è disponibile sul Web una scelta di temi sia commerciali che open source veramente vasta. L’utilizzo di temi già preimpostati con la più svariata tipologia di layout grafico e strutturale, semplifica in modo sostanzioso il lavoro delle Web Agency. Quasi sempre però, una volta scelto il tema, è necessario intervenire sia sul CSS (il foglio stile) che sui template (i modelli strutturali) per adattarli alle proprie esigenze del progetto del sito web.

Per questa esigenza WordPress ci viene incontro mettendoci a disposizione i Child Themes (temi figlio) che ereditano dal Parent Theme (tema genitore) tutte le caratteristiche del modello scelto, permettendo però di sovrascriverle senza doverle modificare. Questo gioca un ruolo determinante nella riduzione dei tempi di sviluppo, e non è poco, visto che ormai per rimanere con i prezzi nel mercato, è necessario abbassare drasticamente i costi di sviluppo.

Quale è il vantaggio? Sta nel fatto che in informatica, la manutenzione del codice gioca un ruolo determinante nella sicurezza e nella sopravvivenza stessa dell’applicazione e se il tema scelto è stato prodotto da sviluppatori seri, verranno costantemente rilasciate nel tempo versioni aggiornate. Ora se noi abbiamo modificato direttamente il codice del nostro tema, non sarà possibile applicare gli aggiornamenti senza sovrascrivere e dunque perdere, le nostre modifiche. Se abbiamo invece derivato un tema figlio, sarà possibile aggiornare senza preoccupazioni il tema padre e mantenere quindi sicuro ed affidabile tutto il nostro lavoro.

Come creare un tema figlio di WordPress:

Il primo passo è di creare una directory nella cartella dei temi con il nome del nostro tema figlio, per esempio (utilizziamo come tema genitore “twentythirteen” che arriva già incluso nel pacchetto di WordPress):

wp-content
|
---themes
     |
     --- twentythirteen
     |
     --- twentythirteen-child

Creiamo dunque la cartella “twentythirteen-child” (N.B.: deve esistere la cartella del tema padre: “twentythirteen” con tutto il suo contenuto originale.)

Il secondo e fondamentale passo è quello di inserire nella cartella appena creata “twentythirteen-child” un file style.css con la seguente struttura di righe iniziali:


/*
Theme Name: Twenty Thirteen Child
Theme URI: http://example.com/
Description: Tema Child per il tema Twenty Thirteen
Author: Qui il vostro nome
Author URI: http://example.com/about/
Template: twentythirteen
Version: 0.1.0
*/


Questo è il solo file obbligatorio per far funzionare un tema figlio e le righe obbligatorie che determinano il funzionamento di un tema figlio sono: Theme Name e Template.

Adesso il nostro tema figlio è già funzionante ma non ha alcun foglio stile, se vogliamo ereditare quello del padre (consigliabile se non lo si vuole riscrivere interamente…) abbiamo due strade:

1. Si importa direttamente il foglio stile del padre con @import all’interno del CSS del figlio (sconsigliato)
2. Si aggiunge del codice nel file functions.php del tema figlio (consigliato!)

Ora è necessario spiegare che mentre il file “style.css” del nostro tema figlio sovrascrive quello del padre, il codice scritto nel file “functions.php” creato nella cartella del tema figlio viene aggiunto a quello del tema padre.

La soluzione 1 è più semplice perché non ci obbliga a creare un nuovo file “functions.php” all’interno del nostro tema figlio, ma è sconsigliato per motivi di prestazioni. Come spiegato in questo articolo, il parsing dei fogli stile eseguito dai browser sarebbe estremamente più lento.

La soluzione 2 richiede che vengano inserite le seguenti righe di codice nel file “functions.php” che deve essere creato ex-novo nella cartella del nostro tema figlio:


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

In pratica facciamo caricare separatamente il foglio stile del padre direttamente da WordPress nell’head delle pagine e il CSS del figlio verrà caricato sempre per ultimo.

Infine una nota sull’utilizzo nel tema figlio dei riferimenti al percorso dei file:

Mentre normalmente nei temi viene utilizzata la funzione: get_template_directory_uri() per ottenere il percorso relativo dei file presenti nel tema, nel caso dei temi figli è necessario utilizzare: get_stylesheet_directory() che restituisce il percorso del foglio stile del tema figlio e dunque anche dei file presenti in questa cartella.

Sul sito del Codex di WordPress (da dove ho reperito gran parte di queste informazioni) c’è anche la spiegazione di come impostare l’internazionalizzazione (i18n) per le traduzioni dei file eventualmente presenti nei temi figli: https://codex.wordpress.org/it:Temi_Child#Internazionalizzazione

Riferimenti:

• https://codex.wordpress.org/it:Temi_Child
• http://wordpress.stackexchange.com/questions/167639/why-does-my-child-theme-css-get-called-twice
• https://kovshenin.com/2014/child-themes-import/