wp_enqueue_style()
Правильно добавляет файл CSS стилей. Регистрирует файл стилей, если он еще не был зарегистрирован.
Если файл стилей был предварительно зарегистрирован через wp_register_style(), то его можно добавить в очередь, указав название (идентификатор) в первом параметре $handle.
Если файл не был предварительно зарегистрирован, то эта функция зарегистрирует файл и добавит его в очередь.
Добавленный в очередь файл стилей выводится в <head> части документа.
С версии 3.3 можно вызывать в середине документа. В этом случае файл будет выведен в подвале, перед тегом </body> (где вызывается wp_footer()).
Эту функцию как и wp_enqueue_script() принято вызывать во время событий:
- wp_enqueue_scripts — для внешней части сайта.
- admin_enqueue_scripts — для админ-панели.
- login_enqueue_scripts — для страницы входа (wp-login.php).
- Используйте wp_style_add_data(), чтобы добавить условия подключения стилей.
- Используйте wp_add_inline_style(), чтобы вставить в документ сами CSS стили, а не файл стилей.
Ошибка начинающих разработчиков. Функция ничего не выведет, если в теме не используется wp_head() или wp_footer(). Именно в момент вызова этих функций срабатывает хук, который добавляет стили.
Хуков нет.
Возвращает
null. Ничего не возвращает.
Использование
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
- $handle(строка) (обязательный)
- Название файла стилей (идентификатор). Строка в нижнем регистре. Если строка содержит знак вопроса (?): styleaculous?v=1.2, то предшествующая часть будет названием стиля, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого стиля.
- $src(строка)
- УРЛ к файлу стилей. Например, http://example.com/css/style.css. Не нужно указывать путь жестко, используйте функции: plugins_url() (для плагинов) и get_template_directory_uri() (для тем). Внешние домены можно указывать с неявным протоколом //example.com/css/style.css.
По умолчанию: '' - $deps(массив)
- Массив идентификаторов других стилей, от которых зависит подключаемый файл стилей. Указанные тут стили, будут подключены до текущего.
По умолчанию: array() - $ver(строка/логический)
- Строка определяющая версию стилей. Версия будет добавлена в конец ссылки на файл:
?ver=3.5.1. Если не указать (установлено false), будет использована версия WordPress. Если установить null, то никакая версия не будет установлена.
По умолчанию: false - $media(строка/логический)
- Устанавливается значение атрибута media. media указывает тип устройства для которого будет работать текущий стиль. Может быть:
all,screen,handheld,printилиall (max-width:480px). Полный список смотрите здесь.
По умолчанию: 'all'
Примеры
#1 Подключение через событие
В этом примере, мы зарегистрируем и подключим стили и скрипты, используя событие 'wp_enqueue_scripts'.
// правильный способ подключить стили и скрипты
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
// add_action('wp_print_styles', 'theme_name_scripts'); // можно использовать этот хук он более поздний
function theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
Вставляем этот код в файл темы functions.php или в плагин. В любое место, но до функции wp_head() которая вызывается в header.php
#2 Загрузка стилей на странице настроек плагина
add_action( 'admin_menu', 'my_plugin_admin_menu' );
function my_plugin_admin_menu() {
// регистрируем страницу плагина
$page = add_submenu_page(
'edit.php',
__( 'My Plugin', 'myPlugin' ),
__( 'My Plugin', 'myPlugin' ),
'administrator',
__FILE__,
'my_plugin_manage_menu'
);
// используя идентификатор страницы плагина подключаемся к нужному событию
add_action( 'load-'. $page, 'my_plugin_admin_styles' );
}
// Эта функция будет вызвана только на странице настроек плагина,
function my_plugin_admin_styles() {
wp_enqueue_style( 'myPluginStylesheet', plugins_url( 'stylesheet.css', __FILE__ ) );
}
// Страница настроек
function my_plugin_manage_menu() {
// код страницы настроек
}
Заметки
Использует глобальную переменную $wp_styles, которая содержит экземпляр класса WP_Styles. Использует методы WP_Styles::add(), WP_Styles::enqueue().
Заметки
- Смотрите: WP_Dependencies::add()
- Смотрите: WP_Dependencies::enqueue()
Список изменений
| С версии 2.6.0 | Введена. |
Код wp_enqueue_style() wp enqueue style WP 6.7.1
function wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' ) {
_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );
$wp_styles = wp_styles();
if ( $src ) {
$_handle = explode( '?', $handle );
$wp_styles->add( $_handle[0], $src, $deps, $ver, $media );
}
$wp_styles->enqueue( $handle );
}