Условная загрузка CSS и JavaScript файлов для отдельных страниц

19 Мар 2023г. в 04:33

Хорошей практикой при работе с WordPress является привычка организовывать загрузку файлов только тогда, когда нужно. Данный принцип касается как клиентской части, так и инструментов администратора. Нет причин загружать CSS и JavaScript файлы для всей панели администратора, когда они нужны только на одной странице. В WordPress имеется инструмент, который позволяет реализовать такой функционал с помощью только одной функции.

Функция WordPress для выборочной загрузки файлов
Почти все страницы панели администратора имеют уникальный адрес URL, поэтому достаточно просто определить момент загрузки конкретной страницы и включить JavaScript и CSS только для нее. Можно использовать переменные $_SERVER['REQUEST_URI'] или $_GET['action']. Но есть более простой, элегантный и стандартизированный метод для решения таких задач - функция get_current_screen.

Несколько фактов о функции get_current_screen:

Она была введена в WordPress v3.1. Поэтому попытка использовать ее в более старых версиях приведет к ошибке. Используйте функцию function_exists для проверки и организации альтернативного метода.
Она недоступна в крюках admin_init или init, так как инициируется после их вызова.
Функция возвращает объект WP_Screen с большим набором информации, но, как правило, основной интерес представляет свойство id.
Она не доступна в клиентской части (так как не предназначена для использования там).

Несколько строк кода создают полное отличие
Допустим ваш плагин имеет страницу опций в меню установок, которая создается с помощью следующего кода:

add_options_page('My Plugin', 'My Plugin', 'manage_options', 'my_plugin', 'my_plugin_options');
Для данной страницы нужно несколько дополнительный CSS и JavaScript файлов:

// Плохой код! Повторять не следует!
add_action('admin_enqueue_scripts', 'my_plugin_scripts');
function my_plugin_scripts() {
wp_enqueue_style('farbtastic');
wp_enqueue_script('farbtastic');
}
Так делать не следует! Выше приведенный код подключит CSS и JavaScipt для инструмента установки цвета Farbtastic к каждой странице панели администратора. Если другому плагину потребуется отключить ваши файлы, то ему придется использовать функцию wp_dequeue_*. Но мы можем написать другой код, более эффективный код.

add_action('admin_enqueue_scripts', 'my_plugin_scripts');

function my_plugin_scripts() {
// Включаем JS/CSS только если находимся на странице нашего плагина
if (is_my_plugin_screen()) {
wp_enqueue_style('farbtastic');
wp_enqueue_script('farbtastic');
}
}

// Проверка, где мы находимся
function is_my_plugin_screen() {
$screen = get_current_screen();
if (is_object($screen) && $screen->id == 'settings_page_my_plugin') {
return true;
} else {
return false;
}
}
Мы добавили только одно выражение if и простую функцию is_my_plugin_screen, которая проверяет факт нахождения на нашей странице плагина. Переменная $screen содержит объект WP_Screen, в котором интерес представляет свойство id. Значение свойства id состоит из префикса “settings_page_“, который устанавливается для всех страниц установки, и строки “my_plugin”, которая уникальна для нашего плагина, так как определяется в 4 параметре при вызове функции add_options_pageы.

Код очень простой и легко адаптируется к любой странице администратора. Для определения значения свойства id можно воспользоваться просмотром содержания переменной $screen с помощью следующего кода:

echo '<pre>' . print_r(get_current_screen(), true) . '</pre>';

Заключение
Никогда не включайте CSS или JavaScript для всех страниц администратора - данное действие может вызвать конфликт с другими плагинами.
Используйте get_current_screen после init.
Список основных идентификаторов для панели администратора приведен в кодексе WordPress.
Никогда не используйте теги <script> или <style>, всегда используйте функцию wp_enqueue_*.
Проверьте кодекс WordPress, прежде чем добавлять функцию - она может быть уже включена в ядро.