Anonim

Som hevdet av det ledende CMS-samfunnet, bruker 25% av internett WordPress. Når vi ser trendene, har vi ikke noe annet valg enn å tro dem, nesten hver 2. blogg og hvert fjerde nettsted ser ut til å bruke tilsynelatende det kraftigste og brukervennlige CMS. Ser frem til dette, har mennesker og utviklere begynt å flytte nettstedene sine til WordPress Platform.

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

Nå forutsatt at du har WordPress alt installert og fyrt opp med ekstern JS klar, la oss komme inn i oppgaven å 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 lastes inn fra funksjonene.php . Dette er den riktige måten å laste dem inn i WordPress for å unngå konflikter med andre skript som blir lastet enten av WordPress selv eller pluginsene dine som brukes. Hvis du lar WordPress administrere alle inkluderte filer, må du gi beskjed om at du vil at denne filen skal inkluderes i toppteksten (start) eller bunnteksten (slutten) av filen. Hver mal / tema har sine egne features.php, så det nøyaktige navnet på funksjonene som inkluderer alle filene som skal inkluderes, ville være vanskelig å generalisere. Siden jeg tar tjue seksten som tema, nedenfor er øyeblikksbildet av hvordan funksjonene mine.php (brukes til å inkludere filer). Dine skal til en viss grad likne dette:

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

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

$ håndtak

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

$ src

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

Standardverdi: usant

$ deps

(array) (Valgfritt) En rekke registrerte håndteringer dette skriptet avhenger av.

Standardverdi: matrise ()

$ ver

(streng | bool) (Valgfritt) Streng som spesifiserer skriptversjonsnummeret, hvis det har et. Denne parameteren brukes for å sikre at riktig versjon blir sendt til klienten uavhengig av hurtigbufring, og bør derfor inkluderes hvis et versjonsnummer er tilgjengelig og gir mening for skriptet.

Standardverdi: usant

$ in_footer

(bool) eller før . Standard 'falsk'. Godtar "usant" eller "sant".

Standardverdi: usant

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

Derfor, hvis jeg vil navngi skriptet mitt som "test", husk at dette parametret ($ håndtaket) IKKE nødvendigvis er navnet på den faktiske filen, og filen min har ekstern avhengighet av jquery og versjonen er 1.0 og lastes før siden lastes inn så vil funksjonen min se ut:

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

Hvis du legger merke til, har jeg brukt get_template_directory_uri (), så strengen som er koblet sammen etter funksjonen, det vil si “ /js/testrun.js ”, er faktisk banen til filen til indeksfilen til malen .

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

Derfor ser de endelige funksjonene.php ut:

Hold der inne, vi er nesten ferdig! Bare lagre dette nå og trykk på oppdater på nettstedet ditt … du bør se JS fungere! Her er min:

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

Og .. Voila! Her går du .. Du har medfølgende lagt inn en ekstern tilpasset JS-fil i WP-temaet!

Happy Coding !!

Henvisning: Enqueue-funksjon: WordPress Codex

Hva er den beste måten å legge til tilpassede eksterne js i wordpress