WordPress je dio našeg života više od 16 godina, ali način dodavanja skripti u teme i dodatke i dalje ostaje tajna mnogim programerima. U ovom smo članku konačno zaustavili zbrku.
Budući da je to jedna od najčešće korištenih JavaScript biblioteka, danas raspravljamo o tome kako dodati jQuery skripte svojim temama ili WordPress plugins.
O načinu kompatibilnosti jQuery
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čenom jQuery.
Verzija jQueryja na WordPressu također ima " način kompatibilnosti Što je mehanizam za izbjegavanje sukoba s drugim bibliotekama javascripta.
Dio ovog obrambenog mehanizma znači da vi ne pouvez pas koristiti $potpišite izravno 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 u tome što pisanje jQueryja milijun puta traje duže, otežava čitanje i može odvagnuti vašu skriptu.
Dobre vijesti?
Uz nekoliko izmjena, možete ponovo upotrijebiti naš simpatični simbol s malo dolara.
Usput, ako jeste novo u jQueryju , znak $ je samo alias za jQuery (), a zatim pseudonim za funkciju.
Osnovna struktura izgleda ovako: $(selector).action(). Znak dolara definira jQuery ... "(selektor)" postavlja upit ili pronalazi HTML elemente ... i na kraju "jQuery () action" je radnja koja se treba izvršiti nad elementima.
Povratak na to kako možemo riješiti svoj problem kompatibilnosti ... evo nekoliko održivih opcija:
1.Uđite u jQuery prikriveni način
Prvi način da se zaobiđe način kompatibilnosti je ušunjavanje koda.
Na primjer, ako učitate skriptu u podnožju, kod možete omotati anonimnom funkcijom, koja će preslikati jQuery $.
Kao u primjeru u nastavku:
( 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 dokumente, prosljeđujući $uz put.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Uđite u način "Bez sukoba"
Još jedan jednostavan način za izbjegavanje pravopisa jQuery je prebacivanje u način rada "Bez sukoba" i upotrijebite drugu prečac.
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 valjanog jQuery koda za WordPress, dodajmo ga u naš web stranica.
Kako dodati jQuery skripte u WordPress
Jedan od najjednostavnijih načina za dodavanje jQuery skripti u WordPress je postupak nazvan 'postavka' red čekanja ".
Za a web stranica Klasični HTML, koristili bismo <link> stavka za dodavanje skripti. WordPress na kraju radi isto, ali koristit ćemo posebne WP funkcije da bismo to postigli.
Na taj način upravlja svim nama ovisnostima (hvala WP!).
Ako radite na temi, možete koristiti funkciju wp_enqueue_script() u vašem functions.php datoteka.
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 pozivanje na skriptu.
- $src – lokacija datoteke skripte.
- $ deps - određuje niz ovisnosti.
- $ ver - broj verzije vaše skripte.
- $ in_footer - WordPressu daje do znanja gdje staviti skriptu.
* Jedna stvar koju treba napomenuti $in_footer znači da će se skripte po zadanom učitati u zaglavlje.
To 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 true.
Dodavanje skripti administratoru WordPressa
Skripte možete dodati i administratoru. Funkcije koje se koriste potpuno su iste, samo trebate koristiti drugu kuku.
Na primjer:
funkcija my_admin_scripts () {
wp_enqueue_script ('moja-velika-skripta', dodatak_dir_url (__SLIKA__). '/js/my-great-script.js', niz ('jquery'), '1.0.0', true);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
Umjesto da se prijavite, wp_enqueue_scriptsmoramo koristiti admin_enqueue_scripts.
Kako odjaviti jQuery iz WordPress-a
Ali što ako želite koristiti drugu verziju jQueryja od one koju je WordPress učitao?
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 () za poništiti registraciju jQuery s WP-a, a zatim jQuery skriptu koju želite dodati.
U gornjem primjeru koristili smo jQuery knjižnica domaćin Google , ali očito ćete ga zamijeniti URL-om vlastite skripte.
Ne biste li 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
Upotrijebite uvjetne oznake za učitavanje skripti samo po potrebi.
Ovo se češće koristi u adminu, gdje želite koristiti skriptu samo na određenoj stranici (a ne u cijelom adminu). Također štedi propusnost i vrijeme obrade, što znači brže vrijeme učitavanja za vaš web stranica.
Pogledajte na dokumentacija skripti u redu u WordPress Codexu za više informacija.
Dodajte jQuery u WordPress pomoću dodataka
WP direktorij 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 projekt jQuery
Bolje razumijevanje jQueryja samo će učiniti vaš rad dojmljivijim. Bilo za vaše vlastito web mjesto 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 kako.
Da, ima malo dodatnih troškova u usporedbi s korištenjem HTML-a vanilije, ali tu je i dodatna prednost upravljanja ovisnostima i jasnoće.
I ne samo to, koristeći male trikove poput zaobilaženja zadane kompatibilnosti jQuery WP, uštedjet ćete si puno vremena, truda i napuhanog koda.
