Рекомендуемый метод подключения CSS-стилей в WordPress. Так же, как и wp_enqueue_script(), эта функция ставит файл в очередь на вывод. После этого выводит его в HTML либо между тегами <head>, либо в футере сайта.
Стили выводятся в футере (перед </body>) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа.
wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' ) |
- $handle
- (строка) рабочее название, идентификатор таблицы стилей, которую нужно подключить (поставить в очередь)
- $src
- (строка|логическое) абсолютный URL таблицы CSS-стилей на сайте. Этот параметр (а также все последующие) нужен только в том случае, если WordPress ещё не знает про таблицу стилей с указанным идентификатором, то есть, если файл CSS уже зарегистрирован при помощи
wp_register_style(), то этот и последующие параметры отпадают. - $deps
- (массив) зависимости от других CSS-файлов, то есть, если есть какие-то стили, которые нужно загрузить перед нашим подключаем файлом, то нужно перечислить их идентификаторы в массиве
- $ver
- (строка|логическое) версия файла. По умолчанию — текущая версия WordPress. Можно указать
null, тогда версия не будет указана вообще. Параметр нужен для того, чтобы посетитель получал актуальную версию файла, а не из кэша. - $media
- (строка) атрибут
mediaтаблицы стилей. По сути означает — для каких устройств предназначен данный CSS-файл, напримерall— для всех,print— для печати и т.д.
Примеры
Во всех примерах будем использовать один и тот же файл true_style.css. Стили также можно подключать через хуки wp_enqueue_scripts и admin_enqueue_scripts, хотя это и не обязательно, как со скриптами.
Итак, сначала подключим файл во фронтэнде сайта:
function true_style_frontend() { wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css' ); } add_action( 'wp_enqueue_scripts', 'true_style_frontend' ); |
Можно подключить файл непосредственно на сайт, вставив функцию прямо в HTML-шаблон, или же в functions.php, при этом не забыв воспользоваться условным тегом is_admin().
if( !is_admin() ) wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css', array(), '14981210', 'screen' ); |
Теперь сделаем так, чтобы файл подключался только в админке:
function true_style_backend() { wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/true_style.css' ); } add_action( 'admin_enqueue_scripts', 'true_style_backend' ); |
А что, если файл с указанным рабочим названием уже зарегистрирован через wp_register_style()? Тогда подключить его будет ещё проще. Опять-таки пример для админки:
if( is_admin() ) wp_enqueue_style( 'true_style' ); |
Кстати, список всех зарегистрированных стилей можно узнать следующим образом:
/* * Объект $wp_styles содержит информацию обо всех зарегистрированных на данный момент стилях */ global $wp_styles; print_r( $wp_styles ); |
CSS специально для настроек плагина
В данном случае очевидно, что файл с таблицей стилей нужно использовать только на одной-единственной странице — странице настроек данного плагина. WordPress позволяет реализовать это при помощи специального хука.
Итак, предположим, у нас есть какой-то плагин, вставляем в него следующий код:
/* * Пример будет работать начиная с версии WordPress 2.6.3, */ add_action( 'admin_init', 'true_plugin_init' ); add_action( 'admin_menu', 'true_plugin_menu' ); function true_plugin_init() { /* * Сначала регистрируем стили * файл CSS должен находиться в папке с выполняемым файлов плагина */ wp_register_style( 'trueplugin', plugins_url('true-plugin.css', __FILE__) ); } function true_plugin_menu() { /* * Создаем страницу настроек плагина, она будет находиться в разделе Параметры */ $page_suffix = add_submenu_page( 'options-general.php', 'True плагин', 'True плагин настройки', 'administrator', __FILE__, 'true_plugin_html' ); /* * Создаем хук, содержащий суффикс созданной страницы настроек $page_suffix */ add_action( 'admin_print_styles-' . $page_suffix, 'true_plugin_styles' ); } function true_plugin_styles() { /* * Ставим в очередь на вывод */ wp_enqueue_style( 'trueplugin' ); } function true_plugin_html() { /* * Собственно содержимое страницы настроек */ echo 'Это страница настроек'; } |
Источник: misha.blog
