Foundation e WordPress: migrare da Foundation 4 a Foundation 5

In nove mesi Foundation 4 è diventato Foundation 5. I designer e gli sviluppatori di Zurb non amano sedere sugli allori e il framework front-end, che con Bootstrap ha alzato l’asticella della qualità dei sistemi di prototipi per il responsive web design dei siti, si presenta pronto a essere scaricato in una nuova versione dal novembre scorso.

Oltre all’abbandono del supporto per Internet Explorer 8 e l’introduzione definitiva di Interchange, le novità più importanti di Foundation 5 sono due:

  1. la previsione di un sistema di impaginazione ‘medio’ per i tablet: una mancanza che fino alla versione 4 obbligava gli autori a introdurre nelle proprie personalizzazioni breakpoints aggiuntivi per adattare il layout a dispositivi che anche fisicamente sono una via di mezzo tra desktop o laptop e smartphone;
  2. l’abbandono di Zepto, scelto come libreria Javascript per Foundation 4, e quindi il ritorno a jQuery, che fornisce maggiore compatibilità con un numero più ampio di plugin e alla resa dei conti si dimostra anche più veloce.

Per un tema di WordPress basato su Foundation, il salto all’indietro con jQuery semplifica lo sviluppo, che può fare a meno di ipotizzare e curare il mancato supporto di Zepto da parte di Internet Explorer (un altro dei limiti di quella libreria). Rispetto alla guida per Foundation 4, per impostare un sito WordPress con Foundation 5 come framework non cambia nulla, se non la parte dedicata ai plugin Javascript — e in meglio. Ecco come.

Attivare le funzioni di WordPress per Foundation 5: i plugin Javascript

I Javascript da registrare nel tema sono tre:

  1. modernizr.js, nella sua versione standard e non in quella precedentemente personalizzata da Zurb;
  2. jQuery.js, versione 2;
  3. foundation.min.js, contenente i plugin veri e propri di Foundation oramai basati su jQuery come libreria di riferimento.

A occuparsi della registrazione provvede la funzione my_foundation_scripts(), che inizia con con modernizr.js:

function my_foundation_scripts() {
wp_register_script(
'modernizr',
get_template_directory_uri() . '/foundation/js/vendor/modernizr.js',
array(),
'2.7.1',
false
); 
wp_enqueue_script('modernizr');

La registrazione dei file Javascript prevede, come sappiamo, cinque parametri, che assolvono a compiti in parte diversi:

  1. nome da assegnare al Javascript;
  2. indirizzo del file Javascript, che nel nostro caso abbiamo posizionato in ‘foundation/js/vendor’ all’interno della cartella del nostro tema;
  3. 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);
  4. numero di versione del Javascript;
  5. 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).

Effettuata la registrazione, il Javascript si accoda al tema con il nome scelto (‘modernizr’) per essere incluso nell’intestazione del documento HTML.

Poi arriva il turno della registrazione di jQuery.js, che a differenza di modernizr.js sarà accodato nel documento HTML prima della chiusura del tag body:

wp_register_script(
'jqueryvendor',
get_template_directory_uri() . '/foundation/js/vendor/jquery.js',
array(),
'2.1.0',
true
);

Infine, tutti gli script dell’interfaccia di Foundation 5 contenuti in foundation.min.js, che dipenderanno dalla libreria jQuery e accodati anch’essi prima della chiusura del tag body:

wp_register_script( 
'foundation.min',
get_template_directory_uri() . '/foundation/js/foundation.min.js', 
array('jqueryvendor'),
'5.1.1',
true
);

A questo punto, non resta che inizializzare Foundation 5 per WordPress.

Paolo Sordi

,
, ,