Comment puis-je créer des styles / scripts en file d'attente sur certaines pages / wp-admin?

J'ai deux fonctions simples qui chargent des choses en utilisant wp_enqueue_style()et wp_enqueue_script(), quelque chose comme celles-ci:

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

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

... et quelques pages d’administration, créées avec add_menu_page()etadd_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'); 

Comment charger mes deux fonctions uniquement sur ces pages?

En ce moment j'utilise:

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

Mais il charge mes fichiers sur chaque page d'administration, ce qui n'est pas agréable du tout.

Puis-je faire cela via une simple ligne functions.phpou avoir à les mettre en file d'attente séparément dans mes pages (je préfère fortement la première option, car je devrais éditer beaucoup de fonctions de création de pages d'administrateur).

Merci!

add_menu_pageet les add_submenu_pagedeux renvoient le "suffixe de hook" de la page, qui peut être utilisé pour identifier la page avec certains hooks. En tant que tel, vous pouvez utiliser ce suffixe en combinaison avec les crochets variables admin_print_styles-{$hook_suffix}et admin_print_scripts-{$hook_suffix}cibler spécifiquement ces pages.

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

Je trouve que c'est une méthode propre pour ajouter tout cela parce que tout est géré dans la même fonction. Si vous décidez de supprimer cette fonctionnalité, supprimez simplement l'appel de cette fonction.

Le problème avec @tollmanz est que, puisque vous vous connectez aux crochets -print-styles et -print-scripts, vous devez générer le code HTML pour charger vos scripts manuellement. Ce n'est pas optimal, car vous ne bénéficiez pas de la dépendance et du contrôle de version fournis avec wp_enqueue_script()et wp_enqueue_style(). Cela ne vous permet pas non plus de mettre des choses dans le pied de page si c'est un meilleur endroit pour elles.

Revenons donc à la question de l'OP: quel est le meilleur moyen de m'assurer que je puisse mettre en file d'attente JS / CSS sur des pages d'administration spécifiques uniquement?

1. Décochez l’action "load - {$ my_admin_page}" pour ne faire les choses que lorsque la page d’administration de votre plugin est chargée, puis

2. Déconnectez l'action "admin_enqueue_scripts" pour ajouter correctement vos wp_enqueue_scriptappels.

Cela semble un peu pénible, mais c'est en fait très facile à mettre en œuvre. Du haut:

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

Si vous utilisez get_current_screen(), vous pouvez détecter la page sur laquelle vous vous trouvez. Il y a un exemple dans l'article du codex que j'ai lié qui montre comment utiliser get_current_screen()avec add_options_page(), cette méthode fonctionnera pour n'importe quelle page d'administration.

Vous pouvez prendre une réponse et la développer légèrement, en permettant également une utilisation conditionnelle ...@tollmanz

Exemple:

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

Comme @ mor7ifer mentionné ci-dessus, vous pouvez utiliser la fonction native WordPress get_current_screen () . Si vous parcourez la sortie de cette fonction, par exemple:

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

... vous remarquerez une clé appelée base . J'utilise cette méthode pour détecter la page sur laquelle je suis et la mettre en file d'attente. Pour la retirer, procédez comme suit:

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

    }
}

Je me demandais la même chose. Il existe une version moderne qui utilise 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");
  });
});

De la documentation :

admin_print_scriptsprincipalement utilisé pour faire écho au javascript en ligne. admin_print_scriptsne doit pas être utilisé pour mettre en file d'attente des styles ou des scripts sur les pages d'administration. Utilisez à la admin_enqueue_scriptsplace. "

Même avec 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' ) );
    }
}

Pour le faire, vous devez d'abord trouver le nom de la page d'administration. Ajoutez admin_enqueue_scriptsavec wp_die($hook)et allez à votre page de plugin spécifique, vous verrez le nom de la page.

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

settings_page_plugging_info

Maintenant, copiez le nom de la page et utilisez-le en condition pour charger les scripts sur la page spécifique.

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