Come usare jQuery dentro Wordpress

di Lorenzo Neri
21 visualizzazioni

Come usare jQuery dentro Wordpress? In questo articolo vedremo assieme come poter sfruttare il framework Javascript all’interno di Wordpress in meno di 5 minuti!

Tra le varie cose che si possono fare all’interno di Wordpress, c’è senza dubbio quella di giostrarsi fra un plug-in e un altro, al contempo se sei qui è perchè vuoi capire come usare jQuery dentro Wordpress e quindi includerlo all’interno delle pagine dello stesso, ci ho preso vero?

Un passo per volta ci arriveremo grazie a questo articolo, ma prima: le presentazioni!

Mi chiamo Lorenzo Neri e sono un informatico: articoli come questo che stai leggendo sono parte del mio blog, proprio quello in cui ti trovi ora!

Devi sapere che nel corso della mia vita professionale ho incontrato parecchi problemi, a cui ho cercato di apporre una soluzione: è capitato diverse volte che una di queste soluzioni potesse tornare comoda a tante persone come te che stai leggendo in questo preciso istante! Esatto, le soluzioni di cui parlo, danno vita ad articoli come questo.

Incominciamo!

Come usare jQuery dentro le pagine del tuo sito web Wordpress

In mezzo a tutto quello che ci offre Javascript, che merita una categoria a se stante sul blog, jQuery è senza dubbio uno strumento molto pratico ed efficace: l’obiettivo che ci poniamo adesso, io e te si intende, è quello di usare jQuery appunto, quindi tramite i tuoi script, all’interno di Wordpress.

Il primo punto, consiste nel creare il file Javascript, all’interno della cartella del tuo tema.

Il secondo punto, è quello più semplice di tutti: scrivere il codice del tuo script!

Per esempio qualcosa come:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

Niente di trascendentale giusto?

Ah, ma qualcosa di trascendentale ci sarebbe: ti stai chiedendo il percorso della cartella del tema del tuo sito web Wordpress che al mercato tuo padre comprò, vero?

Partendo dal presupposto che il tuo file Javascript si chiami “pippo.js”, il percorso completo sarebbe qualcosa come:

wp-content/themes/il_nome_del_tuo_tema_corrente/pippo.js

Diciamo che ci sarebbe anche qualcos’altro di trascendentale: l’iscrizione alla mia newsletter che non devi assolutamente dimenticarti di fare 😉

Tornando a noi, il tassello successivo consiste nell’aprire il file “functions.php” all’interno della cartella del tuo tema.

All’interno di esso, sfrutteremo la funzione Wordpress built-in nota come wp_enqueue_script.

Per fartela in breve, essa permette di associare il tuo script Javascript a ciò che Wordpress deve eseguire.

Vediamola un momento:

add_action( 'wp_enqueue_scripts', 'aggiungi_il_mio_script' );
function add_my_script() {
    wp_enqueue_script(
        'pippo', // il nome dello script creato poco fa!
        get_template_directory_uri() . '/pippo.js', // È dove si trova il tuo file!
        array('jquery') // Questo array permette di listare le dipendenze del tuo script
    );
}

Come vedi è una porzione di PHP abbastanza semplice.

In sintesi, per far sì che Wordpress possa usare jQuery, o meglio detto, il tuo script jQuery, ne individua il nome, tramite la cartella indicata, aggiunge e crea una lista delle dipendenze del tuo script che non ti devi dimenticare, per poi infine accodarne l’esecuzione assieme al resto del codice PHP.

Semplice, vero?

Continua a scoprire di più con questi articoli!

Lascia un commento

Questo sito potrebbe fare uso di cookie e siccome l'UE mi obbliga a fartelo presente, eccoti il classico banner dove puoi decidere come gestirli. Accetta Leggi di più