Хук admin_enqueue_scripts используется для подключения файлов стилей и скриптов, предназначенных исключительно для страниц админ-панели WordPress. Это позволяет оптимизировать загрузку ресурсов, загружая их только там, где они нужны, и предотвращая ненужную загрузку на всех страницах панели администратора.
do_action( 'admin_enqueue_scripts', string $hook_suffix );
- $hook_suffix (строка) — суффикс текущей страницы администрирования, например
edit.php,options-general.phpи т.д.
Хук admin_enqueue_scripts срабатывает при каждом запросе страницы в админке и предоставляет параметр $hook_suffix, который указывает текущую страницу администрирования. Использование $hook_suffix позволяет подключать скрипты и стили только для определенных страниц панели, таких как edit.php или plugins.php, избегая избыточной нагрузки на систему.
Пример 1: Подключение скрипта на странице редактирования записей
В этом примере подключается JavaScript-файл admin-custom.js только для страницы редактирования записей (edit.php).
function enqueue_custom_script_for_edit_page( $hook ) {
if ( 'edit.php' !== $hook ) {
return;
}
wp_enqueue_script( 'custom-admin-script', plugin_dir_url( __FILE__ ) . 'js/admin-custom.js', array(), '1.1', true );
}
add_action( 'admin_enqueue_scripts', 'enqueue_custom_script_for_edit_page' );
Пример 2: Подключение CSS стилей на всех страницах админ-панели
Если необходимо подключить стили на всех страницах админки, можно использовать следующий код. Этот пример подключает файл стилей admin-style.css, который расположен в папке темы.
function enqueue_custom_admin_styles() {
wp_enqueue_style( 'admin-custom-style', get_template_directory_uri() . '/css/admin-style.css', array(), '1.0.0' );
}
add_action( 'admin_enqueue_scripts', 'enqueue_custom_admin_styles' );
Пример 3: Подключение скриптов на конкретной странице с использованием $pagenow
Для определения страницы админки можно использовать глобальную переменную $pagenow. В данном примере подключаются CSS и JavaScript только на странице nav-menus.php.
function enqueue_scripts_for_menu_page() {
global $pagenow;
if ( 'nav-menus.php' !== $pagenow ) {
return;
}
wp_enqueue_style( 'menu-page-css', get_template_directory_uri() . '/css/menu-style.css', array(), '1.2' );
wp_enqueue_script( 'menu-page-js', get_template_directory_uri() . '/js/menu-script.js', array( 'jquery' ), '1.2', true );
}
add_action( 'admin_enqueue_scripts', 'enqueue_scripts_for_menu_page' );
Пример 4: Использование $hook_suffix для подключения стилей на подстранице настроек плагина
Этот пример подключает CSS и JavaScript только на подстранице пользовательского меню в админке.
function custom_plugin_admin_assets( $hook ) {
if ( 'tools_page_custom-plugin-settings' !== $hook ) {
return;
}
wp_enqueue_style( 'plugin-settings-css', plugins_url( 'css/settings-style.css', __FILE__ ), array(), '1.3' );
wp_enqueue_script( 'plugin-settings-js', plugins_url( 'js/settings-script.js', __FILE__ ), array(), '1.3', true );
}
add_action( 'admin_enqueue_scripts', 'custom_plugin_admin_assets' );
Заключение
Хук admin_enqueue_scripts — важный инструмент для разработчиков WordPress, позволяющий оптимально загружать CSS и JavaScript только на нужных страницах админ-панели. Это помогает улучшить производительность и удобство работы в админке, а также обеспечить гибкость и структурированность при разработке плагинов и тем.