Come aggiungere facilmente script jQuery a WordPress

WordPress è intorno a noi da più di un decennio ormai. Anche se la piattaforma è ampiamente famosa per la sua facilità di accesso, l'aggiunta di jQuery a temi e plugin di WordPress è una preoccupazione per molti sviluppatori.

In precedenza abbiamo scritto guide su come risolvere problemi come la schermata bianca della morte di WordPress e mettere il tuo sito WordPress in modalità di manutenzione. E in questo pezzo, spiegheremo come aggiungere jQuery a WordPress, ma prima di approfondire, ecco una breve panoramica della modalità di compatibilità di jQuery.

Modalità di compatibilità di jQuery

È altrettanto importante capire qual è la modalità di compatibilità di jQuery prima di iniziare a utilizzare jQuery in WordPress.

jQuery in WordPress viene precaricato e puoi usarlo nel tuo codice. Tuttavia, il punto qui è che viene fornito anche con la modalità di compatibilità di jQuery, che evita conflitti con altre librerie di diversi linguaggi di programmazione.

Anche se può sembrare abbastanza normale, c'è un leggero problema con questo meccanismo di difesa. Quando usi jQuery in WordPress, dovrai usare il termine " jQuery " invece del nostro buon vecchio segno $ .

Dai un'occhiata a questo esempio.

/* jQuery regolare */

$('.hideable').on('click', function() {

$(questo).hide();

})

/* Modalità di compatibilità */

jQuery('.hideable').on('click', function() {

jQuery(questo).hide();

})

Ora il problema qui non è così grande, ma piuttosto non è molto piacevole. Innanzitutto, devi scrivere " jQuery " ogni volta, il che richiede molto tempo e, in secondo luogo, questo rende il tuo script disordinato e più difficile da leggere.

Ma non preoccuparti, con alcune modifiche puoi aggirare il problema di compatibilità ed essere in grado di utilizzare il buon vecchio segno $.

Per riferimento, $ è un alias per jQuery() e un handle per una funzione.

Ecco come appare una struttura di base.

$(selettore).azione()

Qui, il segno $ si riferisce a jQuery, $(selettore) trova gli elementi HTML e action() definisce l'azione da eseguire su questi elementi.

Ecco alcune tecniche che puoi sfruttare per aggirare il problema di compatibilità di jQuery.

Come superare il problema di compatibilità di jQuery?

1. Entra nella modalità "jQuery Stealth".
2. Entra in modalità "Nessun conflitto".

Entra nella modalità Stealth di jQuery

Fonte immagine: Podfoot

Il primo e più comune modo per aggirare il problema di compatibilità è entrare nella modalità invisibile (diventando furtivo con il tuo codice).

Diciamo che stai provando a caricare lo script nel footer. Avvolgi il codice in una funzione anonima, che alla fine mapperà jQuery su $.

Fare riferimento a questo esempio

(funzione($) {

$('.hideable').on('click', function() {

$(questo).hide();

})

})( jQuery );

Ora, se vuoi aggiungere lo script nell'intestazione, avvolgi tutto in una funzione pronta per il documento e passa $ lungo il percorso.

Ecco un esempio.

jQuery(documento).ready(funzione($) {

$('.hideable').on('click', function() {

$(questo).hide();

})

});

Entra in modalità Nessun conflitto

Ora questo è un modo abbastanza semplice per aggirare i problemi di compatibilità. Tutto quello che devi fare è dichiarare questa riga di codice sopra il tuo script e puoi usare $ j invece del segno $ predefinito.

var $j = jQuery.noConflict();

Ora che sai come usare jQuery in WordPress, passiamo al nostro argomento principale: come aggiungere script jQuery al tuo sito WordPress.

Come aggiungere jQuery ai siti WordPress

Fonte immagine: fl1digital.com

L'aggiunta di jQuery a WordPress potrebbe essere eseguita facilmente tramite un processo chiamato Enqueueing .

Usiamo l'elemento <link> per aggiungere script nei normali siti Web HTML. Possiamo fare la stessa cosa anche in WordPress. Tuttavia, abbiamo bisogno di giocare ad alcune delle funzioni speciali di WordPress per entrare in questo. Nota che in questo modo gestirai tutte le dipendenze per te.

Diciamo che stai lavorando su un tema WordPress. Usa questa funzione nel tuo file functions.php .

wp_enqueue_script()

Ecco come appare.

funzione my_theme_scripts() {

wp_enqueue_script( 'my-great-script', get_template_directory_uri() . '/js/my-great-script.js', array( 'jquery' ), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Ecco cinque argomenti che questa funzione richiederebbe.

1. $handle: un handle univoco che può essere utilizzato per fare riferimento a uno script
2. $src: posizione del file di script
3. $deps: utilizzato per specificare una matrice di dipendenze
4. $ver: il numero di versione dello script
5. $in_footer: per indicare a WordPress dove posizionare lo script

Per impostazione predefinita, lo script verrebbe caricato nell'intestazione del tuo sito Web, il che non è consigliato perché influisce in modo significativo sulla velocità del tuo sito.

Correlati: la tua guida definitiva su come modificare WordPress: HTML, CSS, PHP, JavaScript

Come aggiungere script jQuery all'amministratore di WordPress

Puoi aggiungere jQuery all'amministratore di WordPress usando le stesse funzioni. Tutto quello che devi fare qui è usare un hook diverso.

Ecco un 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' );

Ora scambia semplicemente wp_enqueue_scripts con admin_enqueue_scripts e sei a posto.

Come annullare la registrazione di jQuery in WordPress

Dovresti annullare la registrazione di jQuery di WordPress se sei disposto a utilizzare una versione diversa di jQuery dai precaricati.

Ecco un esempio di come annullare la registrazione di jQuery in WordPress.

// 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');

È semplice. Tutto quello che devi fare è annullare la registrazione di jQuery di WordPress usando wp_deregister_script() e includere lo script che desideri.

Una cosa da ricordare qui è che abbiamo aggiunto la libreria jQuery ospitata da Google in questo esempio. Devi cambiarlo con l'URL del tuo script.

Dovresti registrare gli script prima di accodare?

Puoi registrare lo script in precedenza nel processo se desideri che vengano caricati solo quando necessario nelle tue pagine.

Ecco un esempio

add_action( 'wp_loaded', 'register_all_scripts' );

funzione register_all_scripts()

{

wp_register_script(…);

}

Una volta che hai finito con questo, accoda gli script quando ne hai bisogno. Ecco come.

add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts' );

add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts' );

Utilizzo di tag condizionali

Puoi anche utilizzare i tag condizionali per caricare il tuo jQuery in WordPress solo quando necessario.

Anche se questo metodo viene in genere utilizzato in Admin dove lo desideri solo su pagine specifiche, consente di risparmiare molta larghezza di banda e tempo di elaborazione, migliorando in definitiva le velocità di caricamento del tuo sito.

Fare riferimento alla documentazione degli script di accodamento dell'amministratore di WordPress per ulteriori informazioni sull'utilizzo di tag aggiuntivi.

Come aggiungere jQuery a WordPress usando i plugin

WordPress vanta nella sua directory di plugin di oltre 45000 plugin. Puoi trovare un plug-in per qualsiasi funzionalità che desideri sul tuo sito WordPress.

Lo stesso vale per l'aggiunta di jQuery nelle pagine del sito di WordPress, temi e post, ecc.

Ecco alcuni dei plugin più popolari per aggiungere jQuery a WordPress.

• Campi personalizzati avanzati
• CSS e JS personalizzati semplici
• Script N stili
• Pulizia delle risorse

Conclusione

Quindi ecco qua. Ora sai come aggiungere e utilizzare WordPress jQuery.

Applicare questa conoscenza ai tuoi progetti ti aiuterebbe a creare grandi progetti. Puoi anche leggere le nostre guide definitive su argomenti come JPG vs. JPEG e WordPress White Label per aumentare le tue conoscenze.