Wie kann ich Stile / Skripte auf bestimmten / wp-admin-Seiten einreihen?

Ich habe zwei einfache Funktionen, die Sachen mit wp_enqueue_style()und laden wp_enqueue_script():

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()undadd_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 Funktionen nur auf diesen Seiten?

Im Moment benutze 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 schön ist.

Kann ich dies über eine einfache Zeile in tun functions.phpoder muss ich sie separat in meine Seiten einreihen (ich bevorzuge die erste Option, da ich viele Funktionen zum Erstellen von Administrationsseiten bearbeiten müsste).

Vielen Dank!

add_menu_pageund add_submenu_pagebeide geben das "Hook-Suffix" der Seite zurück, mit dem die Seite mit bestimmten Hooks identifiziert werden kann. Als solches können Sie dieses Suffix in Kombination mit den variablen Hooks verwenden admin_print_styles-{$hook_suffix}und admin_print_scripts-{$hook_suffix}diese Seiten gezielt ansprechen.

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 halte dies für eine saubere Methode, um all dies hinzuzufügen, da alles in einer Funktion behandelt wird. Wenn Sie diese Funktion entfernen möchten, entfernen Sie einfach den Aufruf der einen Funktion.

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

Zurück zur Frage des OP: Wie kann ich am besten sicherstellen, dass ich JS / CSS nur auf bestimmten Admin-Seiten in die Warteschlange einreihen kann?

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

2. Haken Sie die Aktion "admin_enqueue_scripts" ab, um Ihre wp_enqueue_scriptAnrufe ordnungsgemäß hinzuzufügen .

Scheint ein bisschen schmerzhaft zu sein, aber es ist tatsächlich 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 verwenden get_current_screen(), können Sie erkennen, auf welcher Seite Sie sich befinden. Es gibt ein Beispiel in dem Kodex Artikel, den ich verbunden , die zeigt , wie die Verwendung get_current_screen()mit add_options_page()dieser Methode für jede Admin - Seite arbeiten.

Sie können die Antwort übernehmen und leicht erweitern, wobei auch die bedingte Verwendung berücksichtigt wird ...@tollmanz

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');

Wie @ mor7ifer oben erwähnt, können Sie die native WordPress-Funktion get_current_screen () verwenden . Wenn Sie die Ausgabe dieser Funktion 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 diese Funktion, um zu ermitteln, auf welcher Seite ich mich befinde, und um mich in die Warteschlange zu stellen:

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');

    }
}

Ich habe mich das Gleiche gefragt. Es gibt eine moderne Version, die verwendet admin_enqueue_scripts:

add_action('admin_menu', function () {
  $settingsPage = add_options_page('Settings', 'Mortgage Calculator', 'manage_options', 'mortgagecalculator', function () {
    echo "<div id='app'></div>";
  });
  /**
   * 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");
  });
});

Aus der Dokumentation :

admin_print_scriptsWird hauptsächlich zum Echo von Inline-Javascript verwendet. admin_print_scriptssollte nicht zum Einreihen von Stilen oder Skripten auf den Admin-Seiten verwendet werden. Verwenden Sie admin_enqueue_scriptsstattdessen. "

Gleiche mit 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' ) );
    }
}

Um es zu machen, müssen Sie zuerst den Namen der Admin-Seite finden. Fügen Sie admin_enqueue_scriptsmit wp_die($hook)und gehen Sie zu Ihrer spezifischen Plug-in-Seite. Sie sehen den Seitennamen.

function my_plugin_scripts($hook) {
    wp_die($hook);
}
add_action( 'admin_enqueue_scripts', 'my_plugin_scripts' );

settings_page_plugging_info

Kopieren Sie nun den Seitennamen und verwenden Sie ihn, um die Skripte auf der jeweiligen Seite zu laden.

function my_plugin_scripts($hook) {
    if ( 'settings_page_plugging_info' != $hook ) {
        return;
    }

    wp_enqueue_script( 'my_custom_script', plugins_url('js/file.js', __FILE__));
}
add_action( 'admin_enqueue_scripts', 'my_plugin_scripts' );