Hur man korrekt lägger till JavaScripts and Styles i WordPress

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

Vanligt misstag när man lägger till skript och formatark i WordPress

Många nya WordPress-plugins och tematillverkare gör det fel att direkt lägga till sina skript eller inline CSS i sina plugins och teman.

Vissa använder felaktigt wp_head funktion för att ladda sina skript och stylesheets.

Medan ovanstående kod kan verka lättare ä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 ett annat plugin laddar jQuery genom korrekt metod, så har du jQuery laddad 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 stylesheets.

Varför Enqueue-skript 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 ingen går på andras tår, har WordPress ett enqueuing-system. Detta system ger ett programmerbart sätt att ladda JavaScripts och CSS stylesheets.

Genom att använda wp_enqueue_script och wp_enqueue_style funktioner, berättar du WordPress när du ska ladda en fil, var du ska ladda den och vilka är dess beroende.

Detta system tillåter också att utvecklare använder de inbyggda JavaScript-biblioteken som kommer med WordPress istället för att ladda samma skript från tredje part flera gånger. Detta minskar sidladdningstiden och hjälper till att undvika konflikter med andra teman och plugins.

Hur man korrekt kodar skript i WordPress?

Att ladda skript korrekt i WordPress är väldigt enkelt. Nedan är ett exempel kod som du skulle klistra in i din plugins-fil eller i ditt temas funktioner.php-fil för att korrekt ladda skript i WordPress.

 ?php-funktionen 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 genom att registrera vårt manus genom wp_register_script () fungera. Den här funktionen accepterar 5 parametrar:

• $ handtag - Hantera är det unika namnet på ditt skript. Vår kallas "my_amazing_script"
• $ src - src är platsen för ditt skript. Vi använder funktionen plugins_url för att få rätt webbadress till vår plugin-mapp. När WordPress har hittat 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 beroendet. WordPress laddar automatiskt jQuery om den inte laddas redan på webbplatsen.
• $ ver - Detta är versionsnumret för vårt manus. Denna parameter är inte nödvändig.
• $ in_footer - Vi vill ladda vårt skript i sidfoten, så vi har satt värdet för att vara sant. Om du vill ladda skriptet i rubriken skulle du göra det felaktigt.

Efter att ha angivit alla parametrar wp_register_script, vi kan bara ringa in skriptet wp_enqueue_script () vilket gör allt hänt.

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

Om du lägger till detta i ditt tema eller plugin kan du placera den här åtgärden där scriptet verkligen behövs. Detta gör det möjligt att minska minnet av ditt plugin.

Nu kanske några undrar varför går vi extra steg för att registrera manuset först och sedan skriva in det? Tja, det gör det möjligt för andra webbplatsägare att avregistrera ditt skript utan att ändra kärnkoden i ditt plugin.

Korrekta Enqueue-stilar i WordPress

Precis som skript kan du också skriva in dina stylesheets. Titta på exemplet nedan:

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

Observera att vi har använt wp_enqueue_scripts action krok 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 funktion för att peka på platsen för manuset eller stilen som vi ville förneka.

Men om du använder enqueue scripts funktionen i ditt tema, använd helt enkelt get_template_directory_uri () istället. Om du arbetar med ett barntema, använd sedan get_stylesheet_directory_uri ().

Nedan är ett exempelkod:

Vi hoppas att den här artikeln hjälper dig att lära dig hur du korrekt 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 exemplar i realtidskoden.

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.