Làm cách nào để tôi Enqueue kiểu / tập lệnh trên Trang nhất định / wp-admin?

Tôi có hai chức năng đơn giản là tải công cụ bằng cách sử dụng wp_enqueue_style()và wp_enqueue_script(), đại loại như sau:

function admin_custom_css()
{ wp_enqueue_style( 'stylesheet_name', 'stylesheet.css') }; 

function admin_custom_js 
{ wp_enqueue_script( 'javascript_file', 'script.js') };

... và một vài trang quản trị, được tạo bằng add_menu_page()và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'); 

Làm cách nào để tải hai chức năng của tôi chỉ trên các trang này?

Ngay bây giờ tôi đang sử dụng:

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

Nhưng nó tải các tập tin của tôi trên mỗi trang quản trị, điều này không tốt chút nào.

Tôi có thể thực hiện việc này thông qua một dòng đơn giản functions.phphoặc phải liệt kê chúng trong các trang của mình một cách riêng biệt (tôi thích tùy chọn đầu tiên một cách mạnh mẽ, vì tôi phải chỉnh sửa nhiều chức năng tạo trang quản trị).

Cảm ơn!

add_menu_pagevà add_submenu_pagecả hai trả về "hậu tố hook" của trang, có thể được sử dụng để xác định trang với các hook nhất định. Như vậy, bạn có thể sử dụng hậu tố đó kết hợp với các móc biến admin_print_styles-{$hook_suffix}và admin_print_scripts-{$hook_suffix}để nhắm mục tiêu cụ thể các trang này.

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

Tôi thấy đây là một phương pháp sạch để thêm tất cả những điều này bởi vì tất cả đều được xử lý trong một hàm. Nếu bạn quyết định loại bỏ chức năng này, chỉ cần xóa cuộc gọi đến một chức năng.

Vấn đề với câu trả lời @tollmanz là vì bạn đang kết nối các hook -print-style và -print-scripts, bạn phải tạo HTML để tải tập lệnh của mình theo cách thủ công. Điều này là không tối ưu, vì bạn không có được sự phụ thuộc và phiên bản đẹp đi kèm wp_enqueue_script()và wp_enqueue_style(). Nó cũng không cho phép bạn đặt mọi thứ vào phần chân trang nếu đó là nơi tốt hơn cho chúng.

Vì vậy, quay trở lại câu hỏi của OP: cách tốt nhất để đảm bảo rằng tôi chỉ có thể ghi danh JS / CSS trên các trang quản trị cụ thể?

1. Kết thúc hành động "load - {$ my_admin_page}" để chỉ thực hiện khi trang quản trị plugin cụ thể của bạn được tải, sau đó

2. Kết thúc hành động "admin_enqueue_scripts" để thêm đúng các wp_enqueue_scriptcuộc gọi của bạn .

Có vẻ hơi đau, nhưng thực sự rất dễ thực hiện. Từ đầu trang:

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

Nếu bạn sử dụng get_current_screen(), bạn có thể phát hiện trang bạn đang truy cập là gì. Có một ví dụ trong bài viết codex mà tôi liên kết đó cho thấy làm thế nào để sử dụng get_current_screen()với add_options_page(), phương pháp này sẽ làm việc cho bất kỳ trang admin.

Bạn có thể trả lời và mở rộng trên đó một chút, cho phép sử dụng có điều kiện cũng ...@tollmanz

Thí dụ:

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

Như @ mor7ifer đã đề cập ở trên, bạn có thể sử dụng hàm WordPress gốc get_cien_screen () . Nếu bạn lặp qua đầu ra của hàm này, vd:

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

... bạn sẽ nhận thấy một khóa được gọi là cơ sở . Tôi sử dụng tính năng này để phát hiện trang nào tôi đang truy cập và enqueue, dequeue như vậy:

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

    }
}

Tôi đã tự hỏi điều tương tự. Có một phiên bản hiện đại sử dụng 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");
  });
});

Từ tài liệu :

admin_print_scriptsChủ yếu được sử dụng để lặp lại javascript nội tuyến. admin_print_scriptskhông nên được sử dụng để liệt kê các kiểu hoặc tập lệnh trên các trang quản trị. Sử dụng admin_enqueue_scriptsthay thế. "

Tương tự với 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' ) );
    }
}

Để làm cho nó, bạn phải tìm tên trang quản trị đầu tiên. Thêm admin_enqueue_scriptsbằng wp_die($hook)và đi đến trang bổ sung riêng của bạn, bạn sẽ thấy tên trang.

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

settings_page_plugging_info

Bây giờ sao chép tên trang và sử dụng nó trong điều kiện để tải các tập lệnh trên trang cụ thể.

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