WordPress je součástí našich životů již více než 16 let, ale způsob přidávání skriptů k tématům a pluginům zůstává pro mnoho vývojářů záhadou. V tomto článku jsme konečně zmatek ukončili.
Vzhledem k tomu, že se jedná o jednu z nejrozšířenějších JavaScriptových knihoven, dnes diskutujeme o tom, jak přidat skripty jQuery do vašich témat, popř. WordPress pluginy.
O režimu kompatibility jQuery
Než začnete přidávat skripty do WordPress, je důležité porozumět režimu kompatibility jQuery.
Jak asi víte, WordPress je již součástí jQuery.
Verze jQuery na WordPressu má také „ režim kompatibility Což je mechanismus, jak se vyhnout konfliktům s jinými knihovnami javascriptů.
Část tohoto obranného mechanismu znamená, že vy ne pouvez pas použijte $podepisujte přímo, jako byste to udělali v jiných projektech.
Místo toho byste při psaní kódu jQuery pro WordPress měli používat jQuery.
Zde je příklad tohoto 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 psaní jQuery milionkrát trvá déle, ztěžuje čtení a může vážit váš skript.
Dobrá zpráva?
S několika úpravami můžete znovu použít náš roztomilý malý symbol dolaru.
Mimochodem, pokud jste novinka v jQuery , znaménko $ je alias pro jQuery (), pak alias pro funkci.
Základní struktura vypadá takto: $(selector).action(). Znak dolaru definuje jQuery ... dotaz „(selector)“ nebo vyhledá prvky HTML ... a nakonec „akce jQuery ()“ je akce, která se má na prvcích provést.
Zpět na to, jak můžeme vyřešit náš problém s kompatibilitou ... Zde je několik životaschopných možností:
1.Zadejte režim utajení jQuery
První způsob, jak obejít režim kompatibility, je proklouznout do kódu.
Pokud například načtete skript do zápatí, můžete zabalit kód do anonymní funkce, která mapuje jQuery $.
Stejně jako v níže uvedeném příkladu:
( fonction ( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
}) (jQuery);
Pokud chcete přidat svůj skript do záhlaví (kterému byste se měli pokud možno vyhnout, více níže), můžete vše zabalit do funkce připravené na dokument, předáním $po cestě.
jQuery( document ).ready( function( $ ) {
$ ( '.hideable' ).on( 'click' , function () {
$ ( this ).hide();
})
});
2. Vstupte do režimu „Žádný konflikt“
Dalším snadným způsobem, jak se vyhnout pravopisu jQuery, je přepnout do režimu „Bez konfliktů“ a použít jinou zkratku.
V tomto případě: $jmísto výchozího $.
Jediné, co musíte udělat, je to prohlásit v horní části skriptu:var $j = jQuery.noConflict();
Dobře, nyní víte více o psaní platného kódu jQuery pro WordPress, přidejte jej do našeho Webové stránky.
Jak přidat jQuery skripty do WordPress
Jedním z nejjednodušších způsobů, jak přidat skripty jQuery na WordPress, je proces nazývaný nastavení čekací linka ".
Například, Webové stránky Klasické HTML, použili bychom <link> položka pro přidání skriptů. WordPress skončí stejně, ale k dosažení tohoto cíle budeme používat speciální funkce WP.
Tímto způsobem pro nás řídí všechny naše závislosti (díky WP!).
Pokud pracujete na tématu, můžete tuto funkci použít wp_enqueue_script() ve svém functions.php file.
Vypadá to takto:
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');
Tato funkce trvá pět argumentů:
- $ handle - jedinečný popisovač, kterým můžete odkazovat na skript.
- $src – umístění souboru skriptu.
- $ deps - určuje pole závislostí.
- $ ver - číslo verze vašeho skriptu.
- $ in_footer - umožňuje WordPress vědět, kam umístit skript.
* Jedna věc k poznámce $in_footer znamená, že ve výchozím nastavení budou skripty načteny v záhlaví.
To je špatný postup a může to váš web výrazně zpomalit. Pokud tedy chcete umístit skript do zápatí, ujistěte se, že je tento parametr nastaven na hodnotu true.
Přidávání skriptů ke správci WordPress
Můžete také přidat skripty správci. Používané funkce jsou přesně stejné, stačí použít jiný háček.
Například:
funkce 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');
Místo přihlášení wp_enqueue_scriptsmusíme použít admin_enqueue_scripts.
Jak odhlásit jQuery od WordPress
Ale co když chcete použít jinou verzi jQuery, než jakou předinstaloval WordPress?
Můžete to zařadit do fronty… ale to znamená, že na stránce budou dvě verze jQuery.
Abychom tomu zabránili, musíme zrušit registraci verze WP.
Vypadá to takto:
// zahrnuje 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 stejně snadné jako používání wp_deregister_script () pro Zrušení registrace jQuery z WP, včetně skriptu jQuery, který chcete přidat.
Ve výše uvedeném příkladu jsme použili Knihovna jQuery hostovaná společností Google , ale samozřejmě jej nahradíte adresou URL svého vlastního skriptu.
Neměli byste skripty uložit do fronty?
Pokud chcete skripty načíst podle potřeby namísto jejich načítání přímo na vaše stránky - můžete skript uložit dříve.
Například na wp_loaded:
add_action ('wp_loaded', 'register_all_scripts');
fonction register_all_scripts () {
wp_register_script (…);
}
Jakmile to uděláte, můžete skripty zařadit do fronty, když je potřebujete:
| add_action ('wp_enqueue_scripts', 'enqueue_front_scripts'); |
| add_action ('admin_enqueue_scripts', 'enqueue_back_scripts'); |
Nezapomeňte používat stejná jména, aby nedošlo ke kolizi s jinými skripty.
Používání podmíněných značek
Podmíněné značky použijte k načtení skriptů pouze v případě potřeby.
Toto se používá častěji v admin, kde chcete použít skript pouze na konkrétní stránce (a ne napříč celým adminem). Šetří také šířku pásma a čas zpracování, což znamená rychlejší načítání Webové stránky.
Podívejte se na dokumentace skriptů řazení do fronty Další informace naleznete v kodexu WordPress.
Přidejte jQuery na WordPress pomocí pluginů
Adresář WP plugins obsahuje také mnoho zajímavých pluginů, pomocí kterých můžete vkládat skripty do svých příspěvků, stránek popř. Témata WordPress.
Zde je několik příkladů známých pluginů JavaScriptu / jQuery: pokročilá vlastní pole , Jednoduché vlastní CSS a JS , styly skriptů n et čištění zdrojů.
Vytvořte si vlastní projekt jQuery
Díky lepšímu porozumění jQuery bude vaše práce působivější. Ať už pro vlastní web nebo pro klientské projekty.
jQuery je dobře známý svou jednoduchostí a jak jste se (snad) v tomto článku dozvěděli, přidávání jednoduchých skriptů jQuery do WordPressu je snadné, jakmile víte, jak na to.
Ano, ve srovnání s používáním vanilkového HTML je trochu režie, ale je tu také další výhoda správy závislostí a přehlednosti.
Nejen to, že pomocí malých triků, jako je obejití výchozí kompatibility jQuery WP, ušetříte spoustu času, úsilí a nafouklého kódu.
