WordPress je súčasťou nášho života už viac ako 16 rokov, ale spôsob pridávania skriptov k témam a doplnkom zostáva pre mnohých vývojárov záhadou. V tomto článku sme konečne odstránili zmätok.
Keďže ide o jednu z najpoužívanejších JavaScriptových knižníc, dnes diskutujeme o tom, ako pridať skripty jQuery do vašich tém resp. WordPress pluginy.
Informácie o režime kompatibility jQuery
Predtým, ako začnete pridávať skripty do WordPress, je dôležité porozumieť režimu kompatibility jQuery.
Ako pravdepodobne viete, WordPress je už súčasťou jQuery.
Verzia jQuery na WordPress má tiež „ režim kompatibility Čo je mechanizmus, ktorý zabráni konfliktom s inými knižnicami javascriptov.
Časť tohto obranného mechanizmu znamená, že vy ne pouvez pas použiť $podpisujte priamo, ako by ste to robili v iných projektoch.
Namiesto toho by ste mali pri písaní kódu jQuery pre WordPress používať jQuery.
Tu je príklad tohto kódu:
/ * JQuery régulier * /
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
/ * Mode de compatibilité * /
jQuery ( '.hideable' ).on( 'click' , function () {
jQuery( this ).hide();
})
Problém je v tom, že miliónkrát písanie jQuery trvá dlhšie, sťažuje čítanie a môže zaťažiť váš skript.
Dobrá správa?
S niekoľkými úpravami môžete znova použiť náš roztomilý malý symbol dolára.
Mimochodom, ak ste nové pre jQuery , znak $ je iba alias pre jQuery (), potom alias pre funkciu.
Základná štruktúra vyzerá takto: $(selector).action(). Znak dolára definuje jQuery ... dopyt „(selektor)“ vyhľadáva alebo nachádza prvky HTML ... a nakoniec „akcia jQuery ()“ je akcia, ktorá sa má vykonať na prvkoch.
Späť na to, ako môžeme vyriešiť náš problém s kompatibilitou ... tu je niekoľko životaschopných možností:
1.Zadajte režim utajenia jQuery
Prvý spôsob, ako obísť režim kompatibility, je prepašovať sa do kódu.
Napríklad, ak načítate skript do päty, môžete ho zabaliť do anonymnej funkcie, ktorá mapuje jQuery $.
Ako v príklade nižšie:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Ak chcete pridať svoj skript do hlavičky (čomu by ste sa mali vyhnúť, ak je to možné, viac o tom nižšie), môžete všetko zabaliť do funkcie pripravenej na dokument a odovzdať $po ceste.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Vstúpte do režimu „Žiadny konflikt“
Ďalším jednoduchým spôsobom, ako sa vyhnúť pravopisu jQuery, je prepnúť do režimu „Bez konfliktov“ a použiť inú skratku.
V tomto prípade: $jnamiesto predvoleného nastavenia $.
Jediné, čo musíte urobiť, je to vyhlásiť v hornej časti skriptu:var $j = jQuery.noConflict();
Dobre, teraz viete viac o písaní platného kódu jQuery pre WordPress, pridajte ho do nášho webové stránky.
Ako pridať jQuery skripty do WordPress
Jedným z najjednoduchších spôsobov, ako pridať skripty jQuery na WordPress, je proces nazývaný nastavenie čakacia čiara ".
Pre a webové stránky Klasické HTML, použili by sme <link> položka na pridanie skriptov. WordPress končí rovnako, ale na dosiahnutie tohto cieľa použijeme špeciálne funkcie WP.
Týmto spôsobom pre nás riadi všetky naše závislosti (vďaka WP!).
Ak pracujete na téme, môžete použiť túto funkciu wp_enqueue_script() vo vašom functions.php file.
Ako to vyzerá:
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');
Táto funkcia trvá päť argumentov:
- $ handle - jedinečný handle, ktorým môžete odkazovať na skript.
- $src – umiestnenie súboru skriptu.
- $ deps - určuje pole závislostí.
- $ ver - číslo verzie vášho skriptu.
- $ in_footer - umožní WordPressu vedieť, kam umiestniť skript.
* Jedna vec na vedomie $in_footer znamená, že štandardne sa skripty načítajú do hlavičky.
Toto je nesprávny postup a môže váš web značne spomaliť. Preto, ak chcete umiestniť skript do päty, uistite sa, že je tento parameter nastavený na hodnotu true.
Pridávanie skriptov správcovi WordPress
Môžete tiež pridať skripty pre správcu. Použité funkcie sú úplne rovnaké, stačí použiť iný háčik.
napríklad:
funkcia my_admin_scripts () {
wp_enqueue_script ('môj-skvelý-skript', plugin_dir_url (__OBRÁZOK__). '/js/my-great-script.js', pole ('jquery'), '1.0.0', pravda);
}
add_action ('admin_enqueue_scripts', 'my_admin_scripts');
Namiesto prihlásenia wp_enqueue_scriptsmusíme použiť admin_enqueue_scripts.
Ako zrušiť odber jQuery z WordPress
Čo ak však chcete použiť inú verziu jQuery, ako je verzia predinštalovaná programom WordPress?
Môžete to zaradiť do poradia ... ale to znamená, že na stránke budú dve verzie jQuery.
Aby sme tomu zabránili, musíme zrušiť registráciu verzie WP.
Ako to vyzerá:
// obsahuje vlastné jQuery
shapeSpace_include_custom_jquery () function {
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');Je to také ľahké ako použitie wp_deregister_script () pre zrušenie registrácie jQuery z WP, potom vrátane skriptu jQuery, ktorý chcete pridať.
Vo vyššie uvedenom príklade sme použili Knižnica jQuery hostovaná spoločnosťou Google , ale samozrejme ho nahradíte adresou URL svojho vlastného skriptu.
Nemali by ste skripty uložiť do frontu?
Ak chcete skripty načítať podľa potreby namiesto toho, aby ste ich načítali priamo na svoje stránky, môžete skript uložiť skôr.
Napríklad dňa wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Keď to urobíte, môžete skripty zaradiť do fronty, keď ich potrebujete:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Nezabudnite použiť rovnaké mená, aby ste sa vyhli kolízii s inými skriptmi.
Používanie podmienených značiek
Pomocou podmienených značiek načítajte svoje skripty iba v prípade potreby.
Toto sa používa častejšie v admin, kde chcete použiť skript len na konkrétnej stránke (a nie cez celý admin). Šetrí tiež šírku pásma a čas spracovania, čo znamená rýchlejšie načítanie webové stránky.
Pozrite sa na dokumentácia skriptov čakajúcich v rade Ďalšie informácie nájdete v kóde WordPress.
Pridajte si jQuery na WordPress pomocou doplnkov
Adresár WP plugins obsahuje aj mnoho zaujímavých pluginov, pomocou ktorých môžete vkladať skripty do svojich príspevkov, stránok resp. Témy WordPress.
Tu je niekoľko príkladov známych doplnkov JavaScriptu / jQuery: rozšírené vlastné polia , Jednoduché vlastné CSS a JS , štýly skriptu č et čistenie zdrojov.
Vytvorte si vlastný projekt jQuery
Vďaka lepšiemu pochopeniu jQuery bude vaša práca ešte efektívnejšia. Či už pre svoj vlastný web alebo pre klientske projekty.
jQuery je dobre známy svojou jednoduchosťou a ako ste sa (dúfajme) dozvedeli z tohto článku, pridávanie jednoduchých skriptov jQuery do WordPressu je jednoduché ako koláč, keď viete ako.
Áno, v porovnaní s používaním vanilkového HTML existuje trochu réžie, ale je tu aj ďalšia výhoda správy závislostí a prehľadnosti.
Nielen to, že použitím malých trikov, ako je obídenie predvolenej kompatibility jQuery WP, si ušetríte veľa času, úsilia a nafúknutého kódu.
