När vi först började arbeta med WordPress kändes det enkelt nog att lägga till JavaScript och CSS. Du släppte bara koden direkt i ditt tema eller plugin och gick vidare.
Men genom åren har vi (och många av våra läsare) lärt oss den hårda vägen att denna genväg kan skapa allvarliga problem. Från skript som krockar med varandra till hela webbplatser som går sönder efter en uppdatering, vi har sett allt.
De goda nyheterna är att WordPress faktiskt har ett korrekt sätt att ladda dina skript och stilar – och när du väl känner till det kommer du att spara dig själv mycket huvudvärk i framtiden.
I den här guiden visar vi dig hur du korrekt lägger till JavaScript och CSS i WordPress. Oavsett om du bygger ett anpassat tema eller skapar ditt första plugin, kommer dessa steg att hjälpa dig att göra det på ett säkert och tillförlitligt sätt.
Vanligt misstag när du lägger till skript och stilmallar i WordPress
Många nya WordPress-plugins och temautvecklare gör misstaget att direkt lägga till sina skript eller inline CSS i sina plugins och teman.
Vissa använder felaktigt funktionen wp_head för att ladda sina skript och stilmallar.
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Även om koden ovan kan verka enklare, är det fel sätt att lägga till skript i WordPress, och det leder till fler konflikter i framtiden.
Till exempel, om du laddar jQuery manuellt och ett annat plugin laddar jQuery via rätt metod, då laddas jQuery två gånger. Om det laddas på varje sida, kommer detta att negativt påverka WordPress hastighet och prestanda.
Det är också möjligt att de två är olika versioner, vilket också kan orsaka konflikter.
Med det sagt, låt oss titta på det rätta sättet att lägga till skript och stylesheets.
Varför köa skript och stilar i WordPress?
WordPress har ett starkt utvecklarcommunity. Tusentals människor från hela världen utvecklar teman och plugins för WordPress.
För att säkerställa att allt fungerar korrekt och att ingen stör någon annans arbete, har WordPress ett kösystem. Detta system tillhandahåller ett programmerbart sätt att ladda JavaScript och CSS-stilmallar.
Genom att använda funktionerna wp_enqueue_script och wp_enqueue_style talar du om för WordPress när en fil ska laddas, var den ska laddas och vilka dess beroenden är.
Detta system tillåter också utvecklare att utnyttja de inbyggda JavaScript-biblioteken som levereras med WordPress, istället för att ladda samma tredjepartsskript flera gånger. Detta minskar sidladdningstiden och hjälper till att undvika konflikter med andra plugins och teman.
Hur man korrekt lägger till skript i WordPress?
Att ladda skript på rätt sätt i WordPress är mycket enkelt. Nedan finns ett exempel på kod som du skulle klistra in i din plugin-fil, i ditt temas functions.php-fil, eller i en kodsnutt-plugin för att korrekt ladda skript i WordPress.
?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Förklaring:
Vi började med att registrera vårt skript genom funktionen wp_register_script(). Denna funktion accepterar 5 parametrar:
- $handle – Handle är det unika namnet på ditt skript. Vårt kallas "my_amazing_script"
- $src – src är platsen för ditt skript. Vi använder funktionen plugins_url för att få den korrekta URL:en till vår plugin-mapp. När WordPress hittar det, kommer det att leta efter vårt filnamn amazing_script.js i den mappen.
- $deps – deps står för beroende. Eftersom vårt skript använder jQuery, har vi lagt till jQuery i beroendeområdet. WordPress kommer automatiskt att ladda jQuery om det inte redan laddas på webbplatsen.
- $ver – Detta är versionsnumret för vårt skript. Denna parameter är inte obligatorisk.
- $in_footer – Vi vill ladda vårt skript i sidfoten, så vi har satt värdet till true. Om du vill ladda skriptet i sidhuvudet, skulle du göra det false.
Efter att ha angett alla parametrar i wp_register_script kan vi bara anropa skriptet i wp_enqueue_script() vilket gör att allt händer.
Det sista steget är att använda wp_enqueue_scripts action hook för att faktiskt ladda skriptet. Eftersom detta är exempelkod har vi lagt till det precis under allt annat.
Om du lade till detta i ditt tema eller plugin, kan du placera denna action hook där skriptet faktiskt krävs. Detta gör att du kan minska minnesavtrycket för ditt plugin.
Nu kanske vissa undrar varför vi tar det extra steget att registrera skriptet först och sedan köa det? Tja, detta gör det möjligt för andra webbplatsägare att avregistrera ditt skript utan att ändra kärnkoden i ditt plugin.
Ladda korrekt in stilmallar i WordPress
Precis som skript kan du även köa dina stilmallar. Titta på exemplet nedan:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
Istället för att använda wp_enqueue_script använder vi nu wp_enqueue_style för att lägga till vår stilmall.
Lägg märke till att vi har använt action hooken wp_enqueue_scripts för både stilar och skript. Trots namnet fungerar den här funktionen för båda.
I exemplen ovan har vi använt funktionen plugins_url för att peka på platsen för skriptet eller stilen vi ville köa.
Om du däremot använder funktionen enqueue scripts i ditt tema, använd då helt enkelt get_template_directory_uri() istället. Om du arbetar med ett barn-tema, använd då get_stylesheet_directory_uri().
Nedan finns ett exempel på kod:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du korrekt lägger till JavaScript och stilar i WordPress. Du kanske också vill studera källkoden för topp WordPress-plugins för några verkliga kodexempel, eller kolla in vår guide om hur man enkelt lägger till JavaScript i WordPress-inlägg eller sidor.
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.
Mrteesurez
Det här inlägget är lite tekniskt men jag älskar det eftersom jag håller på med WordPress-utveckling, det fick mig att lära mig mer om att använda PHP och lägga till stilmallar och skript på ett korrekt sätt. Bästa praxis ges i den här artikeln så att det inte blir någon konflikt mellan koder i framtiden.
Schrödingers Katt
Skål, tack för att du delar med dig! Bra förklaring.
WPBeginner Support
You’re welcome
Admin
Jean-Michel
Hej,
Jag följde vad som stod här men nu får jag en tom vit sida på min webbplats. Kan någon ge mig en ledtråd?
Tack
WPBeginner Support
Det låter som att du antingen kopierade koden felaktigt eller att det var ett problem med något på din webbplats. Du kan ta bort koden med: https://www.wpbeginner.com/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Om du lade till den manuellt, annars kan du använda:
https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/
Admin
Orhan
Den här artikeln var mycket användbar för mig. Tack.
Mark
Typisk artikel som gör dig mer förvirrad efteråt än före...
Zaved Hossain
Det här är bra, även om min vanliga praxis är att lägga till wp_enqueue_script/style i en enda rad utan registrering. Kodare måste vara försiktiga med parametrarna, kanske lite förklaring av det skulle vara till hjälp. Till exempel, de olika versionerna av jquery (ditt jquery-skript kan kräva en annan version än wordpress') och var du ska lägga det (header eller footer som bestäms av true/false-parametern). Jquery-skriptet måste läggas till i headern, (därav behöver en 'false' skickas som param-värde), annars kanske det inte fungerar.
Hansjörg Leichsenring
Det finns ofta många style.css.
Hur kan jag säkerställa korrekt laddningsordning med enque och se till att child-css laddas sist?
Skål från Tyskland
Hansjörg
Carlos Araya
Hur skickar jag en tom parameter till register_script? Jag vill se till att skriptet laddas längst ner på sidan men kan inte hitta information om detta är standardbeteendet eller inte
Kerry Beeher
Bonjour,
Tack för din utmärkta resurs. Tack !!!
Jag är lite nybörjare och har precis börjat min resa för att lära mig PHP och hur WordPress använder wp_enqueue_script och wp_register_script för att lägga till JavaScript och CSS.
Jag använder det här gratis tillägget som heter Easy Code Manager för att hjälpa till att köra igenom dina exempel:
hur som helst är jag inte säker på om det här är rätt tillägg att använda.
Jag läste tidigare att det inte är den bästa idén att modifiera kod i functions.php så jag undrar om det är okej att göra det?
Kommer det inte att ändras vid en temauppdatering?
Förlåt för frågan, jag lär mig fortfarande WordPress.
Tack,
Kerry
Vaibhav Bansal
Jag vill lägga till en Amazon-annons
Jag försökte lägga till den i en textwidget, men den visas tom.
Nedan är koden-
Det här är min webbplats-
Hjälp mig. Hur lägger jag till js på min webbplats?
WPBeginner Support
Hej Vaibhav,
Vänligen kolla in vår lista över annons hanteringsplugins för WordPress. Du kan använda dessa plugins för att visa annonser på din WordPress-sida utan att redigera dina temafiler.
Admin
pradyumna
jag har infogat ett javascript med hjälp av detta plugin men nu måste jag ta bort det, jag har försökt att avinstallera och inaktivera pluginet men javascriptet körs fortfarande
Vijay.Rajpal
Hej Sir,
Jag använder esteem-temat och jag ville lägga till lite javascript-funktionalitet på min webbplats, som lightbox. Jag har skapat ett barn-tema och koden är som följer. i functions.php.
and I am getting an error:-Parse error: syntax error, unexpected '{' in E:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\esteem-child\functions.php on line 18
Please Help I am using sublime as my text editor.
Please Help!!!!!
WPBeginner Support
Det finns ett oväntat { i koden. Gå till rad 18 i din functions-fil och studera sedan koden noggrant. Du kan ha glömt någon liten kod som ett saknat ;
Admin
Pramod
hej…..
jag lägger till .js-fil i js-katalogen för wordpress och ger dess referens i function.php
men det fungerar inte
wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);
Bobbie
Tack så mycket! Jag har försökt lägga till en anpassad .js-fil men detta är den första förklaringen som säger att register_script behövdes.
colkav
Hej, bra handledning. Jag har problem med att lägga till ett JavaScript relaterat till Google Analytics, som beskrivs här:
Jag har lagt skriptet i mappen ‘js’ i mitt child theme (efter att först ha tagit bort html från koden).
När jag laddar upp sidan får jag hela tiden felet:
ReferenceError: Kan inte hitta variabeln: ga
(anonym funktion)myscript.js:6
…och det slog mig plötsligt att jag kanske behöver lägga till ‘analytics.js’ som ett beroende!
Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail
Shoaib
Finns det något plugin för samma sak... jag är nybörjare och kan inte leka med koder... Snälla hjälp mig Sir
xavi
Hej.
Tack för denna fantastiska handledning! Men när du säger "var man laddar upp skriptet" kan man bara definiera head eller footer (på alla webbsidor!)? Kan du definiera en specifik sida för att ladda den? Jag behöver den bara på en. Tack på förhand och fortsätt jobba! Skål.
technofranchise
Jag vill använda JavaScript eller JQuery på min WordPress-sida. Några idéer?
Skye Barcus
Jag är helt nybörjare på js men kan html. Jag vill lägga detta på en wordpress-sida:
I grund och botten är det en widget för att ansluta till ett GoToMeeting. Detta fungerar om du bara lägger in det i kroppen på en HTML-sida, men i Wordpress undertrycks det.
Kan du ge mig en "För dumma"-version av hur jag får detta att fungera?
Tyler Longren
När det gäller stil-laddningen, på rad 6, wp_register_script, borde det vara wp_register_style tror jag.
WPBeginner Support
Tyler, no this will work too.
Admin
Pedro de Carvalho
varför valde du att använda _script istället?
Pali Madra
Jag skulle också vilja veta varför man använder _script och inte _style? Finns det några fördelar eller fungerar båda, så att antingen kan användas?
Dejan
Jag gillar verkligen din sida, den är full av användbara tips, men det verkar som att du inte gör det "korrekt" för CSS-enqueue trots att din titel säger det :=) Det rätta sättet skulle vara:
wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘my-css-style’ );
Fortsätt med det goda arbetet… Skål!
Adrian Zumbrunnen
Tack för ansträngningen du lagt ner på detta. Det känns bara fel att ha wp_enque_script för att ladda stylesheets. Wordpress skulle eventuellt kunna spy ut skript istället för stylesheet-syntaxen för det.
Bäddar du verkligen in på det sättet?
WPBeginner Support
Den här handledningen visar hur du laddar JavaScript- och stilmallfiler för dina teman eller plugins i WordPress. Om du med inbäddning menade hur vi visar kod i artiklar, så använder vi Syntax Highlighter-plugin för det.
Admin
oiveros
hej jag är lite ny på wordpress-temahantering, och när jag läser om dessa ämnen ville jag fråga dig om något relaterat till detta. Om jag vill uppdatera länken till jquery-biblioteket hur gör jag det eller var hittar jag länken jag har försökt göra det men jag hittar den inte. Tack på förhand för din hjälp
WPBeginner Support
Om du med att uppdatera jquery-bibliotekslänken menar att lägga till jquery från Googles bibliotek. WordPress levereras med jquery och för att ladda det i ditt tema använd denna rad i ditt tema:
<?php wp_enqueue_script('jquery'); ?>Admin
oiveros
okej så om jag vill ha den senaste jquery, använder jag bara den raden?, för någon sa till mig att använda ett plugin bara för det, men jag ville lära mig hur man gör det utan ett plugin
oliveros
Tack för ditt svar, jag hittade inlägget som rör det problemet här på din sida.
Mark
Tack så mycket för denna handledning.
Elliott Richmond
Användbara Syed, tack.
Jag hade nyligen problem med att ladda en css-fil med _underscore som ramverk, även om stylesheeten hette mycustomstyles.css så anropade temat mycustomstyles.css?ver=xx och temat laddade inte filen på grund av filnamnet genom att lägga till ?ver=xx i slutet av namnet.
Har det något att göra med $ver som standard?