Lägg till Javascript till WordPress-webbplatsen - 3 enkla sätt (inlägg/sidor)

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 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 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 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 en Javascript-fil i temahuvudet

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

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.

Som namnet säger låter det dig lägga till små kodbitar som skript till sidhuvuds- och sidfotsfilerna, där de behöver vara de flesta gångerna. 

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. 

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 Plugins> Lägg till nytt
  • Sök efter "WPCode" plugin och klicka på Installera nu.
  • När den har installerats klickar du på Aktivera

installera wpcode

 

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:

lägga till javascript-kod i wordpress header

Klicka på "Spara ändringar" för 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 helt enkelt till Kodavsnitt > Lägg till kodavsnitt och välj sedan "Skapa ditt eget".

lägg till din anpassade kod

Du kommer nu att tas till sidan "Skapa anpassat utdrag" där du kan ge din kod en titel och klistra in den i rutan "Kodförhandsgranskning".

skapa ett anpassat javascript-kodavsnitt

Välj sedan "JavaScript Snippet" i rullgardinsmenyn "Kodtyp".

javascript-utdrag

Bläddra sedan nedåt tills du kommer till området "Infogning".

Allt som återstår är att välja en 'Plats' för koden från rullgardinsmenyn. Leta upp "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 "Aktiv" och klicka sedan på alternativet "Spara utdrag" bredvid den.

Det är allt som krävs för att få ditt kodprov online!

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.

fiverr-logotyp

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

 

2. 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:

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


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.

fiverr-logotyp

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

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.

" >Rubriken går här

 

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.

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

101 WordPress-tricks

Klicka här för att ladda ner nu

Lägga till Javascript till WordPress-video

Vill du se hur man lägger till Javascript till WordPress på en YouTube-video? Det här är en bra klocka:

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

Vanliga frågor

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?

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

  • Logga in på din webbplats och installera WPCode-plugin.
  • 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 WPCode
  • 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 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

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