Articolo per spiegare come utilizzare correttamente jQuery con WordPress

jQuery come sai è una libreria javascript molto potente che ti consente di poter creare effetti e non solo sul tuo template quasi scrivendo “due righe” di codice proprio come decanta lo slogan: ” Write less do more” (scrivi poco fai molto), anche se in realtà quando ti fai prendere la mano ne scrivi anche più di due :-P, vediamo comunque come usarlo correttamente con WordPress:

Come richiamare jQuery correttamente in un nuovo progetto

Il modo classico per caricare gli script js in un documento HTML è quello di inserire il tag <script type='text/javascript'></script> con la url di dove è situato il file:

<script type='text/javascript' src='miosito.com/js/jquery.js'></script>

WordPress però ci mette a disposizione alcuni strumenti molto utili e potenti allo stesso tempo che ci consentono di poter implementare jQuery nel nostro template o plugin non nel modo tradizionale inserendo il tag script all’interno del codice html ma utilizzando alcune funzioni dedicate che avranno il compito di effettuare un controllo su eventuali dipendenze di jQuery e poter quindi caricare nel giusto ordine tutti i vari file js all’interno del nostro template.

Devi sapere prima di procedere che WordPress ha una versione di jQuery inserita nel core già pronta per essere utilizzata (di solito è abbastanza aggiornata all’ultima versione stabile di jquery, ma non sempre 😉 ), e per caricarla correttamente dovremo inserire questa funzione nel file functions.php del template che stiamo utilizzando:

function italystrap_add_jquery() {
    wp_enqueue_script('jquery');
}

add_action('wp_enqueue_scripts', 'italystrap_add_jquery');

Vediamo però come caricare il file dalla CDN di google.

Utilizzare una CDN come quella di Google può aiutare nell’ottimizzazione delle performance e nel risparmio di banda consumata, ma ricorda, non è la soluzione a tutti i mali.

Per usare la CDN di Google ci sono tre procedure da eseguire in cascata, la prima sarà deregistrare la versione utilizzata da WordPress, la seconda registrare quella presente sulla CDN di Google e la terza includere il la versione appena registrata, il tutto con questa funzione:

function italystrap_add_jquery_googlecdn(){
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, null, true);
    wp_enqueue_script('jquery');
}

add_action( 'wp_enqueue_scripts', 'italystrap_add_jquery_googlecdn' );

Come hai potuto notare ho utilizzato l’ hook wp_enqueue_scripts che provvederà a caricare jQuery solo nel front-end del sito.

Più avanti parlerò meglio dei tag condizionali per una migliore ottimizzazione di caricamento degli script.

Breve spiegazione su wp_enqueue_script e wp_register_script

wp_enqueue_script() e wp_register_script() sono molto simili come funzionamento, entrambe le funzioni accettano gli stessi 5 parametri, anche se ad un primo impatto possono sembrare quasi uguali svolgono invece ruoli differenti, wp_register_script() ha il compito di “registrare” il file js “in memoria” in modo da poterlo richiamare in ogni momento con la funzione wp_enqueue_script('$handle') passandogli solo il parametro con il nome ($handle) del file da caricare, senza di essa nel file HTML non verrebbe inserito nulla.

Al contrario la funzione wp_enqueue_script() può svolgere il compito di caricare il file js anche senza registrarlo precedentemente (a patto che sia sullo stesso server del sito), passandogli anche il parametro $src ovvero la posizione di dov’è ubicato il file.

wp_enqueue_script( $handle, $src );

wp_enqueue_script(), inoltre, se dichiarata la dipendenza esso farà caricare nell’HTML della pagina anche i file js forniti nel core di WordPress già preregistrati al caricamento del core:

wp_enqueue_script( 'mio-script', $src, array('jquery','scriptaculous'), $ver, $in_footer );

In questo caso verrebbe caricato sia jquey che scriptaculous con wp_head() (ovviamente questi devono già essere stati preregistrati altrimenti dovrai registrarli tu con la funzione apposita, qui trovi la lista di tutti quelli presenti con WordPress)

Ora ti starai chiedendo: “Ma allora, quale delle due devo usare?”

Non c’è un modo migliore di un altro, dipende dallo sviluppatore com’è abituato, io per esempio se devo caricare file esterni al server (cdn o altro) uso la funzione wp_register_script() e quindi wp_enqueue_script() come spiegato sopra (solo con l’ultima ho visto che i file esterni non vengono caricati) e invece per caricare i file già presenti sul mio sul server uso solo wp_enqueue_script() (come puoi vedere qui).

Vediamo in dettaglio i vari parametri che è possibile utilizzare:

wp_register_script( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
  • $handle = Nome da associare allo script (può essere una stringa – richiesto)
  • $src = URL dello script (può essere una stringa – opzionale)
  • $deps = Se il file non dipende da nessuno allora inserire false altrimenti inserire il nome dello script da caricare prima (vedi $handle) (Può essere un array( '$handle01' , '$handle02') – opzionale )
  • $ver = La versione del file (io solitamente metto null per evitare problemi di cache) (può essere una stringa – opzionale)
  • $in_footer = Questa è la mia preferita ;-), inserendo true caricherà lo script nel footer prima della chiusura di body (Chicca per velocizzare il rendering della pagina – opzionale).

Come risolvere il problema in caso non sia disponibile la CDN di google

Mettiamo il caso (molto remoto direi) che la CDN di google sia momentaneamente non accessibile nel momento in cui venga richiesta la risorsa (sembra strano ma può succedere ;-)), come possiamo fare?

La soluzione potrebbe essere inserire questo snippet nel nostro codice HTML (ovviamente nel footer ;-)) dove indicheremo al browser di caricare jQuery da un cartella nel nostro server in caso la CDN non sia ragiungibile:

<script>window.jQuery || document.write('<script src="mia url della cartella di jQuery/js/jquery-1.10.2.min.js"></script>')</script>

Ma ovviamente noi lavoriamo con WordPress e come tutti i vari script questi hanno bisogno di essere caricati in sequenza rispettando le varie dipendenze per evitare il mancato funzionamento di qualche plugin che utilizza jQuery, grazie a questa funzione lo snippet precedente verrà caricato proprio dopo la CDN e prima degli altri script-“figli”:

function italystrap_jquery_local_fallback($src, $handle = null){

    static $add_jquery_fallback = false;
    if ($add_jquery_fallback) {
        echo '<script>window.jQuery || document.write('<script src="' . get_template_directory_uri() . '/js/jquery-1.10.2.min.js"></script>')</script>' . "n";
        $add_jquery_fallback = false;
    }
    if ($handle === 'jquery') {
        $add_jquery_fallback = true;
    }
    return $src;
}

add_action( 'wp_footer', 'italystrap_jquery_local_fallback' );

(Qui trovi il file con la funzione)

(Soluzione adottata anche dal template Roots)

Caricare gli script solo dove necessario

Mettiamo il caso in cui stiamo utilizzando uno script per creare una slide solo in home page, come puoi ben immaginare sarà inutile caricarlo in tutte le altre pagine poiché potrebbe inficiare sulle performance del resto del sito, meno files facciamo caricare per le varie pagine più veloce sarà il download della risorsa e di conseguenza sarà più veloce anche il rendering e il painting della risorsa stessa, per evitare questo utilizzeremo i tag condizionali di WordPress.

I tag condizionali ci consentono di effettuare operazioni in determinate circostanze e non in altre, per esempio appunto evitare di caricare script in pagine dove effettivamente non ci servono (ovviamene ci consentono di fare molto di più, ad ogni modo ti rimando alla pagina dedicata sul codex per avere maggiori informazioni).

Ora vediamo come risolvere il problema posto prima, evitare che lo script della slide in home page venga caricato in tutte le altre pagine, per fare questo semplicemente creiamo una if in cui diciamo appunto di caricarlo solo in home:

if ( is_home() || is_front_page() ){
    //Registra il mio script
}

Oppure possiamo caricarlo ovunque ma non in home page:

if ( !is_home() || !is_front_page() ){
    //Registra il mio script
}

Ovviamente possiamo anche decidere di caricare script solo negli articoli (is_single()), solo nelle pagine (is_page()), nelle categorie, tag ecc (per conoscere meglio i tag condizionali vai alla pagina dedicata sul codex), insomma, il limite è solo la fantasia 😉

Caricare gli script anche nel back-end

Come hai potuto vedere nei vari snippets precedenti le funzioni create sono state “agganciate”, grazie alla funzione add_action(), al rispettivo hook wp_enqueue_script, questo ci consente di poter caricare i file nel front-end del sito, ma nel caso tu abbia bisogno di caricare qualche file nel pannello admin o nel login del sito ecco qui una piccola lista con rispettivo link al codex:

Come scrivere codice jquery funzionante

Ora che abbiamo caricato correttamente la libreria jquery vediamo come scrivere il codice che andremo ad utilizzare nel nostro progetto.

Ti consiglio di creare un file js dove inserire il tuo codice personale che potresti chiamare per esempio custom.js e caricarlo nel template come hai appena letto precedentemente ricordandoti di inserire la dipendenza per jQuery, jQuery essendo un file abbastanza corposo preferisco sempre lasciarlo da solo e accoppiarlo con un secondo file ove inserisco il mio codice personalizzato, anche se questo comporta una richiesta HTTP aggiuntiva rende più veloce il download dei file poiché entrambi sono di dimensioni “accettabili”, molto meglio caricare due file di 100K (che verranno scaricati in parallelo o quasi) che uno unico da 200K (essendo più grande impiegherebbe il doppio del tempo rispetto al file da 100K).

La pratica più comune per chi ha già utilizzato jQuery su qualsiasi file html sarebbe quella di inserire il codice in questo modo:

$(document).ready(function() {
    jQuery(#somefunction) ...
});

Purtroppo però questo non funzionerà poiché la funzione $() è già utilizzata e quindi andrà in conflitto restituendo questo errore:

TypeError: $ is not a function

Per fortuna però che il simbolo del dollaro è solo l’alias di jQuery e quindi in pratica basta cambiare lo snippet in questo modo per farlo funzionare:

jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

L’unica pecca è che dovremo scrivere sempre jQuery per esteso anche all’interno di document.ready:

jQuery(document).ready( function() {
    jQuery(".site-description").hide("slow");
});

Procedura un po’ scomoda (per quelli pigri come me :-P) specialmente quando abbiamo funzioni complesse e dobbiamo scrivere molto codice, quindi se volessimo continuare ad usare il simobolo $ questo snippet fa al caso nostro:

jQuery(document).ready(function($) {
    $(".site-description").hide("slow");
});

L’unica pecca è che $ funzionerà si come alias di jQuery() ma non funzionerà più come alias per le altre librerie.

Nel caso in cui abbiamo bisogno di eseguire il codice prima che il DOM sia interamente costruito (document.ready) allora possiamo usare questo snippet:

(function($) {
    $(".site-description").hide("slow");
})(jQuery);

Come nello snippet precedente anche in questo caso $ sarà utilizzabile all’interno della funzione ma non sarà più disponibile per le altre librerie.

Questo esempio invece assegna alla variabile $j la funzione jQuery():

var $j = jQuery;
$j(document).ready(function(){
     $j('.wrapper').hide();
});

Così possiamo mantenere libero $ per altre librerie e scrivere codice più pulito

Possiamo fare ancora meglio, vediamo lo snippet precedente con l’itroduzione della funzione noConflict() ideata apposta per evitare conflitti con altre librerie:

var $j = jQuery.noConflict();
$j(document).ready(function(){
    $j(".site-description").hide("slow");
});

E se volessimo usare l’alias nativo $ insieme a noConflict()? Ecco uno snippet che risolve questo problema:

jQuery.noConflict();
jQuery(document).ready(function($){
    $(".site-description").hide("slow");
});

Ora ottimizziamo ancora lo snippet facendo un mix delle tecniche viste fin’ora:

jQuery.noConflict()(function($){
    "use strict";
    $(document).ready(function() {
        alert('alert');
    });
});

Quest’ultimo è anche il metodo che utilizzo io nei miei progetti ed è quello secondo me più pratico e veloce da scrivere (con un bel copia ed incolla ovviamente :-P).

Prima di concludere, hai visto che ho inserito "use strict"; all’interno della mia funzione? Se ti stai chiedendo a cosa serva questa stringa posso dirti che il suo utilizzo è quello di poter scovare errori che solitamente non verrebbero rilevati dal debugger del browser, insomma, una buona scusa per scrivere codice migliore :-).

Ad ogni modo se vuoi approfondire qui un articolo in inglese e qui una guida più completa con tanto di esempi.

Per il momento è tutto e se hai dubbi di qualunque genere oppure sei uno sviluppatore e conosci modi migliori di fare le cose spiegate in questa guida il tuo commento è il benvenuto :-).

Last edit:
 

49 responses to “Come usare jQuery con WordPress correttamente”

  1. ciro

    Ciao, avrei necessità di aggiungere uno script per una chat in un sito di un cliente, inserendo la prima parte del codice dull’header e l’altra su una pagina il tema in uso ha creato dei problemi.
    Primo sulla slide della home se cambiavo posizione al codice tutta la pagina si sballava, c’è modo di definire una procedura standard di caricamento o convertire il tutto in un plugin, la chat e un progetto del cliente.

    • Enea Overclokk

      Ciao Ciro, se vuoi convertire quello script in plugin devi saper sviluppare in php, ad ogni modo ha provato anche ad inserire questo script nel footer prima della chiusura di body? Potrebbero comunque esserci delle incompatibilità con qualche plugin.

      Ciao
      Enea

  2. Maria

    Salve Enea, il tuo articolo è accurato, ma nonostante tutto io non sono stata in grado di comprendere come poter creare ciò che desidero. Voglio inserire un animazione nella home di un sito WordPress (uso il template Stokholm che che prevede nel suo pannello delle opzioni la possibilità d’inserire codice javascript. Mi aiuti a capire qual’è la sintassi giusta per richiamare il codice ch’è collocato in una cartella esterna? Ti ringrazio in ogni caso. Maria

      • Enea Overclokk

        Allora, se il file è sullo stesso dominio basta che usi la funzione wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
        Se il file è esterno al dominio devi usare prima la funzione wp_register_script( $handle, $src, $deps, $ver, $in_footer );
        abbinata a wp_enqueue_script( $handle );

        Quindi prendi l’esempio della funzione che ho scritto nell’articolo

        function tuo_sito_add_my_script(){
    wp_register_script('tuo-gancio', 'http://www.tua-url.tld', false, null, true);
    wp_enqueue_script('tuo-gancio');
}

add_action( 'wp_enqueue_scripts', 'tuo_sito_add_my_script' );

        E riadattalo alle tue esigenze.

  4. Davide

    Ciao Enea,
    Non so se c’entra, ma ci provo lo stesso.. io ho un sito in costruzione e da un po di tempo ho un problema di esubero di CPU sul server che non riesco a risolvere. Pare sia causato da uno script che va in loop. ho disattivato tutti i plugin ed il tema (premium) che avevo caricato, ma niente.. il problema persiste. Come avrai capito non sono un grande esperto di codici :-), magari la soluzione è una di quelle che hai proposto nell’ articolo? Ti ringrazio in ogni caso.

  5. Francesco

    Ciao Enea, faccio siti in WordPress da un po’ di tempo ma non uso jquery e sono in difficoltà.

    ho integrato jquery nel functions.php del mio tema secondo il tuo esempio e poi in una pagina di WordPress ho scritto , in pratica è un’immagine che al passaggio del mouse scompare lasciando il posto ad una tabella.

    Su una pagina html, quindi fuori da wp, funziona benissimo, qui non so come fare…hai consigli da darmi?
    grazie in anticipo

  6. Luca

    Ciao Enea… intanto complimenti perchè a dispetto della maggioranza degli articoli che parlano di questo problema vai in profondita e sei molto chiaro… però sarà che non sono preparato io, ma mi è rimasto un dubbio? Ma il problema $ per i plugin, non si verifica? Cioè registro i plugin con wp_register e poi wp li vede? Perchè per il momento sto cercando di caricare un temuccio fatto dal sottoscritto e, dopo un bel pò, sono riuscito a fargli digerire i css, mentre per jquery sto ancora lottando(e senza jquery e plugin, il mio primo tema resterà per sempre un mai nato)… ciao e …grazie. E bravo.

  7. bambuccia

    Ciao Enea, grazie per la guida, però, essendo un ancora un principiante ho ancora più di mille dubbi su cosa fare realizzare il mio progetto. Ti spiego brevemente: sul mio sito web vorrei apparisse una linguetta sul lato destro dove una volta cliccato esca fuori un form di contatto. Per far si che venga visualizzata in tutte le pagine del sito, devo inserire lo script nell’header.php o nel footer.php? oppure sei a conoscenza di qualche plugin che faccia a caso mio? grazie mille in anticipo

    • Enea Overclokk

      Ciao bambuccia,
      grazie per il tuo commento, purtroppo non conosco plugin con quella funzionalità, hai provato a fare una ricerca qui https://WordPress.org/plugins/ .
      Ad ogni modo se io dovessi inserire script aggiuntivo al mio sito lo metterei sempre nel footer anche se async 😉 (specialmente se parliamo di codice che non ha una reale funzionalità vitale per il sito, ovvero, se manca e il sito funziona è ok).

  8. Gabriele

    Ciao Enea, complimenti per la guida e soprattutto per il tuo sito.
    Vorrei chiederti una mano e spero tu possa aiutarmi. Ho creato una mappa interattiva dell’italia con le regioni cliccabili, e vorrei inserirla nella homepage del mio sito. Ho un file html dove nel head ho le funzioni javascript, e nel body la mappa con tutte le coordinate. Infine ho una cartella con tutte le immagini. Ho inserito la cartella immagini nella cartella del tema, la parte del body come codice html nella homepage, e la parte in javascript nel header.php . Si vede solo la mappa ma al passaggio del mouse ma non le regioni colorate. Scusa la mia ignoranza, sono un neofita. Come faccio a integrare la mappa in WordPress? Grazie in anticipo.

    • Enea Overclokk

      Ciao Gabriele e grazie mille dei complimenti,
      prova a fare il debug della pagina con gli strumenti del browser, per esempio io usando Firefox utilizzo Firebug per il debug, in questo modo puoi vedere dov’è il problema e quindi risolverlo.

      Ciao

  9. Lorenzo Puliti

    Ciao Enea complimenti per l’articolo, scusa la domanda da completo ignorante: la cdn di Google ha sempre la versione aggiornata di jquery?

    • Enea Overclokk

      Ciao Lorenzo e grazie dei compliemnti,
      la cdn di google ha tutte le versioni disponibili e tu dovrai indicare quale usare per il tuo progetto inserendo il numerino nella richiesta, per esempio questa http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js mi caricherà la versione 2.1.1 di jQuery.

      Se hai altre domande chiedi pure.
      Ciao

      • Lorenzo Puliti

        Ok! Grazie Enea. Quindi ogni tanto, quando escono aggiornamenti di jquery bisogna aggiornarlo manualmente dal codice, non c’è possibilità di automatizzare gli aggiornamenti? Te lo chiedo perché mi sono trovato nel sito un malfunzionamento di plugin proprio dovuto a una versione vecchia di jquery…

  11. Lisa

    Ciao Enea,

    avevo ho bisogno di inserire una chat (js) su un sito e grazie al tuo articolo ci sono riuscita, grazie mille! Il problema, però, è che chat si vede solo in homepage, mentre in tutte le altre pagine va a cercare json e jquery dentro la pagine invece che seguire il percorso corretto.

    Ho sbagliato qualcosa? Da cosa potrebbe dipendere?

    Grazie mille

    Lisa

    La funziona che è usato è questa:

    function add_chat_scripts() {
        wp_enqueue_script ( 'chat', get_template_directory_uri() . '/js/chat.js' , array(), true );
        wp_enqueue_script ( 'chat-snippet', get_template_directory_uri() . '/js/snippet.js', array('chat', 'json2', 'jquery'));
}
add_action( 'wp_enqueue_scripts', 'add_chat_scripts' );
    • Enea Overclokk

      Ciao Lisa,
      non mi è chiaro questo passaggio

      mentre in tutte le altre pagine va a cercare json e jquery dentro la pagine invece che seguire il percorso corretto.

      , potresti spiegart meglio?

  12. Michele

    Ciao Enea, articolo perfetto! Sono riuscito finalmente a capire a grandi linee come utilizzare jquery in WordPress dopo molto tempo, quindi GRAZIE MILLE! 🙂

    Ho una domanda da farti,
    sto per creare un sito dove in alto, proprio sotto il menù, dovrò inserire un form di ricerca con vari dropdown, simile a

    Ho trovato ma non riesco a capire come utilizzarla. Riusciresti a darmi una mano per cortesia?

    Grazie mille e buona giornata!

  13. Roby

    Ciao,
    sto cercando di capire da giorni questo articolo, ma trovo delle difficoltà.
    Su wordpress(tema customizr) ho inserito il codice html, il css, poi alla fine della stessa pagina ho inserito lo script che mi da l’effetto che desidero.

    Sul file czr-front.php (prima della chiusura di head) questo richiamo alle librerie esterne: 

    function my_scripts() {
 wp_deregister_script( 'jquery' );
 wp_enqueue_script( 'jquery',get_template_directory_uri() .'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js',true);
 wp_enqueue_script( 'jquery',get_template_directory_uri() .'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js',true);
 wp_enqueue_script( 'jquery',get_template_directory_uri() .'https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.1/jquery.slimscroll.min.js',true);
 wp_enqueue_script( 'jquery',get_template_directory_uri() .'https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/jquery.fullPage.min.js',true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

    Ma non funziona. Secondo te c’è qualcosa di sbagliato?
    Grazie

    • Enea Overclokk

      Ciao Roby,
      hai aggiunto un get_template_directory_uri() . di troppo per ogni wp_enqueue_script(), quando capita che non ti carica stili o script controlla nel sorgente della pagina (CTRL + U) e vedi che url ti ha stampato nello script.

      Dimmi se risolvi.
      Ciao
      Enea

      • Roby

        Grazie intanto per la risposta.
        Ho corretto

         function my_scripts(){
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', true);
  wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js', true);
  wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.1/jquery.slimscroll.min.js', true);
  wp_enqueue_script('jquery', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/jquery.fullPage.min.js', true);
}
add_action('wp_enqueue_scripts', 'my_scripts');

        l’ho inserito in function ma non visualizzo nulla nemmeno nel codice sorgente.
        Se lo inserisco dentro czr-front – head – lo visualizzo nel sorgente ma in ‘ispeziona elemento’ vedo le librerie dentro al body e comunque non succede nulla.
        Ps. nel cod sorgente vedo librerie che forse interferiscono con quelle che sto provando ad inserire, credo..

        e quelle relativi ai pochi plugin utilizzati.
        Forse sono io che non ci arrivo, ma il procedimento che spieghi mi sembra chiaro.

      • Enea Overclokk

        Con la fretta non mi ero accorto subito dell’errore.

        Se il file da includere è esterno al dominio devi usare wp_register_script( $handle, $src, $deps, $ver, $in_footer ); altrimenti non verrà incluso al momento del bisogno.
        Altra cosa findamentale è l’utilizzo corretto dei parametri della funzione, nel terzo parametro hai inserito un valore boleano quando invece quello è il parametro dedicato alle dipendenze.

        La procedura quindi è quella di registrare prima lo script ed includerlo dopo.

        Potenzialmente puoi anche solo registrare lo script e questo verrà incluso se indicato nel 3° parametro dello script che necessiterà di jQuery, sembra complesso ma appreso il meccanismo diventa tutto più facile.

        Rileggi bene l’articolo, prova a riscrivere lo snippet e scrivilo nei commenti.
        Ciao

      • Roby

        Ciao,
        ho riletto e ho capito molto di più, credo che questo vada bene, applicato a functions del tema child.
        Ma nella pagina sorgente non vedo queste stringhe e non succede nulla.

         function my_scripts(){
    wp_register_script( $handle, $src, $deps, $ver, $in_footer );
    wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', array('jquery'), null, true);
    wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js', array('jquery'), null, true);
    wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.1/jquery.slimscroll.min.js', array('jquery'), null, true);
    wp_enqueue_script('jquery', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/jquery.fullPage.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_scripts');

// AUTO GENERATED - Do not modify or remove comment markers above or below:
// END ENQUEUE PARENT ACTION

        script type="text/javascript"

jQuery(document).ready(function ($) {
	
	/* Slide variable */
		var slideIndexBis = 1;
		var sliding = false;
	
       jQuery('#fullpage').fullpage({
		anchors: [
			'page1',
			'page2',
			'page3',
			'page4'
		],
		sectionsColor: [
			'#00B0FF',
			'#00C853',
			'#FF1744',
			'#6200ea'
		]
	});
	
});
/script

        nb ho scritto l’apertura e chiusura dello script perchè non riuscivo ad inviare la risposta

        function my_scripts(){
    wp_register_script( $handle, $src, $deps, $ver, $in_footer );
    wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', array('jquery'), null, true);
    wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js', array('jquery'), null, true);
    wp_enqueue_script('jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.1/jquery.slimscroll.min.js', array('jquery'), null, true);
    wp_enqueue_script('jquery', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/jquery.fullPage.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'my_scripts');

// AUTO GENERATED - Do not modify or remove comment markers above or below:

// END ENQUEUE PARENT ACTION

        e dentro l’html lo script

        jQuery(document).ready(function ($) {
	
	/* Slide variable */
		var slideIndexBis = 1;
		var sliding = false;
	
       jQuery('#fullpage').fullpage({
		anchors: [
			'page1',
			'page2',
			'page3',
			'page4'
		],
		sectionsColor: [
			'#00B0FF',
			'#00C853',
			'#FF1744',
			'#6200ea'
		]
	});
	
});
      • Enea Overclokk

        Non hai sostituito con i valori corretti i parametri della funzione wp_register_script(); che sono:
        $handle = Nome da associare allo script (può essere una stringa – richiesto)
        $src = URL dello script (può essere una stringa – opzionale)
        $deps = Se il file non dipende da nessuno allora inserire false altrimenti inserire il nome dello script da caricare prima (vedi $handle) (Può essere un array( ‘$handle01’ , ‘$handle02’) – opzionale )
        $ver = La versione del file (io solitamente metto null per evitare problemi di cache) (può essere una stringa – opzionale)
        $in_footer = Questa è la mia preferita ;-), inserendo true caricherà lo script nel footer prima della chiusura di body (Chicca per velocizzare il rendering della pagina – opzionale).

        (Lo avevo scritto nell’articolo)

        Se usi delle variabili non valorizzate il PHP ti restituisce degli errori.

        Quindi la tua funzione diventa:

        function my_scripts() {
    wp_register_script( 'jquery', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', false, null, true );
    wp_enqueue_script( 'jquery-easing', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js', array( 'jquery' ), null, true );
    wp_enqueue_script( 'slimScroll', 'https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.1/jquery.slimscroll.min.js', array( 'jquery' ), null, true );
    wp_enqueue_script( 'fullPage', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/jquery.fullPage.min.js', array( 'jquery' ), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

        Vedi la differenza?

  14. Andrea

    Ciao Enea,
    innnazitutto complimenti per il blog che è sempre una grande fonte di soluzioni e spunti.
    Partendo da un semplice template in Html fatto con Bootstrap ho sviluppato un semplice tema WordPress che uso come “prototipo” per fare altri progetti.
    Stavo cercando di fare una versione con il menu di navigazione di tipo “overlay” con un bottone che lo apre e chiude.

    Ho messo il codice html del menu nel file header.php ed il menu compare senza problemi.
    Il Javascript necessario l’ho inserito in file JS chiamato custom.js nella cartella js/

    jQuery.noConflict();
jQuery(document).ready(function($){
      
	
	// Offcanvas side navbar
		//-----------------------------------------------

		if ($("#offcanvas").length>0) {
			$('#offcanvas').offcanvas({
				disableScrolling: false,
				toggle: false
			});
		};

		if ($("#offcanvas").length>0) {
			$('#offcanvas [data-toggle=dropdown]').on('click', function(event) {
			// Avoid following the href location when clicking
			event.preventDefault(); 
			// Avoid having the menu to close when clicking
			event.stopPropagation(); 
			// close all the siblings
			$(this).parent().siblings().removeClass('open');
			// close all the submenus of siblings
			$(this).parent().siblings().find('[data-toggle=dropdown]').parent().removeClass('open');
			// opening the one you clicked on
			$(this).parent().toggleClass('open');
			});
		};
	
	
	}); // End document ready

    Nel file functions.php ho accodato lo script con:

    wp_enqueue_script( 'custom', get_template_directory_uri(). '/js/custom.js', array( 'jquery' ) );

    Esaminando poi la pagina con Ispeziona elemento, compare il messaggio di errore:

    Uncaught TypeError: $(…).offcanvas is not a function
    at HTMLDocument.
    (custom.js?ver=4.8:9)
    at i (jquery.js?ver=1.12.4:2)

    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)

    at Function.ready (jquery.js?ver=1.12.4:2)

    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

    Mi pare di capire che vada in conflitto qualcosa con il Jquery presente in wp-includes/js/jquery.js

    Ho provato a toccare il codice del file custom.js ma senza risultati.
    Il sito è per ora in localhost.

    Grazie mille per l’attenzione!
    Andrea

    • Enea Overclokk

      Ciao Andrea e grazie dei complimenti 🙂

      L’errore dice che Uncaught TypeError: $(…).offcanvas is not a function ovvero che la funzione offcanvas() non c’è, molto probabilmente dovrai includere anche la libreria per poter usufruire dell’effetto che desideri aggiungere visto che non è compresa in jQuery e caricarla prima del tuo script.

  16. roberto

    Ciao,
    mi chiamo roberto, ho letto il tuo articolo e volevo chiederti una cosa riguardo l’inserimento di uno script su pagina wordpress e poi eventualmente caricare la libreria nel modo che hai spiegato.
    Ho trovato questa funzionalità popup

    Ti spiego come sto cercando di fare:
    sulla pagina wordpress carico prima l’html poi lo script src https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

    E poi il codice
    Dopo, lasciando solo lo script type senza src ho tentato di caricare su functions: 

    wp_register_script('contact', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js', false, 'null', true );
wp_enqueue_script('contact', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js', array( 'contact' ), 'null', true );
wp_register_script('contactForm', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js', false, 'null', true );
wp_enqueue_script('contactForm', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js', array( 'contactForm' ), 'null', true );

    ma ancora non funziona.
    Hai un consiglio per cortesia? C’è qualcosa di sbagliato?
    Grazie

    • Enea Overclokk

      Ciao Roberto,

      wp_register_script e wp_enqueue_script sono molto simili, la differenza è che wp_register_script si occupa solo di mettere “in lista” gli script e renderli disponibili al bisogno richiamandoli con wp_enqueue_script, usato principalmente con gli script esterni al dominio del sito, wp_enqueue_script invece si usa sia per caricare gli script precedentemente registrati sia per caricarne altri che però devono essere presenti nel dominio.

      Quindi se voglio caricare jQuery da una CDN (dominio diverso) farò così:

      function italystrap_add_jquery_googlecdn(){

    // Nel nostro caso deregistro prima quello di default di WordPress
    wp_deregister_script('jquery');

    // Quindi registro lo script esterno
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, null, true);

    // Poi lo carico
    wp_enqueue_script('jquery');
}

add_action( 'wp_enqueue_scripts', 'italystrap_add_jquery_googlecdn' );

      Se voglio caricare altri script che dipendono da jQuery allora la struttura è questa:

      wp_enqueue_script( 'mio-script', 'mia/url/completa/dello/script', array('jquery','altra-eventuale-dipendenza'), $ver, $in_footer );

      I parametri accettati sono i medesimi, il primo parametro è il nome che si da allo script e deve essere univoco per evitare conflitti, il secondo parametro è la url dello script da caricare, il terzo parametro deve indicare le dipendenze per poter caricare lo script nell’ordine corretto, per capire meglio questo parametro la domanda da farsi è “Da chi dipende questo script?”, “C’è qualche script che deve essere caricato prima di questo?”, se la risposta è si allora va inserito in un array la lista dei nome degli script precedentemente registrati/caricati, il quarto parametro indica la versione del file e il quinto parametro indica se caricarlo nel footer o nell’header.

      Dimmi se ora è tutto più chiaro.

Lascia un commento

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

Puoi formattare meglio il testo con questi tag HTML

Pre Code Bold Italico Link Quote