Dalle richieste di supporto che mi arrivano ogni settimana ho notato una certa predominanza dei problemi relativi a jQuery (e plugin jQuery) nel contesto di WordPress. Ho scritto sinora alcune riflessioni sul tema, ma non mi sono mai soffermato sui problemi specifici di jQuery all'interno di WordPress. Cercherò di rimediare con questo articolo.
Namespace
Il modo migliore per far funzionare il nostro codice jQuery all'interno di WordPress è quello di creare un namespace in cui eseguire il codice. La sintassi è identica a quella vista per i plugin jQuery:
(function($) {
// codice qui
})(jQuery);
Non è necessario usare in questo caso il metodo noConflict(), perchè la funzione self-executing usata crea automaticamente una sandbox in cui il nostro codice può funzionare senza interferenze esterne. Quindi:
(function($) {
$(document).ready(function() {
//...
});
})(jQuery);
Sia che usiate del codice embedded che dei file esterni (cosa che vi raccomando caldamente), dovreste sempre usare questo approccio quando scrivete il vostro codice jQuery.
Dipendenze
Nel sorgente HTML restituito da WordPress dovete sempre rispettare quest'ordine:
- jQuery
- Plugin (se presente)
- Il vostro codice
Quando usate le funzioni wp_register_script() e wp_enqueue_script() dovete sempre seguire la gerarchia di dipendenze specificata poc'anzi, ossia dire a WordPress che:
- Il plugin jQuery dipende da jQuery.
- Il vostro codice dipende da jQuery.
Includere gli script nel footer o meno ha rilevanza solo in termini di performance, ma la gerarchia deve rimanere la stessa. Ad esempio:
wp_register_script('plugin', get_bloginfo('template_url') . '/js/plugin.js', array('jquery'), '1.0', true);
wp_enqueue_script('plugin');
wp_register_script('mycode', get_bloginfo('template_url') . '/js/mycode.js', array('jquery'), '1.0', true);
wp_enqueue_script('mycode');
In questo caso sia il plugin che il vostro script vengono dichiarati come dipendenti da jQuery e questo ci permette di creare la gerarchia corretta per permettere agli script di funzionare.
Interagire con WordPress
Domanda: come posso eseguire il mio codice jQuery in modo diverso a seconda della sezione in cui mi trovo?
Se si interagisce solo con jQuery con il frontend del sito, possiamo usare le classi CSS assegnate all'elemento body per capire in che sezione ci troviamo:
var WordPress = {
body: $('body'),
is_home: function() {
if(!this.body.hasClass('home')) {
return false;
}
return true;
},
is_single: function() {
if(!this.body.hasClass('single')) {
return false;
}
return true;
},
is_page: function() {
if(!this.body.hasClass('page')) {
return false;
}
return true;
},
is_category: function() {
if(!this.body.hasClass('category')) {
return false;
}
return true;
},
is_archive: function() {
if(!this.body.hasClass('archive')) {
return false;
}
return true;
},
// continua
};
Esempio di codice eseguito solo sui singoli post:
if(WordPress.is_single()) {
// codice qui
}
Ovviamente dobbiamo stare attenti a non usare il codice del frontend anche nel backend di WordPress. Possiamo usare la funzione di WordPress is_admin() quando includiamo i nostri script:
if(!is_admin()) {
wp_register_script('plugin', get_bloginfo('template_url') . '/js/plugin.js', array('jquery'), '1.0', true);
wp_enqueue_script('plugin');
wp_register_script('mycode', get_bloginfo('template_url') . '/js/mycode.js', array('jquery'), '1.0', true);
wp_enqueue_script('mycode');
}
Se vogliamo invece caricare uno script solo in una determinata sezione del sito, dobbiamo sempre usare le funzioni condizionali di WordPress:
if(is_single()) {
wp_register_script('mypost', get_bloginfo('template_url') . '/js/mypost.js', array('mycode'), '1.0', true);
wp_enqueue_script('mypost');
}
Come si può notare, in questo caso lo script dipende dal nostro codice principale, quindi anche in questo caso va specificata la corretta gerarchia.