La mia folle ricerca di voler approcciare WordPress al pattern MVC ha trovato un nome: Timber, ed in questo articolo spiegherò come integrare Twig con WordPress.
Timber è un plugin che consente di integrare Twig con Wordpress, consentendo di avere un codice più ordinato ed in linea con le best pratice di programmazione. Facendo un piccolo passo indietro, Twig è un potente template engine utilizzato in parecchi framework (es. Symfony per php), consente di separare la grafica dal codice, mantenendo i due livelli ordinati ma soprattutto separati.
E’ da quest’ultimo “capriccio” che mi sono imbattuto per cercare una soluzione concreta che possa soddisfare anche la realizzazione di un tema WordPress senza perdersi nel dedalo di informazioni di codice misto che troppo spesso nella mia esperienza da sviluppatore in team, sono stato costretto a districare.
Ho diversi buoni motivi per farvi apprezzare questo nuovo modo di realizzare un tema WordPress, ed in particolare comprendere perché è importante:
- Manutenibilità: separando i due livelli che chiameremo “Controller” e “View”, è molto più semplice per un web designer risolvere il piccolo pub grafico o cambiare la struttura di una pagina senza preoccuparsi di mandare in crash l’applicazione; è molto più semplice per un programmatore cambiare il flusso di informazioni o inserire delle nuove features senza omettere tag o porzioni di markup che potrebbero danneggiare il codice;
- Velocità: immaginate per un grafico cosa vuol dire dover impostare un tema WordPress, lavorando solo sulla parte di markup senza doversi preoccupare di cicli, query e quant’altro; in maniera opposta, immaginate per un programmatore cosa vuol dire scrivere solo codice;
- Qualità: è indubbio che sviluppando in questa maniera e con le giuste best pratice, rilasceremo un prodotto di assoluta qualità che vale “il prezzo del biglietto”; vedetelo con un modo per livellarvi verso l’alto e chiedetevi perché l’utilizzo di Template Engine all’interno di Framework ed in alcuni casi, di cms è la base, mentre su WordPress no?
Nella metodologia Agile è fondamentale “abbracciare il cambiamento” e adattarsi ad esso, per questo motivo dobbiamo sempre essere pronti ad avere una serie di soluzioni sotto mano e scegliere quella più adatta al progetto tenendo in considerazione le variabili impazzite (Tempi di sviluppo, budget, risorse). Per questo, Twig con WordPress non sempre può essere una soluzione 100% ideale al progetto poiché bisogna tener conto di potenziali “svantaggi” organizzativi:
- Tempi di sviluppo: Si allungano inevitabilmente, in quanto il codice non viene buttato in un unico calderone ma diviso secondo logiche ben precise;
- Grandezza del progetto: Lo consiglio per progetti molto corposi come e-commmerce o portali, personalmente l’ho testato anche su piccoli siti e devo dire che il risultato è stato sorprendente;
- Risorse: Consiglio fondamentale per l’utilizzo di Twig con WordPress è quello di lavorare in team, in modo tale da avere a disposizione un grafico che si occupa del taglio e implementazione del tema ed un programmatore che passa il codice alle viste, in questo modo si ottimizzano le risorse, incarnando al 100% la filosofia di sviluppo.
Come realizzare un tema WordPress con Twig?
In questa guida non spiegherò come si usa Twig, ma come integrarlo con WordPress.
Come prima cosa per realizzare un tema WordPress con Twig, è necessario installare Timber, il plugin per WordPress che si occupa di integrare l’engine di Twig.
Quando l’installazione del plugin andrà a buon fine, si può iniziare a realizzare il tema. In che modo? Come convenzione è sufficiente tenere i due layer di sviluppo separati, ottenendo una struttura simile alla seguente:
Nome Tema/
-----Twig/
---------/master.html.twig
---------/home.html.twig
---------/page.html.twig
---------/single.html.twig
-----index.php
-----page.php
-----single.php
Nella root del tema creo una cartella che ho rinominato “Twig”, essa conterrà tutti i file di layout;
Sempre nella root, cosi come accade solitamente, ci saranno i file con estensione php che conterranno solo il flusso dei dati da passare ai temlate.
Un esempio?
Supponiamo di voler passare titolo, immagine in evidenza e contenuto ad un template di pagina:
File php (page.php, il nostro controller)
$data = array();
if(have_posts())
while(have_posts()) : the_post();
$data['titolo'] = get_the_title();
$data['contenuto'] = get_the_content();
$data['immagine'] = get_the_post_thumbnail();
endwhile;
Timber::render('twig/page.html.twig', $data); //Associo page.php al template corrispondente page.html.twig, passandogli la collection di dati presente in $data
Template corrispondente (la nostra view)
{% extends 'master.html.twig' %}
{% block main %}
{{ titolo }}
{{ contenuto }} {% block main %}
A differenza dei convenzionali header e footer, ho utilizzato un template “master” che contiene tutte le informazioni relative alle parti comuni (header, footer, sidebar), con la proprietà “extends”, sto dicendo a Twig di ereditare il template master.html.twig.
Utilizzare le master page è molto più facile che avere header, footer e sidebar come file separati poiché è molto più semplice cambiare grafica o logica, passando al template la veste adatta.
Risorse utili
Se volete approfondire il discorso Twig, imparando sintassi e metodi, ecco il rimando al sito ufficiale: twig.sensiolabs.org;
Tutta la documentazione del plugin Timber è presente qui: upstatement.com/timber/
Come al solito, per qualsiasi dubbio o domanda scrivete in basso nei commenti e no in privato, in modo tale da condividere con tutti i lettori le soluzioni ad eventuali problemi.
