wp_enqueue_style

Правильно добавляет файл CSS стилей. Регистрирует файл стилей, если он еще не был зарегистрирован.

Если файл стилей был предварительно зарегистрирован через wp_register_style(), то его можно добавить в очередь, указав название (идентификатор) в первом параметре $handle.

Если файл не был предварительно зарегистрирован, то эта функция зарегистрирует файл и добавит его в очередь.

Добавленный в очередь файл стилей выводится в <head> части документа.

С версии 3.3. wp_enqueue_style() можно вызывать в середине документа. В этом случае файл будет выведен в подвале, перед тегом </body> (где вызывается wp_footer()).

wp_enqueue_style() как и wp_enqueue_script() принято вызывать во время событий: wp_enqueue_scripts и admin_enqueue_scripts.

Используйте wp_style_add_data() чтобы добавить условия подключения стилей.

Чтобы вставить в текст сами CSS стили, а не файл стилей, используйте wp_add_inline_style()

Хуков нет.

Возвращает

Ничего не возвращает.

Использование

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
$handle(строка) (обязательный)
Название файла стилей (идентификатор). Строка в нижнем регистре. Если строка содержит знак вопроса (?): scriptaculous?v=1.2, то предшествующая часть будет названием скрипта, а все что после будет добавлено в УРЛ как параметры запроса. Так можно указывать версию подключаемого скрипта.
$src(строка/логический)
УРЛ к файлу стилей. Например, http://site.ru/css/style.css. Не нужно указывать путь жестко, используйте функции: plugins_url() (для плагинов) и get_template_directory_uri() (для тем). Внешние домены можно указывать с неявным протоколом //notmysite.ru/css/style.css.
По умолчанию: false
$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 );
}

Вставляем этот код в файл темы function.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('admin_print_styles-'. $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-includes/functions.wp-styles.php

WP 4.7.3

<?php
function wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );

	$wp_styles = wp_styles();

	if ( $src ) {
		$_handle = explode('?', $handle);
		$wp_styles->add( $_handle[0], $src, $deps, $ver, $media );
	}
	$wp_styles->enqueue( $handle );
}

Комментарии:


Оставить комментарий

Your email address will not be published. Required fields are marked *