Ci sono molti tutorial su jQuery e WordPress, ma la maggior parte di loro spiega semplicemente come inserire jQuery in WordPress. Questo tutorial, invece, riguarderà due aspetti specifici di jQuery in WordPress.
Contesto
Il nostro codice jQuery deve essere eseguito solo quando è necessario e solo se vengono soddisfatte determinate condizioni.
Per questo motivo è importante creare un contesto per il nostro codice. Questo contesto è legato alle specifiche sezioni di un sito WordPress e direttamente influenzata dalla presenza o assenza di elementi specifici.
Dove mi trovo?
Come molti di voi già sanno, WordPress aiuta gli sviluppatori nello styling dei loro temi con l'aggiunta di diverse classi all'elemento body.
Tali classi riflettono la posizione della sezione corrente che si sta visitando. Il problema principale di utilizzare jQuery in WordPress è quello di stabilire un contesto in cui eseguire il nostro codice.
Gli elementi su cui operiamo possono essere presenti solo in una particolare sezione di un sito WordPress e non in un altra. Così la necessità di creare un contesto è cruciale.
Siamo in grado di utilizzare le classi CSS per limitare la nostra selezione e richiamare il nostro codice solo quando è veramente necessario.
Per esempio, se vogliamo aggiungere i nostri pulsanti di condivisione tramite jQuery solo su singoli post, possiamo scrivere il seguente codice:
if( $( "body" ).hasClass( "single" ) ) {
// ...
}
L'uso delle classi di WordPress è spesso trascurato dagli autori dei temi. Il risultato è una massiccia iniezione di codice, anche quando non è necessario.
Presenza degli elementi
Per verificare invece la presenza di un elemento:
if( $( "#slider" ).length ) {
//...
}
La proprietà length è presente solo quando un elemento esiste nel DOM. Così facendo riduciamo a zero il rischio di errori causati da elementi inesistenti.