Per un template Wordpress che sto realizzando avevo la necessità di modificare la struttura HTML generata dalla funzione wp_nav_menu() di Wordpress. Nella sezione corrente, marcata con la classe CSS current-menu-item, volevo sostituire il link presente nella voce di lista con un elemento strong. Le mie ricerche su Google mi avevano condotto a questo articolo che però spiegava come gestire le classi CSS della funzione di Wordpress, non come sostituire la marcatura della voce corrente. Volevo usare un altro elemento per un motivo molto semplice: la voce corrente non doveva essere cliccabile ma risultare completamente inattiva al fine di prevenire eventuali azioni dell'utente. Ero consapevole del fatto che sicuramente una soluzione diversa da jQuery poteva esistere, ma la deadline si stava avvicinando e le mie ricerche non avevano sortito alcun risultato utile. Vediamo come usare jQuery in Wordpress.
Si supponga che la funzione wp_nav_menu() generi la seguente marcatura:
<div id="navigation">
<ul>
<li class="current-menu-item">
<a href="#">Home</a>
</li>
<li><a href="#">Articoli</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contatti</a></li>
</ul>
</div>
Con jQuery possiamo usare il metodo replaceWith() per sostituire il link della sezione corrente:
$(function() {
var currentItem = $('li.current-menu-item', '#navigation');
var currentLink = $('a', currentItem);
var text = currentLink.text();
currentLink.replaceWith('<strong>' + text + '</strong>');
});
Memorizziamo il valore testuale corrente del link e lo usiamo per sostituirlo con un elemento strong. A questo punto, tuttavia, mi rendo conto che per chi sta usando un tema già pronto può sorgere il problema di usare jQuery all'interno del proprio tema.
Inserire il codice jQuery
Per prima cosa, analizzate il sorgente della vostra home page: se nella marcatura generata da Wordpress è già presente jQuery, potreste vedere qualcosa come il seguente codice:
<head>
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.2.1'>
</script>
</head>
Questo ci dimostra come il nostro tema usi jQuery. Qualora il nostro tema non dovesse usare affatto jQuery, possiamo aggiungere la libreria modificando il file header.php. Dopo l'elemento title e prima della chiamata a wp_head() inseriamo il seguente codice:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
Teniamo presente, tuttavia, che molti plugin di Wordpress usano jQuery, quindi il codice inserito potrebbe essere sovrascritto o creare conflitti qualora il plugin inserisse a sua volta un riferimento a jQuery. Per questo è necessario aggiungere un parametro ver all'URL della libreria:
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.2.1'>
</script>
A questo punto dobbiamo inserire il codice dell'esempio. Il problema è dove inserirlo. Se il nostro tema usa jQuery, dobbiamo individuare il file JavaScript del tema usato per inizializzare tutto il codice jQuery usato nelle nostre pagine. Torniamo al codice sorgente della nostra home page e scorriamo la serie di elementi script ivi presenti. Ad un certo punto potremmo trovare un file del genere:
<script type='text/javascript'
src='http://sito.it/wp-content/themes/nome-tema/includes/js/general.js?ver=3.2.1'>
</script>
Come facciamo a sapere che il file general.js è quello che stiamo cercando? Un indizio è sicuramente il fatto che questo file viene inserito per ultimo, ossia dopo tutti gli altri file JavaScript. Questo perchè il nostro file inizializza tutte le azioni degli altri file. Apriamo quindi il nostro client FTP, navighiamo fino alla cartella in cui è contenuto il file e apriamo il file nel nostro editor. Vedremo qualcosa del genere:
jQuery(document).ready(function() {
// codice
});
Ci siamo: questo è il file che stiamo cercando. Non dobbiamo fare altro che inserire il codice dell'esempio dopo il codice già presente, facendo attenzione a sostituire il wrapper $() con jQuery(). Questo perchè ci sono plugin che potrebbero usare librerie in cui l'alias $() è già presente (come la libreria Prototype) e quindi si verificherebbero dei conflitti.
Usando lo stesso accorgimento possiamo utilizzare il codice dell'esempio anche quando il tema non usa jQuery. Per farlo creiamo un file JavaScript in cui inseriremo il nostro codice in questo modo:
jQuery(document).ready(function() {
var currentItem = jQuery('li.current-menu-item', '#navigation');
var currentLink = jQuery('a', currentItem);
var text = currentLink.text();
currentLink.replaceWith('<strong>' + text + '</strong>');
});
Salviamo il file nello spazio FTP del nostro sito e quindi inseriamo un riferimento a tale file in header.php, subito dopo (non prima!) il riferimento a jQuery:
<!-- riferimento a jQuery -->
<script type="text/javascript" src="http://sito.it/js/mioscriptjquery.js"></script>
Nota sulla posizione dei file
Abbiamo detto sinora che i nostri file JavaScript andavano posizionati all'interno di header.php, ossia nell'elemento head della pagina. In realtà per migliorare la performance del sito, tali file possono anche essere inseriti nel file footer.php, subito prima della chiusura dell'elemento body (ovviamente rispettando l'ordine già indicato).
Esempio finale
Potete visionare l'esempio finale in questa pagina.