Jaký je nejlepší způsob, jak přidat vlastní externí js do wordpress

Jak tvrdí přední komunita CMS, 25% internetu používá WordPress. Když vidíme trendy, nemáme jinou možnost, než jim věřit, zdá se, že téměř každý ^druhý blog a každý čtvrtý web používá zjevně nejsilnější a uživatelsky nejpříjemnější CMS. Těšíme se na to, lidé a vývojáři začali přesouvat své stránky na platformu WordPress.

V této snaze přeměnit váš sladký a jednoduchý web na složitý, vysoce výkonný web CMS se lidé zasekávají o velmi základní krok a ptají se: „ Pro lásku, jak získám tento externí soubor JavaScript (.js)? pracujete v tomto tématu WordPress? Jsi také ten, kdo pokládá stejnou otázku? Amigos, jste konečně na správném místě: Jsem tu, abych vás krok za krokem provedl nejjednodušším možným způsobem k dosažení tohoto úkolu!

Nyní za předpokladu, že máte WordPress nainstalovaný a spuštěný s externím JS připraveným, pojďme se dostat do úkolu zahrnout soubor!

Poznámka: Pro tento tutoriál používám následující soubor (testrun.js) a téma, na kterém pracuji, je WordPress's Twenty Sixteen.

výstraha ('Ahoj');

Pojďme začít!

Všechny skripty a šablony stylů jsou načteny z funkce.php . Toto je správný způsob, jak je načíst v rámci WordPress, aby nedošlo ke konfliktu s jinými skripty, které se načtou buď samotným WordPress nebo použitím vašich pluginů. Necháte-li, aby WordPress spravoval všechny zahrnuté soubory, musíte mu sdělit, že chcete, aby byl tento soubor zahrnut do záhlaví (začátek) nebo zápatí (konec) části souboru. Každá šablona / téma má své vlastní funkce.php, takže přesný název funkcí, který obsahuje všechny soubory, které mají být zahrnuty, by bylo obtížné zobecnit. Vzhledem k tomu, že beru jako téma dvacet šestnáct, níže je snímek toho, jak moje funkce.php (používá se včetně souborů). Vaše by se mělo do určité míry podobat tomuto:

Funkce wp_enqueue_script propojí soubor skriptu se vygenerovanou stránkou v pravý čas podle závislostí skriptu, pokud skript ještě nebyl zahrnut a pokud byly všechny závislosti zaregistrovány. Skript můžete propojit s popisovačem dříve zaregistrovaným pomocí funkce wp_register_script (), nebo poskytnout tuto funkci se všemi parametry nezbytnými pro propojení skriptu.

Wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) má následující parametry:

$ handle

(string) (Povinné) Název skriptu.

$ src

(string | bool) (Volitelné) Cesta ke skriptu z kořenového adresáře WordPress. Příklad: '/js/myscript.js'.

Výchozí hodnota: false

$ deps

(array) (Volitelné) Pole registrovaných úchytů, na kterých tento skript závisí.

Výchozí hodnota: array ()

$ ver

(string | bool) (Volitelné) Řetězec určující číslo verze skriptu, pokud má číslo. Tento parametr slouží k zajištění toho, aby byla klientovi odeslána správná verze bez ohledu na ukládání do mezipaměti, a proto by měla být zahrnuta, pokud je k dispozici číslo verze a má smysl pro skript.

Výchozí hodnota: false

$ in_footer

(bool) (Volitelné) Zda se má skript skrýt dříve nebo dříve . Výchozí „false“. Přijímá „false“ nebo „true“.

Výchozí hodnota: false

Pro tento tutoriál můžete ignorovat funkci wp_register_script (). Naším cílem je zahrnout pouze externí JS. Mělo by to fungovat dobře bez něj!

Proto, pokud chci pojmenovat svůj skript jako „test“, pamatujte, že tento parametr ($ handle) NENÍ nutně název skutečného souboru a můj soubor má externí závislost na jQuery a verzi je 1, 0 a načte se před načtením stránky pak by moje funkce vypadala takto:

wp_enqueue_script ('tutoriál', get_template_directory_uri (). '/js/testrun.js', pole ('jquery'), '1.0', false);

Pokud si všimnete, použil jsem get_template_directory_uri (), takže řetězec zřetězený po funkci, tj. „ /Js/testrun.js “, je ve skutečnosti cesta k souboru wrt indexového souboru šablony .

Takže váš atribut $ src, který je zdrojem vašeho souboru js, se stane: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Proto finální function.php vypadá takto:

Držte se tam, skoro jsme skončili! Prostě to uložte hned teď a stiskněte tlačítko Obnovit na svém webu … měli byste vidět, jak JS funguje! Tady je moje:

Protože jsme nastavili možnost $ in_footer na hodnotu false, načte se skript před načtením stránky, ale po načtení JQuery byl přidán jako závislost!

A .. Voila! Tady to máte .. Úspěšně jste do svého motivu WP zahrnuli externí vlastní soubor JS!

Happy Coding !!

Reference: Enqueue Function: WordPress Codex