Cum să adăugați scripturi jQuery la WordPress cu ușurință

WordPress este în preajma noastră de mai bine de un deceniu. Chiar dacă platforma este renumită pentru ușurința sa de acces, adăugarea jQuery în temele și pluginurile WordPress este o preocupare pentru mulți dezvoltatori.

Am scris anterior ghiduri despre rezolvarea unor probleme precum ecranul alb al morții WordPress și punerea site-ului dvs. WordPress în modul de întreținere. Și în această bucată, vom explica cum să adăugați jQuery la WordPress, dar înainte de a ne aprofunda în asta, iată o scurtă prezentare generală a modului de compatibilitate jQuery.

Modul de compatibilitate jQuery

Este la fel de important să înțelegeți care este modul de compatibilitate al jQuery înainte de a începe să utilizați jQuery în WordPress.

jQuery în WordPress vine preîncărcat și îl puteți utiliza în codul dvs. Cu toate acestea, ideea aici este că vine și cu modul de compatibilitate jQuery, care evită conflictele cu alte biblioteci din diferite limbaje de programare.

Chiar dacă acest lucru poate suna destul de normal, există o ușoară problemă cu acest mecanism de apărare. Când utilizați jQuery în WordPress, va trebui să utilizați termenul „ jQuery ” în loc de vechiul nostru semn $ .

Aruncă o privire la acest exemplu.

/* jQuery obișnuit */

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

$(aceasta).hide();

})

/* Mod de compatibilitate */

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

jQuery(this).hide();

})

Acum problema aici nu este atât de mare, ci mai degrabă nu este foarte plăcută. În primul rând, trebuie să scrieți „ jQuery ” de fiecare dată, ceea ce necesită destul de mult timp, iar în al doilea rând, acest lucru face ca scriptul să pară aglomerat și mai greu de citit.

Dar nu vă faceți griji, cu câteva modificări, puteți ocoli problema de compatibilitate și puteți utiliza vechiul semn $.

Pentru referință, $ este un alias pentru jQuery() și un handle pentru o funcție.

Iată cum arată o structură de bază.

$(selector).action()

Aici, semnul $ se referă la jQuery, $(selector) găsește elemente HTML și action() definește acțiunea care trebuie efectuată asupra acestor elemente.

Iată câteva tehnici pe care le puteți folosi pentru a ocoli problema de compatibilitate a jQuery.

Cum să treci peste problema de compatibilitate a jQuery?

1. Intrați în modul „jQuery Stealth”.
2. Intrați în modul „Fără conflict”.

Intrați în modul Stealth al jQuery

Sursa imagine: Podfeet

Prima și cea mai obișnuită modalitate de a ocoli problema de compatibilitate este să intrați în modul ascuns (deveniți ascunși cu codul).

Să presupunem că încercați să încărcați scriptul în subsol. Înfășurați codul într-o funcție anonimă, care în cele din urmă va mapa jQuery la $.

Consultați acest exemplu

(funcție($) {

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

$(aceasta).hide();

})

})( jQuery );

Acum, dacă doriți să adăugați scriptul în antet, includeți totul într-o funcție pregătită pentru document și transmiteți $ pe parcurs.

Iată un exemplu.

jQuery(document).ready(funcție($) {

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

$(aceasta).hide();

})

});

Intrați în modul Fără conflict

Acum, acesta este o modalitate destul de simplă de a ocoli problemele de compatibilitate. Tot ce trebuie să faceți este să declarați această linie de cod deasupra scriptului și puteți utiliza $j în loc de semnul $ implicit.

var $j = jQuery.noConflict();

Acum că știți cum să utilizați jQuery în WordPress, să trecem la subiectul nostru principal - cum să adăugați scripturi jQuery pe site-ul dvs. WordPress.

Cum să adăugați jQuery pe site-urile WordPress

Sursa imagine: fl1digital.com

Adăugarea jQuery la WordPress ar putea fi făcută cu ușurință printr-un proces numit Enqueueing .

Folosim elementul <link> pentru a adăuga scripturi în site-urile web HTML obișnuite. Același lucru îl putem face și în WordPress. Cu toate acestea, trebuie să jucăm unele dintre funcțiile speciale ale WordPress pentru a intra în asta. Rețineți că acest lucru ar gestiona toate dependențele pentru dvs.

Să presupunem că lucrezi la o temă WordPress. Utilizați această funcție în fișierul functions.php .

wp_enqueue_script()

Iată cum arată.

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

Iată cinci argumente pe care le-ar lua această funcție.

1. $handle: un handle unic care ar putea fi folosit pentru a face referire la un script
2. $src: locația fișierului script
3. $deps: folosit pentru a specifica o matrice de dependențe
4. $ver: numărul versiunii scriptului
5. $in_footer: pentru a instrui WordPress unde să plaseze scriptul

În mod implicit, scriptul va fi încărcat în antetul site-ului dvs., ceea ce nu este recomandat deoarece afectează în mod semnificativ viteza site-ului dvs.

Înrudit: Ghidul tău suprem despre cum să editezi WordPress – HTML, CSS, PHP, JavaScript

Cum să adăugați scripturi jQuery la administratorul WordPress

Puteți adăuga jQuery la administratorul WordPress folosind aceleași funcții. Tot ce trebuie să faci aici este să folosești un alt cârlig.

Iată un exemplu

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

Acum doar schimbă wp_enqueue_scripts cu admin_enqueue_scripts și ești gata.

Cum să anulați înregistrarea jQuery în WordPress

Ar trebui să anulați înregistrarea jQuery WordPress dacă sunteți dispus să utilizați o versiune diferită de jQuery față de preîncărcările.

Iată un exemplu despre cum puteți anula înregistrarea jQuery în WordPress.

// include jQuery personalizat

funcția 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');

E simplu. Tot ce trebuie să faceți este să anulați înregistrarea jQuery WordPress folosind wp_deregister_script() și să includeți scriptul dorit.

Un lucru de reținut aici este că am adăugat biblioteca jQuery găzduită de Google în acest exemplu. Trebuie să-l comutați cu adresa URL a propriului script.

Ar trebui să înregistrați scripturile înainte de a pune în coadă?

Puteți înregistra scriptul mai devreme în proces dacă doriți să se încarce numai atunci când este necesar în paginile dvs.

Iată un exemplu

add_action('wp_loaded', 'register_all_scripts');

funcția register_all_scripts()

{

wp_register_script(…);

}

Odată ce ați terminat cu asta, puneți în coadă scripturile când aveți nevoie de ele. Iată cum.

add_action( 'wp_enqueue_scripts', 'enqueue_front_scripts');

add_action( 'admin_enqueue_scripts', 'enqueue_back_scripts');

Utilizarea etichetelor condiționate

De asemenea, puteți utiliza etichete condiționate pentru a vă încărca jQuery în WordPress numai atunci când este necesar.

Chiar dacă această metodă este folosită de obicei în Admin, acolo unde o doriți doar pe anumite pagini, economisește multă lățime de bandă și timp de procesare, sporind în cele din urmă viteza de încărcare a site-ului dvs.

Consultați documentația scripturilor de așezare admin a WordPress pentru mai multe informații despre utilizarea etichetelor suplimentare.

Cum să adăugați jQuery la WordPress folosind pluginuri

WordPress se laudă cu directorul său de pluginuri cu peste 45000 de pluginuri. Puteți găsi un plugin pentru orice funcționalitate pe care o doriți pe site-ul dvs. WordPress.

Același lucru este pentru adăugarea jQuery în paginile site-ului WordPress, teme și postări etc.

Iată câteva dintre cele mai populare plugin-uri pentru adăugarea jQuery la WordPress.

• Câmpuri personalizate avansate
• CSS și JS personalizat simplu
• Scripturi N Stiluri
• Curățarea activelor

Concluzie

Deci iată. Acum știți cum să adăugați și să utilizați WordPress jQuery.

Aplicarea acestor cunoștințe la proiectele dvs. vă va ajuta să creați proiecte grozave. De asemenea, puteți citi ghidurile noastre definitive despre subiecte precum JPG vs. JPEG și WordPress White Label pentru a vă îmbunătăți cunoștințele.