open source<\/em><\/a> nasce della possibilit\u00e0 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.
\nLa sua versatilit\u00e0 e scalabilit\u00e0 ha fatto s\u00ec 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.<\/p>\nWordPress: temi grafici e personalizzazione<\/h2>\n
I temi WordPress possono essere completamente gratuiti o a pagamento; il tema a pagamento \u00e8 (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\u00ec 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 \u00e8 offerto da anni con ottima frequenza. E\u2019 spesso possibile trovare temi gratuiti ottimamente supportati, offerti in una versione base con limitate funzionalit\u00e0 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\u2019interno del back-end del tema, dando un\u2019ampia libert\u00e0 di azione nella personalizzazione del tema grafico agli utenti che siano in grado di padroneggiare i fogli di stile.<\/p>\n
Per quanto un tema possa offrire la possibilit\u00e0 di apportare modifiche grafiche con l\u2019inserimento di widget o attraverso le opzioni di menu e di personalizzazione, ci si potr\u00e0 trovare nella situazione in cui un tema, per essere fortemente customizzato, richieda azioni invasive su aspetti e funzionalit\u00e0, sempre e comunque nel mantenimento dei principi di ordine e struttura all\u2019interno del codice.<\/p>\n
Perch\u00e8 creare un tema Child \u2013 aspetti teorici<\/h2>\n
Ogni intervento effettuato in modo diretto ed invasivo su di un tema grafico, implica la modifica dei file che lo compongono. Sar\u00e0 quindi indispensabile agire su porzioni di codice a volte ragguardevoli, sia su elementi di programmazione (PHP) per la modifica delle funzionalit\u00e0, sia sul foglio di stile (CSS) per intervenire sull\u2019aspetto del progetto. La conseguenza immediata sar\u00e0 quella di avere un codice con modifiche a macchie di leopardo, meno ordinato e meno strutturato; una conseguenza successiva sar\u00e0 il rischio di perdere le modifiche effettuate una volta che si dovesse provvedere all\u2019aggiornamento del tema, poich\u00e9 i files aggiornati andrebbero a sovrascrivere quelli da noi modificati.<\/p>\n
Tenere traccia delle modifiche apportate ai files per poi ripristinare i nostri interventi sul tema aggiornato, \u00e8 un metodo che richiede un significativo dispendio di tempo e che talvolta non \u00e8 sufficiente ad evitare problemi poich\u00e9 potremmo dover nuovamente adattare le nostre modifiche al nuovo codice aggiornato.<\/p>\n
E\u2019 a questo punto che entra in gioco il concetto di tema Child<\/em>.<\/p>\nModificare un tema WordPress utilizzando un tema Child, offrir\u00e0 alcuni significativi vantaggi:<\/p>\n
– Persistenza delle modifiche<\/strong>: ogni volta che verr\u00e0 eseguito l\u2019aggiornamento del tema principale, le nostre modifiche non verranno sovrascritte poich\u00e9 risiederanno in un diverso folder;<\/p>\n– Mantenimento di una struttura organizzata, scalabile e sicura<\/strong>: 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\u2019integrit\u00e0 del tema originale e senza quindi rischiare di minarne i requisiti basilari di sicurezza.<\/p>\nCreazione manuale di un tema Child \u2013 aspetti pratici<\/h2>\n
Il tema Child \u00e8 un insieme di files correlati al tema principale, dal quale ereditano impostazioni e funzionalit\u00e0, 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.<\/p>\n
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\u00e0 di aggiungere e\/o sostituire parti di codice, dal CSS del foglio di stile al PHP con cui sono implementate le funzioni.<\/p>\n
Per la creazione manuale di un tema child, sar\u00e0 necessario<\/strong>:<\/p>\n[1] – creare un nuovo folder<\/strong> nella cartella themes<\/em> della nostra installazione, chiamandolo con il nome del tema principale seguito dalla dicitura \u201c-child\u201d<\/strong> (es.: \u201cdominio.tld\/wp-config\/themes\/originalthemex-child<\/em>\u201d, ove \u201coriginalthemex\u201d \u00e8 il nome di tema Parent fittizio);<\/p>\n[2] – creare il file style.css<\/em><\/strong>\u00a0nel nuovo folder (originalthemex-child\/styles.css<\/em>) nel quale verranno incluse le informazioni relative al nuovo tema ed i riferimenti al tema Parent, inserendo un\u2019intestazione simile alla seguente:
\n
\n\/*<\/span>
\nTheme Name: OriginalThemeX Child<\/span>
\nTheme URI: https:\/\/originalthemex.tld\/<\/span>
\nAuthor: Nicola Timpanaro<\/span>
\nAuthor URI: https:\/\/nicolatimpanaro.it<\/span>
\nDescription: Tema Child di OriginalThemeX<\/span>
\nTemplate: originalthemex<\/span>
\nVersion: 1.0.0<\/span>
\nTags: tag che possono essere applicati al tema, separati dalla virgola<\/span>
\nText Domain: originalthemex-child<\/span>
\n*\/<\/span><\/p>\nIl file style.css<\/em> sarebbe di per s\u00e8 sufficiente a permettere l’attivazione del nuovo tema Child senza tuttavia una reale impaginazione, non avendo ereditando alcuno stile dal tema Parent; affinch\u00e8 questo possa invece avvenire andremo a completare il passo successivo.<\/p>\n[3] – creare il file functions.php<\/em><\/strong>\u00a0sempre nel nuovo folder (originalthemex-child\/functions.php<\/em>) contenente le istruzioni necessarie ad includere il foglio di stile del tema Parent; ci\u00f2 sar\u00e0 possibile inserendo il seguente codice in testa al file appena creato:
\n
\n<?php<\/span>
\nadd_action( ‘wp_enqueue_scripts’, ‘upload_parent_style’ );<\/span>
\nfunction upload_parent_style () {<\/span>
\n\u00a0 \u00a0wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘\/style.css’ );<\/span>
\n}<\/span><\/p>\nLa corretta compilazione delle voci Theme Name<\/em><\/span> e Template<\/span><\/em> sar\u00e0 fondamentale per stabilire il nome del tema Child ed il template di riferimento (cio\u00e8 il tema Parent); le altre righe saranno facoltative.<\/p>\nUltimo passo: l’attivazione<\/h2>\n
Una volta preparata la base del tema Child, sar\u00e0 sufficiente entrare nel pannello amministrativo di WordPress ed attivare il nuovo tema Child come un qualsiasi altro tema (attraverso il menu Aspetto\u2192Temi<\/em>). 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\u00e9 non sarebbero ancora state operate modifiche n\u00e9 nel foglio di stile n\u00e9 nel file funzionale.
\nSar\u00e0 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<\/em> per la testata del sito web, il file footer.php<\/em> per il pi\u00e8 pagina, il file single.php<\/em> per la visualizzazione dei singoli post, il file archive.php<\/em> per la visualizzazione dei post di ciascuna categoria, ecc.).<\/p>\nTema Child \u2013 soluzioni per problematiche avanzate<\/h2>\n– Problema 1<\/span>\u00a0: il codice di una funzione esistente nel tema Parent richiede una modifica<\/strong>.<\/h4>\nPu\u00f2 verificarsi l\u2019esigenza di sostituire il codice di una funzione gi\u00e0 presente nel tema con una nuova funzione implementata all\u2019interno del file functions.php<\/em> nel tema Child, affinch\u00e9 svolga il compito dell\u2019altra in modo differente. Perch\u00e8 ci\u00f2 sia attuabile \u00e8 necessario che la corrispondente funzione del tema Parent sia stata nativamente dichiarata in maniera condizionale (modalit\u00e0 pluggable<\/em>), utilizzando cio\u00e8 la funzione function_exists<\/em>(..). Vediamo un esempio:
\n
\nif ( ! function_exists( ‘originalthemex_info’ ) )<\/span> {<\/span>
\n\u00a0 \u00a0function originalthemex_info()<\/span>
\n\u00a0 \u00a0 \u00a0 {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0[\u2026]<\/span>
\n\u00a0 \u00a0 \u00a0 }<\/span>
\n}<\/span>
\nadd_action( ‘originalthemex_info’, ‘originalthemex_info’ );<\/span><\/p>\nPrima di caricare la funzione fittizia \u201coriginaltemex_info\u201d del tema Parent, il sistema controlla che non ne esista una con lo stesso nome gi\u00e0 caricata nel flusso di WordPress; se fosse stata sviluppata la nuova versione della funzione \u201coriginalthemex_info\u201d nel tema Child attivo, la condizione function_exists<\/em>(..) posta nel tema Parent impedirebbe il caricamento della funzione originale in essa contenuta; resterebbe pertanto attiva la funzione personalizzata creata nel file functions.php<\/em> del tema Child, pronta a svolgere il proprio compito nella modalit\u00e0 prevista dal suo codice modificato.<\/p>\nDiversamente, se non fosse stata utilizzata la condizione\u00a0function_exists<\/em>(..) nel tema Parent, sarebbe indispensabile agire sul parametro di priorit\u00e0 all’interno della chiamata add_action<\/em> (che provvede ad agganciare l’esecuzione di una funzione al verificarsi di un certo evento di sistema o\u00a0hook<\/em>), una volta creata la nuova funzione nel tema Child. A tal proposito, nel prossimo punto verr\u00e0 affrontato un problema che richieder\u00e0 una modifica della priorit\u00e0 di esecuzione di\u00a0una funzione all’interno dell’action hook<\/em>.<\/p>\n– Problema 2<\/span>\u00a0: il foglio di stile del tema Parent sovrascrive quello del tema Child<\/strong>.<\/h4>\nLa successione di caricamento dei files nel flusso di WordPress, prevede che il foglio di stile style.css<\/em> del tema Child venga caricato per primo e che durante la lettura dell\u2019intestazione esso vada immediatamente a recuperare il codice del file style.css<\/em> del tema Parent; il contenuto di quest\u2019ultimo verr\u00e0 letto interamente prima dell\u2019altro cos\u00ec 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<\/em> del tema Child sar\u00e0 invece letto interamente prima della chiamata del tema functions.php<\/em> del tema Parent, ma non ne sostituir\u00e0 gli elementi bens\u00ec vedr\u00e0 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\u00e0 pluggable<\/em>, si potrebbero verificare sovrascritture che andrebbero ad inficiare la creazione delle nuove funzionalit\u00e0 cos\u00ec come le avremmo volute.
\nSar\u00e0 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.
\nIn questi casi, si render\u00e0 necessario agire sull\u2019ordine di lettura degli elementi, in modo tale che il contenuto del file creato nel tema Child (prendiamo lo stesso file\u00a0style.css<\/em> per fare un semplice esempio con elementi gi\u00e0 visti) venga letto sempre dopo il contenuto del corrispondente file\u00a0del tema Parent.
\nPer far ci\u00f2, sar\u00e0 necessario intervenire sul file functions.php<\/em> nel tema Child (nel nostro esempio, sulla chiamata del file\u00a0style.css<\/em>):
\n
\nadd_action( ‘wp_enqueue_scripts’, ‘originalthemex_child_style’, 11<\/span> );<\/span>
\nfunction originalthemex_child_style() {<\/span>
\n\u00a0 \u00a0wp_enqueue_style( ‘child-style’, get_stylesheet_uri() );<\/span>
\n}<\/span><\/p>\nLe istruzioni sopra indicate nel nostro esempio puramente fittizio, faranno s\u00ec che il tema Child venga eseguito con priorit\u00e0 \u201811<\/span>\u2019 (il terzo parametro che \u00e8 stato inserito nella chiamata dell\u2019action hook<\/em>) quindi sempre dopo gli altri elementi del sistema (con priorit\u00e0 di default pari a \u201810\u2019).<\/p>\n