I WordPress bör du i stället för att helt enkelt lägga till dessa i rubriken använda en metod som kallas enqueueing, vilket är ett standardiserat sätt att hantera dina tillgångar med den extra bonusen att hantera beroenden. Ta reda på hur du gör det nedan med hjälp av wp_enqueue_scripts.

• Hur enqueueing fungerar
• Enqueueing Basics With wp_enqueue_scripts
• Dependency Management
• Load Scripts in the Footer
• Specificera media för stilar

Hur köhantering fungerar

Det finns två steg när ett skript eller en stil köas. Först registrerar du det – talar om för WordPress att det finns där – och sedan lägger du faktiskt in det i enqueue, som så småningom lägger ut det i rubriken eller strax före den avslutande kroppsdelen.

Anledningen till att det finns två steg har att göra med modularitet. Ibland vill du låta WordPress veta om en tillgång, men du kanske inte vill använda den på varje sida. Till exempel: Om du bygger en anpassad kortkod för galleri som använder Javascript behöver du egentligen bara ladda JS när kortkoden används – förmodligen inte på varje sida.

Sättet att få detta att hända är att registrera skriptet först, och bara faktiskt skicka in det när kortkoden visas (rekommenderad läsning: The Ultimate Guide to WordPress Shortcodes).

Enqueueing Basics With wp_enqueue_scripts

För att skicka in skript och stilar i frontend måste du använda wp_enqueue_scripts-haken. Inom den krokade funktionen kan du använda funktionerna wp_register_script(), wp_enqueue_script(), wp_register_style() och wp_enqueue_style().

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) ); wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' );}

I exemplet ovan har jag registrerat och köat tillgångarna inom samma funktion, vilket är lite överflödigt. Faktum är att du kan använda enqueue-funktionerna för att registrera och enqueue direkt, genom att använda samma argument som du gör i registerfunktionerna:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}

Om jag skulle separera de två funktionerna skulle jag göra det genom att använda dem i olika hooks. I ett exempel från den verkliga världen skulle vi kunna använda wp_enqueue_scripts-haken för att registrera tillgångarna och shortcode-funktionen för att ställa dem i kö.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}add_shortcode( 'custom_gallery', 'custom_gallery' );function custom_gallery( $atts ){ wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' ); // Gallery code here}

Hantering av beroenden

WordPress’ kö-mekanism har inbyggt stöd för hantering av beroenden, med hjälp av det tredje argumentet i både wp_register_style()– och wp_register_script()-funktionerna. Du kan också använda enqueuing-funktionerna direkt om du inte behöver separera dem.

Den tredje parametern är en matris med registrerade skript/stilar som måste laddas innan den aktuella tillgången köas. Vårt exempel ovan skulle troligen förlita sig på jQuery så låt oss specificera det nu:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );}

Vi behöver inte registrera eller inköa jQuery själva eftersom det redan är en del av WordPress. Du kan hitta en lista över skript och stilar som är tillgängliga i WordPress i Codex.

Om du har egna beroenden måste du registrera dem, annars laddas inte dina skript. Här är ett exempel:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );}

Vi antar att det första skriptet är ett galleri, det andra är ett tillägg till det som gör att bilder öppnas i en ljuslåda. Observera att även om vårt andra skript är beroende av jQuery behöver vi inte ange detta, eftersom vårt första skript redan laddar jQuery. Med det sagt kan det vara en bra idé att ange alla beroenden, bara för att se till att inget kan gå sönder om du glömmer att inkludera ett beroende.

WordPress vet nu vilka skript vi behöver och kan beräkna i vilken ordning de måste läggas till på sidan.

Ladda skript i sidfoten

När du kan komma undan med att ladda skript i sidfoten ska du göra det. Detta ökar den synliga sidladdningstiden och kan förhindra att webbplatsen hänger sig när skript laddas, särskilt om de innehåller AJAX-anrop.

Enqueuing-mekanismen kan lägga till skript i sidfoten med hjälp av den femte parametern (den fjärde parametern är ett valfritt versionsnummer). Vårt exempel ovan skulle ladda skript i sidfoten om vi ändrade det något.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );}

Specificerar du true som den femte parametern kommer skript att läggas i sidfoten, använder du false eller utelämnar parametern kommer det att laddas i rubriken. Som jag nämnde tidigare, när det är möjligt, ladda skript i sidfoten.

Specificera media för stilar

Med hjälp av den femte parametern i stilregister/enqueue-funktionernas femte parameter kan du styra mediatypen som skriptet har definierats för (utskrift, skärm, handdator, etc.). Genom att använda den här parametern kan du begränsa laddningen av stilarna till en viss mediatyp, vilket är ett praktiskt litet optimeringsknep.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );}

För en fullständig lista över mediatyper som kan användas kan du ta en titt på CSS-specifikationerna.

Sammanfattning

Enqueueing assets är ett kraftfullt sätt att hantera dem. Det ger dig, och andra tillverkare av insticksmoduler/tema, mer kontroll över systemet som helhet och tar beroendehanteringen ur händerna på dig.

Om det inte vore nog är det sättet att lägga till dina tillgångar, många temamarknadsplatser och själva WordPress-arkivet kommer inte att godkänna ditt arbete om du inte använder den här metoden.