WordPress: dal CMS ai temi grafici
La piattaforma WordPress costituisce il CMS attualmente più utilizzato al mondo per la creazione di siti web.
La forza di questa piattaforma open source nasce della possibilità di modificare ed ampliare la struttura del un sito web in base alle esigenze del progetto, sia dal punto di vista funzionale che da quello grafico.
La sua versatilità e scalabilità ha fatto sì che nel corso degli anni venissero sviluppati sia innumerevoli plugin per la gestione di altrettante esigenze funzionali che svariati temi grafici per la presentazione dei contenuti.
WordPress: temi grafici e personalizzazione
I temi WordPress possono essere completamente gratuiti o a pagamento; il tema a pagamento è (solitamente) supportato nel tempo dal suo creatore, sia dal punto di vista di un contatto tecnico online, sia come garanzia di aggiornamenti forniti con cadenza sufficientemente frequente da far sì che il tema resti allineato con la costante evoluzione del CMS e dei linguaggi. Va detto che molti temi gratuiti sono altrettanto validi ed il loro aggiornamento è offerto da anni con ottima frequenza. E’ spesso possibile trovare temi gratuiti ottimamente supportati, offerti in una versione base con limitate funzionalità e successivamente espandibili nel caso in cui si scelga di passare alla versione Pro. Molti temi moderni consentono di modificare lo stile delle pagine attraverso aree apposite poste all’interno del back-end del tema, dando un’ampia libertà di azione nella personalizzazione del tema grafico agli utenti che siano in grado di padroneggiare i fogli di stile.
Per quanto un tema possa offrire la possibilità di apportare modifiche grafiche con l’inserimento di widget o attraverso le opzioni di menu e di personalizzazione, ci si potrà trovare nella situazione in cui un tema, per essere fortemente customizzato, richieda azioni invasive su aspetti e funzionalità, sempre e comunque nel mantenimento dei principi di ordine e struttura all’interno del codice.
Perchè creare un tema Child – aspetti teorici
Ogni intervento effettuato in modo diretto ed invasivo su di un tema grafico, implica la modifica dei file che lo compongono. Sarà quindi indispensabile agire su porzioni di codice a volte ragguardevoli, sia su elementi di programmazione (PHP) per la modifica delle funzionalità, sia sul foglio di stile (CSS) per intervenire sull’aspetto del progetto. La conseguenza immediata sarà quella di avere un codice con modifiche a macchie di leopardo, meno ordinato e meno strutturato; una conseguenza successiva sarà il rischio di perdere le modifiche effettuate una volta che si dovesse provvedere all’aggiornamento del tema, poiché i files aggiornati andrebbero a sovrascrivere quelli da noi modificati.
Tenere traccia delle modifiche apportate ai files per poi ripristinare i nostri interventi sul tema aggiornato, è un metodo che richiede un significativo dispendio di tempo e che talvolta non è sufficiente ad evitare problemi poiché potremmo dover nuovamente adattare le nostre modifiche al nuovo codice aggiornato.
E’ a questo punto che entra in gioco il concetto di tema Child.
Modificare un tema WordPress utilizzando un tema Child, offrirà alcuni significativi vantaggi:
– Persistenza delle modifiche: ogni volta che verrà eseguito l’aggiornamento del tema principale, le nostre modifiche non verranno sovrascritte poiché risiederanno in un diverso folder;
– Mantenimento di una struttura organizzata, scalabile e sicura: le modifiche al tema originale saranno interamente contenute nel folder del tema Child in base alle nostre esigenze e tecniche di scrittura, in modo da consentire successivi interventi mirati di ampliamento, senza intaccare l’integrità del tema originale e senza quindi rischiare di minarne i requisiti basilari di sicurezza.
Creazione manuale di un tema Child – aspetti pratici
Il tema Child è un insieme di files correlati al tema principale, dal quale ereditano impostazioni e funzionalità, ma di fatto localizzati in un diverso folder; il tema Child consente di aggiungere o sostituire codice ai corrispondenti files del tema principale (o tema Parent) senza intervenire in alcun modo sul codice dei files originali.
Le intestazioni dei files che compongono il folder del tema Child, codificheranno le direttive che stabiliranno sia il legame con il tema Parent che la facoltà di aggiungere e/o sostituire parti di codice, dal CSS del foglio di stile al PHP con cui sono implementate le funzioni.
Per la creazione manuale di un tema child, sarà necessario:
[1] – creare un nuovo folder nella cartella themes della nostra installazione, chiamandolo con il nome del tema principale seguito dalla dicitura “-child” (es.: “dominio.tld/wp-config/themes/originalthemex-child”, ove “originalthemex” è il nome di tema Parent fittizio);
[2] – creare il file style.css nel nuovo folder (originalthemex-child/styles.css) nel quale verranno incluse le informazioni relative al nuovo tema ed i riferimenti al tema Parent, inserendo un’intestazione simile alla seguente:
/*
Theme Name: OriginalThemeX Child
Theme URI: https://originalthemex.tld/
Author: Nicola Timpanaro
Author URI: https://nicolatimpanaro.it
Description: Tema Child di OriginalThemeX
Template: originalthemex
Version: 1.0.0
Tags: tag che possono essere applicati al tema, separati dalla virgola
Text Domain: originalthemex-child
*/
Il file style.css sarebbe di per sè sufficiente a permettere l’attivazione del nuovo tema Child senza tuttavia una reale impaginazione, non avendo ereditando alcuno stile dal tema Parent; affinchè questo possa invece avvenire andremo a completare il passo successivo.
[3] – creare il file functions.php sempre nel nuovo folder (originalthemex-child/functions.php) contenente le istruzioni necessarie ad includere il foglio di stile del tema Parent; ciò sarà possibile inserendo il seguente codice in testa al file appena creato:
<?php
add_action( ‘wp_enqueue_scripts’, ‘upload_parent_style’ );
function upload_parent_style () {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
La corretta compilazione delle voci Theme Name e Template sarà fondamentale per stabilire il nome del tema Child ed il template di riferimento (cioè il tema Parent); le altre righe saranno facoltative.
Ultimo passo: l’attivazione
Una volta preparata la base del tema Child, sarà sufficiente entrare nel pannello amministrativo di WordPress ed attivare il nuovo tema Child come un qualsiasi altro tema (attraverso il menu Aspetto→Temi). Se tutto fosse andato a buon fine, ora il tema Child dovrebbe risultare tema attivo, mentre il sito web dovrebbe presentarsi con il medesimo aspetto di prima poiché non sarebbero ancora state operate modifiche né nel foglio di stile né nel file funzionale.
Sarà possibile intervenire anche su altri elementi presenti nella directory principale del tema Parent, copiandoli nel folder del tema Child e modificandoli (ad esempio il file header.php per la testata del sito web, il file footer.php per il piè pagina, il file single.php per la visualizzazione dei singoli post, il file archive.php per la visualizzazione dei post di ciascuna categoria, ecc.).
Tema Child – soluzioni per problematiche avanzate
– Problema 1 : il codice di una funzione esistente nel tema Parent richiede una modifica.
Può verificarsi l’esigenza di sostituire il codice di una funzione già presente nel tema con una nuova funzione implementata all’interno del file functions.php nel tema Child, affinché svolga il compito dell’altra in modo differente. Perchè ciò sia attuabile è necessario che la corrispondente funzione del tema Parent sia stata nativamente dichiarata in maniera condizionale (modalità pluggable), utilizzando cioè la funzione function_exists(..). Vediamo un esempio:
if ( ! function_exists( ‘originalthemex_info’ ) ) {
function originalthemex_info()
{
[…]
}
}
add_action( ‘originalthemex_info’, ‘originalthemex_info’ );
Prima di caricare la funzione fittizia “originaltemex_info” del tema Parent, il sistema controlla che non ne esista una con lo stesso nome già caricata nel flusso di WordPress; se fosse stata sviluppata la nuova versione della funzione “originalthemex_info” nel tema Child attivo, la condizione function_exists(..) posta nel tema Parent impedirebbe il caricamento della funzione originale in essa contenuta; resterebbe pertanto attiva la funzione personalizzata creata nel file functions.php del tema Child, pronta a svolgere il proprio compito nella modalità prevista dal suo codice modificato.
Diversamente, se non fosse stata utilizzata la condizione function_exists(..) nel tema Parent, sarebbe indispensabile agire sul parametro di priorità all’interno della chiamata add_action (che provvede ad agganciare l’esecuzione di una funzione al verificarsi di un certo evento di sistema o hook), una volta creata la nuova funzione nel tema Child. A tal proposito, nel prossimo punto verrà affrontato un problema che richiederà una modifica della priorità di esecuzione di una funzione all’interno dell’action hook.
– Problema 2 : il foglio di stile del tema Parent sovrascrive quello del tema Child.
La successione di caricamento dei files nel flusso di WordPress, prevede che il foglio di stile style.css del tema Child venga caricato per primo e che durante la lettura dell’intestazione esso vada immediatamente a recuperare il codice del file style.css del tema Parent; il contenuto di quest’ultimo verrà letto interamente prima dell’altro così da permettere alle modifiche del nuovo foglio di stile (tema Child) di intervenire per ultime nel processo, sovrascrivendo legittimamente le precedenti. Il file functions.php del tema Child sarà invece letto interamente prima della chiamata del tema functions.php del tema Parent, ma non ne sostituirà gli elementi bensì vedrà gli elementi del file del tema Parent aggiungersi a quelli definiti nel file del tema Child. Se le funzioni presenti nel tema Parent non fossero state dichiarate in modalità pluggable, si potrebbero verificare sovrascritture che andrebbero ad inficiare la creazione delle nuove funzionalità così come le avremmo volute.
Sarà quindi possibile che alcuni elementi del tema Parent, caricati interamente solo successivamente alla lettura completa di quelli del tema Child, causino la perdita delle istruzioni personalizzate da noi inserite.
In questi casi, si renderà necessario agire sull’ordine di lettura degli elementi, in modo tale che il contenuto del file creato nel tema Child (prendiamo lo stesso file style.css per fare un semplice esempio con elementi già visti) venga letto sempre dopo il contenuto del corrispondente file del tema Parent.
Per far ciò, sarà necessario intervenire sul file functions.php nel tema Child (nel nostro esempio, sulla chiamata del file style.css):
add_action( ‘wp_enqueue_scripts’, ‘originalthemex_child_style’, 11 );
function originalthemex_child_style() {
wp_enqueue_style( ‘child-style’, get_stylesheet_uri() );
}
Le istruzioni sopra indicate nel nostro esempio puramente fittizio, faranno sì che il tema Child venga eseguito con priorità ‘11’ (il terzo parametro che è stato inserito nella chiamata dell’action hook) quindi sempre dopo gli altri elementi del sistema (con priorità di default pari a ‘10’).