Så här lägger du till Javascript (filer eller skript) utan att bryta din WordPress-webbplats (functions.php, mall eller plugin)

Lägg till Javascript till WordPress

Det finns vanligtvis många anledningar till att du vill lägga till Javascript till WordPress, antingen en liten tweak till en funktion eller kanske du vill lägga till ett skript från tredje part. Betraktaless av anledningen till att du vill göra det, vill du se till att du inte får fel - eftersom du kan förstöra din webbplats.

Det finns ett bra sätt att lägga till Javascript till WordPress. Och så finns det de dåliga sätten, som antingen kan bryta din webbplats eller annars få en negativ inverkan på prestanda.

I den här artikeln kommer vi att föreslå ett antal olika sätt att lägga till Javascript-kod på webbplatser och vilka som ska användas under de olika omständigheterna du kan stöta på.

 

 

Wordpress är så utdragbart att det gör att du enkelt kan lägga till nya funktioner och funktioner på din webbplats utan att behöva redesigna eller ersätta hela ditt tema. I stället för att återskapa WordPress-temat från grunden kan du lägga till funktionaliteten genom att helt enkelt lägga till plugins.

Och om funktionaliteten du vill lägga till är ganska liten och det inte finns något behov av att skapa eller installera ett plugin, kan du använda funktioner.php-fil eller olika andra sätt att lägga till Javascript till WordPress utan att behöva skapa ett separat plugin.

(Speciell anteckning: Letar du efter en lista med tweaks / tricks som du enkelt kan göra på din WordPress-webbplats utan att använda ett plugin? Du kan hänvisa vår guide här: 101 WordPress-trick som alla seriösa bloggare måste veta.)

Det bästa med funktionsfil är att det fungerar som ett plugin, som kan användas för att lägga till funktioner och utöka funktionaliteten för både temat och WordPress själv.

Även om du enkelt kan lägga till Javascript-kod direkt till din header.php-fil, det finns ett problem med den här metoden.

Det kan faktiskt orsaka konflikter med andra plugins när de laddar sina egna JS-skript.

I denna artikel av CollectiveRay, vi tar en titt på rätt sätt att lägga till javascript till WordPress -teman. Som WordPress -utvecklare är detta en av de saker som vi måste göra väldigt ofta.

Om du inte är säker på att justera koden själv kan du titta på den här artikeln för att lära dig hur du rekryterar den bästa WordPress-utvecklaren för ditt företag: https://www.collectiveray.com/wordpress-developers-for-hire, eller kolla in följande billiga utvecklingsalternativ. 

Om du inte är säker på om detta är rätt för dig och vad du ska få gjort snabbt, kolla in några Fiverr-spelningar som snabbt kan få det gjort åt dig

fiverr-logotyp

Klicka här för att hitta billiga experter på WordPress-korrigeringar

 

Hur man lägger till JavaScript till WordPress

Det finns flera sätt att lägga till anpassad Javascript-kod till din WordPress-webbplats, var och en med sin egen användning:

  1. Lägg till skriptet till en specifik eller enstaka sida efter eget val, eller flera sidor med funktioner.php
  2. Lägg till ett skript på utvalda sidor med hjälp av plugins som Headers och Footers
  3. Lägg till en Javascript-fil i temahuvudet

1. Använda functions.php

Enstaka sida eller inlägg

Denna kodjustering använder funktioner fil som finns i din mallmapp för att lägga till en .JS-fil efter eget val på en enda sida efter eget val.

Detta använder IS_PAGE-funktionen som du hittar här: https://developer.wordpress.org/themes/basics/conditional-tags/. Du kan faktiskt använda olika andra alternativ om du bara vill lägga till skriptet under specifika förhållanden som:

  • is_single(),
  • is_front_page(),
  • is_home,
  • is_admin och så vidare 

Om du föredrar att titta på en video på YouTube om hur du gör det, är den här korta videon ganska bra, hur du lägger till Javascript på en enda sida:

Fw6VDOZYqrM

Vi har detaljerade instruktioner på sidan, så när du har sett videon kan du använda den här artikeln som referens.

Om du behöver lägga till filen på alla sidor, fortsätt rulla för att hitta andra alternativ till den här metoden nedan.

  • Först måste du identifiera ID för sidan som du vill lägga till skriptet till. Du gör detta genom att gå till sidan, du vill lägga till filen i, klicka på Redigera och hämta sedan ID-numret på sidan från webbadressen som du kan se nedan. ID: n är numret som finns i webbläsarens fält.
  • wordpress sid-id

  • Nu när du har ID för sidan måste du ladda upp .js-filen till en plats. Vi rekommenderar att du laddar upp .js-filen till din mallmapp, kanske i underkatalogen.
  • När du väl har laddat upp det måste du notera exakt katalogen och namnet på .JS-filen, som vi använder istället för PATH_TO_JS_FILE nedan. Som ett exempel kan din fil finnas i: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
  • Notera den fullständiga URL: n och ersätt PATH_T_JS_FILE nedan. Du måste också byta ut ID som du hittat ovanifrån.
  • Lägg till hela koden nedan till slutet av funktioner filen i din mall.

fungera collectiveray_load_js_script () {
  om (is_page (ID)) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // eller använd versionen nedan om du vet exakt var filen är
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  }
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Om du vet exakt var du har placerat JS-filen kan du använda en liten variation av wp_enqueue_script: 

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

I det här fallet är /js/mysript.js-filen platsen för filen du vill lägga till.

När du har laddat sidan igen ser du att filen har lagts till. Du kan bekräfta detta genom att klicka på Visa källa på sidan.

Om du istället för att lägga till Javascript-filen på en sida vill du lägga till den på en sida kan vi använda en liten justering av den här funktionen för att få den att gälla för ett enskilt inlägg. Du kan använda vilken variant som helst av följande:

  • is_single ('17') - använder post-ID
  • is_single ('Mitt inläggstitel') - använder inläggets titel för att kontrollera om detta är inlägget som filen ska läggas till
  • is_single ('min-post-titel') - kontrollerar mot stolpen
  • is_single (array (17, 'min-post-titel', 'Mitt inläggstitel')) - detta kontrollerar om något av villkoren för post-ID är "17", slug är "min-post-titel" eller titel är "Mitt inläggstitel"
  • är singel() - andra varianter av is_single-funktionen med en rad värden att kontrollera mot

Koden, i detta fall, skulle vara följande eller en liten variation beroende på parametrarna för is_single-funktionen. 

fungera collectiveray_load_js_script () {
  om (är_single ('17 ')) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // eller använd versionen nedan om du vet exakt var filen är
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  } 
}

add_action ('wp_enqueue_scripts', 'collectiveray_load_js_script ');

Om du har inläggstiteln kan du använda den istället för parametern "17". Återigen kan wp_enqueue_script också justeras till:

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

Lägg till Javascript på alla sidor 

Som vi har sett är den enklaste och renaste metoden att lägga till en javaskriptfil till ditt WordPress-tema genom att använda functions.php fil med wp_enqueue_script. I det här fallet, istället för att skapa ett villkor för att lägga till innehållet på specifika sidor, kommer vi att lägga till en generisk funktion.

Så här gör du det:

Öppna functions.php fil och kopiera kodavsnittet nedan till det. Se till att du ersätter mallens webbadress med din innan du sparar.

fungera 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 ');

Om du är använder ett barns temamåste du använda get_styleheet_directory_uri () istället för get_template_directory_uri () 

2. Använda plugins

Om du bara vill använda ett plugin för att bädda in en javaskriptreferens till WordPress-temas sidhuvud eller sidfot, är plugin 'Insert Headers and Footers' ett enkelt alternativ.

Som namnet säger tillåter det dig att lägga till skript i sidhuvudets och sidfotsfilerna genom att ansluta till wp_head och wp_footer funktioner för WordPress. 

Det här pluginet är ett bra alternativ eftersom det låter dig lägga till något skript utan att riskera att bryta saker. Dessutom behöver du inte ändra eller justera någon kod själv (om du inte är bekväm med det), som vi var tvungna att göra i föregående exempel.

Att ändra kod direkt är vanligtvis ett bättre alternativ för webbdesigners. Metoden med detta plugin är enklare.

Istället för att ändra temafilerna direkt med den anpassade Javascript-koden, låter pluginet dig infoga koden, som sedan läggs till i sidhuvudet eller sidfoten, beroende på vilka alternativ du har valt. 

Detta plugin stöder två alternativ:

  1. Lägga till sökvägen till en specifik Javascript-fil som du laddar upp
  2. Lägga till skriptet direkt (t.ex. för Analytics eller andra skript från tredje part)

Låt oss börja: 

Du kan ladda ner Infoga sidhuvuden och sidfötter här.

Installera plugin:

  • Logga in på din webbplats backend eller admin.
  • Gå till Plugins> Lägg till nytt
  • Sök efter plugin och sidfötter och klicka på Installera nu.
  • När den har installerats klickar du på Aktivera
Huvud och sidfot
Beroende på ditt scenario måste du nu följa alternativ 1 eller 2. Om du till exempel vill lägga till Google Analytics måste du följa alternativ 2.

Alternativ 1: Ladda upp en anpassad Javascript-fil

  • Först måste du förbereda filen för införande
  • Spara din JavaScript-kod eller fil i en ny testfil med . Js förlängning.
  • Ladda upp den till din webbplats till följande mapp: wp-innehåll / teman / / js /
  • Gå till Inställningar> Infoga sidhuvuden och sidfötter.

Vi har nu ett par alternativ att ladda vår fil:

  1. Skript i rubriken (ladda inuti märka)
  2. Skript i sidfot (last innan stängning märka)

Använd den plats som bäst matchar dina specifika behov och använd följande som ett exempel. Anteckna det måste ändras till namnet på katalogen för det tema du använder, t.ex. tjugo tjugo

/js/file.js">
 
Sätt in skript i huvudet
  • Klicka på knappen "Spara" för att avsluta och spara.

Alternativ 2: Ladda anpassat skript utan fil

Det andra alternativet du kan använda med detta plugin är alternativet att lägga till koden direkt i WordPress utan att behöva använda en specifik fil.

Detta kan användas när du använder en tredje partstjänst, till exempel Google Analytics, Drip, eller ett annat verktyg som behöver något skript läggas till på din webbplats. Ta bara manuset och släpp det i Skript i rubrik fönster:

lägg till skript / kod direkt
 
Klicka igen på "Spara" för att avsluta.

 

Ladda om fronten och kontrollera webbplatsens källa för att se till att koden visas. Det är också en bra idé att bläddra några sidor för att bekräfta att allt fortfarande fungerar bra.

 

Även om detta verkar ganska enkelt kan det vara utanför din komfortzon, så om du vill få det gjort snabbt, kolla in några utvecklare på Fiverr som kan få det gjort åt dig.

fiverr-logotyp

Klicka här för att hitta billiga experter på WordPress-korrigeringar

 

Om du tyckte att detta tips var användbart kanske du vill kolla in fler av våra WordPress-tips på relevant meny högst upp på sidan.

3. Lägg till JavaScript i din temahuvud

I vissa fall kanske du vill att JavaScript-filen ska användas på hela din webbplats, men du vill inte använda ett plugin för att göra detta.

Om du till exempel vill lägga till ett skript från tredje part på alla dina sidor (t.ex. instantpage.js-skriptet för att göra din webbplats snabbare) kan du infoga skriptet eller lägga till själva den refererade skriptfilen i head av din header.php mallfil. 

DETTA ÄR INTE IDEALT. Om du uppdaterar ditt tema kan du förlora dessa ändringar. Om du fortfarande vill göra detta direkt rekommenderas det att du skapar ett underordnat tema.

För detta scenario, där du vill att detta skript ska läggas till överallt, kan du lägga till filen direkt i mallen enligt instruktionerna nedan:

Det här samtalet till filen (eller skriptet) ska läggas till mellan metataggarna och stilarklänken. Det här är exakt samma som om du lägger till Javascript-kod på någon HTML-sida. 

För att "lägga till" Javascript-filen på din webbplats, i head, använder du följande kod:


Se till att du har definierat type korrekt, annars är din webbplats inte giltig. Se också till att katalogen / skript finns i temat och att du har lagt till myscript.js till det.

Du kan sedan lägga till valfri referens till funktioner som används i filen du just lagt till HTML där du behöver använda den. 

Detta är till exempel ett exempel på att använda den funktion du just lagt till.

" >Rubrik går hit

 

Ladda ner listan över 101 WordPress-trick som alla bloggare borde veta

101 WordPress-tricks

Klicka här för att ladda ner nu
 

Vanliga frågor

Hur lägger jag till en Javascript-fil till WordPress?

Det enklaste sättet att lägga till en Javascript-fil till WordPress är att använda plugin-programmet Insert Headers and Footers. 

  • Logga in på din webbplats och installera plugin för sidhuvud och sidfot.
  • När den har installerats klickar du på Aktivera
  • Spara din JavaScript-kod eller fil i en ny fil med . Js förlängning.
  • Ladda upp den till din webbplats till följande mapp: wp-innehåll / teman / / js /
  • Gå till Inställningar> Infoga sidhuvuden och sidfötter.
  • Lägg till följande i skript i rubrik:  <script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>

 

Kan jag använda Javascript i WordPress?

Ja, det finns många sätt att använda Javascript i WordPress. Om du vill lägga till ett enkelt skript kan du använda plugin-menyn Infoga sidhuvuden och sidfot för att lägga till skriptet i rubriken och sedan ringa upp skriptet från vilken del av temat, inlägget eller pluginet du behöver för att använda det.

Hur lägger jag till min egen kod till WordPress?

Det bästa sättet att lägga till din egen kod till WordPress är genom filen functions.php. Det rekommenderas att du skapar ett underordnat tema och sedan lägger till dina egna ändringar i underordnade temat så att du inte bryter uppgraderingsgraden för ditt tema.

Hur redigerar jag Javascript i WordPress?

Det bästa sättet att redigera Javascript på WordPress är att skapa ett underordnat tema och sedan lägga till dina redigeringar av Javascript eller anpassa andra funktioner i underordnat tema. Detta gör att du kan redigera Javascript efter behov utan att bryta resten av ditt tema eller uppgraderingsgraden för temat.

Slutsats

Ovanstående tre metoder är det renaste sättet att lägga till Javascript till WordPress. I allmänhet bör justering av koden göras av avancerade användare som har betydande kodupplevelse och kan vara säkra på att de vet hur de ska ändra alla ändringar de har gjort. Annars är det bäst att hålla sig till plugins. Om du inte är bekväm med att justera koden själv, skulle det vara bra att komma i kontakt med våra partners på Fiverr som kan få det gjort för din idag

fiverr-logotyp

Klicka här för att hitta billiga experter på WordPress-korrigeringar

 

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...