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Ă© è una delle librerie JavaScript piĂ¹ utilizzate, oggi discutiamo su come aggiungere script jQuery ai tuoi temi o plugin di 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 il  <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 (__RISORSE__). "/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.

Questo viene utilizzato piĂ¹ spesso nell'amministrazione, dove desideri utilizzare uno script solo su una pagina specifica (e non nell'intero amministratore). Inoltre, consente di risparmiare 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 di WP contiene anche molti plugin interessanti che puoi utilizzare per inserire script nei tuoi post, pagine o Temi 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.