Belirli / wp-admin Sayfalarında stilleri / komut dosyalarını nasıl kodlarım?

Bunları kullanarak wp_enqueue_style()ve wp_enqueue_script()gibi şeyler yükleyen iki basit işlev var :

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

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

... ve birkaç yönetici sayfası, add_menu_page()ve ile oluşturulmuş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'); 

İki işlevimi yalnızca bu sayfalara nasıl yüklerim?

Şu anda kullanıyorum:

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

Ancak dosyalarımı her yönetici sayfasına yüklüyor, ki bu hiç hoş değil.

Bunu basit bir satır yoluyla yapabilir miyim functions.phpveya sayfalarımda ayrı ayrı sıraya koymak zorunda kalmalıyım (çok fazla yönetici sayfası oluşturma işlevini düzenlemek zorunda kaldığım için ilk seçeneği güçlü bir şekilde tercih ediyorum).

Teşekkürler!

add_menu_pageve add_submenu_pageher ikisi de sayfanın belirli kancalarla tanımlanmasında kullanılabilecek "kanca soneki" sayfasını döndürür. Bu nedenle, bu eki değişken kancalarla birlikte kullanabilir admin_print_styles-{$hook_suffix}ve admin_print_scripts-{$hook_suffix}bu sayfaları özel olarak hedeflemek için kullanabilirsiniz.

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

Bunu, hepsini eklemek için temiz bir yöntem olarak görüyorum çünkü hepsi bir işlev içinde işleniyor. Bu işlevi kaldırmaya karar verirseniz, bir işlev için yapılan aramayı kaldırmanız yeterlidir.

@Tollmanz cevabındaki sorun, -print-styles ve -print-script-hook'ların kancalarına takıldığınızdan, scriptlerinizi manuel olarak yüklemek için HTML'yi oluşturmanız gerekir. Eğer birlikte gelen güzel bağımlılığı ve sürüm alamadım, bu durum optimal değildir wp_enqueue_script()ve wp_enqueue_style(). Ayrıca, onlar için daha iyi bir yer olması durumunda, şeyleri altbilgiye koymanıza izin vermez.

Öyleyse, OP sorusundaki soruya geri dönelim: JS / CSS'yi sadece belirli yönetici sayfalarında sıkılaştırmamı sağlamanın en iyi yolu nedir?

1. Yalnızca yüklenen belirli eklentinizin yönetici sayfası olduğunda işleri yapmak için "load - {$ my_admin_page}" işlemine bağlanın ve ardından

2. wp_enqueue_scriptÇağrılarınızı doğru bir şekilde eklemek için "admin_enqueue_scripts" işlemine bağlanın .

Biraz acı gibi görünüyor, ama uygulanması gerçekten çok kolay. Üstten:

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

Eğer kullanırsanız get_current_screen(), o sırada kullanmakta olduğunuz sayfa nedir algılayabilir. Bağlandığım kodeks makalesinde nasıl kullanılacağını gösteren bir örnek get_current_screen()var add_options_page(), bu yöntem herhangi bir yönetici sayfası için işe yarayacak.

Şartlı kullanım için izin vererek, cevap alabilir ve hafifçe genişletebilirsiniz ...@tollmanz

Örnek:

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

Yukarıda belirtilen @ mor7ifer gibi, yerel WordPress işlevini get_current_screen () kullanabilirsiniz . Bu fonksiyonun çıktısını döndürürseniz, örneğin:

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

... üs adı verilen bir anahtar göreceksiniz . Bu, hangi sayfada bulunduğumu ve ne sıklıkta olduğumu saptamak için kullanıyorum:

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

    }
}

Ben de aynı şeyi merak ediyordum. Kullanan modern bir sürümü var 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");
  });
});

Gönderen belgeler :

admin_print_scriptstemel olarak satır içi javascript ekolarında kullanılır. admin_print_scriptsYönetici sayfalarında stilleri veya komut dosyalarını kodlamak için kullanılmamalıdır. admin_enqueue_scriptsBunun yerine kullanın .

İle aynı 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' ) );
    }
}

Bunu yapmak için önce yönetici sayfası adını bulmanız gerekir. Ekle admin_enqueue_scriptsile wp_die($hook)ve özel eklenti sayfasına gidin Sen sayfa adını görür.

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

settings_page_plugging_info

Şimdi sayfa adını kopyalayın ve komut dosyalarını belirli sayfaya yüklemek için kullanın.

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