Wie reihe ich Stile / Skripte auf bestimmten / wp-Admin-Seiten ein?

Ich habe zwei einfache functionen, die mit wp_enqueue_style() und wp_enqueue_script() etwas wp_enqueue_script() , etwa so:

 function admin_custom_css() { wp_enqueue_style( 'stylesheet_name', 'stylesheet.css') }; function admin_custom_js { wp_enqueue_script( 'javascript_file', 'script.js') }; 

… und ein paar Admin-Seiten, erstellt mit add_menu_page() und add_submenu_page()

 function my_menu() { add_menu_page('Page 1', 'bar', 'something', 'else', 'foo'); add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo'); } add_action('admin_menu', 'my_menu'); 

Wie lade ich meine beiden functionen nur auf diesen Seiten?

Im Moment verwende ich:

 add_action('admin_init', 'admin_custom_css' ); add_action('admin_init', 'admin_custom_js' ); 

Aber es lädt meine Dateien auf jeder Admin-Seite, was überhaupt nicht nett ist.

Kann ich dies über eine einfache Zeile in functions.php tun oder muss sie separat in meine Seiten einreihen (ich bevorzuge die erste Option stark, da ich viele Admin-Seiten-Erstellungsfunktionen bearbeiten müsste).

Vielen Dank!

Solutions Collecting From Web of "Wie reihe ich Stile / Skripte auf bestimmten / wp-Admin-Seiten ein?"

add_menu_page und add_submenu_page beide das “hook suffix” der Seite zurück, mit dem die Seite mit bestimmten Hooks identifiziert werden kann. Daher können Sie dieses Suffix in Kombination mit den Variablen hooks admin_print_styles-{$hook_suffix} und admin_print_scripts-{$hook_suffix} um gezielt auf diese Seiten zu admin_print_scripts-{$hook_suffix} .

 function my_menu() { $menu = add_menu_page( 'Page 1', 'bar', 'something', 'else', 'foo' ); $submenu = add_submenu_page( 'theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo' ); add_action( 'admin_print_styles-' . $menu, 'admin_custom_css' ); add_action( 'admin_print_styles-' . $submenu, 'admin_custom_css' ); add_action( 'admin_print_scripts-' . $menu, 'admin_custom_js' ); add_action( 'admin_print_scripts-' . $submenu, 'admin_custom_js' ); } 

Ich finde, dass dies eine saubere Methode ist, all dies hinzuzufügen, weil alles innerhalb der einen function gehandhabt wird. Wenn Sie diese function entfernen möchten, entfernen Sie einfach den Aufruf der einen function.

Das Problem mit der Antwort von @tollmanz ist, dass Sie, da Sie die Hooks -print-styles und -print-scripts aufrufen, HTML generieren müssen, um Ihre Scripts manuell zu laden. Dies ist nicht optimal, da Sie nicht die nette Abhängigkeit und Versionierung erhalten, die mit wp_enqueue_script() und wp_enqueue_style() . Es lässt Sie auch nicht Dinge in den Fuß legen, wenn das ein besserer Ort für sie ist.

Also, zurück zur Frage des OP: Was ist der beste Weg, um sicherzustellen, dass ich JS / CSS nur auf bestimmten Admin-Seiten einbinden kann?

  1. Haken Sie die Aktion “load – {$ my_admin_page}” ab, um nur Dinge zu tun, wenn die Admin-Seite Ihres bestimmten Plugins geladen ist und dann

  2. Haken Sie die Aktion “admin_enqueue_scripts” ab, um Ihre wp_enqueue_script Aufrufe ordnungsgemäß hinzuzufügen.

Scheint wie ein bisschen Schmerz, aber es ist wirklich sehr einfach zu implementieren. Von oben:

  add_action( 'admin_menu', 'add_my_admin_menus' ); // hook so we can add menus to our admin left-hand menu /** * Create the administration menus in the left-hand nav and load the JavaScript conditionally only on that page */ function add_my_admin_menus(){ $my_page = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content' ); // Load the JS conditionally add_action( 'load-' . $my_page, 'load_admin_js' ); } // This function is only called when our plugin's page loads! function load_admin_js(){ // Unfortunately we can't just enqueue our scripts here - it's too early. So register against the proper action hook to do it add_action( 'admin_enqueue_scripts', 'enqueue_admin_js' ); } function enqueue_admin_js(){ // Isn't it nice to use dependencies and the already registered core js files? wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) ); } } 

Wenn Sie get_current_screen() , können Sie feststellen, auf welcher Seite Sie sich befinden. Es gibt ein Beispiel in dem Codex-Artikel, den ich verlinkt habe und der zeigt, wie get_current_screen() mit add_options_page() kann. Diese Methode funktioniert für jede Admin-Seite.

Sie könnten @tollmanz Antwort nehmen , und erweitern Sie es leicht, so dass bedingte Verwendung sowie …

Beispiel:

 /* Add admin pages */ function my_admin_pages(){ $menu = array(); $menu['main_page'] = add_menu_page('Page 1', 'bar', 'something', 'else', 'foo'); $menu['sub_page'] = add_submenu_page('theme_menu', 'Subpage 1', 'Subpage', 'something', 'else', 'foo'); foreach($menu as $key => $value){ if($key == 'main_page'){ /* Print styles on only the main page. */ add_action('admin_print_styles-'.$value, 'print_styles'); } /* Print scripts on all of our admin pages. */ add_action('admin_print_scripts-'.$value, 'print_scripts'); } } add_action('admin_menu', 'my_admin_pages'); 

Ich habe mich dasselbe gefragt. Es gibt eine moderne Version, die admin_enqueue_scripts :

 add_action('admin_menu', function () { $settingsPage = add_options_page('Settings', 'Mortgage Calculator', 'manage_options', 'mortgagecalculator', function () { echo "
"; }); /** * Include the ember admin scripts only on pages where it's needed. */ add_action("admin_enqueue_scripts", function ($hook) use ($settingsPage){ if($hook !== $settingsPage){ return; } // Remove default jQuery since Ember provides its own. wp_dequeue_script('jquery'); wp_enqueue_script('ember-vendor', plugins_url("admin/assets/vendor.js", __FILE__)); wp_enqueue_script('ember-project', plugins_url("admin/assets/mortgage-plugin-ember-admin.js", __FILE__), ['ember-vendor']); wp_enqueue_script('ember-live-reload', "http://localhost:4200/ember-cli-live-reload.js"); }); });

Als @ mor7ifer oben erwähnt, können Sie die native WordPress-function get_current_screen () verwenden . Wenn Sie die Ausgabe dieser function durchlaufen, zB:

 $current_screen = get_current_screen(); foreach($current_screen as $key => $value) { error_log(print_r($key,1)); } 

… Sie werden einen Schlüssel namens Base bemerken. Ich benutze dies, um festzustellen, auf welcher Seite ich bin und in Enqueue, wie folgt aus der Warteschlange:

 add_action('admin_enqueue_scripts', 'some_hook_function')* ): public function some_hook_function(){ // # only register and queue scripts & styles on POST edit screen of admin $current_page = get_current_screen()->base; if($current_page == 'post' || $current_page == 'page') { wp_enqueue_script('datetimepicker', plugins_url('assets/jquery-ui-timepicker-addon.min.js', __FILE__), array('jquery', 'jquery-ui-datepicker', 'jquery-ui-slider'), '1.9.1', true); wp_enqueue_style( 'jquery-ui-datepicker', plugins_url('assets/jquery-ui.min.css', __FILE__), array(), '1.11.2', 'all'); } else { // # if not on post page, deregister and dequeue styles & scripts wp_dequeue_script('datetimepicker'); wp_dequeue_style('jquery-ui-datepicker'); } } 

Aus der Dokumentation :

admin_print_scripts hauptsächlich zum Echo von Inline-Javascript verwendet. admin_print_scripts sollten nicht zum Einreihen von Stilen oder Skripts auf den Admin-Seiten verwendet werden. Verwende stattdessen admin_enqueue_scripts . ”

Gleiches gilt für admin_print_styles .

 add_action( 'admin_menu', 'add_my_admin_menus' ); function add_my_admin_menus() { $GLOBALS['my_page'] = add_menu_page( 'Page Title', 'Menu Title', MY_ADMIN_CAPABILITY, 'menu-slug', 'show_page_content'); add_action( 'admin_enqueue_scripts', 'enqueue_admin_js'); } function enqueue_admin_js($hook) { if($GLOBALS['my_page'] === $hook) { wp_enqueue_script( 'jquery-ui-core' ); wp_enqueue_script( 'jquery-ui-tabs' ); // Isn't it nice to use dependencies and the already registered core js files? wp_enqueue_script( 'my-script', INCLUDES_URI . '/js/my_script.js', array( 'jquery-ui-core', 'jquery-ui-tabs' ) ); } }