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

53

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!

Wordpressor
la source

Réponses:

33

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.

tollmanz
la source
5
Cette réponse n'est pas techniquement correcte. le Codex pour lesadmin_print_scripts() états " admin_print_scripts ne devrait pas être utilisé pour mettre en file d'attente des styles ou des scripts ". La réponse de @TomAuger est en fait la bonne, bien que non optimale. Il serait avantageux que l'équipe du WP ajoute un admin_enqueue_scripts-(hookname)crochet ...
David Gard
Il m'a fallu 3 jours pour trouver cette réponse qui m'a été très utile :) Merci :)
Asfandyar Khan
@ DavidGard, vous devriez probablement regarder ces developer.wordpress.org/reference/hooks/… , developer.wordpress.org/reference/hooks/…
hkchakladar
1
@hkchakladar Mon commentaire a presque quatre ans ... S'il n'est plus d'actualité, ajoutez un commentaire plus actualisé pour expliquer pourquoi.
David Gard
61

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' ) );
    }
}
Tom Auger
la source
4
+1 - C'est la voie à suivre à l'OMI. Les hooks individuels namespaced (quelque chose- $ hook) sont intéressants pour 1 ou 2 actions, mais si vous créez un plugin, vous devrez peut-être faire beaucoup de choses différentes juste sur votre page d'option, ce qui rend cette méthode vraiment. pratique. D'habitude, je ne fais qu'ajouter une action au load-$hookcrochet qui déclenche ma option_page_actionsfonction, auquel je peux ajouter de nombreux autres crochets / filtres, etc. Comme ces actions ne sont appelées que sur la page de choix, les crochets situés au-delà de ce point n'ont pas besoin d'utiliser les crochets namespaced. (comme vous l'avez montré), ce qui est beaucoup plus efficace et intuitif.
Evan Mattson
Bonjour, cette façon est-elle toujours supportée? load_admin_js n'appelle jamais
IAmJulianAcosta
Bien sûr, il est toujours pris en charge. Ligne 206 de admin.php. J'y suis depuis le 2.6 et il est peu probable que nous partions de si tôt.
Tom Auger
En regardant ma réponse maintenant, je pense que mettre en file d'attente explicitement jquery-ui-core et jquery-ui-tabs est tout à fait gratifiant, puisque ces scripts sont déjà enregistrés. Vous avez juste besoin de les appeler dans la dépendance. Je mettrai à jour ma réponse en conséquence.
Tom Auger
Fonctionne parfaitement avec WordPress 4.9.6
ethmz
13

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.

mor7ifer
la source
3

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');
Michael Ecklund
la source
3

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

    }
}
récidive
la source
2

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");
  });
});
Kit Sunde
la source
0

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.

Tolea Bivol
la source
Regardez ces
sites
0
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' ) );
    }
}
Jashwant
la source
0

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' );
IqbalBary
la source