Snabbtips Villkorligt inkluderande JS och CSS Med get_current_screen

Så många sade framför mig: "En bra WordPress-medborgare laddar bara sina filer där de behövs". Denna princip gäller både front-end och back-end (admin). Det finns ingen motivering för att ladda CSS och JS-filer på varje administratörssida när du bara behöver dem på en enda sida du skapade. Tack och lov gör saker på rätt sätt är bara ett funktionssamtal bort.

"Ta aldrig med CSS eller JS-filer på alla administratorsidor. Det kommer att orsaka konflikter med andra plugins."


Det finns en WordPress-funktion för allt

Eftersom nästan alla administrativa sidor har en unik webbadress är det verkligen inte svårt att upptäcka när en viss sida laddas och sedan (och då) innehåller JS och CSS-filer vi behöver. Vi kan använda $ _SERVER [ 'REQUEST_URI'], eller i många fall, $ _GET [ 'action'] variabel. Men det finns ett mycket enklare, renare och mer standardiserat sätt att göra det. Säg hej till get_current_screen fungera.

Saker att veta om get_current_screen fungera:

  • Det introducerades i WordPress v3.1, så om du försöker använda den i äldre versioner får du ett "call to undefined function" -fel. Använda function_exists funktion för att kontrollera om det är en bra idé om du vill ge ett alternativ.
  • Det är inte tillgängligt i admin_init eller i det krokar eftersom det initialiseras efter att dessa krokar kallas.
  • Funktionen returnerar a WP_Screen objekt med mycket info men du kommer främst att vara intresserad av id objektegenskap.
  • Det är inte tillgängligt på fronten (eftersom det inte har någon syfte där).

Några linjer av kod gör hela skillnaden

Låt oss anta att ditt plugin har en options sida under menyn Inställningar som du skapade med:

add_options_page ('My Plugin', 'My Plugin', 'manage_options', 'my_plugin', 'my_plugin_options');

Du behöver lite extra CSS och JavaScript på den sidan så du lägger till den här koden också:

 // Dålig kod nedan! Kopiera / klistra inte! add_action ('admin_enqueue_scripts', 'my_plugin_scripts'); funktion my_plugin_scripts () wp_enqueue_style ('farbtastic'); wp_enqueue_script ( 'farbtastic'); 

Det är dåligt! Gör inte det! Biten ovan kommer att innehålla CSS och JS för Farbtastic färgplockare på varje enskild administratörs sida. Om andra plugins vill bli av med dina ingår på deras sidor måste de användas wp_dequeue_ * funktioner för att dequeue dem. Det är verkligen onödigt och oförskämt av oss eftersom vi kan skriva bättre kod!


 add_action ('admin_enqueue_scripts', 'my_plugin_scripts'); funktion my_plugin_scripts () // Inkludera JS / CSS bara om vi finns på vår options sida om (is_my_plugin_screen ()) wp_enqueue_style ('farbtastic'); wp_enqueue_script ( 'farbtastic');  // Kontrollera om vi är på vår options sida funktion is_my_plugin_screen () $ screen = get_current_screen (); om (is_object ($ screen) && $ screen-> id == 'settings_page_my_plugin') return true;  annars return false; 

Det är verkligen enkelt

Om du tittar på vår förbättrade kod kan du se att vi bara har lagt till en om uttalande och en enkel funktion - is_my_plugin_screen som kontrollerar om vi finns på vår plugins alternativ sida. Variabeln $ skärm håller WP_Screen objekt som har många egenskaper men vi är bara intresserade av id ett. Den där id består av ett prefix "settings_page_", vilket är samma för alla inställningssidor och en sträng"my_plugin"vilket är unikt för vårt plugin eftersom vi definierade det som 4: e parametern i add_options_page funktionssamtal.

Koden är väldigt enkel och lätt anpassningsbar till någon administrativ skärm. För att se vad iden på den aktuella skärmen helt enkelt dumpar innehållet i $ skärm med:

eko "
'. print_r (get_current_screen (), true). '
';

Saker att ta hem:

  • Ta aldrig med CSS eller JS-filer på alla administratörssidor. det kommer att orsaka konflikter med andra plugins.
  • Använda sig av get_current_screen efter i det för att ta reda på när din administratörsskärm är synlig och bara då inkludera ytterligare filer.
  • Du kan hitta en lista över de centrala admin-skärm-IDerna i Codex under Admin Screen Reference.
  • Echo aldrig > eller