Hva er den beste måten å legge til tilpasset ekstern JS i WordPress

Som påstått av det ledende CMS-fellesskapet bruker 25% av internett WordPress. Å se trendene, vi har ikke noe valg, men å tro på dem, nesten hver 2. blogg og hver fjerde side ser ut til å være å bruke tilsynelatende den mest kraftige og brukervennlige CMS. Ser frem til dette, har folk og utviklere begynt å flytte sine nettsteder til WordPress Platform.

På dette forsøket å forvandle din søte og enkle nettside til et komplekst, høypresterende CMS-nettsted, blir folk fast på et veldig grunnleggende trinn og spørsmålet: For Love, hvordan får jeg denne eksterne JavaScript-filen (.js) jobber i dette WordPress-temaet? Er du også den som spør det samme spørsmålet? Vel amigos, du er endelig på rett sted: Jeg er her for å veilede deg trinnvis gjennom den enkleste måten som er mulig for å oppnå denne oppgaven!

Nå antar du at WordPress er alt installert og sparket opp med ekstern JS klar, la oss komme inn på oppgaven med å inkludere filen!

Merk: Jeg bruker følgende fil (testrun.js) for denne opplæringen, og temaet jeg jobber med er WordPress's Twenty Sixteen.

 alert ( 'Hei'); 

La oss begynne!

Alle skript og stilark er lastet fra funksjonene .php . Dette er den riktige måten å laste dem inn i WordPress, for å unngå å motsette seg andre skript som blir lastet enten av WordPress selv eller at pluginene dine blir brukt. Hvis du lar WordPress administrere alle inkluderte filer, må du fortelle det at du vil at denne filen skal inkluderes i overskriften (start) eller bunntekst (slutt) delen av filen. Hver mal / tema har sine egne funksjoner.php, slik at det eksakte navnet på funksjonene som inkluderer alle filene som skal inkluderes, vil være vanskelig å generalisere. Siden jeg tar tjue seksten som et tema, er det et øyeblikksbilde av hvordan mine funksjoner.php (brukes til å inkludere filer). Din skal i en grad ligne dette:

Funksjonen wp_enqueue_script knytter en skriptfil til den genererte siden til riktig tidspunkt i henhold til skriptavhengighetene, hvis skriptet ikke allerede er inkludert, og hvis alle avhengighetene er registrert. Du kan enten koble et skript med et håndtak som tidligere er registrert ved hjelp av wp_register_script () -funksjonen, eller gi denne funksjonen alle parametrene som er nødvendige for å koble et skript.

Wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) tar i følgende params:

$ håndtak

(streng) (Påkrevd) Navn på skriptet.

$ src

(streng | bool) (Valgfritt) Sti til skriptet fra rootkatalogen av WordPress. Eksempel: '/js/myscript.js'.

Standard verdi: false

$ deps

(array) (valgfritt) En rekke registrerte håndterer dette skriptet avhenger av.

Standard verdi: array ()

$ ver

(streng | bool) (Valgfritt) String som angir scriptversjonsnummeret, hvis det har en. Denne parameteren brukes til å sikre at den riktige versjonen sendes til klienten uavhengig av caching, og så bør inkluderes hvis et versjonsnummer er tilgjengelig og gir mening for skriptet.

Standard verdi: false

$ in_footer

(bool) (Valgfritt) Enten å skanne skriptet før eller før. Standard 'false'. Godtar 'false' eller 'true'.

Standard verdi: false

Du kan ignorere funksjonen wp_register_script () for denne opplæringen. Vårt formål er å inkludere en ekstern JS. Det burde fungere fint uten det!

Derfor, hvis jeg vil nevne skriptet mitt som "test", husk at denne parameteren ($ handle) IKKE nødvendigvis er navnet på den aktuelle filen, og filen min har ekstern avhengighet over jquery og versjonen er 1.0 og laster før siden laster så ville min funksjon se ut:

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

Hvis du merker, har jeg brukt get_template_directory_uri (), så strengen som er sammenkuttet etter funksjonen, som er " /js/testrun.js ", er faktisk banen til filen wrt indeksfilen til malen .

Så $ src-attributten din, som er kilden til js-filen din, blir: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Derfor ser de endelige funksjonene.php ut som:

Hold deg der, vi har nesten gjort! Bare lagre dette nå og klikk på oppdateringen på nettstedet ditt ... du bør se JS-arbeidet! Her er min:

Siden vi setter inn $ in_footer- alternativet til feil, lastes skriptet før siden lastes, men etter at JQuery er lastet inn som det ble lagt til som en avhengighet!

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

Glad koding!

Henvisning: Enqueue Funksjon: WordPress Codex

Se Også