Att lägga till JavaScript på dina WordPress-sidor eller inlägg kan förbättra funktionalitet och användarengagemang. WordPress tillåter dig dock inte att infoga JavaScript direkt i ditt innehåll som standard.
Vi förstår att denna begränsning kan vara frustrerande, särskilt om du vill anpassa din webbplats med interaktiva funktioner eller spårningsskript.
Lyckligtvis finns det enkla sätt att lägga till JavaScript på din WordPress-webbplats. Du kan tillämpa det på specifika sidor eller inlägg, eller till och med över hela din webbplats. Dessutom kan du använda ett plugin för kodavsnitt som WPCode, som vi gör på WPBeginner, för att göra allt enklare.
I den här artikeln guidar vi dig genom två enkla metoder för att implementera JavaScript på dina WordPress-sidor eller inlägg.
Vad är JavaScript?
JavaScript är ett programmeringsspråk som körs i användarens webbläsare, inte på din server. Denna klientsidesprogrammering gör det möjligt för utvecklare att göra många coola saker utan att sakta ner din webbplats.
Om du vill bädda in en videospelare, lägga till kalkylatorer, eller någon annan tredjepartstjänst, kommer du ofta att bli ombedd att kopiera och klistra in ett JavaScript-kodavsnitt på din WordPress-webbplats.
En typisk JavaScript-kodsnutt kan se ut så här:
<script type="text/javascript">
// Some JavaScript code
</script>
<!-- Another Example: --!>
<script type="text/javascript" src="/path/to/some-script.js"></script>
Men om du lägger till ett JavaScript-kodavsnitt i ett inlägg eller en sida, kommer WordPress att ta bort det när du försöker spara det.
Med det i åtanke visar vi hur du enkelt kan lägga till JavaScript på WordPress-sidor eller inlägg utan att förstöra din webbplats. Du kan använda snabblänkarna nedan för att hoppa direkt till den metod du vill använda.
- Metod 1. Lägg till JavaScript var som helst på din WordPress-webbplats med WPCode (rekommenderas)
- Metod 2. Lägga till JavaScript-kod i WordPress manuellt med kod (avancerat)
- Bonustips: Fler guider för anpassade kodavsnitt
Låt oss dyka in!
Metod 1. Lägg till JavaScript var som helst på din WordPress-webbplats med WPCode (rekommenderas)
Ibland behöver ett plugin eller verktyg att du kopierar och klistrar in en JavaScript-kodsnutt på din webbplats för att fungera korrekt.
Vanligtvis kommer dessa skript att placeras i sidhuvudet eller sidfoten på din WordPress-blogg, så att koden laddas vid varje sidvisning.
Till exempel, när du installerar Google Analytics, behöver koden köras på varje sida på din webbplats så att den kan spåra dina webbplatsbesökare.
Du kan manuellt lägga till koden i dina header.php- eller footer.php-filer, men dessa ändringar kommer att skrivas över när du uppdaterar eller ändrar ditt tema.
Det är därför vi rekommenderar att använda WPCode för att lägga till JavaScript var som helst på hela din WordPress-webbplats.
WPCode är det mest kraftfulla pluginet för kodavsnitt tillgängligt för WordPress. Det låter dig enkelt lägga till anpassad kod till valfritt område på din webbplats, och bäst av allt, det är gratis.
Först måste du installera och aktivera det kostnadsfria WPCode-pluginet. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.
När den har aktiverats måste du gå till Kodavsnitt » Headers & Footer.
Här ser du tre separata fält märkta 'Header', 'Body' och 'Footer'.
Du kan nu lägga till din JavaScript-kod i en av dessa rutor och sedan helt enkelt klicka på knappen 'Spara'. WPCode kommer nu automatiskt att ladda koden du lade till på varje sida på din webbplats.
Du kan också lägga till kodsnuttar på andra platser på din webbplats, till exempel inuti inlägg eller sidor.
För att göra detta, gå helt enkelt till Kodavsnitt » + Lägg till avsnitt och klicka sedan på 'Skapa ditt eget'.
Välj sedan ‘JavaScript Snippet’ som kodtyp från listan med alternativ som visas på skärmen.
Du kommer nu att se en sida 'Skapa anpassad kodsnutt' där du kan lägga till en titel för din kod. Detta kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.
Klistra sedan in din kod i rutan 'Kodförhandsgranskning'.
Sedan vill du skrolla tills du hittar sektionen 'Infogning'.
Nu behöver du bara välja en 'Plats' för koden från rullgardinsmenyn. Hitta 'Sida, Inlägg, Anpassad inläggstyp' och välj var du vill att koden ska visas på sidan eller i inlägget.
Om du väljer att WPCode ska infoga kodsnutten före eller efter ett stycke, kommer du att kunna välja vilket specifikt 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 det första stycket. Använd 2 för det andra stycket, och så vidare.
Därefter behöver du bara klicka på växlingsknappen högst upp på skärmen för att växla till 'Aktiv' och sedan klicka på knappen 'Spara utdrag' bredvid den.
Det är allt som krävs för att göra din kodsnutt live på webbplatsen!
Metod 2. Lägga till JavaScript-kod i WordPress manuellt med kod (avancerat)
Notera: Följande metoder är för nybörjare och webbplatsägare. Om du lär dig att utveckla WordPress-teman eller plugins, då behöver du korrekt köa JavaScript och stilmallar till dina projekt.
Med den här metoden behöver du lägga till kod i dina WordPress-filer. Om du inte har gjort det tidigare, vill du kolla in vår guide om hur man kopierar och klistrar in kod i WordPress.
Först visar vi hur du lägger till kod i din WordPress-webbplats header. Du behöver kopiera följande kod och lägga till den i din functions.php.
function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
Lägga till JavaScript i ett specifikt WordPress-inlägg med kod
Om du vill lägga till JavaScript till endast ett enda WordPress-inlägg, måste du lägga till villkorsstyrd logik till koden.
Låt oss först titta på följande kodavsnitt:
function wpb_hook_javascript() {
if (is_single ('5')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Koden ovan kommer endast att köra JavaScript om inläggs-ID matchar '5'. Se till att du ersätter '5' med ditt eget inläggs-ID.
För att hitta inläggs-ID:t, öppna helt enkelt inlägget där du vill att JavaScript ska köras. Sedan, i sidans URL, hittar du inläggs-ID:t.
Lägga till JavaScript på en specifik WordPress-sida med kod
Om du vill lägga till JavaScript på endast en enskild WordPress-sida måste du lägga till villkorsstyrd logik i koden, precis som ovan.
Ta en titt på följande exempel:
function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Koden ovan kommer endast att köra JavaScript om sidans ID är ’10’. Se till att du ersätter ’10’ med ditt eget sid-ID.
Du kan hitta sid-ID:t med samma metod som ovan. Öppna helt enkelt sidan där du vill att JavaScript ska köras och notera sid-ID:t i URL:en.
Lägga till JavaScript till ett specifikt WordPress-inlägg eller en sida med hjälp av kod i sidfoten
Om du vill att JavaScript ska köras i din webbplats sidfot istället för sidhuvud, kan du lägga till följande kodavsnitt på din webbplats.
function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
Detta kodavsnitt kopplar in sig i wp_footer istället för wp_head. Du kan också lägga till villkorliga taggar för att lägga till JavaScript till specifika inlägg och sidor som i exemplen ovan.
Bonustips: Fler guider för anpassade kodavsnitt
Nu när du har lärt dig hur du enkelt lägger till JavaScript på WordPress-sidor eller inlägg, låt oss titta på några fler anpassade kodavsnitt för att utöka din webbplats funktionalitet ytterligare!
Lägga till en jQuery FAQ-dragspel i WordPress
jQuery, ett praktiskt JavaScript-bibliotek, lägger till interaktiva funktioner på din webbplats.
Att använda ett jQuery FAQ-dragspel i WordPress hjälper till att hålla ditt innehåll organiserat. Det visar frågor och svar i ett kollapsbart format, vilket gör det lättare för besökare att hitta information utan att behöva skrolla igenom långa texter.
Men det är inte allt.
En FAQ-dragspel kan öka dina sökmotorrankningar genom att strukturera innehåll på ett sätt som sökmotorer gillar. På WPBeginner har vi också funnit jQuery FAQ-dragspel användbara för att hantera vanliga frågor, locka fler besökare och förbättra SEO.
För mer information kan du läsa vår artikel om hur man lägger till ett jQuery FAQ-dragspel i WordPress.
Bädda in iFrame-kod i WordPress
En iFrame, eller inbäddad ram, låter dig bädda in videor eller annat innehåll på din webbplats utan att själv lagra filerna. Detta sparar bandbredd och lagringsutrymme, vilket gör det till ett bättre val än att ladda upp videor direkt till WordPress, vilket du aldrig borde göra från början.
Att använda en iFrame kan också öka din webbplats hastighet och prestanda eftersom den hämtar innehåll från en extern källa.
För att lära dig mer kan du gå igenom vår guide om hur man enkelt bäddar in iFrame-kod i WordPress.
Skapa ett separat RSS-flöde för varje anpassad inläggstyp i WordPress
WordPress låter dig skapa anpassade inläggstyper anpassade efter dina specifika innehållsbehov, såsom filmrecensioner, produkter eller vittnesmål. Den här funktionen hjälper dig att organisera din webbplats bättre och förbättrar användarupplevelsen.
Notera att du kan ställa in RSS-flöden för varje anpassad inläggstyp, vilket ger besökarna specialiserade flöden som möjliggör mer personlig interaktion med ditt innehåll.
Om du vill ha mer information kan du läsa vår guide om hur man skapar ett separat RSS-flöde för varje anpassad inläggstyp i WordPress.
För fler idéer för anpassade kodavsnitt, kolla gärna in våra experters val av de mest användbara WordPress-kodavsnitten för nybörjare.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt lägger till JavaScript på WordPress-sidor eller inlägg. Du kanske också vill se vår guide om hur du korrekt lägger till JavaScript och stilar i WordPress och våra experttips på extremt användbara knep för WordPress functions-filen.
Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.
Mesht
Med den första metoden (Wpcode), kan jag lägga till skript på bara en sida?
WPBeginner Support
You can use the first method to add it to multiple pages not just one
Admin
Dennis Muthomi
Jag hanterar många klientwebbplatser, och WPCode har varit mitt go-to-verktyg. Det är supertillförlitligt när jag behöver lägga till spårningsskript eller anpassade funktioner till klientwebbplatser.
En sak jag måste göra när jag lägger till kod är att alltid säkerhetskopiera din webbplats innan du använder WPCode. Jag testar allt på staging först. Lita på mig, det har sparat mig så många huvudvärk! Särskilt när skript krockar med temafunktioner.
Och det bästa är att om något går fel kan du bara stänga av det problematiska kodavsnittet. Så enkelt!
Jiří Vaněk
WPCode räddade hela min webbplats på detta sätt, som jag redan hade slutfört, men till slut upptäckte vi att menyn fungerar mycket dåligt på mobila enheter. Jag hittade en lösning i form av JavaScript, men jag visste inte var eller hur jag skulle infoga det på webbplatsen. Detta sparade mig allt arbete och löste problemet med att stänga menyn på mobila enheter.
WPBeginner Support
Kul att höra att pluginet var till hjälp!
Admin
wing
Jag undrar varför man inte använder den enklaste metoden, bara direkt använda WordPress "Custom HTML"-block för att infoga Javascript-kod i ett inlägg eller en sida. Jag har provat det och testat det. Inga problem. Mycket, mycket, mycket enkel metod.
WPBeginner Support
Det skulle bero på den specifika koden, metoderna vi visar i den här guiden är för att lägga till koden i huvudsektionen eftersom de flesta JavaScript vill köras i huvudsektionen.
Admin
Rejane
Jag har ett aktivt barn-tema och jag använde pluginet "Insert Headers and Footer" för att lägga till en JavaScript-kod för en e-postmarknadsföringstjänst. Det fungerade! Men tyvärr var jag tvungen att avbryta mitt konto hos denna tjänst och nu skulle jag vilja ta bort JavaScript-koden. Hur gör jag det när jag använder ett barn-tema? Finns det något enkelt sätt eller ett annat plugin för detta?
WPBeginner Support
You would remove the code from the Insert Headers and Footers plugin and it would remove the code from your site
Admin
Paul Liles
Jag kan inte hitta trepunktsmenyn någonstans? Behöver lite hjälp.
WPBeginner Support
Det borde vara högst upp på redigeringssidan. Om du använder den klassiska redigeraren så finns det under Skärmalternativ.
Admin
Eleni
Jag får inte alternativet Anpassade fält i fliken Skärmalternativ. Jag använder en egenvärd webbplats och har installerat och aktiverat Code Embed-pluginet
WPBeginner Support
Om du använder Blockredigeraren har inställningen flyttats till inställningsområdet.
Admin
Ashley
Den här webbplatsen är FANTASTISK!!! Detta är det tredje inlägget i rad där jag har träffat jackpot och fått det jag behövde på enklaste möjliga sätt. Tack!!
WPBeginner Support
Glad our guides were helpful
Admin
Dude
Hej, bra jobbat WPbeginners! Den andra metoden fungerade som en charm. Jag hade dock en fråga. Om jag ville lägga till en annan js-kod för ett annat syfte, hur skulle koden börja? Eftersom allt jag lägger till efter koden är gråmarkerat. Jag är rådvill här. Jag vill att den ska göra samma sak men för en annan sida. Några idéer kommer att uppskattas.
WPBeginner Support
Det skulle i hög grad bero på koden du använder, men du vill se till att koden är före
/script-taggenAdmin
Jonathan
Tack. Den här artikeln var oerhört hjälpsam. Jag valde alternativet functions.php. Fungerade bra.
WPBeginner Support
Glad our guide was helpful
Admin
Elise
Det fungerade. Tack så mycket!
WPBeginner Support
You’re welcome
Admin
Martin
Fråga angående Metod 3:
Efter att ha angett värdet och klickat på ”lägg till anpassat fält”, hur får jag koden att visas på min webbplats frontend?
Ska jag infoga "{{CODEmyjscode}}" med en kortkod-widget eller en textredigerare på sidan?
WPBeginner Support
för tillfället vill du använda text- eller kodredigeraren.
Admin
Bret Bernhoft
När jag först började arbeta med WordPress verkade JavaScript vara en omöjlighet för mig. Men snabbspola fram till idag och jag skriver språket varje dag; ofta i samband med WordPress.
Jag önskar att det hade varit tydligare för mig hur lätt det skulle ha varit att skriva JavaScript när jag först började den här resan. Tack för verktygen och tipsen. Jag måste prova detta.
WPBeginner Support
Glad we could share some easy methods for adding JavaScript to your site!
Admin
ibrahim
Det fungerade och hjälpte mig mycket. Tack!
WPBeginner Support
You’re welcome
Admin
Kat
Jag försökte lägga till anpassad JS i mitt inlägg, men ingenting händer. Jag följde dina exakta anvisningar för Metod 3, men när jag förhandsgranskar sidan är det bara ett tomt utrymme där JS ska vara. Någon idé varför?
WPBeginner Support
Du vill titta på pluginets FAQ för de vanligaste orsakerna till problemet och hur du löser det.
Admin
Samuel
Hur fungerar detta med det nya Wordpress blocksystemet?
Jag försöker bädda in detta på en sida, men det visas bara som {{code1}} i förhandsgranskningen
WPBeginner Support
Det skulle bero på metoden du använder på din webbplats för plugin-programmet, de har en uppdatering i sin FAQ-sektion för hur man använder det för tillfället.
Admin
Akash
Tack för denna information. Verkligen ett fantastiskt och hjälpsamt inlägg.
WPBeginner Support
You’re welcome, glad our article was helpful
Admin
Alex
Hej, bra guide! Problemet är att jag inte har “Anpassade fält” under skärmalternativ… Någon idé varför?
WPBeginner Support
Är din webbplats på WordPress.com?
Admin
James
Hej. Jag har anlitat en programmerare för att skapa ett verktyg, vilket han gjorde i Javascript. Jag har använt Weebly men Weebly har blivit okänsligt för hjälpfrågor, vilket hundratals bloggar vittnar om. Så jag tittar på alternativ till Weebly. Skulle Wordpress kunna hantera ett 2 MB javascriptverktyg?
Tack,
WPBeginner Support
Din hosting skulle avgöra om ett sådant verktyg kunde användas, inte plattformen för din webbplats, och beroende på hur verktyget sattes upp skulle det avgöra om du kan överföra verktyget.
Admin
Matt
Vad händer om jag behöver lägga till skriptet bara på en enda sida men i head istället för body? Jag försöker lägga till en Google-konverteringspixel bara på min tack-sida för formulärinlämning.
WPBeginner Support
You would want to take a look at the section of the article called: Adding JavaScript to a Specific WordPress Post or Page Using Code
Admin
quy
det fungerar som magi. Tack så mycket
WPBeginner Support
You’re welcome, glad our article could help
Admin
Manjeet Chhillar
Tack för detta mycket hjälpsamma inlägg.
Min fråga är: Hur kan jag implementera “Metod 2” på flera inlägg. Behöver jag lägga till inläggs-ID för varje enskilt inlägg separerat med kommatecken?
WPBeginner Support
ja, du skulle behöva placera kommatecknen utanför enkelcitaten och starta en ny uppsättning citattecken för den här metoden
Admin
Deborah
Tack för att du delade de tre metoderna som WordPress-användare kan använda för att lägga till JavaScript i inlägg eller sidor. Baserat på vad jag läste på sidan för pluginet Insert Headers and Footers i arkivet, använder pluginet inte enqueue-metoden för att lägga till skript. Vilket är den rekommenderade metoden för att lägga till skript i WordPress.
Missförstod jag? Eller använder Insert Headers and Footers enqueue för att lägga till skript? Om den inte använder enqueue, vet du när pluginet kommer att uppdateras för att använda enqueue?
WPBeginner Support
Pluginet lägger för närvarande inte till skript som läggs till i det via enqueue, eftersom inte allt som läggs till med vårt plugin kanske inte vill bli enqueued. Om du vill lägga till den tillagda koden via enqueue, vill du använda en annan metod.
Admin
Dave G
Trevligt, tack för det. Det råkar vara så att det exakta inläggs-ID jag behövde köra javascript på var nummer 16. "`if (is_single ('16')) { "`
Är du från framtiden?
WPBeginner Support
Not yet at least
Admin
Golu Arjun
Tack för det här inlägget. Det är mycket hjälpsamt. Det är möjligt att anpassa
WPBeginner Support
You’re welcome
Admin
Thomas
Jag behöver lägga till ett skript till alla inlägg på min blogg. Jag har pluginet för varje enskilt inlägg. Problemet är att det finns tusentals inlägg och vi behöver lägga till skriptet till alla. Några förslag? Tack på förhand.
WPBeginner Support
Alternativet Infoga headers och footers kommer att lägga till kod på varje inlägg och sida åt dig om de använder samma kod.
Admin
Thomas
Tack för ditt snabba svar.
Vi vill bara att skriptet ska köras på inlägg. Vi vill inte att det ska köras på alla sidor.
WPBeginner Support
Om du hade en widget som bara läggs till i inlägg, kan du försöka lägga till koden i en widget.
Ann
Jag har försökt använda Headers and Footers-skripten och jQuery verkar helt enkelt inte fungera ordentligt.
WPBeginner Support
Det skulle bero på den specifika koden du lägger till på webbplatsen för de möjliga anledningarna till att den inte fungerar. Du kanske vill säkerställa med den du fick koden från att koden i sig fungerar.
Admin
Andrew Golay
Vänligen fixa ditt Headers / Footer-plugin eller ändra den här artikeln, tack.
WPBeginner Support
Vårt plugin fungerar för närvarande från testning men vi kommer definitivt att titta på det igen.
Admin
lynn
tack!! Detta var mycket hjälpsamt.
WPBeginner Support
Glad it was helpful
Admin
Remco
Tack för detta fantastiska inlägg!
Är det möjligt att implementera strukturerad data på Woocommerce-sidor med den här metoden (JSON-LD)?
WPBeginner Support
Du skulle troligen kunna det, men om du använder ett SEO-plugin just nu vill du kontrollera med det pluginet för att se om pluginet redan gör det.
Admin
graham
En välpresenterad sammanställning av de mer kända alternativen för vad som blir ett vanligt behov. Många WordPress-användare är dock inte (och vill inte vara) programmerare. För dem är JavaScript i någon form för skrämmande; det är därför de använder WordPress med sitt löfte om "ingen programmering krävs".
Det finns en annan möjlighet; att använda anpassade skript istället för JavaScript och bädda in dem direkt på sidan. Du kan placera dem i vilken komponent som helst, även om jag föredrar .
Allt du behöver då är något som kan kompilera och köra skriptet. Det är svårt att hitta plugins som kan göra detta; mina egna sökningar har ännu inte gett några resultat. Som JavaScript-programmerare kunde jag dock skriva en och lägga den i biblioteket som EasyCoder. Skripten liknar engelska, har ungefär samma komplexitet som SQL och kan göra de flesta saker som vanligtvis krävs för att hantera innehåll och interaktivitet på en webbsida. EasyCoder är också helt pluggbar så att andra programmerare kan lägga till moduler själva.