Lägg till Javascript till WordPress-webbplatsen - 7 steg-för-steg-metoder

Det finns vanligtvis många anledningar till varför du vill lägga till Javascript till WordPress, antingen en liten justering av en funktion eller kanske du funderar på att lägga till ett tredjepartsskript. Betraktaless av anledningen till att du vill göra det, vill du vara säker på att du inte missförstår – eftersom du kan bryta din webbplats eller skapa en prestandaflaskhals.

Att lägga till Javascript till WordPress-sidor och inlägg direkt är inte möjligt, så vi kommer 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ändigheter du kan stöta på. 

Om du har bråttom, använd innehållsförteckningen nedan för att scrolla till den relevanta delen av artikeln.

Den här artikeln innehåller ändringar i WordPress-koden. Om du inte är säker på att justera koden själv, kanske du vill göra det lär dig hur du rekryterar den bästa WordPress-utvecklaren för ditt företag 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

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

Vad är JavaScript?

Om du läser det här inlägget är du förmodligen redan bekant med vad JavaScript är.

Men för att hålla den tillgänglig för alla kommer vi snabbt att beskriva vad JavaScript är och vad det gör. Hoppa gärna över den här delen om du redan vet.

JavaScript är ett programmeringsspråk som körs i en webbläsare. Den kan anropas från webbservern men körs i besökarens webbläsare.

Detta ger ganska mycket utrymme för att få det att göra coola saker som att bädda in video och lägga till funktioner.

Du kan till exempel använda JavaScript för att bädda in en videospelare så att din webbserver inte behöver göra det.

Detta förbättrar användarupplevelsen genom att inkludera video, utan att belasta din webbserver för att spela upp videon.

JavaScript används också i mobilappar, spel, serverapplikationer, frontend-utveckling och, på senare tid, AI-relaterad utveckling.

Kan du använda JavaScript i WordPress?

Ja, du kan använda JavaScript i WordPress. Med tanke på den inneboende flexibiliteten i CMS kan du använda JavaScript för att lägga till interaktiva element eller placera tredje parts API:er på en sida.

Användningsområdena är många och varierande men eftersom JavaScript körs av användarens webbläsare kan det göra mycket utan att sakta ner din webbserver.

Du kan lägga till skript på ett antal sätt som vi kommer att diskutera om ett tag.

Innan du gör några ändringar i filer rekommenderar vi att du skapar ett underordnat tema och/eller säkerhetskopierar din webbplats först.

Du kan inte vara för försiktig!

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 ett skript på utvalda sidor med hjälp av ett plugin som WPCode
2. Lägg till skriptet till en specifik eller enstaka sida efter eget val, eller flera sidor med funktioner.php
3. Lägg till JavaScript på alla sidor
4. Lägg till en Javascript-fil i temahuvudet
5. Använda wp_head-kroken för att lägga till anpassad JavaScript
6. Lägg till JavaScript i din WordPress-sidfot
7. Lägga till JavaScript till WordPress-video
8. Lägg till JavaScript i en WordPress-widget

Låt oss gå igenom var och en av dessa metoder i detalj.

Sedan kommer vi snabbt att dela hur du felsöker JavaScript när du har lagt till det på en sida.

Anmärkningar: Vissa av dessa tekniker innebär att man gör ändringar i kärnfiler. Även om det vanligtvis inte är en bra idé att ändra functions.php och andra grundläggande WordPress-filer, vill vi visa dig alla sätt att lägga till kod.

Vi rekommenderar inte nödvändigtvis att göra ändringar på detta sätt, men vi tror på att ge dig all information och sedan fatta ditt eget beslut.

1. Använd ett plugin som WPCode

Om du bara vill använda ett plugin för att bädda in en JavaScript-referens till WordPress-temats sidhuvud eller sidfotsfil, är WPCode-pluginet ett enkelt och gratis alternativ.

Vi rekommenderar att du använder ett plugin för alla kodändringar eftersom det håller allt rent och kan undvika problem på vägen.

Istället för att modifiera temats filer direkt med den anpassade Javascript-koden, låter en plugin dig infoga koden, som sedan läggs till i sidhuvudet eller sidfoten på din webbplats, beroende på de alternativ du har valt. 

Denna plugin stöder flera olika alternativ så vi kommer bara att beskriva de vanligaste du behöver använda.

Du kan ladda ner WPCode här eller installera det med hjälp av funktionen Installera plugins i WordPress.

Installera WPCode-plugin:

• Logga in på din webbplats backend eller admin.
• Gå till Insticksprogram > Lägg till ny
• Sök efter "WPCode" plugin och klicka på installera nu.
• När den har installerats klickar du på Aktivera

Du kan nu antingen ladda ett anpassat skript utan en fil (t.ex. för att lägga till ett skript som du har fått som Google Analytics) eller ladda upp en anpassad Javascript-fil. 

Det vanligaste alternativet du kan använda med detta plugin är alternativet att lägga till koden direkt i WordPress.

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 Global sidhuvud och sidfot fönster.

Du kan välja att lägga till skriptet i sidhuvud, brödtext eller sidfot. Du bör få vägledning från leverantören av skriptet i vilka av dessa avsnitt du behöver lägga till skriptet.

Låt oss säga att du vill lägga till den i rubriken:

Klicka Spara ändringar att avsluta.

WPCode plugin kommer nu att lägga till koden på varje sida på din webbplats.

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.

WPCode låter dig också skapa dina egna kodavsnitt.

Du kan också infoga kodavsnitt var som helst på din webbplats, till exempel inlägg eller sidor, före eller efter ett inlägg, före eller efter innehåll, eller ett antal andra alternativ som du kan behöva.

Navigera bara till Kod Snippets > Lägg till Snippet och välj sedan Skapa din egen.

Du kommer nu att tas till en Skapa anpassat kodavsnitt sida där du kan ge din kod en titel och klistra in den i Förhandsgranskning av kod låda.

Sedan från Kodtyp rullgardinsmeny, välj JavaScript-kodavsnitt.

Sedan scrollar du helt enkelt ner tills du kommer till Införande området.

Allt som återstår är att välja en plats för koden från rullgardinsmenyn. Lokalisera Sida, inlägg, anpassad inläggstyp och ange var du vill att koden ska visas på sidan eller inlägget.

Om du vill att WPCode ska lägga utdraget före eller efter ett stycke, kan du ange vilket stycke i inlägget det ska visas före eller efter.

Om du till exempel anger 1 i fältet 'Infoga nummer' kommer kodavsnittet att visas före eller efter första stycket. För andra stycket, använd 2, och så vidare.

Efter det, växla helt enkelt växeln nära toppen av skärmen till Aktiva, och klicka sedan på Spara utdrag alternativet bredvid.

Det är allt som krävs för att lägga till JavaScript till WordPress!

Den största fördelen med att använda ett plugin är att det är ett nybörjarvänligt alternativ. Du behöver inte oroa dig för att redigera ditt temas filer. WPCode-pluginet kan också vara användbart om du letar efter en sömless sätt att lägga till andra typer av kod och anpassad CSS.

Nackdelen med denna metod är dock att den innebär att man installerar ett plugin från tredje part, vilket vissa webbplatsägare försöker undvika.

Om du vill hålla dina tillägg till ett minimum kan det vara bättre att använda någon av de andra metoderna.  

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

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

2. Lägg till JavaScript på en specifik WordPress-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 funktion som du kan hitta här.: 

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 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:t för sidan som du vill lägga till skriptet på.
• Det gör du genom att gå till sidan du vill lägga till filen på, klicka 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.

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

3. 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 () 

Med den här metoden behöver du inte installera ett annat plugin om du redigerar din functions.php-fil. Denna metod kan också användas för att lägga till funktioner och funktionalitet till både ditt tema och själva WordPress. Detta tillvägagångssätt kan till exempel installera JavaScript i ett enda inlägg eller en sida eller alla sidor.

Den största nackdelen med denna strategi är att den kräver att du hanterar kod och uppdaterar din webbplats filer. Som ett resultat, om du saknar erfarenhet inom detta område, kanske det inte är det perfekta alternativet.

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

4. 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. skriptet instantpage.js för att göra din webbplats snabbare) kan du infoga skriptet, eller lägga till den refererade skriptfilen själv, 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 starkt att du skapar ett barntema.

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.

" >Rubriken går här

4. Använda wp_head-kroken för att lägga till anpassad JavaScript

Du kan också lägga till anpassad JavaScript i din rubrik med hjälp av wp_head actionkrok. Återigen är den här lösningen inte att föredra eftersom den genererar ett för stort antal skript. Det är det, i alla fallless, hellre än att manuellt infoga skripten i din header.php-fil.

Den här metoden, som också kan användas för sidfoten, använder actionkroken(erna) för att infoga inline-skript på din webbplats. Till skillnad från wp enqueue script-funktionen, som köar anpassade skript, skriver wp head-metoden ut skripten i din sidhuvudmall (och sidfot, om du använder wp_footer krok).

För att börja, navigera till din functions.php-fil och kopiera och klistra in följande kod:

function collectiver_custom_javascript() { ?>

<?php } add_action('wp_head', 'collective_custom_javascript');

Det är värt att notera att wp-huvudkroken bara fungerar på framsidan av din webbplats. Detta innebär att eventuellt anpassat JavaScript som läggs till genom detta tillvägagångssätt inte kommer att visas i administratörs- eller inloggningsområdena. Men om du vill lägga till JavaScript på dessa platser kan du göra det genom att använda adminhuvudet och inloggningshuvudets åtgärdskrokar.

Utvecklare gillar skriptfunktionen wp enqueue eftersom den undviker konflikter som kan uppstå med andra lösningar, som att direkt lägga till skript till din header.php-fil. Dessutom genererar denna lösning inga beroende skript.

Det största problemet med att lägga till anpassad WordPress JavaScript i din webbplatss rubrik är att det kan störa andra plugins som laddar sina egna skript. Den här konfigurationen kan också göra att flera skript laddas flera gånger, vilket kan sakta ner webbplatsens totala hastighet och prestanda.

5. Lägg till JavaScript i din WordPress-sidfot

Att lägga till JavaScript i din WordPress-sidfot är relativt enkelt. Du kan lägga till kod i sidhuvuds- eller sidfotsfilen, använda ett anpassat kodelement i ditt sidbyggare eller tema eller använda ett specifikt sidhuvud och sidfotsplugin.

Eftersom du bör undvika att lägga till JavaScript i dina header.php- eller footer.php-filer kommer vi att använda en plugin.

Jag rekommenderar WPCode – Infoga sidhuvuden och sidfötter + anpassade kodavsnitt plugin.

Välja Inställningar och Sidhuvuden och sidfötter Infoga meny.

Klistra sedan in din JavaScript-kod i sidfoten på sidan.

Spara dina ändringar när du är klar.

6. Lägga till JavaScript i WordPress-video

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.

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, men 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.

(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.)

7. Lägg till JavaScript i en WordPress-widget

Om du vill lägga till lite JavaScript i en WordPress-widget kan det inte vara enklare.

Lägg till en widget, välj menyn och välj Redigera som HTML.

Lägg till ditt JavaScript inom tags and select Uppdatering.

Koden du lade till bör synas direkt när du visar widgeten på framsidan av din webbplats.

Hur man felsöker ett JavaScript-fel på en WordPress-sida

Att felsöka JavaScript är en tidskrävande process men är oundvikligt för nybörjare.

Lyckligtvis har du verktygen till hands för att leta efter fel.

Öppna en sida i din webbläsare och tryck på F12 eller välj Utvecklarverktyg från menyn (Chrome). Du kan också använda Ctrl + Skift + J (Windows/Linux) eller Cmd + Alternativ + J (Mac).

Välj Konsol fliken i den nya delen av skärmen som öppnas och du kommer att se alla JavaScript-fel markerade i rött.

Identifiera var felet kommer ifrån och korrigera den relevanta delen av JavaScriptet du lade till.

Arbeta dig igenom tills alla fel har åtgärdats.

WordPress har sitt eget felsökningsläge men det kan vara lite komplicerat att använda. Jag skulle rekommendera att kolla in officiella felsökningssida för mer information.

Vanliga frågor om Lägg till Javascript till WordPress

Vad är Javascript?

JavaScript är ett datorspråk som körs i användarens webbläsare snarare än på din server. Programmering på klientsidan gör det möjligt för utvecklare att uppnå en mängd intressanta saker utan att sakta ner din webbplats. Du kan ofta bli ombedd att kopiera och klistra in ett JavaScript-kodavsnitt på din WordPress-webbplats om du vill bädda in en videospelare, lägga till miniräknare eller någon annan tredjepartstjänst.

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

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 Insert WPCode-plugin för att lägga till skriptet i rubriken och sedan anropa skriptet från vilken del av temat, inlägget eller plugin du behöver använda det från.

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

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

Om författaren

Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/e-post: david@collectiveray.com

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.