Как я могу называть стили /скрипты на страницах с определенными /wp-admin?

У меня есть две простые функции, которые загружают вещи, используя wp_enqueue_style() и wp_enqueue_script() , что-то вроде этого:

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

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

... и несколько страниц администрирования, созданных с помощью add_menu_page() и 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'); 

Как загрузить две мои функции только на этих страницах?

Сейчас я использую:

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

Но он загружает мои файлы на каждой странице администратора, что совсем не приятно.

Могу ли я сделать это с помощью одной простой строки в functions.php или же выставлять их в очередь на моих страницах отдельно (я предпочитаю первый вариант сильно, так как мне пришлось бы редактировать много администраторов -page-создание-функции).

Спасибо!

41 голос | спросил Wordpressor 4 FebruaryEurope/MoscowbSat, 04 Feb 2012 23:56:16 +0400000000pmSat, 04 Feb 2012 23:56:16 +040012 2012, 23:56:16

8 ответов


26

add_menu_page и add_submenu_page оба возвращают суффикс сундука страницы, который можно использовать для идентификации страницы с определенными перехватами. Таким образом, вы можете использовать этот суффикс в сочетании с переменными hooks admin_print_styles-{$hook_suffix} и admin_print_scripts-{$hook_suffix}, чтобы специально настроить таргетинг на эти страницы.

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

Я считаю, что это чистый метод для добавления всего этого, потому что он обрабатывается в пределах одной функции. Если вы решите удалить эту функциональность, просто удалите вызов одной функции.

ответил tollmanz 5 FebruaryEurope/MoscowbSun, 05 Feb 2012 02:51:28 +0400000000amSun, 05 Feb 2012 02:51:28 +040012 2012, 02:51:28
49

Проблема с ответом @tollmanz заключается в том, что, поскольку вы подключаете к -print-styles и -print-scripts hooks, вы должны сгенерировать HTML-код для загрузки ваших скриптов вручную. Это не оптимально, так как вы не получаете хорошую зависимость и версию, которая поставляется с wp_enqueue_script() и wp_enqueue_style(). Это также не позволяет помещать вещи в нижний колонтитул, если это лучшее место для них.

Итак, вернемся к вопросу о OP: какой лучший способ обеспечить, чтобы я мог устанавливать JS /CSS только на определенные страницы администратора?

  1. Подключите действие «load - {$ my_admin_page}», чтобы делать что-то только в том случае, если загружена ваша страница администрирования вашего конкретного плагина, а затем

  2. Подключите действие "admin_enqueue_scripts", чтобы правильно добавить вызовы wp_enqueue_script.

Кажется, это немного боль, но на самом деле это очень просто реализовать. Сверху:

    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 18 TueEurope/Moscow2012-12-18T00:43:04+04:00Europe/Moscow12bEurope/MoscowTue, 18 Dec 2012 00:43:04 +0400 2012, 00:43:04
14

Если вы используете get_current_screen() , вы можете определить, какую страницу вы используете сверху есть. В статье codex, которую я связал, есть пример, который показывает, как использовать get_current_screen() с помощью add_options_page(), этот метод будет работать для любой страницы администратора.

ответил mor7ifer 5 FebruaryEurope/MoscowbSun, 05 Feb 2012 00:15:23 +0400000000amSun, 05 Feb 2012 00:15:23 +040012 2012, 00:15:23
3

Вы можете взять @tollmanz &hl=ru и немного расширьте его, что также позволяет использовать условное использование ...

Пример:

/* 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 21 stEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 21 Sep 2012 01:17:32 +0400 2012, 01:17:32
1

Мне было интересно то же самое. Существует современная версия, которая использует 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 8 J000000Wednesday15 2015, 11:58:43
1

Как указано выше, mor7ifer, вы можете использовать собственную функцию WordPress get_current_screen () . Если вы пропустите выход этой функции, например:

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

... вы заметите ключ с именем base . Я использую это, чтобы определить, на какой странице я нахожусь и в очереди, dequeue:

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

    }
}
ответил recurse 15 22016vEurope/Moscow11bEurope/MoscowTue, 15 Nov 2016 00:24:02 +0300 2016, 00:24:02
0

Из документации :

  

admin_print_scripts в основном используется для эхо-встроенного javascript. admin_print_scripts не следует использовать для размещения стилей или скриптов на страницах администратора. Вместо этого используйте admin_enqueue_scripts .

То же самое с admin_print_styles .

ответил Tolea Bivol 5 J000000Friday13 2013, 15:31:03
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 11 Jam1000000amSun, 11 Jan 2015 10:48:40 +030015 2015, 10:48:40

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132