Come aggiungere correttamente il codice jQuery su WordPress

WordPress fa parte della nostra vita da oltre 16 anni, ma il metodo per aggiungere script a temi e plugin rimane un mistero per molti sviluppatori. In questo articolo, abbiamo finalmente posto fine alla confusione.

Poiché questa è una delle librerie JavaScript più utilizzate, oggi stiamo discutendo come aggiungere script jQuery ai tuoi temi o plug-in WordPress.

Informazioni sulla modalità di compatibilità jQuery

Prima di iniziare ad aggiungere script a WordPress, è importante comprendere la modalità di compatibilità di jQuery.

Come probabilmente saprai, WordPress viene fornito con jQuery già incluso.

La versione di jQuery su WordPress ha anche un " modalità di compatibilità Che è un meccanismo per evitare conflitti con altre librerie javascript.

Parte di questo meccanismo di difesa significa che tu ne pas pouvez usa il $firmare direttamente come faresti in altri progetti.

Invece, quando scrivi codice jQuery per WordPress, dovresti usare jQuery.

Ecco un esempio di quel codice:

/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})

/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})

Il problema è che scrivere jQuery un milione di volte richiede più tempo, rende più difficile la lettura e può appesantire lo script.

Le buone notizie?

Con alcune modifiche, puoi utilizzare nuovamente il nostro simpatico simbolo con un piccolo dollaro.

A proposito, se lo sei nuovo di jQuery , il simbolo $ è solo un alias per jQuery (), quindi un alias per una funzione.

La struttura di base si presenta così: $(selector).action(). Il segno del dollaro definisce jQuery ... il "(selettore)" interroga o trova elementi HTML ... e infine "jQuery () action" è l'azione da eseguire sugli elementi.

Torna a come possiamo aggirare il nostro problema di compatibilità ... ecco alcune opzioni praticabili:

1.Immettere la modalità invisibile jQuery

Il primo modo per aggirare la modalità di compatibilità è intrufolarsi nel codice.

Ad esempio, se carichi lo script nel piè di pagina, puoi racchiudere il codice in una funzione anonima, che mapperà jQuery $.

Come nell'esempio seguente:

( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);

Se vuoi aggiungere il tuo script nell'intestazione (cosa che dovresti evitare se possibile, più su quello sotto), puoi racchiudere tutto in una funzione pronta per il documento, passando $lungo la strada.

jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});

2. Accedere alla modalità "Nessun conflitto"

Un altro modo semplice per evitare di scrivere jQuery è passare alla modalità "Senza conflitti" e usa una scorciatoia diversa.

In questo caso: $jinvece del valore predefinito $.

Tutto quello che devi fare è dichiararlo nella parte superiore della tua sceneggiatura:var $j = jQuery.noConflict();

Ok, ora sai di più sulla scrittura di codice jQuery valido per WordPress, aggiungiamolo al nostro sito web.

Come aggiungere script jQuery a WordPress

Uno dei modi più semplici per aggiungere script jQuery a WordPress è attraverso un processo chiamato 'setting linea d'attesa '.

Per un sito Web HTML classico, useremmo l'estensione  <link> elemento per aggiungere script. WordPress finisce per fare lo stesso, ma useremo speciali funzioni WP per raggiungere questo obiettivo.

In questo modo, gestisce tutte le nostre dipendenze per noi (grazie WP!).

Se stai lavorando su un tema, puoi usare la funzione  wp_enqueue_script() nella vostra  functions.php file.

Ecco come appare:

function my_theme_scripts () {
wp_enqueue_script('mon-grand-script', get_template_directory_uri(). '/js/my-great-script.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Questa funzione accetta cinque argomenti:

1. $ handle: un handle univoco che puoi utilizzare per fare riferimento allo script.
2. $ src - la posizione del file di script.
3. $ deps: specifica un array di dipendenze.
4. $ ver - il numero di versione del tuo script.
5. $ in_footer: consente a WordPress di sapere dove mettere lo script.

* Una cosa da notare  $in_footer significa che per impostazione predefinita gli script verranno caricati nell'intestazione.

Questa è una cattiva pratica e può rallentare notevolmente il tuo sito. Pertanto, se desideri inserire il tuo script nel piè di pagina, assicurati che questo parametro sia impostato su true.

Aggiunta di script all'amministratore di WordPress

Puoi anche aggiungere script all'amministratore. Le funzioni utilizzate sono esattamente le stesse, è sufficiente utilizzare un hook diverso.

Per esempio:

funzione my_admin_scripts () {
wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). "/js/my-great-script.js", array ("jquery"), "1.0.0", true);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');

Invece di accedere, wp_enqueue_scriptsdobbiamo usare admin_enqueue_scripts.

Come annullare l'iscrizione a jQuery da WordPress

Ma cosa succede se si desidera utilizzare una versione diversa di jQuery rispetto a quella precaricata da WordPress?

Puoi metterlo in coda ... ma questo significa che ci saranno due versioni di jQuery sulla pagina.

Per evitare che ciò accada, dobbiamo annullare la registrazione della versione WP.

Ecco come appare:

// include jQuery personalizzato
funzione shapeSpace_include_custom_jquery () {

wp_deregister_script ('jquery');
wp_enqueue_script(
   'jquery', 
   'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js', 
   array(), 
   null, 
   true);
}
 add_action ('wp_enqueue_scripts', 'shapeSpace_include_custom_jquery');

È facile come usare il  wp_deregister_script () per annullare la registrazione jQuery da WP, includendo quindi lo script jQuery che si desidera aggiungere.

Nell'esempio sopra, abbiamo usato il libreria jQuery ospitata da Google , ma ovviamente lo sostituirai con l'URL del tuo script.

Non dovresti salvare gli script prima di metterli in coda?

Se desideri caricare i tuoi script come necessario invece di caricarli direttamente nelle tue pagine, puoi salvare lo script prima.

Ad esempio, il  wp_loaded:

add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}

Dopo averlo fatto, puoi quindi mettere in coda gli script quando ne hai bisogno:

add_action ('wp_enqueue_scripts', 'enqueue_front_scripts');

add_action ('admin_enqueue_scripts', 'enqueue_back_scripts');

Ricorda di usare gli stessi nomi per evitare la collisione con altri script.

Utilizzo di tag condizionali

Utilizza i tag condizionali per caricare i tuoi script solo quando necessario.

Viene utilizzato più spesso nell'amministrazione, dove si desidera utilizzare uno script solo su una pagina specifica (e non nell'intera amministrazione). Risparmia anche larghezza di banda e tempo di elaborazione, il che significa tempi di caricamento più rapidi per il tuo sito web.

Dai un'occhiata a documentazione degli script di accodamento  nel codice WordPress per ulteriori informazioni.

Aggiungi jQuery a WordPress utilizzando i plugin

La directory dei plugin WP contiene anche molti plugin interessanti che puoi usare per inserire script nelle tue pubblicazioni, pagine o temi di WordPress.

Ecco alcuni esempi di plugin JavaScript / jQuery ben noti: campi personalizzati avanzati , CSS e JS personalizzati semplici , stili di script n et pulizia delle risorse.

Crea il tuo progetto jQuery

Una migliore comprensione di jQuery renderà il tuo lavoro più efficace. Sia per il tuo sito web che per i progetti dei clienti.

jQuery è ben noto per la sua semplicità e, come hai (si spera) imparato da questo articolo, aggiungere semplici script jQuery a WordPress è facile come una torta una volta che sai come.

Sì, c'è un po 'di sovraccarico rispetto all'utilizzo di HTML vanigliato, ma c'è anche il vantaggio aggiuntivo della gestione delle dipendenze e della chiarezza.

Non solo, usare piccoli trucchi come aggirare la compatibilità predefinita di jQuery WP ti farà risparmiare un sacco di tempo, fatica e codice gonfio.