Aký je najlepší spôsob, ako pridať vlastné externé js do wordpress

Ako tvrdí vedúca komunita CMS, 25% internetu používa WordPress. Keď vidíme trendy, nemáme inú možnosť, ako im uveriť, zdá sa, že takmer každý ^druhý blog a každý štvrtý web používa zjavne najvýkonnejší a užívateľsky najpríjemnejší redakčný systém. Tešíme sa na to, že ľudia a vývojári začali presúvať svoje stránky na platformu WordPress.

V tomto úsilí o transformáciu vašej sladkej a jednoduchej webovej stránky na zložitý web s vysokým výkonom CMS sa ľudia zasekávajú o veľmi základný krok a kladú otázku: Ako získam tento externý súbor JavaScript (.js) pre lásku? pracujete v tejto téme WordPress? Ste tiež ten, kto kladie rovnakú otázku? Amigos, ste konečne na správnom mieste: Som tu, aby som vás krok za krokom sprevádzal najjednoduchším možným spôsobom, ako dosiahnuť túto úlohu!

Teraz, za predpokladu, že máte WordPress všetky nainštalované a spustené s externým JS pripraveným, poďme sa dostať do úlohy zahrnúť súbor!

Poznámka: Pre tento tutoriál používam nasledujúci súbor (testrun.js) a témou, na ktorej pracujem, je WordPress's Twenty Sixteen.

alert ( 'Hello');

Poďme začať!

Všetky skripty a zoznamy štýlov sú načítané z funkcie . Php . Toto je správny spôsob, ako ich načítať v rámci WordPress, aby nedošlo ku konfliktu s akýmikoľvek inými skriptmi, ktoré sa načítajú buď samotným WordPress alebo použitím vašich doplnkov. Ak necháte, aby WordPress spravoval všetky zahrnuté súbory, musíte mu dať vedieť, že chcete, aby bol tento súbor zahrnutý do časti záhlavia (začiatok) alebo päty (koniec) súboru. Každá šablóna / téma má svoje vlastné funkcie.php, takže presný názov funkcií, ktoré zahŕňajú všetky súbory, ktoré sa majú zahrnúť, by bolo ťažké zovšeobecniť. Pretože beriem ako tému dvadsaťšesťnásť rokov, nižšie je snímka o tom, ako moje funkcie.php (používané na zahrnutie súborov). Váš by sa mal do istej miery podobať tomuto:

Funkcia wp_enqueue_script prepojí súbor skriptu so vygenerovanou stránkou v správnom čase podľa závislostí skriptu, ak skript ešte nebol zahrnutý a ak boli zaregistrované všetky závislosti. Skript môžete prepojiť s identifikátorom predtým zaregistrovaným pomocou funkcie wp_register_script (), alebo poskytnúť túto funkciu so všetkými parametrami potrebnými na prepojenie skriptu.

Wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) má nasledujúce parametre:

$ handle

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

$ src

(string | bool) (voliteľné) Cesta ku skriptu z koreňového adresára WordPress. Príklad: '/js/myscript.js'.

Predvolená hodnota: false

$ deps

(array) (Voliteľné) Pole registrovaných úchytov, od ktorých závisí tento skript.

Predvolená hodnota: array ()

$ ver

(string | bool) (Voliteľné) Reťazec určujúci číslo verzie skriptu, ak má. Tento parameter sa používa na zabezpečenie toho, aby sa klientovi posielala správna verzia bez ohľadu na ukladanie do pamäte cache, a preto by sa malo zahrnúť, ak je k dispozícii číslo verzie a má zmysel pre skript.

Predvolená hodnota: false

$ in_footer

(bool) (voliteľné) Či má byť skript predtým zakódovaný alebo skôr , Predvolená hodnota „false“. Prijíma „false“ alebo „true“.

Predvolená hodnota: false

Pre tento tutoriál môžete ignorovať funkciu wp_register_script (). Naším cieľom je zahrnúť iba externý JS. Bez toho by to malo fungovať dobre!

Preto, ak chcem svoj skript pomenovať ako „testovací“, nezabudnite, že tento parameter ($ handle) NESMIE nevyhnutne byť názov skutočného súboru a môj súbor má externú závislosť od jQuery a verzie je 1, 0 a načíta sa pred načítaním stránky. potom by moja funkcia vyzerala takto:

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

Ak si všimnete, použil som get_template_directory_uri (), takže reťazec zreťazený po funkcii, tj „ /js/testrun.js “, je vlastne cesta k súboru wrt indexového súboru šablóny .

Váš atribút $ src, ktorý je zdrojom vášho súboru js, sa teda stane: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Preto vyzerá výsledná function.php takto:

Počkajte, takmer sme skončili! Len to uložte teraz a stlačte obnoviť na svojich webových stránkach … mali by ste vidieť JS funguje! Tu je môj:

Pretože sme nastavili voľbu $ in_footer na false, skript sa načíta pred načítaním stránky, ale po načítaní JQuery, ktorý bol pridaný ako závislosť!

A .. Voila! Tu máte .. Úspešne ste do svojho motívu WP zahrnuli externý vlastný súbor JS!

Šťastné kódovanie !!

Referenčné číslo: Enqueue Function: WordPress Codex