WordPress face parte din viața noastră de peste 16 ani, dar metoda de a adăuga scripturi la teme și pluginuri rămâne un mister pentru mulți dezvoltatori. În acest articol, în cele din urmă am pus capăt confuziei.
Deoarece este una dintre cele mai utilizate biblioteci JavaScript, astăzi discutăm despre cum să adăugați scripturi jQuery la temele dvs. WordPress plugin-uri.
Despre modul de compatibilitate jQuery
Înainte de a începe să adăugați scripturi la WordPress, este important să înțelegeți cum este compatibil jQuery.
După cum probabil știți, WordPress vine cu jQuery deja inclus.
Versiunea jQuery pe WordPress are, de asemenea, un „ Mod de compatibilitate Care este un mecanism pentru a evita conflictele cu alte biblioteci javascript.
O parte din acest mecanism de apărare înseamnă că tu nu poate folosește $semnează direct așa cum ai face în alte proiecte.
În schimb, atunci când scrieți cod jQuery pentru WordPress, ar trebui să utilizați jQuery.
Iată un exemplu de cod:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Problema este că scrierea jQuery de un milion de ori durează mai mult, îngreunează citirea și vă poate împiedica scriptul.
Veștile bune?
Cu câteva modificări, puteți folosi din nou semnul nostru de dolar drăguț.
Apropo, dacă ești nou pentru jQuery , semnul $ este doar un alias pentru jQuery (), apoi un alias pentru o funcție.
Structura de bază arată astfel: $(selector).action(). Semnul dolar definește jQuery ... interogările „(selector)” sau găsește elemente HTML ... și în cele din urmă „acțiunea jQuery ()” este acțiunea care trebuie efectuată asupra elementelor.
Înapoi la modul în care putem rezolva problema noastră de compatibilitate ... iată câteva opțiuni viabile:
1. Introduceți modul stealth jQuery
Prima modalitate de a obține modul de compatibilitate este să vă strecurați prin cod.
De exemplu, dacă vă încărcați scriptul în subsol, vă puteți înfășura codul într-o funcție anonimă, care va mapa jQuery $.
Ca în exemplul de mai jos:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Dacă doriți să adăugați scriptul în antet (pe care ar trebui să îl evitați dacă este posibil, mai multe despre acest lucru mai jos), puteți înfășura totul într-o funcție pregătită pentru document, trecând $pe parcurs.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Introduceți modul „Fără conflict”
O altă modalitate ușoară de a evita explicarea jQuery este trecerea la modul „Fără conflicte” și utilizați o comandă rapidă diferită.
În acest caz: $jîn locul valorii implicite $.
Tot ce trebuie să faceți este să îl declarați în partea de sus a scriptului:var $j = jQuery.noConflict();
Bine, acum știți mai multe despre scrierea unui cod jQuery valid pentru WordPress, să-l adăugăm la noi site-ul web.
Cum se adaugă scripturi jQuery la WordPress
Una dintre cele mai simple modalități de a adăuga scripturi jQuery la WordPress este printr-un proces numit „setare” linia de așteptare ".
De exemplu, site-ul web HTML clasic, am folosi <link> element pentru a adăuga scripturi. WordPress ajunge să facă același lucru, dar vom folosi funcții WP speciale pentru a realiza acest lucru.
În acest fel, gestionează toate dependențele noastre pentru noi (mulțumesc WP!).
Dacă lucrați la o temă, puteți utiliza funcția wp_enqueue_script() în tine functions.php fişier.
Așa arată:
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');
Această funcție necesită cinci argumente:
- $ handle - un handle unic pe care îl puteți utiliza pentru a face referire la script.
- $src – locația fișierului script.
- $ deps - specifică o serie de dependențe.
- $ ver - numărul versiunii scriptului dvs.
- $ in_footer - permite WordPress să știe unde să pună scriptul.
* Un lucru de remarcat $in_footer înseamnă că, în mod implicit, scripturile vor fi încărcate în antet.
Aceasta este o practică proastă și vă poate încetini considerabil site-ul. Prin urmare, dacă doriți să plasați scriptul în subsol, asigurați-vă că acest parametru este setat la adevărat.
Adăugarea de scripturi la administratorul WordPress
De asemenea, puteți adăuga scripturi administratorului. Funcțiile utilizate sunt exact aceleași, trebuie doar să folosiți un cârlig diferit.
De exemplu:
function my_admin_scripts() {
wp_enqueue_script („scriptul-meu-grozav”, plugin_dir_url (__FILE__). „/js/my-great-script.js”, matrice („jquery”), „1.0.0”, adevărat);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
În loc să vă conectați, wp_enqueue_scriptstrebuie să folosim admin_enqueue_scripts.
Cum să dezabonați jQuery de la WordPress
Dar dacă doriți să utilizați o versiune diferită de jQuery decât cea preîncărcată de WordPress?
O puteți coada ... dar asta înseamnă că pe pagină vor exista două versiuni ale jQuery.
Pentru a evita acest lucru, trebuie să anulăm înregistrarea versiunii WP.
Așa arată:
// 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');Este la fel de ușor ca și utilizarea wp_deregister_script () pentru anula înregistrarea jQuery din WP și apoi incluzând scriptul jQuery pe care doriți să îl adăugați.
În exemplul de mai sus, am folosit Biblioteca jQuery găzduită de Google , dar, evident, îl veți înlocui cu adresa URL a propriului script.
Nu ar trebui să salvați scripturile înainte de a le pune în coadă?
Dacă doriți să încărcați scripturile după cum este necesar în loc să le încărcați direct în paginile dvs., puteți salva scriptul mai devreme.
De exemplu, pe wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Odată ce ați făcut acest lucru, puteți apoi pune la coadă scripturile atunci când aveți nevoie de ele:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Nu uitați să folosiți aceleași nume pentru a evita coliziunea cu alte scripturi.
Utilizarea etichetelor condiționate
Utilizați etichete condiționale pentru a vă încărca scripturile numai atunci când este necesar.
Acesta este folosit mai des în administrare, unde doriți să utilizați un script numai pe o anumită pagină (și nu în întregul administrator). De asemenea, economisește lățime de bandă și timp de procesare, ceea ce înseamnă timpi de încărcare mai rapidi pentru dvs site-ul web.
Uită-te la documentarea scripturilor de așteptare în codul WordPress pentru mai multe informații.
Adăugați jQuery la WordPress folosind pluginuri
Directorul de pluginuri WP conține, de asemenea, multe plugin-uri interesante pe care le puteți folosi pentru a insera scripturi în postările, paginile sau Teme WordPress.
Iată câteva exemple de plugin-uri JavaScript / jQuery bine cunoscute: câmpuri personalizate avansate , CSS și JS personalizate simple , stiluri de script n et curățarea resurselor.
Creați-vă propriul proiect jQuery
O mai bună înțelegere a jQuery vă va face munca mai impactantă. Fie pentru propriul site web, fie pentru proiecte client.
jQuery este bine cunoscut pentru simplitatea sa și, așa cum ați învățat (sperăm) din acest articol, adăugarea de scripturi jQuery simple la WordPress este ușoară ca plăcintă odată ce știți cum.
Da, există un pic de cheltuieli generale în comparație cu utilizarea de vanilie HTML, dar există și avantajul suplimentar al gestionării dependenței și clarității.
Nu numai asta, folosirea unor mici trucuri precum ocolirea compatibilității implicite a jQuery WP vă va economisi mult timp, efort și cod umflat.
