WordPress je dio našeg života više od 16 godina, ali način dodavanja skripti u teme i dodatke ostaje misterija mnogih programera. U ovom smo članku konačno zaustavili zbrku.
Budući da je to jedna od najčešće korištenih JavaScript biblioteka, danas razgovaramo o tome kako dodati jQuery skripte vašim temama ili WordPress plugins.
O jQuery načinu kompatibilnosti
Prije nego što počnete dodavati skripte u WordPress, važno je razumjeti način kompatibilnosti jQuery.
Kao što vjerojatno znate, WordPress dolazi s već uključenim jQueryjem.
Verzija jQuery-a na WordPressu također ima " način kompatibilnosti Što je mehanizam za izbjegavanje sukoba s drugim javascript bibliotekama.
Dio ovog odbrambenog mehanizma znači da vi ne može koristiti $potpišite direktno kao što biste to učinili u drugim projektima.
Umjesto toga, prilikom pisanja jQuery koda za WordPress, trebali biste koristiti jQuery.
Evo primjera tog koda:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Problem je što pisanje jQueryja milion puta traje duže, otežava čitanje i može izvagati vašu skriptu.
Dobre vesti?
Uz nekoliko izmjena, možete ponovo upotrijebiti naš slatki simbol malih dolara.
Usput, ako jeste novo za jQuery , znak $ je samo alias za jQuery (), zatim pseudonim funkcije.
Osnovna struktura izgleda ovako: $(selector).action(). Znak dolara definira jQuery ... "(selektor)" postavlja upit ili pronalazi HTML elemente ... i na kraju "jQuery () akcija" je radnja koja se treba izvršiti nad elementima.
Povratak na to kako možemo riješiti naš problem kompatibilnosti ... evo nekoliko održivih opcija:
1.Uđite u jQuery stealth mod
Prvi način da se zaobiđe način kompatibilnosti je ušunjavanje koda.
Na primjer, ako učitate skriptu u podnožju, možete kôd omotati u anonimnu funkciju, koja će preslikati jQuery $.
Kao u donjem primjeru:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Ako želite dodati svoju skriptu u zaglavlje (što biste trebali izbjegavati ako je moguće, više o tome u nastavku), sve možete umotati u funkciju spremnu za dokument, prosljeđujući $usput.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Uđite u režim "Bez sukoba"
Još jedan jednostavan način da se izbjegne pravopis jQuery je prebacivanje u način rada "Bez sukoba" i koristite drugu prečicu.
U ovom slučaju: $jumjesto zadane $.
Sve što trebate učiniti je prijaviti na vrhu skripte:var $j = jQuery.noConflict();
U redu, sada znate više o pisanju važećeg jQuery koda za WordPress, hajde da ga dodamo u naš site Web.
Kako dodati jQuery skripte u WordPress
Jedan od najjednostavnijih načina za dodavanje jQuery skripti u WordPress je postupak nazvan 'postavka' linija čekanja ".
Za site Web Klasični HTML, koristili bismo <link> stavka za dodavanje skripti. WordPress na kraju radi isto, ali mi ćemo koristiti posebne WP funkcije da bismo to postigli.
Na ovaj način upravlja svim našim zavisnostima od nas (hvala WP!).
Ako radite na nekoj temi, možete koristiti funkciju wp_enqueue_script() u vašem functions.php datoteku.
Evo kako to izgleda:
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');
Ova funkcija traje pet argumenata:
- $ handle - jedinstveni handle koji možete koristiti za upućivanje na skriptu.
- $src – lokacija datoteke skripte.
- $ deps - navodi niz zavisnosti.
- $ ver - broj verzije vaše skripte.
- $ in_footer - daje WordPress-u znati gdje da stavi skriptu.
* Jedna stvar koju treba napomenuti $in_footer znači da će se skripte po defaultu učitati u zaglavlje.
Ovo je loša praksa i može znatno usporiti vašu web lokaciju. Stoga, ako želite smjestiti skriptu u podnožje, provjerite je li ovaj parametar postavljen na Tačno.
Dodavanje skripti WordPress administratoru
Takođe možete dodati skripte administratoru. Funkcije koje se koriste su potpuno iste, samo trebate koristiti drugu kuku.
Na primjer:
funkcija my_admin_scripts () {
wp_enqueue_script ('moja-velika-skripta', plugin_dir_url (__SLIKA__). '/js/my-great-script.js', niz ('jquery'), '1.0.0', tačno);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
Umjesto da se prijavite, wp_enqueue_scriptsmoramo koristiti admin_enqueue_scripts.
Kako odjaviti jQuery od WordPress-a
Ali što ako želite koristiti drugačiju verziju jQuery-a od one koju je unaprijed učitao WordPress?
Možete ga staviti u red ... ali to znači da će na stranici biti dvije verzije jQueryja.
Da bismo to izbjegli, moramo poništiti registraciju verzije WP-a.
Evo kako to izgleda:
// uključuje prilagođeni jQuery
functionSpace_include_custom_jquery () funkcija {
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');Jednostavno je kao i koristiti wp_deregister_script () sipati odjavite jQuery s WP-a, a zatim jQuery skriptu koju želite dodati.
U gornjem primjeru koristili smo jQuery biblioteka domaćin Google , ali očito ćete ga zamijeniti URL-om vlastite skripte.
Zar ne biste trebali spremiti skripte prije nego što ih stavite u red?
Ako želite učitati svoje skripte po potrebi, umjesto da ih učitate izravno na svoje stranice - skriptu možete spremiti ranije.
Na primjer, na wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Nakon što to učinite, možete skripte staviti u redoslijed kad ih zatrebate:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Ne zaboravite koristiti ista imena kako biste izbjegli sudaranje s drugim skriptama.
Korištenje uvjetnih oznaka
Koristite uvjetne oznake za učitavanje skripti samo kada je to potrebno.
Ovo se češće koristi u administratoru, gdje želite da koristite skriptu samo na određenoj stranici (a ne u cijelom administratoru). Također štedi propusni opseg i vrijeme obrade, što znači brže vrijeme učitavanja za vaše site Web.
Pogledajte ovo dokumentacija skripti za čekanje u WordPress kodeksu za više informacija.
Dodajte jQuery u WordPress pomoću dodataka
Direktorij WP dodataka također sadrži mnoge zanimljive dodatke koje možete koristiti za umetanje skripti u svoje postove, stranice ili WordPress teme.
Evo nekoliko primjera poznatih dodataka JavaScript / jQuery: napredna prilagođena polja , Jednostavni prilagođeni CSS i JS , stilovi skripte n et čišćenje resursa.
Kreirajte svoj vlastiti jQuery projekt
Bolje razumijevanje jQueryja samo će učiniti vaš rad dojmljivijim. Bilo za vašu vlastitu web stranicu ili za klijentske projekte.
jQuery je poznat po svojoj jednostavnosti, a kao što ste (nadamo se) naučili u ovom članku, dodavanje jednostavnih jQuery skripti u WordPress jednostavno je kao pita kad jednom znate.
Da, ima malo troškova u odnosu na upotrebu vanilin HTML-a, ali tu je i dodatna prednost upravljanja zavisnošću i jasnoće.
I ne samo to, koristeći male trikove poput zaobilaženja zadane kompatibilnosti jQuery WP, uštedjet ćete sebi puno vremena, truda i napuhanog koda.
