web-dev-qa-db-fra.com

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 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 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!

wp-adminwp-enqueue-scriptadmin-menuwp-enqueue-styleadmin-init
48
Wordpressor

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 association 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 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.

30
tollmanz

Le problème avec @tollmanz est que, puisque vous utilisez les 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 Nice et le 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 c'est la page d'administration de votre plugin qui est chargée, puis

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

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

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.

14
mor7ifer

Vous pouvez prendre @tollmanzanswer , et le développer 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');
3
Michael Ecklund

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");
  });
});
2
Kit Sunde

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 . Je l’utilise pour détecter la page sur laquelle je suis et mets en file d’attente, retire de la file d’attente de la manière suivante:

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

    }
}
2
recurse

Pour le faire, vous devez d'abord trouver le nom de la page d'administration. Ajoutez admin_enqueue_scripts avec wp_die($hook) et accédez à votre page de plug-in 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' );
0
IqbalBary
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' ) );
    }
}
0
Jashwant

De la documentation :

admin_print_scripts principalement utilisé pour faire écho au 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 admin_enqueue_scripts à la place. "

Idem avec admin_print_styles .

0
Tolea Bivol