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

Хорошей практикой при работе с 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, прежде чем добавлять функцию - она может быть уже включена в ядро.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: wp.tutsplus.com/articles/tips-articles/quick-tip-conditionally-including-js-and-css-with-get_current_screen/
Перевел: Сергей Фастунов
Урок создан: 14 Мая 2012
Просмотров: 16700
Правила перепечатки


5 последних уроков рубрики "Wordpress"

^ Наверх ^