Як я можу задавати стилі / скрипти на певних сторінках / wp-admin?

У мене є дві прості функції, які завантажують матеріали за допомогою, wp_enqueue_style()і 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') };

... та кілька сторінок адміністратора, створених за допомогою add_menu_page()та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'); 

Як завантажувати дві функції лише на ці сторінки?

Зараз я використовую:

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

Але він завантажує мої файли на кожну сторінку адміністратора, що зовсім не приємно.

Чи можу я це зробити за допомогою одного простого рядка functions.phpабо доведеться залучати їх на мої сторінки окремо (я більше віддаю перевагу першому варіанту, оскільки мені доведеться редагувати багато функцій створення адміністратора сторінок).

Дякую!

add_menu_pageі add_submenu_pageобидва повертають "суфікс гачка" сторінки, який можна використовувати для ідентифікації сторінки певними гачками. Таким чином, ви можете використовувати цей суфікс у поєднанні із гачками змінної admin_print_styles-{$hook_suffix}та 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' );
}

Я вважаю, що це чистий метод додавання всього цього, оскільки все це обробляється в межах однієї функції. Якщо ви вирішили видалити цю функціональність, просто видаліть виклик до однієї функції.

Проблема з відповіддю @tollmanz полягає в тому, що, оскільки ви зачіпляєте гачки -print-style і -print-script, ви повинні створити HTML, щоб завантажити сценарії вручну. Це не є оптимальним, оскільки ви не отримуєте приємної залежності та версій, які поставляються разом із wp_enqueue_script()та wp_enqueue_style(). Це також не дозволяє вам помістити речі в колонтитул, якщо це краще місце для них.

Отже, повернемось до питання ОП: який найкращий спосіб переконатися, що я можу передати JS / CSS лише на певних сторінках адміністратора?

1. Відключіть дію "load - {$ my_admin_page}", щоб робити лише ті випадки, коли завантажується ваша адміністративна сторінка конкретного плагіна, а потім

2. Відключіть дію "admin_enqueue_scripts", щоб правильно додавати wp_enqueue_scriptдзвінки.

Здається, це трохи болить, але насправді це дуже просто здійснити. З вершини:

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

Якщо ви використовуєте get_current_screen(), ви можете виявити, на якій сторінці ви перебуваєте. Існує приклад у кодексі статті , що я пов'язаний , який показує , як використовувати get_current_screen()з add_options_page(), цей метод буде працювати на будь-якій сторінці адміністратора.

Ви можете прийняти відповідь і трохи розширити її, що дозволяє також використовувати умовне використання ...@tollmanz

Приклад:

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

Як зазначено вище @ mor7ifer, ви можете використовувати нативну функцію WordPress get_current_screen () . Якщо ви переглядаєте вихід цієї функції, наприклад:

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

... ви помітите ключ, який називається базовим . Я використовую це визначення для того, на якій сторінці я перебуваю, і перемальовувати, перемальовувати так:

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

    }
}

Мені було цікаво те саме. Існує сучасна версія, яка використовує 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");
  });
});

З документації :

admin_print_scriptsв основному використовується для відлуння вбудованого JavaScript. admin_print_scriptsне слід застосовувати для задавання стилів або сценаріїв на сторінках адміністратора. Використовуйте admin_enqueue_scriptsзамість цього. "

Те саме з 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' ) );
    }
}

Щоб зробити це, потрібно спочатку знайти ім’я сторінки адміністратора. Додати admin_enqueue_scriptsз wp_die($hook)і перейти до конкретної сторінці плагіна, ви побачите назву сторінки.

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

settings_page_plugging_info

Тепер скопіюйте назву сторінки та використовуйте її за умови завантаження скриптів на певну сторінку.

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