wp_enqueue_style() – подключение стилей CSS

Рекомендуемый метод подключения CSS-стилей в WordPress. Так же, как и wp_enqueue_script(), эта функция ставит файл в очередь на вывод. После этого выводит его в HTML либо между тегами <head>, либо в футере сайта.

Если хотите узнать больше про правильное подключение CSS стилей WordPress, то могу порекомендовать вам мой видеоурок.

Стили выводятся в футере (перед </body>) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа.

wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' )

Параметры функции wp_enqueue_style()

$handle
(строка) рабочее название, идентификатор таблицы стилей, которую нужно подключить (поставить в очередь)
$src
(строка|логическое) абсолютный URL таблицы стилей на сайте. Этот параметр (а также все последующие) нужен только в том случае, если WordPress ещё не знает про таблицу стилей с указанным идентификатором, то есть, если она уже зарегистрирована при помощи wp_register_style(), то этот и последующие параметры отпадают.
$deps
(массив) зависимости от других CSS-файлов, то есть, если есть какие-то стили, которые нужно загрузить перед нашим подключаемым файлом, то нужно перечислить их идентификаторы в массиве
$ver
(строка|логическое) версия файла. По умолчанию — текущая версия WordPress. Можно указать null, тогда версия не будет указана вообще. Параметр нужен для того, чтобы посетитель получал актуальную версию файла, а не из кэша. Подробнее про параметр.
$media
(строка) атрибут media таблицы стилей. По сути означает — для каких устройств предназначен данный файл стилей, например all — для всех, print — для печати и т.д.

Почему CSS не подключается к HTML?

Хочу тем не менее также ответить вам и на этот вопрос. И правда, почему CSS-файл нельзя подключить напрямую к HTML, например вставить тег <link rel="stylesheet"... перед закрывающим тегом </head>?

Итак, вот почему – если вы подключите CSS напрямую в HTML, то с ним уже ничего нельзя будет сделать, по сути он будет захардкоден в вашей теме WordPress. Его нельзя будет отключить, плагины оптимизации не смогут его сжать или объединить с другими CSS-файлами, невозможно будет поменять порядок подключения с другими стилями.

Пример 1. Как подключить стили

Стили также можно подключать через хуки wp_enqueue_scripts (сайт) и admin_enqueue_scripts (админка WordPress).

add_action( 'wp_enqueue_scripts', 'true_stili_frontend', 25 );
 
function true_stili_frontend() {
 	wp_enqueue_style( 'true_stili', get_stylesheet_directory_uri() . '/assets/true_stili.css' );
}

Не знаете, куда вставлять код?

Теперь сделаем так, чтобы файл подключался только в админке:

add_action( 'admin_enqueue_scripts', 'true_stili_backend', 25 );
 
function true_stili_backend() {
 	wp_enqueue_style( 'true_stili', get_stylesheet_directory_uri() . '/assets/true_stili.css' );
}

А что, если файл с указанным рабочим названием уже зарегистрирован через wp_register_style()? Тогда подключить его будет ещё проще.

add_action( 'wp_enqueue_scripts', 'true_stili_frontend', 25 );
 
function true_stili_frontend() {
 	wp_enqueue_style( 'true_stili' );
}

Подробнее про кэширование и параметр $ver

Хотел бы чуть подробнее рассказать про варианты использования параметра $ver.

использование параметра $ver в функции wp_enqueue_style() в WordPress
Обратите внимание, что в конце URL таблицы стилей добавляется параметр ?ver=, каждый раз, когда он изменяется, кэш файла в браузере сбрасывается.
  • По умолчанию параметр принимает значение false, при этом значении параметра в качестве версии ?ver= файла стилей будет использоваться текущая версия WordPress, поэтому я бы не рекомендовал оставлять это значение параметра.
  • Мы можем полностью отказаться от этого query string, если укажем значение параметра null, тогда ?ver= не будет добавляться в конце URL файла стилей.
  • Я иногда использую time() на своих тестовых сайтах, т.к. этот параметр возвращает текущее значение текущего UNIX-времени в секунду и значит, каждую секунду значение другое. Но это вариант для ленивых и только для тестовых сайтов, потому что полностью скипается любое кэширование.
  • Лучший вариант – filemtime(), которая позволяет получить значение UNIX-времени последнего обновления файла! Пример ниже.
wp_enqueue_style(
	'true_stili',
	get_stylesheet_directory_uri() . '/assets/true_stili.css',
	array(),
	filemtime( get_stylesheet_directory() . '/assets/true_stili.css' )
);

Также можете почитать подробнее про функции get_stylesheet_directory_uri() и get_stylesheet_directory(), потому что у них есть одно принципиально важное отличие.

Если хотите узнать больше про правильное подключение стилей в WordPress, то могу порекомендовать вам мой видеоурок.

Пример 2. CSS для отдельной страницы

Если вы хотите подключить какой-то один определённый CSS-файл для какой-либо определённой страницы сайта, то можете воспользоваться любыми условными тегами WordPress.

Скажу вам, что такое бывает нужно не очень часто, только в том случае, если одна единственная определённая страница сайта содержит огромное количество стилей, которые не используются где-либо ещё.

Например вы хотите подключить отдельный файл для страницы контактов:

add_action( 'wp_enqueue_scripts', 'true_stili_contacts', 25 );
 
function true_stili_contacts() {
	if( is_page( 'contacts' ) ) {
	 	wp_enqueue_style( 'true_stili', ... );
	}
}

Не знаете, куда вставлять код?

Пример 3. CSS специально для настроек плагина

В данном случае очевидно, что файл с таблицей стилей нужно использовать только на одной-единственной странице — странице настроек данного плагина. WordPress позволяет реализовать это при помощи специального хука.

Итак, предположим, у нас есть какой-то плагин, вставляем в него следующий код:

/*
 * Пример будет работать начиная с версии WordPress 2.6.3, 
 */
add_action( 'admin_init', 'true_plugin_init' );
add_action( 'admin_menu', 'true_plugin_menu' );
 
function true_plugin_init() {
	/* 
	 * Сначала регистрируем стили
	 * файл должен находиться в папке с выполняемым файлом плагина
	 */
	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_stili' );
}
 
function true_plugin_stili() {
	/*
	 * Ставим в очередь на вывод
	 */
	wp_enqueue_style( 'trueplugin' );
}
 
function true_plugin_html() {
	/*
	 * Собственно содержимое страницы настроек
	 */
	echo 'Это страница настроек';
}

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с сайтом или разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда будем рады вам помочь!

Комментарии — 29

Комментирование этого поста более не доступно.