Schnelltipp Bedingtes Einschließen von JS und CSS mit get_current_screen

Wie viele vor mir sagten: "Ein guter WordPress-Bürger lädt seine Dateien nur dort, wo sie benötigt werden". Dieses Prinzip gilt sowohl für das Frontend als auch für das Backend (Admin). Es gibt keinen Grund, CSS- und JS-Dateien auf jeder Administrationsseite zu laden, wenn Sie sie nur auf einer einzigen von Ihnen erstellten Seite benötigen. Zum Glück ist es nur eine Funktion entfernt, Dinge richtig zu machen.

"Schließen Sie niemals CSS- oder JS-Dateien auf allen Administrationsseiten ein. Dies führt zu Konflikten mit anderen Plugins."

Es gibt eine WordPress-Funktion für alles

Da fast alle Admin-Seiten eine eindeutige URL haben, ist es wirklich nicht schwer zu erkennen, wann eine bestimmte Seite geladen wird, und dann (und nur dann) JS- und CSS-Dateien enthalten, die wir benötigen. Wir können benutzen $ _SERVER ['REQUEST_URI'], oder in vielen Fällen die $ _GET ['action'] Variable. Es gibt jedoch eine viel einfachere, sauberere und standardisierte Vorgehensweise. Sag hallo zu dem get_current_screen Funktion.

Wissenswertes über die get_current_screen Funktion:

• Es wurde in WordPress v3.1 eingeführt. Wenn Sie also versuchen, es in älteren Versionen zu verwenden, wird der Fehler "Aufruf an undefinierte Funktion" angezeigt. Verwendung der function_exists Funktion, um zu überprüfen, ist eine gute Idee, wenn Sie eine Alternative anbieten möchten.
• Es ist nicht in der admin_init oder drin Hooks, weil es nach dem Aufruf dieser Hooks initialisiert wird.
• Die Funktion gibt a zurück WP_Screen Objekt mit vielen Informationen, aber Sie interessieren sich hauptsächlich für das Ich würde Objekteigenschaft.
• Es ist nicht im Frontend verfügbar (da es dort keinen Zweck hat).

Ein paar Zeilen Code machen den Unterschied

Nehmen wir an, Ihr Plugin hat eine Optionsseite im Menü Einstellungen, die Sie mit folgendem erstellt haben:

add_options_page ('Mein Plugin', 'Mein Plugin', 'manage_options', 'mein_plugin', 'mein_plugin_options'));

Sie benötigen etwas zusätzliches CSS und JavaScript auf dieser Seite, damit Sie auch diesen Code hinzufügen können:

 // Falscher Code unten! Nicht kopieren / einfügen add_action ('admin_enqueue_scripts', 'my_plugin_scripts'); function my_plugin_scripts () wp_enqueue_style ('farbtastic'); wp_enqueue_script ('farbtastic'); 

Das ist schlecht! Tu das nicht! Das obige Snippet enthält auf jeder Verwaltungsseite CSS und JS for Farbtastic-Farbauswahl. Wenn andere Plugins Ihre Includes auf ihren Seiten loswerden möchten, müssen sie diese verwenden wp_dequeue_ * Funktionen, um sie zu entreißen. Das ist wirklich unnötig und unhöflich von uns, weil wir besseren Code schreiben können!

 add_action ('admin_enqueue_scripts', 'my_plugin_scripts'); function my_plugin_scripts () // JS / CSS nur einschließen, wenn wir uns auf unserer Optionsseite befinden if (is_my_plugin_screen ()) wp_enqueue_style ('farbtastic'); wp_enqueue_script ('farbtastic');  // Prüfen Sie, ob wir auf unserer Optionsseite sind function is_my_plugin_screen () $ screen = get_current_screen (); if (is_object ($ screen) && $ screen-> id == 'settings_page_my_plugin') return true;  else return false; 

Es ist wirklich einfach

Wenn Sie sich unseren verbesserten Code ansehen, sehen Sie, dass wir nur einen hinzugefügt haben ob Anweisung und eine einfache Funktion - is_my_plugin_screen die prüft, ob wir auf der Optionsseite unseres Plugins sind. Die Variable $ screen hält die WP_Screen Objekt mit vielen Eigenschaften, aber das interessiert uns nur Ich würde ein. Das Ich würde besteht aus einem Präfix "Einstellungen_Seite_", die für alle Einstellungsseiten gleich ist, und eine Zeichenfolge"mein_plugin"was für unser Plugin einzigartig ist, weil wir es als vierten Parameter in der definiert haben add_options_page Funktionsaufruf.

Der Code ist sehr einfach und an jeden Admin-Bildschirm anpassbar. Um zu sehen, was die ID des aktuellen Bildschirms ist, einfach den Inhalt von ausgeben $ screen mit:

Echo '
'. print_r (get_current_screen (), true). '
';

Dinge mit nach Hause nehmen:

• Schließen Sie niemals CSS- oder JS-Dateien auf allen Verwaltungsseiten ein. Dies führt zu Konflikten mit anderen Plugins.
• Benutzen get_current_screen nach dem drin um herauszufinden, wann Ihr Admin-Bildschirm sichtbar ist, und fügen Sie erst dann weitere Dateien hinzu.
• Eine Liste der Core-Admin-Bildschirm-IDs finden Sie im Codex unter Admin-Bildschirmreferenz.
• Echo niemals > oder