특정 / wp-admin 페이지에서 스타일 / 스크립트를 어떻게 큐에 넣습니까?

wp_enqueue_style()and를 사용하여 물건을로드하는 두 가지 간단한 함수가 있습니다 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-styles 및 -print-scripts 후크에서 벗어나기 때문에 스크립트를 수동으로로드하려면 HTML을 생성해야한다는 것입니다. 당신이와 함께 제공되는 좋은 의존성 및 버전 관리하지 않기 때문에 이것은 최적이 아닌 wp_enqueue_script()및 wp_enqueue_style(). 또한 더 좋은 곳이라면 바닥 글에 물건을 넣을 수 없습니다.

OP의 질문으로 돌아가서 : 특정 관리자 페이지에서만 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));
}

... base 라는 키를 보게 될 것 입니다. 나는 이것을 사용하여 어떤 페이지에 있고 대기열에 넣었는지 감지합니다.

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