ฉันจะจัดคิวสไตล์ / สคริปต์บนหน้า Certain / 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ทั้งคู่คืนค่า "hook suffix" ของหน้าซึ่งสามารถใช้เพื่อระบุหน้าเว็บด้วย hooks ที่แน่นอน ด้วยเหตุนี้คุณสามารถใช้ส่วนต่อท้ายนั้นร่วมกับตัวแปร hooks 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-styles และ -print-สคริปต์ hooks คุณต้องสร้าง HTML เพื่อโหลดสคริปต์ของคุณด้วยตนเอง นี้ไม่ได้เป็นดีที่สุดเพราะคุณไม่ได้รับการพึ่งพาที่ดีและเวอร์ชันที่มาพร้อมกับและwp_enqueue_script() wp_enqueue_style()นอกจากนี้ยังไม่อนุญาตให้คุณวางสิ่งของไว้ในส่วนท้ายหากสถานที่นั้นดีกว่าสำหรับพวกเขา

ดังนั้นกลับไปที่คำถามของ OP: วิธีที่ดีที่สุดที่จะทำให้แน่ใจว่าฉันสามารถจัดคิว JS / CSS ในหน้าผู้ดูแลระบบเฉพาะเท่านั้นได้อย่างไร

1. ขอให้ปิดการกระทำ "โหลด - {$ 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()คุณสามารถตรวจสอบสิ่งที่หน้าคุณอยู่ มีตัวอย่างในบทความ codex ที่ฉันเชื่อมโยงซึ่งแสดงวิธีใช้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ส่วนใหญ่จะใช้เพื่อสะท้อนจาวาสคริปต์แบบอินไลน์ 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' );