Slik legger du til Javascript (filer eller skript) uten å ødelegge WordPress-nettstedet ditt (functions.php, mal eller plugin)

Legg Javascript til WordPress

Det er vanligvis mange grunner til at du vil legge til Javascript til WordPress, enten en liten finjustering av en funksjon eller kanskje du ønsker å legge til et tredjeparts script. Henvisningless av grunnen til at du vil gjøre det, vil du sørge for at du ikke tar feil - fordi du kan ødelegge nettstedet ditt.

Det er en god måte å legge til Javascript til WordPress. Og så er det de dårlige måtene, som enten kan ødelegge nettstedet ditt eller ellers gi en negativ innvirkning på ytelsen.

I denne artikkelen vil vi foreslå en rekke forskjellige måter å legge til Javascript-kode på nettsteder og hvilke som skal brukes under de forskjellige omstendighetene du kan støte på.

 

 

WordPress er så utvidbart at det enkelt lar deg legge til nye funksjoner og funksjoner på nettstedet ditt uten å faktisk måtte redesigne eller erstatte hele temaet. I stedet for å gjenskape WordPress-temaet fra bunnen av, kan du legge til funksjonaliteten ved å bare legge til plugins.

Og hvis funksjonaliteten du vil legge til er ganske liten, og du ikke trenger å opprette eller installere et plugin, kan du bruke functions.php-fil eller forskjellige andre måter å legge til Javascript til WordPress uten å måtte opprette et eget plugin.

(Spesiell merknad: Leter du etter en liste over tilpasninger / triks du enkelt kan lage på WordPress-nettstedet ditt uten å bruke et plugin? Du kan se vår guide her: 101 WordPress-triks hver seriøs blogger må vite.)

Det beste med funksjonsfil er at det fungerer som et plugin, som kan brukes til å legge til funksjoner og utvide funksjonaliteten til både temaet og WordPress selv.

Selv om du enkelt kan legge til Javascript-kode direkte til din header.php-fil, det er et problem med denne metoden.

Det kan faktisk forårsake konflikter med andre plugins når de laster inn sine egne JS-skript.

I denne artikkelen av CollectiveRay, tar vi en titt på den riktige måten å legge til javascript til WordPress -temaer. Som WordPress -utviklere er dette en av tingene vi må gjøre veldig ofte.

Hvis du ikke er trygg på å tilpasse koden selv, vil du kanskje se på denne artikkelen for å lære hvordan du rekrutterer den beste WordPress-utvikleren for din virksomhet: https://www.collectiveray.com/wordpress-developers-for-hire, eller finn ut følgende billige utviklingsalternativer. 

Hvis du ikke er sikker på om dette er riktig for deg og hva du skal få gjort raskt, sjekk ut noen Fiverr-konserter som raskt kan få gjort dette for deg

fiverr -logo

Klikk her for å finne billige eksperter på WordPress-rettelser

 

Hvordan legge til JavaScript på WordPress

Det er flere måter å legge til tilpasset Javascript-kode til WordPress-nettstedet ditt, hver med sitt eget bruk:

  1. Legg til skriptet til en bestemt eller enkelt side etter eget valg, eller flere sider ved hjelp av functions.php
  2. Legg til et skript på utvalgte sider ved hjelp av plugins som topptekster og bunntekster
  3. Legg til en Javascript-fil i temaoverskriften

1. Bruke functions.php

Enkeltside eller innlegg

Denne kodetilpasningen vil bruke funksjoner filen du finner i malmappen for å legge til en .JS-fil etter eget valg på en enkelt side etter eget valg.

Dette bruker IS_PAGE-funksjonen som du finner her: https://developer.wordpress.org/themes/basics/conditional-tags/. Du kan faktisk bruke forskjellige andre alternativer hvis du bare vil legge til skriptet under spesifikke forhold som:

  • is_single(),
  • is_front_page(),
  • is_home,
  • is_admin og så videre 

Hvis du foretrekker å se en video på YouTube om hvordan du gjør dette, er denne korte videoen ganske bra om hvordan du legger til Javascript på en enkelt side:

Fw6VDOZYqrM

Vi har detaljerte instruksjoner på siden, så når du har sett videoen, kan du bruke denne artikkelen som referanse.

Hvis du trenger å legge til filen på alle sidene, fortsett å rulle for å finne andre alternativer til denne metoden nedenfor.

  • Først må du identifisere ID-en for siden du vil legge til skriptet til. Du gjør dette ved å gå til siden, du vil legge til filen i, klikke Rediger og hent deretter ID-en til siden fra URL-en som du kan se nedenfor. ID-en er nummeret som finnes i URL-en til nettleserfeltet.
  • wordpress side-ID

  • Nå som du har ID-en til siden, må du laste opp .js-filen til et sted. Vi anbefaler at du laster opp .js-filen til malmappen din, kanskje i underkatalogen.
  • Når du har lastet det opp, må du merke nøyaktig katalogen og navnet på .JS-filen, som vi bruker i stedet for PATH_TO_JS_FILE nedenfor. Som et eksempel kan filen din være i: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
  • Legg merke til den fullstendige URL-en, og erstatt PATH_T_JS_FILE nedenfor. Du må også erstatte ID som du har funnet ovenfra.
  • Legg til hele koden nedenfor til slutten av funksjoner filen til malen din.

funksjon collectiveray_load_js_script () {
  hvis (is_page (ID)) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // eller bruk versjonen nedenfor hvis du vet nøyaktig hvor filen er
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  }
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Hvis du vet nøyaktig hvor du har plassert JS-filen, kan du bruke en liten variasjon av wp_enqueue_script: 

wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');

I dette tilfellet er /js/mysript.js-filen stedet for filen du vil legge til.

Når du har lastet siden inn på nytt, vil du oppdage at filen er lagt til. Du kan bekrefte dette ved å klikke på Vis kilde på siden.

Hvis du i stedet for å legge til Javascript-filen på en side, vil legge den til på en enkelt side, kan vi bruke en liten justering av denne funksjonen for å få den til å gjelde for et enkelt innlegg. Du kan bruke hvilken som helst variant av følgende:

  • er_single ('17') - bruker post-ID
  • is_single ('Mitt innleggstitel') - bruker tittelen på innlegget for å sjekke om dette er innlegget du vil legge til filen i
  • is_single ('min post-tittel') - sjekker mot innleggssneglen
  • is_single (array (17, 'my-post-title', 'My Post Title')) - dette sjekker om noen av betingelsene for innleggs-ID er "17", slug er "min-post-tittel", eller tittel er "Mitt innleggstitel"
  • er singel() - andre variasjoner av is_single-funksjonen ved hjelp av en rekke verdier å sjekke mot

Koden, i dette tilfellet, vil være følgende eller en liten variasjon avhengig av parameterne for is_single-funksjonen. 

funksjon collectiveray_load_js_script () {
  hvis (is_single ('17 ')) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // eller bruk versjonen nedenfor hvis du vet nøyaktig hvor filen er
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  } 
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Hvis du har posttittelen, kan du bruke denne, i stedet for parameteren "17". Nok en gang kan wp_enqueue_script også justeres til:

wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');

Legg til Javascript på alle sider 

Som vi har sett, er den enkleste og reneste metoden for å legge til en javascript-fil til WordPress-temaet ditt ved hjelp av functions.php fil med wp_enqueue_script. I dette tilfellet, i stedet for å opprette en betingelse for å legge til innholdet på bestemte sider, skal vi legge til en generisk funksjon.

Slik gjør du det:

Åpne din functions.php filen og kopier kodebiten nedenfor til den. Forsikre deg om at du bytter ut mal-URL med din før du lagrer.

funksjon collectiveray_theme_scripts_function () {
  wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
}
add_action ('wp_enqueue_scripts', 'collectiveray_theme_scripts_function ');

Hvis du er ved hjelp av et barnetema, må du bruke get_styleheet_directory_uri () i stedet for get_template_directory_uri () 

2. Bruke plugins

Hvis du bare vil bruke et plugin for å legge inn en javascript-referanse til WordPress-temas topptekst eller bunntekstfil, er plugin 'Sett inn topp- og bunntekst' et enkelt alternativ.

Som navnet sier, lar det deg legge til skript i topp- og bunntekstfilene ved å koble til wp_head og wp_footer funksjoner av WordPress. 

Dette pluginet er et godt alternativ fordi det lar deg legge til et hvilket som helst skript uten å risikere å ødelegge ting. Videre trenger du ikke å endre eller tilpasse noen kode selv (hvis du ikke er komfortabel med det), som vi måtte gjøre i forrige eksempel.

Å endre kode direkte er vanligvis et bedre alternativ for webdesignere. Metoden ved bruk av dette pluginet er enklere.

I stedet for å endre temafilene direkte med den egendefinerte Javascript-koden, lar pluginet deg sette inn koden, som deretter blir lagt til toppteksten eller bunnteksten på nettstedet ditt, avhengig av alternativene du har valgt. 

Dette pluginet støtter to alternativer:

  1. Legger til stien til en bestemt Javascript-fil som du laster opp
  2. Legge til skriptet direkte (f.eks. For Analytics eller andre tredjepartsskript)

La oss komme i gang: 

Du kan last ned Sett inn topp- og bunntekster her.

Installer plugin:

  • Logg inn på nettstedets backend eller administrator.
  • Gå til Plugins> Legg til nye
  • Søk etter "Headers and Footers" plugin og klikk på Installer nå.
  • Når den er installert, klikker du på Aktiver
Headers og footers
Avhengig av ditt scenario, må du nå følge alternativ 1 eller 2. For eksempel, for å legge til Google Analytics, må du følge alternativ 2.

Alternativ 1: Last opp en tilpasset Javascript-fil

  • Først må du forberede filen for inkludering
  • Lagre JavaScript-koden eller filen din i en ny testfil med . Js Utvidelse.
  • Last det opp til nettstedet ditt til følgende mappe: wp-content / themes / / js /
  • Gå til Innstillinger> Sett inn topp- og bunntekster.

Vi har nå et par valg for å laste inn filen vår:

  1. Skript i topptekst (last inn stikkord)
  2. Skript i bunntekst (last før lukking stikkord)

Bruk stedet som passer best til dine spesifikke behov, og bruk følgende som et eksempel. Noter det må endres til navnet på katalogen til temaet du bruker, f.eks. tjueogtyve

/js/file.js">
 
Sett skriptet inn i hodet
  • Klikk på "Lagre" -knappen for å fullføre og lagre.

Alternativ 2: Last inn tilpasset skript uten fil

Det andre alternativet du kan bruke med dette pluginet, er muligheten til å legge til koden direkte i WordPress uten behov for å bruke en bestemt fil.

Dette kan brukes når du bruker en tredjeparts tjeneste, for eksempel Google Analytics, Drip, eller et annet verktøy som trenger noe skript lagt til nettstedet ditt. Bare ta skriptet og slipp det i Skript i topptekst vindu:

legg til skript / kode direkte
 
Nok en gang, klikk "Lagre" for å fullføre.

 

Last front-enden på nytt, og sjekk kilden til nettstedet ditt for å forsikre deg om at koden nå vises. Det er også lurt å bla gjennom noen få sider for å bekrefte at alt fortsatt fungerer bra.

 

Selv om dette virker ganske enkelt, kan det være utenfor komfortsonen din, så hvis du vil få dette gjort raskt, sjekk ut noen utviklere på Fiverr som kan få dette gjort for deg.

fiverr -logo

Klikk her for å finne billige eksperter på WordPress-rettelser

 

Hvis du fant dette tipset nyttig, kan det være lurt å sjekke ut flere av WordPress-tipsene våre på den aktuelle menyen øverst på siden.

3. Legg JavaScript til temaoverskriften

I visse tilfeller vil du kanskje at JavaScript-filen skal brukes på hele nettstedet ditt, men du vil ikke bruke et plugin for å gjøre dette.

Hvis du for eksempel vil legge til et tredjepartsskript på alle sidene dine (f.eks. Instantpage.js-skriptet for å gjøre nettstedet ditt raskere), kan du sette inn skriptet, eller legge til selve den refererte skriptfilen i head av header.php malfil. 

DETTE ER IKKE IDEALT. Hvis du oppdaterer temaet ditt, kan du miste disse endringene. Hvis du likevel vil gjøre dette direkte, anbefales det sterkt at du lager et barnetema.

For dette scenariet, hvor du vil at dette skriptet skal legges til overalt, kan du legge til filen direkte i malen i henhold til instruksjonene nedenfor:

Denne samtalen til filen (eller skriptet) skal legges mellom metakoder og stilarkoblingen. Dette er nøyaktig det samme som om du la til Javascript-kode på en hvilken som helst HTML-side. 

For å "legge til" Javascript-filen på nettstedet ditt, i head, bruker du følgende kode:


Forsikre deg om at du har definert type riktig, ellers vil ikke nettstedet ditt være gyldig. Sørg også for at katalogen / skriptene finnes i temaet, og at du har lagt til myscript.js til det.

Du kan deretter legge til en hvilken som helst referanse til funksjoner som brukes i filen du nettopp la til i HTML-en der du trenger å bruke den. 

Dette er for eksempel et eksempel på bruk av funksjonen du nettopp la til.

" >Overskrift går hit

 

Last ned listen over 101 WordPress-triks hver blogger burde vite

101 WordPress-triks

Klikk her for å laste ned nå
 

Ofte Stilte Spørsmål

Hvordan legger jeg til en Javascript-fil til WordPress?

Den enkleste måten å legge til en Javascript-fil til WordPress, er å bruke plugin-modulen Sett inn topp- og bunntekster. 

  • Logg på nettstedets og installer topp- og bunnteksttillegg.
  • Når den er installert, klikker du på Aktiver
  • Lagre JavaScript-koden eller filen din i en ny fil med . Js Utvidelse.
  • Last det opp til nettstedet ditt til følgende mappe: wp-content / themes / / js /
  • Gå til Innstillinger> Sett inn topp- og bunntekster.
  • Legg til følgende i skriptene i overskrift:  <script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>

 

Kan jeg bruke Javascript i WordPress?

Ja, det er mange måter å bruke Javascript på WordPress på. Hvis du vil legge til et enkelt skript, kan du bruke plugin-modulen Sett inn topp- og bunntekster for å legge til skriptet i toppteksten, og deretter ringe skriptet fra hvilken del av temaet, innlegget eller pluginet du trenger for å bruke det fra.

Hvordan legger jeg til min egen kode til WordPress?

Den beste måten å legge til din egen kode til WordPress er gjennom functions.php-filen. Det anbefales at du lager et barnetema og deretter legger til dine egne modifikasjoner i barnetemaet slik at du ikke bryter oppgraderbarheten til temaet ditt.

Hvordan redigerer jeg Javascript i WordPress?

Den beste måten å redigere Javascript på WordPress er ved å opprette et underordnet tema, og deretter legge til endringene av Javascript eller tilpasse andre funksjoner i underordnet tema. Dette lar deg redigere Javascript etter behov uten å bryte resten av temaet eller oppgraderingsevnen til temaet.

konklusjonen

Ovennevnte tre metoder er den reneste måten å legge til Javascript til WordPress. Generelt bør finjustering av koden gjøres av avanserte brukere som har betydelig kodeerfaring og kan være sikre på at de vet hvordan de skal tilbakestille eventuelle endringer de har gjort. Ellers er det best å holde seg til plugins. Hvis du ikke er komfortabel med å tilpasse koden selv, ville det være flott å komme i kontakt med våre partnere på Fiverr som kan få det gjort i dag

fiverr -logo

Klikk her for å finne billige eksperter på WordPress-rettelser

 

om forfatteren
David Attard
Forfatter: David Attardnettside: https://www.linkedin.com/in/dattard/
David har jobbet i eller rundt den elektroniske / digitale industrien de siste 18 årene. Han har lang erfaring innen programvare- og webdesignindustrien ved å bruke WordPress, Joomla og nisjer rundt dem. Som digital konsulent er hans fokus på å hjelpe bedrifter med å få et konkurransefortrinn ved å bruke en kombinasjon av deres nettside og digitale plattformer som er tilgjengelige i dag.

En ting til... Visste du at folk som deler nyttige ting som dette innlegget også ser FANTASTISK ut? ;-)
Vær så snill forlate en nyttig kommenter med tankene dine, så del dette på Facebook-gruppen din (e) som synes dette er nyttig, og la oss høste fordelene sammen. Takk for at du delte og var hyggelig!

Avsløring: Denne siden kan inneholde lenker til eksterne nettsteder for produkter som vi elsker og anbefaler helhjertet. Hvis du kjøper produkter vi foreslår, kan vi tjene et henvisningsgebyr. Slike avgifter påvirker ikke våre anbefalinger, og vi godtar ikke betaling for positive anmeldelser.

Forfatter (e) Fremvist på:  Inc Magazine-logoen   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   og mange flere ...