In principio fu 960.gs, ispirato da un articolo di Cameron Moll. Poi, un altro articolo, questa volta di Ethan Marcotte, diede vita a un’altra generazione di framework CSS per la progettazione di siti web: una generazione mobile e reattiva, in grado di adattare grazie alle media queries dei CSS3 la griglia di impaginazione ai diversi dispositivi (computer da scrivania, computer portatili, tablet, smartphone) attraverso i quali differenziamo oramai le nostre navigazioni sul Web. Nel frattempo, con Bootstrap i framework CSS sono diventati qualcosa di più che una base di impaginazione sui quali costruire rapidi prototipi di siti web, da personalizzare poi nel layout grafico e tipografico: sono diventati framework per il front-end a tutto campo, offrendo, oltre a una griglia di impaginazione, classi CSS per la visibilità e la presentazione di una serie di elementi di uso comune, scale modulari per la tipografia e plugin Javascript per l’interfaccia.
Un framework che ha seguito la strada di Bootstrap, nonché suo principale concorrente nei favori dei web designer, è Foundation di Zurb, che dalla versione 4 ha portato alle estreme conseguenze della filosofia mobile first l’approccio al Responsive Web Design.
Ora, mentre lo sviluppo di prototipi statici avviene tranquillamente fuori dalla scatola, una volta scaricato il pacchetto di download del framework di turno, l’integrazione con un Content Management System quale può essere WordPress presenta qualche difficoltà in più. Non si tratta soltanto di applicare un foglio di stile, ma di installare un sistema di presentazione dei contenuti (nel linguaggio di WordPress: un tema) in un sistema di produzione gestione dei contenuti, che peraltro ha regole stringenti che ne governano le potenzialità di estensione e scalabilità. Le soluzioni, a quel punto, sono due: o facciamo affidamento a un tema preconfezionato da altri (ammesso che esista), oppure sviluppiamo il nostro tema.
Mettendo da parte Bootstrap e concentrandoci su Foundation, per WordPress esiste per esempio l’ottimo required+ Foundation, ma il problema è quello tipico delle soluzioni di terze parti: la dipendenza. Per aggiornare il tema (e dunque il nostro framework), dovremo aspettare i rilasci dello sviluppatore, che al momento, per dire, ancora non ha ufficializzato l’allineamento alla Foundation 4, uscita oramai da qualche tempo.
Sviluppando invece il nostro tema di WordPress basato su Foundation 4, potremo essere indipendenti e sviluppare i nostri prototipi e progettare i nostri siti su WordPress, restando sempre in linea con gli aggiornamenti del framework pubblicati da Zurb. Ecco come fare.
1. Scaricare Foundation 4
Dato per scontato che abbiamo un’installazione funzionante di WordPress, la prima operazione da svolgere è scaricare Foundation 4, magari personalizzando il pacchetto dall’interfaccia della pagina. Facciamo attenzione a includere tutti i componenti. La cartella che otterremo si chiamerà ‘foundation-4-x’ e contiene tutti i file CSS e Javascript che fanno funzionare il framework. Rinominiamola in ‘foundation’.
2. Creare il tema di WordPress
Nella cartella ‘wp-content > themes’ creiamo una cartella ‘my-foundation’: sarà la cartella che ospiterà il nostro tema. In ‘my-foundation’ copiamo la cartella ‘foundation’ e creiamo tre file. I primi due sono i file che devono esistere come condizione minima e necessaria perché un tema di WordPress possa funzionare: style.css e index.php. Lasciamo per il momento vuoto index.php e scriviamo in style.css le meta-informazioni del tema:
/* Theme Name: My Foundation Theme URI: http://www.ipertesti.me/ Author: Paolo Sordi Author URI: https://www.ipertesti.it/ Description: My Foundation Theme. Front End Framework provided by Zurb Foundation 4. License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Version: 1.0. Text Domain: myfoundation */
Il terzo file che creiamo è functions.php. È il file che conterrà le funzioni che attiveranno Foundation per il nostro sito su WordPress.
3. Attivare le funzioni di WordPress per Foundation 4: gli stili CSS
Grazie a functions.php, ogni tema di WordPress può contemplare una serie di funzionalità aggiuntive, che per essere sfruttate devono essere preventivamente dichiarate in questo template file. Le sidebar sono sicuramente l’applicazione più popolare tra queste funzionalità, permettendo all’autore di inserire dall’interfaccia grafica dell’amministrazione di WordPress (in Aspetto > Widget) blocchi di contenuto in una barra laterale del sito, attraverso un semplice ‘drag&drop’. Ma, se prendiamo come modello di riferimento il file functions.php di TwentyTwelve, il tema di default di WordPress, ci rendiamo conto che le funzionalità aggiuntive possono essere le più disparate: immagini in evidenza, menu, formati dei post, ecc. E inclusione di fogli di stile e Javascript.
Le specifiche di WordPress raccomandano infatti di associare file CSS e JS attraverso le funzioni wp_enqueue_style() e wp_enqueue_script() , in modo da evitare eventuali conflitti che possano sorgere nel tema (attraverso l’attivazione di plugin, per esempio).
Quanto ai fogli di stile, Foundation si basa su due file: normalize.css e foundation.css. Il primo è l’alternativa al reset dei CSS: mentre la tecnica resa famosa da Eric Meyer azzera tutti gli stili di tutti gli elementi, la normalizzazione sviluppata e distribuita da Nicolas Gallagher si premura di uniformare la presentazione degli elementi del markup che i diversi browser renderebbero in maniera incoerente tra loro.
Il secondo CSS è ovviamente il contenitore di tutte le regole di layout e presentazione del framework, disponibile anche nella versione minificata per ottimizzare le prestazioni di download (foundation.min.css).
Andiamo allora a utilizzare le funzioni di WordPress per includere i due fogli di stile nel nostro tema:
function my_foundation_styles()
{
global $wp_styles;
wp_register_style(
'normalize',
get_template_directory_uri() . '/foundation/css/normalize.css',
array(),
'2.1.1',
'all'
);
wp_enqueue_style('normalize');
wp_register_style(
'foundation.min',
get_template_directory_uri() . '/foundation/css/foundation.min.css',
array(),
'4.1.1',
'all'
);
wp_enqueue_style('foundation.min');
wp_enqueue_style('my-foundation-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_foundation_styles');La funzione my_foundation_styles() registra per iniziare gli stili di cui abbiamo bisogno attraverso la funzione wp_register_style(), con i seguenti parametri:
- nome da assegnare al foglio di stile;
- indirizzo del file del foglio di stile, che nel nostro caso abbiamo posizionato in ‘foundation/css’ all’interno della cartella del nostro tema (vedi sopra);
- un insieme di variabili che possono prevedere altri fogli di stile dai quali il foglio di stile in oggetto potrebbe dipendere (nel nostro caso: nessuno, per cui l’array resta vuoto);
- numero di versione del foglio di stile;
- media al quale applicare il foglio di stile.
Dopo averlo registrato, possiamo includere il foglio di stile con la funzione wp_enqueue_style() specificando come parametro il nome del foglio di stile, previsto al momento della registrazione.
Per finire, attiviamo l’inclusione con la funzione add_action().
4. Attivare le funzioni di WordPress per Foundation 4: i plugin Javascript
Foundation 4, nella sua configurazione totale, utilizza tre Javascript:
- custom.modernizr.js, una versione personalizzata da Zurb di Modernizr (una libreria javascript che serve essenzialmente a rilevare il supporto HTML5 e CSS3 da parte dei browser);
- zepto.js, una libreria alternativa a jQuery;
- foundation.js, contenente i plugin veri e propri di Foundation, basati su Zepto.
Per la registrazione e l’inclusione dei Javascript, percorriamo passi molto simili a quelli fatti per l’inclusione dei fogli di stile. Questa volta, però, la funzione si chiamerà my_foundation_scripts():
function my_foundation_scripts() {
wp_register_script(
'modernizr',
get_template_directory_uri() . '/foundation/js/vendor/custom.modernizr.js',
array(),
'2.6.2',
false
);
wp_enqueue_script('modernizr');Come quella dei fogli di stile, la registrazione dei file Javascript prevede cinque parametri, che assolvono però a compiti in parte diversi:
- nome da assegnare al Javascript;
- indirizzo del file Javascript, che nel nostro caso abbiamo posizionato in ‘foundation/js/vendor’ all’interno della cartella del nostro tema;
- un insieme di variabili che possono prevedere altri Javascript dai quali il file in oggetto potrebbe dipendere (nel nostro caso: nessuno, per cui l’array resta vuoto);
- numero di versione del Javascript;
- valore booleano per il posizionamento del collegamento al Javascript nell’<head> del documento HTML (valore: false) oppure prima della chiusura del tag <body> (valore: true).
Dopo la registrazione, includiamo custom.modernizr.js con il nome scelto: ‘modernizr’.
I problemi, tra WordPress e Foundation 4, iniziano ora, con Zepto. Zepto, infatti, è una libreria molto più leggera di jQuery (che viene registrato direttamente da WordPress al momento dell’installazione), ma ha il (non indifferente) limite di non essere supportata da Internet Explorer. Se allora vogliamo che il nostro prototipo su WordPress supporti anche la visualizzazione corretta sui browser di Microsoft (almeno dalla versione 9), dovremo seguire le indicazioni rilasciate nelle specifiche di Foundation 4 e inserire questo script:
<script>
document.write('<script src=/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>Lo script, che supplisce all’impossibilità di applicare i commenti condizionali a IE10, controlla il supporto di Zepto da parte del browser, e se negativo, adotta jQuery nella versione rilasciata con il pacchetto di Foundation.
Quello che dobbiamo fare a questo punto è creare innanzitutto uno script personalizzato per il nostro tema di WordPress. Scriviamo il codice seguente:
(function($) {
document.write('<script src=/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
} ) (jQuery);e salviamolo in un file chiamato my-foundation-zepto.js nella cartella ‘my-foundation/js/’ del tema.
Adesso, possiamo tornare al file functions.php del tema, registrare e includere lo script:
wp_register_script(
'zepto',
get_template_directory_uri() . '/js/my-foundation-zepto.js',
array(),
'1.0',
true
);
wp_enqueue_script('zepto');Da notare come questa volta il valore dell’ultimo parametro sia true, perché Foundation ci dice di includere la libreria non nell’<head> del documento, ma prima della chiusura dell’elemento <body>.
Tutto bene, allora, se non fosse che il percorso costruito per la localizzazione di Zepto o in alternativa jQuery (‘/js/vendor/’) in my-foundation-zepto.js è pensato per una versione statica di Foundation 4, e non per una versione dinamica basata su un cms come WordPress. Ulteriore problema: nei file Javascript non possiamo utilizzare i template tag di WordPress che ci tornerebbero utili per individuare dinamicamente la directory del nostro tema e puntare correttamente alla libreria (che sia Zepto o jQuery).
Per nostra fortuna, la soluzione risiede in un’altra funzione di WordPress: wp_localize_script(), come ci suggerisce un post su WordPress Answers:
wp_localize_script('zepto', 'my_foundation_dir', array( 'template_dir' => get_bloginfo( 'template_directory' ) ));Localizzato ‘zepto’ all’interno di WordPress, dato un nome all’oggetto Javascript che conterrà i dati e inserita la variabile per il template tag della directory del tema, possiamo finalmente riscrivere my-foundation-zepto.js ricostruendo dinamicamente il percorso che porta all’individuazione delle librerie che ci interessano:
(function($) {
document.write('<script src='
+ my_foundation_dir.template_dir
+ '/foundation/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
} ) (jQuery);Risolto il puntamento alle librerie di Zepto o jQuery, possiamo registrare e includere foundation.min.js, che contiene tutti i plugin Javascript per il front end di Foundation (slider, gallerie, tooltip, ecc.):
wp_register_script(
'foundation.min', //handle
get_template_directory_uri() . '/foundation/js/foundation.min.js',
array('zepto'),
'4.1.1',
true
);Anche foundation.min.js va prima della chiusura del <body> (da cui il valore true per l’ultimo parametro). Inoltre, notiamo che l’array delle dipendenze questa volta prevede il valore ‘zepto’, poiché gli script contenuti in foundation.min.js dipendono tutti da Zepto (o, in alternativa jQuery) e quindi questo file Javascript non potrà essere incluso se prima non sarà incluso il nostro my-foundation-zepto.js (che, come sappiamo, a sua volta includerà la libreria di cui il browser avrà bisogno).
5. Per finire: inizializzare Foundation
Per essere inizializzati gli script di Foundation richiedono di essere chiamati al termine del documento HTML, subito prima della chiusura del’elemento <body>:
<script> $(document).foundation(); </script>
Per farlo in WordPress, abbiamo bisogno di un nuovo file Javascript per il tema, come fatto per my-foundation-zepto.js. Creiamo il file theme.js e salviamolo nella cartella ‘my-foundation/js/’ del tema. All’interno del file, inizializziamo i Javascript come richiede Foundation:
(function($) {
$(document).foundation();
}) (jQuery);Infine, registriamo lo script theme.js come dipendente da ‘foundation’ e includiamolo prima della chiusura dell’elemento <body>:
wp_register_script(
'theme',
get_template_directory_uri() . '/js/theme.js',
array('foundation.min'),
'1.0',
true
);
wp_enqueue_script('theme');La funzione my_foundation_scripts() appare in definitiva così:
function my_foundation_scripts() {
wp_register_script(
'modernizr', //handle
get_template_directory_uri() . '/foundation/js/vendor/custom.modernizr.js',
array(),
'2.6.2',
false
);
wp_enqueue_script('modernizr');
wp_register_script(
'zepto',
get_template_directory_uri() . '/js/iam-zepto.js',
array(),
'1.0',
true //run in footer
);
wp_enqueue_script('zepto');
wp_localize_script('zepto', 'my_foundation_dir', array( 'template_dir' => get_bloginfo( 'template_directory' ) ));
wp_register_script(
'foundation.min', /
get_template_directory_uri() . '/foundation/js/foundation.min.js',
array('zepto'),
'4.4',
true
);
wp_enqueue_script('foundation.min'); //foundation.min.js
wp_register_script(
'theme',
get_template_directory_uri() . '/js/theme.js',
array('foundation.min'),
'1.0',
true
);
wp_enqueue_script('theme');
}
add_action('init', 'my_foundation_scripts');Da ora, non ci resta altro che giocare con gli altri template file, a partire da index.php, per sfruttare appieno Foundation in WordPress.
