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

45

J'ai deux fonctions simples qui chargent des choses en utilisant wp_enqueue_style() et wp_enqueue_script() , un peu comme ceci:

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

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 cela charge mes fichiers sur chaque page d'administration, ce qui n'est pas agréable du tout.

Puis-je le faire via une simple ligne dans functions.php ou les mettre en file d'attente séparément dans mes pages (je préfère strongment la première option, car je devrais modifier de nombreuses fonctions de création de pages d'administrateur) .

Merci!

    
posée Wordpressor 04.02.2012 - 20:56

8 réponses

28

add_menu_page et add_submenu_page renvoient tous deux 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} pour 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 cette méthode propre pour ajouter tout cela, car tout est géré dans la même fonction. Si vous décidez de supprimer cette fonctionnalité, supprimez simplement l'appel de la fonction concernée.

    
réponse donnée tollmanz 04.02.2012 - 23:51
52

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 n'obtenez pas la dépendance et le versioning sympas 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 eux.

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écoupez 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_script appels.

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

    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' ) );
    }
}
    
réponse donnée Tom Auger 17.12.2012 - 21:43
14

Si vous utilisez get_current_screen() , vous pouvez détecter la page dans laquelle vous vous trouvez. Il existe un exemple dans l'article du codex que j'ai lié et qui montre comment utiliser get_current_screen() avec add_options_page() , cette méthode fonctionnera pour toutes les pages d'administration.

    
réponse donnée mor7ifer 04.02.2012 - 21:15
3

Vous pouvez prendre @tollmanz réponse et développez-la légèrement, permettant ainsi une utilisation conditionnelle ...

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');
    
réponse donnée Michael Ecklund 20.09.2012 - 23:17
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");
  });
});
    
réponse donnée Kit Sunde 08.07.2015 - 10:58
1

Comme @ mor7ifer mentionné ci-dessus, vous pouvez utiliser la fonction native de 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éponse donnée recurse 14.11.2016 - 22:24
0

De la documentation :

  

admin_print_scripts principalement utilisé pour l'écho de javascript en ligne. admin_print_scripts ne doit pas être utilisé pour mettre en file d'attente des styles ou des scripts sur les pages d'administration. Utilisez plutôt admin_enqueue_scripts . "

Idem avec admin_print_styles .

    
réponse donnée Tolea Bivol 05.07.2013 - 13:31
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' ) );
    }
}
    
réponse donnée Jashwant 11.01.2015 - 08:48

Lire d'autres questions sur les étiquettes