Hvad er den bedste måde at tilføje brugerdefinerede eksterne js til wordpress

Som påstået af det førende CMS-community bruger 25% af internettet WordPress. Når vi ser tendenser, har vi ingen anden mulighed end at tro dem, næsten hver ^2. blog og hvert 4. sted ser ud til at bruge tilsyneladende det mest kraftfulde og brugervenlige CMS. Ser frem til dette, er mennesker og udviklere begyndt at flytte deres websteder til WordPress Platform.

I denne bestræbelse på at omdanne dit søde og enkle websted til et komplekst, højtydende CMS-sted, sætter folk sig fast på et meget grundlæggende trin og stiller spørgsmålet: For Love, hvordan får jeg denne eksterne JavaScript (.js) -fil arbejder du med dette WordPress-tema? Er du også den, der stiller det samme spørgsmål? Nå amigos, du er endelig på det rigtige sted: Jeg er her for at guide dig trin for trin gennem den mest enkle måde at opnå denne opgave på!

Forudsat at du alle har WordPress installeret og fyret op med ekstern JS klar, lad os gå ind i opgaven med at inkludere filen!

Bemærk: Jeg bruger følgende fil (testrun.js) til denne tutorial, og det tema, jeg arbejder med, er WordPress's Twenty Sixteen.

alert ( 'Hello');

Lad os begynde!

Alle scripts og stilark indlæses inden for funktionerne.php . Dette er den rigtige måde at indlæse dem i WordPress for at undgå konflikt med andre scripts, der bliver indlæst enten af ​​WordPress selv eller dine plugins, der bruges. Hvis du lader WordPress administrere alle de inkluderede filer, er du nødt til at fortælle den, at du vil have denne fil inkluderet i overskriften (start) eller sidefod (slut) del af filen. Hver skabelon / tema har sine egne features.php, så det nøjagtige navn på de funktioner, der indeholder alle de filer, der skal inkluderes, ville være vanskeligt at generalisere. Da jeg tager sekstenogtyve som tema, er nedenunder snapshot af, hvordan mine features.php (bruges til inkludering af filer). Din skal i en grad ligne dette:

Funktionen wp_enqueue_script knytter en script-fil til den genererede side på det rigtige tidspunkt i henhold til script-afhængigheder, hvis scriptet ikke allerede er inkluderet, og hvis alle afhængigheder er registreret. Du kan enten linke et script med et håndtag, der tidligere er registreret ved hjælp af funktionen wp_register_script (), eller give denne funktion alle de parametre, der er nødvendige for at linke et script.

Wp_enqueue_script ($ håndtag, $ src, $ deps, $ ver, $ in_footer) indtager følgende params:

$ håndtag

(streng) (krævet) Navnet på scriptet.

$ src

(streng | bool) (Valgfrit) Sti til scriptet fra rodkataloget til WordPress. Eksempel: '/js/myscript.js'.

Standardværdi: falsk

$ DEPS

(array) (valgfrit) En række registrerede håndteringer dette script afhænger af.

Standardværdi: matrix ()

$ ver

(streng | bool) (valgfrit) Streng, der specificerer scriptversionsnummeret, hvis det har et. Denne parameter bruges til at sikre, at den rigtige version sendes til klienten uanset cache, og bør derfor inkluderes, hvis et versionnummer er tilgængeligt og giver mening til scriptet.

Standardværdi: falsk

$ in_footer

(bool) (valgfrit) Hvorvidt manuskriptet skal overføres før eller før . Standard 'falsk'. Accepterer 'falsk' eller 'sand'.

Standardværdi: falsk

Du kan ignorere wp_register_script () -funktionen til denne tutorial. Vores formål er kun at medtage en ekstern JS. Det skal fungere helt fint uden det!

Derfor, hvis jeg vil navngive mit script som "test", skal du huske, at dette param ($ håndtag) IKKE nødvendigvis er navnet på den faktiske fil, og min fil har ekstern afhængighed i forhold til jquery og version er 1.0 og indlæses før siden indlæses så ser min funktion ud:

wp_enqueue_script ('tutorial', get_template_directory_uri (). '/js/testrun.js', array ('jquery'), '1.0', falsk);

Hvis du bemærker, har jeg brugt get_template_directory_uri (), så den streng, der er sammenkædet efter funktionen, det vil sige “ /js/testrun.js ”, er faktisk stien til filen vha. Indeksfilen i skabelonen .

Så din $ src-attribut, som er kilden til din js-fil, bliver: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Derfor ser de endelige funktioner.php ud:

Hold inde, vi er næsten færdige! Bare gem dette nu og tryk på Opdater på dit websted … du skulle se JS arbejde! Her er min:

Da vi satte indstillingen $ in_footer til falske, indlæses scriptet inden siden indlæses, men efter at JQuery er indlæst, da det blev tilføjet som en afhængighed!

Og .. Voila! Her går du .. Du har med succes inkluderet en ekstern tilpasset JS-fil i dit WP-tema!

Happy Coding !!

Reference: Enqueue-funktion: WordPress Codex