Come includere jQuery in WordPress

Includere jQuery in Wordpress

Includere jQuery in WordPress

In questo breve tutorial vedremo come includere jQuery in WordPress sostituendo le librerie incluse di default caricate in automatico con quelle provenienti dalle API di Google sempre aggiornate all’ultima versione.

Il modo più veloce per includere jQuery in WordPress è sicuramente quello di inserirlo all”interno del file header.php che trovi nella cartella del tuo Tema, il procedimento non è del tutto errato ma potrebbe causare dei problemi una volta caricati alcuni Plugin che necessitano delle librerie jQuery per poter funzionare. Nel metodo qui proposto il codice passa attraverso il file functions.php.

Inserimento di jQuery in functions.php

La soluzione al nostro problema si può risolvere con poche righe di codice inserite nel file functions.php contenuto nella cartella del tema in uso (se non esiste basta semplicemente crearlo). Nel caso specifico dell’esempio andremo a richiamare jQuery direttamente da Googleapis e le posizioneremo (assieme ad eventuali altre librerie) nel footer del blog. In questo modo avremo un miglioramento nel caricamento della pagina
Volendo inserire altre librerie che fanno uso di jQuery basterà richiamarle con wp_enqueue_script. Nell’esempio che segue ho aggiunto il file nomescript.js. È importante che tutte le librerie che verranno richiamate abbiano un nome univoco, nel caso specifico script, che puoi notare prima di get_bloginfo.

// Richiamo jQuery + altri script e includo nel footer
function wpstyle_script() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
                wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', false, '1.4.4', true );
		wp_enqueue_script('jquery');
		wp_enqueue_script('script', get_bloginfo('template_url') . '/js/nomescript.js', array('jquery'), '1.5.0', true);
	}
}
add_action('init', 'wpstyle_script');

Naturalmente per poter funzionare dobbiamo richiamare le nostre librerie jQuery inserendo semplicemente questa riga di codice nel file header.php

<!--?php wp_enqueue_script('jquery'); ?-->

appena prima della chiamata

<!--?php wp_head(); ?-->

18 thoughts on “Come includere jQuery in WordPress

  1. Allora.. Ho seguito il tutto, l’unica differenza è che ho incluso la versione 1.6.2, ma non funziona.. Nel senso che i componenti che fanno uso di jQuery semplicemente non vanno; ho provato allora a eliminare il true finale in wp_register_script, ed effettivamente Featured Content Gallery funziona, ma se provo a richiamare un altro elemento che usa jQuery, quest’ultimo non va..

    Credo di non aver capito bene come si richiama il framework all’interno del template..

  2. In effetti il plugin che uso per integrare codice nell’editor post mi ha troncato un pezzo si articolo.
    Mancava l’ultimo codice .

    Spiego brevemente, il true serve per caricare le varie librerie nel footer della pagina in modo da velocizzarne il caricamento.
    Questo è un esempio dell’inclusione jQuery in questo blog:

    wp_enqueue_script('lazyload', get_bloginfo('template_url') . '/js/lazyload.js', array('jquery'), '1.5.0', true);
    		wp_enqueue_script('corners', get_bloginfo('template_url') . '/js/jquery.corner.js', array('jquery'), '1.1.4', true);	
    		wp_enqueue_script('superfish', get_bloginfo('template_url') . '/js/superfish.js', array('jquery'), '1.5.2', true);	

    Nel codice qui sopra vedi il primo esempio per l’integrazione di Lazyload nelle immagini. Nella stringa ‘lazyload’ è il nome univoco dato alla funzione (puoi mettere ciò che vuoi) poi troviamo il percorso al file, il framework da usare ‘jquery’, la versione del file e l’inclusione nel footer (true o false).
    Fammi sapere se trovi difficoltà 😉

  3. Scusate, ma esiste un url del “lightbox” magari attraverso una pagina html, da poter passare come parametro?

  4. Ciao Danilo, spero possa darmi qualche indicazione circa un problema. Sono nuovo di wordpress e per un progetto sto utilizzando un tema già fatto. Sul forum html.it mi hai indicato alcuni parametri da inserire nel file /js/general.js confesso però che non ho idea di quale sia il parametro da inserire. Spero possa darmi qualche suggerimento. Ti ringrazio davvero tanto.

  5. il tema si chiama am newspaper. Adesso non posso cercarlo. Entro stasera ti faccio sapere dove l’ho scaricato

  6. ciao, volevo sapere come si fa ad integrare textualizer nell’header del tema ‘base’ di wordpress, ho provato in qualsiasi modo ma il tutto non funziona. potete aiutarmi?

  7. Ciao, e passato un po di tempo dall’ultimo post e spero di ricevere risposta. Ho un sito personale di fotografia dove mostro i miei lavori e sono incappato in un problema “credo” semplice mentre invalicabile per il sottoscritto. Se posso vorrei chiedere aiuto a chi vorrà gentilmente fornirmelo. Allora, volevo inserire in una pagina (gallerie) un banner rotator dove inserire le varie categorie di foto. Ho acquistato presso Envato un banner rotator gia fatto in Jquery (http://codecanyon.net/item/dynamic-accordion-banner-rotator/628296) ed il problema sta nel fatto che dopo essermi scervellato per inserirlo, aver letto la guida inserita e tutto il resto non riesco a capirci nulla. Visto e considerato che sono un niubbo in questo campo e che sono praticamente ingorante in materia Jquery e non me ne vogliate, volevo solamente riuscire da solo ad implementare questa cosa sul sito. Se qualcuno può aiutarmi. Intanto vi do il link del mio sito. http://www.rorophoto.it Ciao e grazie

  8. Ciao Roberto, così su due piedi non saprei dirti, non è neanche detto che tu stia sbagliando qualcosa, potrebbe essere il tema che va in conflitto con il banner rotator, se è così gli andrebbe data una sistemata, casomai ti contatto per mail, vediamo se mandandomi i codici sorgenti di alcune pagine riesco a capire dove possa essere il problema. Grazie per averci scritto 😉

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *