Intereting Posts

Как я могу ставить в очередь стили / скрипты на определенных страницах / 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 или выложить их в отдельные страницы отдельно (я предпочитаю первый вариант сильно, так как мне придется редактировать множество функций создания админ-страниц).

Благодаря!

Solutions Collecting From Web of "Как я могу ставить в очередь стили / скрипты на определенных страницах / wp-admin?"

add_menu_page и add_submenu_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 заключается в том, что, поскольку вы подключаетесь к записям -print-styles и -print-scripts, вы должны сгенерировать 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' ) ); } } 

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

Вы могли бы принять ответ @tollmanz и немного расширить его, что также позволяет использовать условное использование …

Пример:

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

Я думал о том же самом. Существует современная версия, которая использует 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"); }); }); 

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

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

… вы заметите ключ, называемый базой . Я использую это, чтобы определить, на какой странице я нахожусь, и в очереди, 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'); } } 

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

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

То же самое с 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' ) ); } }