Inserire script jQuery in WordPress

Autore: Gabriele Bellucci
Categorie: jQuery, Wordpress
6 commenti
← Torna al Blog

Inserire script jQuery in WordPress

Come inserire uno script jQuery in WordPress

jQuery è sicuramente una libreria fondamentale per lo sviluppo di ogni sito web. Inserire script jQuery in WordPress è veramente semplice e immediato vediamo adesso come è possibile farlo. NB: ovviamente questo codice dovrà essere inserito all’interno del file functions.php del nostro tema.

function includi_script()
{
   wp_enqueue_script('nome_script', //nome utilizzato per riconoscere univocamente lo script
   get_stylesheet_directory_uri().'/js/nome_script.js', //percorso del file, in questo caso il file si trova nella cartella js nella root del tema
   array('jquery'), // dipendenze, in questo caso essendo uno script jQuery dipende dalla libreria jQuery che è già presente in wordpress
   false, // versione dello script -> parametro del tutto opzionale
   false // in_footer -> se settato a true lo script sarà incluso nel footer, altrimenti nell'head
   );
}
 
add_action('init','includi_script');


6 commenti

  • avatar
    mariella iraci

    il: 8 luglio 2013 Rispondi

    ciao vorrei inserire uno script sul mio blog, si tratta di un booklet in line generale ho trovato il file functions.php ma mi sembra così difficile …il percorso del file..le cartelle..potresti aiutarmi grazie in anticipo Ciao!

    • avatar
      Gabriele Bellucci

      il: 8 luglio 2013 Rispondi

      Certo, non ti preoccupare! Ti ho risposto su Facebook, controlla i tuoi messaggi…

  • avatar
    Ale

    il: 1 novembre 2013 Rispondi

    Ciao, il jquery è già presente nel tema che utilizzo.

    Io vorrei inserire questo script ma non riesco a farlo funzionare :(

    Lo script so trova nella cartella interna al tema
    assets/js/ e si chiama toggle.js

    ho inserito il codice come ha detto in questo modo in functions.php

    function includi_script()
    {
    wp_enqueue_script('toggleDiv', //nome utilizzato per riconoscere univocamente lo script
    get_stylesheet_directory_uri().'/assets/js/toggle.js', //percorso del file, in questo caso il file si trova nella cartella js nella root del tema
    array('jquery'), // dipendenze, in questo caso essendo uno script jQuery dipende dalla libreria jQuery che è già presente in wordpress
    false, // versione dello script -> parametro del tutto opzionale
    false // in_footer -> se settato a true lo script sarà incluso nel footer, altrimenti nell'head
    );
    }
    add_action('init','includi_script');

    toggle.js contiene il seguente codice:
    function toggleDiv(divClass) {
    $(divClass).fadeToggle(1000);
    };

    che al richiamo toglie la visibiltà di un div

    il fatto è che per prova ho usato al posto del codice sopra anche


    $(document).ready(function() {
    alert("ALERT");
    });

    ma non funziona neppure quello :(

    mi sai dare una mano per cortesia?

    Grazie.

    • avatar
      Gabriele Bellucci

      il: 1 novembre 2013 Rispondi

      Prova ad inserire questo codice nel file functions.php

      function includi_script()
      {
      wp_enqueue_script(‘toggleDiv’, //nome utilizzato per riconoscere univocamente lo script
      get_stylesheet_directory_uri().’/assets/js/toggle.js’, //percorso del file, in questo caso il file si trova nella cartella js nella root del tema
      array(‘jquery’), // dipendenze, in questo caso essendo uno script jQuery dipende dalla libreria jQuery che è già presente in wordpress
      false, // versione dello script -> parametro del tutto opzionale
      false // in_footer -> se settato a true lo script sarà incluso nel footer, altrimenti nell’head
      );
      }
      add_action(‘wp_enqueue_scripts,’includi_script’);

      Inoltre nel tuo file toggle.js non puoi chiamare jQuery con la shortcut $, questo perchè la libreria di jQuery caricata in WordPress è settata su noConflict() per prevenire eventuali conflitti con altre librerie Javascript che potresti includere in WordPress.

      Quindi il tuo file toggle.js dovrebbe essere questo:

      jQuery(document).ready( function()
      {
      jQuery( “#Id dell’elemento da cliccare per attivare il toggle” ).click(function() {
      $( “.classe dell’elemento che deve scomparire o apparire” ).toggle( “slow”(;
      });
      });

      Qui puoi trovare un semplice esempio per il toggle jQuery Toggle API.

      Fammi sapere se qualcosa non ti è chiaro. :)

  • avatar
    Giovanni

    il: 2 dicembre 2013 Rispondi

    Grazie! In un primo momento non mi andava. Poi ho sostituito i $ con “jQuery” nelle mie funzioni e ora è ok! :)
    Un saluto!

    • avatar
      Gabriele Bellucci

      il: 3 dicembre 2013 Rispondi

      Prego!

Lascia il tuo commento

I campi contrassegnati con asterisco sono obbligatori.

*