Hur du lägger till JavaScripts och stilar på rätt sätt i WordPress

Vill du lära dig hur du lägger till JavaScripts och CSS-formatmallar i WordPress? Många DIY-användare gör ofta misstaget att direkt kalla sina skript och formatmallar i plugins och teman. I den här artikeln kommer vi att visa dig hur du korrekt lägger till JavaScripts och stilark i WordPress. Detta kommer att vara särskilt användbart för dem som just börjar lära sig WordPress-tema och plugin-utveckling.


Lägg till JavaScripts och stilar på rätt sätt i WordPress

Vanlig misstag när du lägger till skript och formatmallar 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 wp_head-funktionen för att ladda sina skript och formatmallar.

<?php
add_action (‘wp_head’, ‘wpb_bad_script’);
funktion wpb_bad_script () {
echo ‘jQuery goes here’;
}
?>

Medan ovanstående kod kan verka enklare, är det fel sätt att lägga till skript i WordPress, och det leder till fler konflikter i framtiden.

Om du till exempel laddar jQuery manuellt och en annan plugin laddar jQuery genom rätt metod, har du jQuery som laddas två gånger. Om den laddas på varje sida kommer det att påverka WordPress hastighet och prestanda negativt.

Det är också möjligt att de två är olika versioner som också kan orsaka konflikter.

Med det sagt, låt oss ta en titt på rätt sätt att lägga till skript och stilark.

Varför ange manus och stilar i WordPress?

WordPress har en stark utvecklare gemenskap. Tusentals människor från hela världen utvecklar teman och plugins för WordPress.

För att säkerställa att allt fungerar ordentligt, och att ingen går på en annans tår, har WordPress ett förläggande system. Detta system tillhandahåller ett programmerbart sätt att ladda JavaScripts och CSS-formatmallar.

Genom att använda funktionerna wp_enqueue_script och wp_enqueue_style berättar du WordPress när en fil ska laddas, var den ska laddas och vilka beroenden är det.

Detta system tillåter också utvecklare att använda de inbyggda JavaScript-biblioteken som levereras med WordPress snarare än att ladda samma tredjepartsskript flera gånger. Detta minskar sidbelastningstiden och hjälper till att undvika konflikter med andra teman och plugins.

Hur man korrekt installerar skript i WordPress?

Att ladda skript ordentligt i WordPress är mycket enkelt. Nedan följer ett exempelkod som du skulle klistra in i din plugins-fil eller i ditt temas funktioner.php-fil för att ladda skript korrekt i WordPress.

?php
funktion wpb_adding_scripts () {

wp_register_script (‘my_amazing_script’, plugins_url (‘amazing_script.js’, __FILE__), array (‘jquery’), ‘1.1’, sant);

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:

  • $ handtag – Handle är ditt unika namn 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å rätt URL 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 är för beroende. Eftersom vårt skript använder jQuery har vi lagt till jQuery i beroendefältet. WordPress laddar automatiskt jQuery om det inte laddas redan på webbplatsen.
  • $ ver – Detta är versionnumret för vårt skript. Denna parameter krävs inte.
  • $ in_footer – Vi vill ladda vårt skript i sidfoten, så vi har ställt in värdet som sant. Om du vill ladda skriptet i rubriken skulle du göra det falskt.

Efter att ha tillhandahållit alla parametrar i wp_register_script kan vi bara ringa skriptet i wp_enqueue_script () som får allt att hända.

Det sista steget är att använda wp_enqueue_scripts action hook för att faktiskt ladda skriptet. Eftersom detta är en exempelkod, har vi lagt till det precis under allt annat.

Om du lägger till detta till ditt tema eller plugin, kan du placera denna åtgärdskrok där skriptet faktiskt krävs. Detta gör att du kan minska din plugins minnesavtryck.

Några kanske undrar varför ska vi göra det extra steget för att registrera skriptet först och sedan förlägga det? Nåväl, det här gör att andra webbplatsägare kan avregistrera ditt skript utan att ändra kärnkoden för din plugin.

Korrekt anpassa stilar i WordPress

Precis som manus kan du också skriva ut dina mallar. Titta på exemplet nedan:

<?php
funktion wpb_adding_style () {
wp_register_style (‘my_styleheet’, plugins_url (‘my-stylesheet.css’, __FILE__));
wp_enqueue_style ( ‘my_stylesheet’);
}
add_action (‘wp_enqueue_scripts’, ‘wpb_adding_style’);
?>

Istället för att använda wp_enqueue_script använder vi nu wp_enqueue_style för att lägga till vårt stilark.

Lägg märke till att vi har använt wp_enqueue_scripts actionkrok 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 plugins_url-funktionen för att peka på platsen för skriptet eller stilen som vi ville anka.

Men om du använder enqueue-skriptfunktionen i ditt tema, använd helt enkelt get_template_directory_uri () istället. Om du arbetar med ett barntema använder du get_styleheet_directory_uri ().

Nedan är en exempelkod:

<?php

funktion wpb_adding_scripts () {
wp_register_script (‘my_amazing_script’, get_template_directory_uri (). ‘/js/amazing_script.js’, array (‘jquery’), ‘1.1’, sant);
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 lägger till jacvascript och stilar i WordPress. Du kanske också vill studera källkoden för de bästa WordPress-pluginsna för några verkliga exempel på koden.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me