Статьи

Совет: условно включая JS и CSS с get_current_screen

Февраль 7, 2019

Как многие говорили до меня: «Хороший гражданин WordPress загружает свои файлы только там, где они нужны». Этот принцип применяется как к front-end, так и к back-end (admin). Нет оправдания для загрузки файлов CSS и JS на каждую страницу администратора, когда они нужны только на одной созданной вами странице. К счастью, для правильной работы достаточно одного вызова функции.

«Никогда не включайте файлы CSS или JS на все страницы администратора. Это вызовет конфликты с другими плагинами».

Есть функция WordPress для всего

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

Что нужно знать о функции get_current_screen :

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

Несколько строк кода имеют все значение

Предположим, у вашего плагина есть страница настроек в меню «Настройки», которую вы создали:

1
add_options_page(‘My Plugin’, ‘My Plugin’, ‘manage_options’, ‘my_plugin’, ‘my_plugin_options’);

На этой странице вам понадобятся дополнительные CSS и JavaScript, чтобы вы также добавили этот код:

1
2
3
4
5
6
7
// Bad code below!
add_action(‘admin_enqueue_scripts’, ‘my_plugin_scripts’);
 
function my_plugin_scripts() {
    wp_enqueue_style(‘farbtastic’);
    wp_enqueue_script(‘farbtastic’);
}

Плохо! Не делай этого! Приведенный выше фрагмент кода будет включать CSS и JS для палитры цветов Farbtastic на каждой странице администратора. Если другие плагины хотят избавиться от ваших включений на своих страницах, они должны использовать функции wp_dequeue_* для их удаления из очереди. Это действительно ненужно и грубо с нашей стороны, потому что мы можем написать лучший код!

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
add_action(‘admin_enqueue_scripts’, ‘my_plugin_scripts’);
 
function my_plugin_scripts() {
    // Include JS/CSS only if we’re on our options page
    if (is_my_plugin_screen()) {
        wp_enqueue_style(‘farbtastic’);
        wp_enqueue_script(‘farbtastic’);
    }
}
 
// Check if we’re on our options page
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 функции add_options_page .

Код очень прост и легко адаптируется к любому экрану администратора. Чтобы увидеть идентификатор текущего экрана, просто сбросьте содержимое $screen с помощью:

1
echo ‘<pre>’ .

Что взять с собой домой:

  • Никогда не включайте файлы CSS или JS на все страницы администратора; это вызовет конфликты с другими плагинами.
  • Используйте get_current_screen после init чтобы узнать, когда ваш экран администратора виден, и только потом включать дополнительные файлы.
  • Вы можете найти список основных идентификаторов экрана администратора в Кодексе в разделе Справочник экрана администратора .
  • Никогда не повторяйте теги <script> или <style> ; всегда используйте функции wp_enqueue_* .
  • Проверьте Кодекс, чтобы увидеть, включен ли нужный вам скрипт в ядро ​​WP.
41
Share: