Ins och Outs of Enqueue-skriptet för WordPress-teman och plugins

De wp_enqueue_script funktionen är den bästa lösningen för att ladda JavaScript-filer till din WordPress-webbplats. Om du utvecklar ett tema som använder JavaScript eller JavaScript-bibliotek, kan wp_enqueue_script funktion är vägen att gå. Om du inte har använt det här förut för det kan det vara förvirring ... så idag tar vi en djupgående titt på hur du korrekt laddar skript i ditt tema eller plugin med hjälp av enqueue-funktionen.

Senare ändringar i tekniker och programvara

Vissa aspekter av tillämpningar eller tekniker som används i denna handledning har ändrats sedan den ursprungligen publicerades. Detta kan göra det lite svårt att följa med. Vi rekommenderar att du tittar på de senaste tutorialsna om samma ämne:

  • Så här inkluderar du JavaScript och CSS i dina WordPress-teman och plugins

Varför använder vi Enqueue-funktionen?

Om du kommer från en grundläggande HTML-bakgrund har du förmodligen vanligtvis laddat upp Javascript-filer (inklusive allt från jQuery till plugin-skript) direkt i dokumentets sidhuvud eller sidfot. Det är bra när du befinner dig i en fristående miljö som en grundläggande HTML-sida ... men när du presenterar mängden andra skript som eventuellt kan köras på en WordPress-installation blir det svårare att göra vad jag kallar "crowd management" med din skript.

Så varför ladda inte JavaScript i rubriken eller sidfoten? Svaret är ganska enkelt: Genom att inkludera din JavaScript så riskerar du att ha konflikter med din JavaScript över din installation (tänk, flera plugins försöker ladda samma skript eller olika versioner av det scriptet). Dessutom kommer din JavaScript att ladda på varje sida, även om du inte behöver det. Detta kommer att leda till onödigt längre laddningstid för dina sidor och kan störa andra JavaScript, som från ett plugin eller i instrumentbrädan ... och det är en No No in WP-utveckling.

Genom att använda wp_enqueue_script fungera. Du har bättre kontroll med hur och när du laddar JavaScript. Du kan även bestämma om du vill ladda in rubriken eller sidfoten.


Förstå wp_enqueue_script Fungera

De wp_enqueue_script funktionen är vad laddar skript i din WordPress webbplats. Du brukar använda den i din functions.php fil.

De wp_enqueue_script funktionen är ganska rakt framåt, så låt oss ta en titt på strukturen.

wp_enqueue_script ($ handtag, $ src, $ deps, $ ver, $ in_footer);

  • $ handtag
    • Detta är handtaget (namnet) för skriptet som ska laddas. Det borde vara i alla fall.
    • Detta är obligatoriskt
    • Standard: Ingen
  • $ scr
    • Detta är webbadressen till manuset.
    • Om du laddar lokalt från din server ska du inte koda webbadressen för skript på din server. Det är bättre att använda content_url, bloginfo ( "template_url"), eller get_template_directory_uri () (rekommenderas av WordPress-funktionsreferensen) för teman och plugins_url för plugins.
          
    • Om du laddar ditt skript från en annan server. Till exempel laddar du jQuery-biblioteket från Google CDN. Du lägger bara URL-adressen till filen som ska laddas.
       
    • Detta är valfritt
    • Standard: false
  • $ deps
    • Det här är en array som hanterar eventuella scriptberoende. Till exempel, ditt fade.js-skript kräver att jQuery körs. Denna parameter associerar ditt skript till jQuery-biblioteket.
    • Du använder "false" om du inte vill använda den här parametern, men vill använda andra parametrar.
       
    • Det obligatoriska skriptet måste laddas först.
    • Du använder det obligatoriska skriptets handtag för matrisen.
       
    • Detta är valfritt
    • Standard: array ()
  • $ ver
    • Detta är versionen av ditt skript.
    • Versionen är sammanfogad till slutet av sökvägen som en frågesträng. Versionen kan vara versionsnummer, falskt eller NULL.
    • Om du använder falskt för versionen. WordPress-versionen kommer att användas.
    • Om du använder NULL. Ingenting kommer att användas som en version. Detta rekommenderas inte av WordPress-funktionsreferensen.
    • Om du inte använder parametern $ ver. WordPress-versionen används som standard.
       
    • Detta är valfritt
    • Standard: false
  • $ in_footer
    • Detta bestämmer var ditt skript är placerat på sidan.
    • Denna parameter är en boolesk ("sann" eller "falsk")
    • Som standard kommer ditt skript att placeras i , men det är bättre att placera det strax före slutet av märka. Detta uppnås genom att "sant" överföras till parametern.
       
    • Detta är valfritt
    • Standard: false

Som du kan se, alla parametrar utom $ handtag är valfria. Vid första anblicken kan det tyckas konstigt. Särskilt $ scr parameter. Hur kan WordPress hitta skriptet utan en webbadress?

Anledningen till detta är att WordPress levereras med skript som är inbyggda. Till exempel är jQuery en del av WordPress-kärnan, och WordPress-utvecklingslaget gjorde det super enkelt att ladda dessa inbyggda skript. Allt du behöver göra är att skicka skriptets handtag till wp_enqueue_script.

 

För den fullständiga listan med inbyggda WordPress-skript och deras handtag. Ta en titt på WordPress-funktionsreferensen.


Använda Enqueue Script med din WordPress Theme

Nu när du förstår delarna av wp_enqueue_script. Låt oss titta på hur du faktiskt använder det här med ditt WordPress-tema.

Första saker först

Det finns andra WordPress-funktioner som du behöver veta innan du kan börja skriva in skript korrekt.

  • wp_register_script
    • De wp_register_script funktionen används för att registrera ditt skript med WordPress. Vad detta betyder är att du kommer att kunna använda wp_enqueue_script för dina skript precis som de inbyggda skript som följer med WordPress
    • Parameterstrukturen för wp_register_script är exakt samma som wp_enqueue_script struktur, så jag kommer inte att gå över den igen. Du kan hänvisa till ovanstående avsnitt om det behövs.
    • Bara ställa in wp_register_script precis som du skulle för wp_enqueue_script. Skruva sedan in skriptet med wp_enqueue_script genom att passera handtaget till det.
       
  • wp_deregister_script
    • De wp_deregister_script tar bort ett registrerat skript.
    • Allt du behöver göra är att passera handtaget till det.
       
  • wp_deregister_script
    • De wp_dequeue_script tar bort ett registrerat skript.
    • Allt du behöver göra är att passera handtaget till det.
       

Läser in dina skript

Det enklaste sättet att ladda ditt skript är att placera wp_enqueue_script var du än vill ha den på din sida.

  

Lätt nog, bara inte elegant. Ett bättre sätt är att använda din function.php-fil för att ladda dina skript. För att göra detta behöver du göra en anpassad funktion. Använd sedan add_action för att initiera din funktion.

 
  • Linje 2 skapar en funktion som heter load_my_scripts
  • Rad 3 registrerar manuset mitt-skript
  • Linje 4 ansluter manuset mitt-skript
  • Rad 6 initierar funktionen load_my_scripts

Skriptet vi laddade just behöver den nuvarande versionen jQuery körs, så låt oss avregistrera standardversionen som följer med WordPress lägg till den nya versionen till vår funktion.

 
  • Linje 2 avregistrerar standard jQuery som följer med WordPress
  • Rad 3 registrerar en annan version av jQuery
  • Linje 4 ansluter manuset mitt-skript

OK, bra metoder för WordPress-kodning dikterar att vi måste kontrollera om en funktion finns innan vi kör den. Detta uppnås så här.

 

Detta kontrollerar om din funktion redan finns. Om det inte gör det, körs din funktion.

Låt oss lägga till detta i vårt load_my_scripts fungera

 

Nu, om du går till din administratörssida vill du inte att ditt skript ska laddas. Det kan orsaka konflikter och bryta administratörssidan. En allmän tumregel är att du inte vill att dina anpassade skript ska laddas på admin sidan. Skript för plugins är en annan historia. Jag går över det senare.

Vi ska kolla om sidladdningen är inte administratörssidan med! is_admin (). Om det inte är så laddas våra skript.

 

Nu ser funktionen ut så här.

 

Varsågod. En bra mall för dig att använda för att skicka skript


Använda Enqueue Script för dina plugins

OK, nu när du fick det ner. Låt oss lägga till ett skript som bara laddas på din plugins administratörssida.

Det är faktiskt väldigt enkelt. Skriv bara ditt skriptfunktion precis som det vi gjorde i det föregående avsnittet i pluginfilen. Bara nu istället för att använda 'init' i add_action, använd 'admin_init'.

 

Det är det, nu kommer ditt skript bara att laddas när du går till pluginets administratörssida.


Slutsats

Jag hoppas att detta kommer att hjälpa dig att förstå bättre Enqueue Scripts inom WordPress, så nu kan du komma dit och ladda några egna skript!

Om det finns något du inte förstår eller vill läsa om. Jag rekommenderar att du besöker WordPress Codex. Här är en lista med några andra relevanta codex länkar för dig också:

  • Funktionsreferens / wp enqueue script
  • Funktionsreferens / wp register script
  • Funktionsreferens / wp avregistreringsskript
  • Funktionsreferens / wp dequeue script