Il problema principale di JavaScript è che per operare su un documento necessita di quelli che tradizionalmente vengono chiamati hook. Un hook è semplicemente un riferimento nel documento (ad esempio un ID, una classe o un attributo) che permetta di eseguire il codice solo quando è necessario. WordPress dispone di diversi hook e usarli è reso più semplice da jQuery. Il più importante è rappresentato dalle classi dell'elemento body.
Quando usiamo la funzione body_class() WordPress va ad aggiungere una serie di classi all'elemento body il cui nome varia a seconda della sezione del sito in cui ci troviamo. Per esempio nella home page potremmo avere:
<body class="home page page-id-17 page-template-default"></body>
Il nome delle classi ci indica che siamo nella home page, che la home page utilizza un template di pagina predefinito e che il suo ID è 17. Con jQuery possiamo cominciare ad implementare delle funzioni di utility per sfruttare queste informazioni:
(function($) {
$.WP = {
isHome: function() {
if(!$('body').hasClass('home')) {
return false;
}
return true;
}
};
})(jQuery);
Nel nostro caso il metodo WP.isHome() restituisce true perché l'elemento body ha la classe home. Quindi possiamo sfruttare questo hook per eseguire il codice solo nella home page:
if($.WP.isHome()) {
// codice qui
}
Su questa falsariga possiamo implementare un metodo per gestire le pagine di WordPress:
isPage: function(id) {
id = id || null;
if(id == null) {
if($('body').hasClass('page')) {
return true;
} else {
return false;
}
} else {
if($('body').hasClass('page')) {
var clsName = $('body').attr('class');
var pageIDReg = new RegExp('page-id-' + id, 'g');
if(pageIDReg.test(clsName)) {
return true;
} else {
return false;
}
} else {
return false;
}
}
}
Il metodo creato verifica sia che l'elemento body abbia la classe page sia che possieda un ID specifico sotto forma della classe page-id-numero. In questo caso occorre passare al metodo l'ID da verificare:
if($.WP.isPage()) {
// true
}
if($.WP.isPage(20)) {
// false
}
Ovviamente possiamo ripetere la stessa procedura anche per altre classi di WordPress, comprese quelle della sezione amministrativa.