WordPress как на ладони
wordpress jino

wp_enqueue_style() WP 2.6

Правильно добавляет файл 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 enqueue style: wp-includes/functions.wp-styles.php WP 4.9

<?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 );
}

Cвязанные функции

Из метки: styles (стили)

Еще из раздела: Регистрация script и style

wp_enqueue_style 30 комментариев
Полезные 3 Все
  • campusboy1946 cайт: www.youtube.com/c/wpplus

    А если я раньше подключал так

    <!--[if lt IE 9]>
    <script src="<?php bloginfo('template_directory'); ?>/js/html5.js"></script>
    <script src="<?php bloginfo('template_directory'); ?>/js/selectivizr-min.js"></script>
    <![endif]-->

    То как подключать теперь правильно?

    Ответить2.4 года назад #
    • Kama4660

      Я свое мнение скажу... shout

      Стандартизация подключения нужна для дальнейшей оптимизации (пр.: объединения скриптов) и для правильного подключения при зависимости скриптов от других. А в этом случает ничего этого не надо. Поэтому можно так и оставить...

      По сути, подключение через wp_enqueue_* требует дополнительных операций и вписать напрямую в код - это даже лучше, но только если точно известно что подключаемые скрипты независимые и никаким образом оптимизироваться не будут - ваш случай как раз такой.

      2
      Ответить2.4 года назад #
      • campusboy1946 cайт: www.youtube.com/c/wpplus

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

        Ответить2.4 года назад #
      • campusboy1946 cайт: www.youtube.com/c/wpplus

        Кстати, я так понимаю, можно CSS подключать через wp_enqueue_script, но правильно ли это? Меня больше интересуют, смогут ли плагины оптимизации типа minify или combain js and css работать с этими стилями? Просто мне хочется использовать wp_enqueue_script из-за способности быстро указывать отображения в хедере или футере, но если плагины не увидят их - смысла нет.

        Ответить2.4 года назад #
        • Kama4660

          Думаю что могут не увидеть, хотя возможно эти плагины именно такое подключение учитывают... Вообще там и там работают разные классы и глобальные переменные, т.е. это разные вещи и я думаю лучше не стоит.

          Чтобы стили подключить в подвале, можно повесить wp_enqueue_style() на хуки после wp_head: get_footer или в начало wp_footer. Или можно попробовать повесить в конец хука wp_head, вроде тоже должно сработать.

          1
          Ответить2.4 года назад #
          • campusboy1946 cайт: www.youtube.com/c/wpplus

            Забыл отписаться вчера, пишу сейчас (как раз тесты завершил). Да, wp_enqueue_style() надо использовать, иначе большинство подобных плагинов css не видят. В общем, результатом доволен после экспериментов, особенно большой выигрыш, когда css и js файлов много, замеры делал через GTmetrix и pagespeed insights. Подключение через стилей и скриптов через вордпрессовские хуки замедления сайта не вызвали, во всяком случае я не заметил по скорости генерации страниц и сервисами. Насчет подсказки подключения через wp_footer - спасибо! Не думаю, что буду так делать в реальности, но знания лишними не бывают smile

            Ответить2.4 года назад #
    • WPShop5 cайт: wpshop.ru

      Вот так: wp_style_add_data( 'your-style-id', 'conditional', 'lt IE 9' );

      1
      Ответить1.7 года назад #
  • campusboy1946 cайт: www.youtube.com/c/wpplus

    В последнее время для плагинов для своих сайтов делаю так:

    add_action('admin_menu', 'i_prices');
    function i_prices() {
     add_menu_page('Тарифы для калькулятора', 'Тарифы', 'manage_options', 'i-prices', 'i_prices_content', 'dashicons-chart-area', 2);
    }
    
    // Шаблон административной части
    function i_prices_content(){
    	require 'functions.php';
    }

    в functions.php (файл плагина, а не темы) пишу (надо с темы взять бутстрап, чтоб лишний раз не грузить в папку с плагином):

    wp_enqueue_style( 'i-bootstrap', get_stylesheet_directory_uri() . '/bootstrap.min.css', '', null, 'all' );

    И не надо там кучу кода городить, что в примере #2 Загрузка стилей на странице настроек плагина.

    Если я делаю не правильно, то хотелось бы услышать недостатки.

    Ответить1.5 года назад #
    • Kama4660

      Спасибо! Подправил пример, убрал лишнее.

      В твоем случае где при этом выводиться файл стилей? В каком месте HTML, по-моему в подвале он так будет подключаться, проверь?

      В принципе недостатков нет, минс в том, что если он в подвале подключается, что стили могут мигать при обновлении страницы...

      Ответить1.5 года назад #
      • campusboy1946 cайт: www.youtube.com/c/wpplus

        Да, в подвале. Ну то ж для плагинов я так делаю, там обычно нет много css и всё нормуль, не замечал помигиваний. А в теме я как положено подключаю. Точно не помню, но в плагине у меня не заработало как-то такое:

        add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

        Я не стал долго изучать почему и сделал, как объяснил ниже smile
        Ну а вообще можно в плагинах использоваться обычное html включение скриптов и стилей, как мне кажется, ведь в админке всё равно минификация и кеш не работает, а значит делать можно как удобно, да и всё. Но это для себя, в репозиторий скорее всего такую ядерную штуку не пропустят laugh там всё по фен-шую должно быть.

        Ответить1.5 года назад #
  • kenny5660

    Я не понимаю смысла использовать wp_enqueue_style(), если он подключает этот файл абсолютно на все страницы wp, даже там где он не используется и просто добавляет лишние килобайты, и так у каждого плагина....
    Например: у меня есть страница, допустим, "Личный кабинет" для него естественно понадобятся свои css стили, которые я подключу wp_enqueue_style(), хотя они используются только на одной странице....
    Как тогда лучше подключить стили.

    Ответитьгод назад #
    • campusboy1946 cайт: www.youtube.com/c/wpplus

      Эта функция нужна, чтобы контролировать подключение стиля в тот или иной момент. Чтобы это было гибко, используйте условные теги WordPress.

      1
      Ответитьгод назад #
    • ну а условные теги зачем существуют? Подключате по условию.

      Ответить2 месяца назад #
  • Александр

    Примеры

    1 Подключение через событие

    В этом примере, мы зарегистрируем и подключим стили и скрипты, используя событие 'wp_enqueue_scripts'.

    напишите для начинающих в каком месте это вставлять? в шаблоне активной темы в functions.php? Где именно? в конце в начале? спасибо

  • Дмитрий @

    Скажите как лучше? все стили запихнуть в один файл или для отдельных шаблонов создавать отдельный файл css и подключать его только в этом шаблоне?

    Со скриптами понятно. подключать там где они используются, во избежание ошибок..

    • Kama4660

      Если по объему стилей для каждого шаблона мало, то лучше пихнуть в общий файл. Если их там много, то лучше разделить. Если проект большой и будет расширяться, то лучше разделить, даже если стилей мало.

      Вообще если стилей мало. То лучше просто их включить прямо в HTML без файлов. Только на тех страницах где они нужны... Юзай wp_add_inline_style()

  • Vas

    Здравствуйте! Есть ли способ использовать функцию в хуке "the_content", но стиль добавить в head, а не в середину страницы?

    • Kama4660

      Нет конечно. Это тоже самое что спрашивать, есть ли способ изменить вчерашний день...

      Тебе нужно отдельно подключить стили в head и отдельно менять the_content...

      1
      • Vas

        Хм, но что делать, если подключение зависит от наличия в контенте определенной подстроки?

        • campusboy1946 cайт: www.youtube.com/c/wpplus

          Получить контент в момент срабатывания хука wp_head, проанализировать и решить, что делать.

          1
  • Дмитрий @

    Добрый День! Помогите разобраться в коде, пожалуйста!

    Напишу все содержание моих файлов, мне необходимо подключить файл style.css, что у меня уже битый час не получается, не понимаю в чем ошибка:

    Index.php

    <?php get_header(); ?>
    	<h1>Hellow World</h1>
    <?php get_footer(); ?>
    

    Header.php

    <!DOCTYPE html>
    	<html>
    		<head>
    			<meta charset="utf-8">
    
    			<link rel="stylesheet_url" href="<?php bloginfo( 'stylesheet_url' ); ?>">
    		</head>
    		<body>
    			<header>
    				<div class="header_widgets">
    					<h1>Это Хедер!</h1>
    				</div>
    			</header>

    footer.php

        <footer>
    				<div class="footer_widgets">
    					<h2>Это Футер</h2>
    				</div>
    		</footer>
    	</body>
    </html>

    functions.php

    <?php
    add_action( 'wp_enqueue_style', 'testheme_style' );
    function testheme_style() {
    	wp_enqueue_style( 'style', get_stylesheet_uri() );
    }

    style.css

    .footer_widgets {
    	width: 960px;
    	color: #004d66;
    }
    
    .header_widgets {
    	width: 960px;
    	color: #004d66;
    }

    Результат есть - выводи страницу с подключенным хедером и футером, но цвета не подключается таблица стилей. Где мой косяк!? help

    Ответить4 месяца назад #
    • campusboy1946 cайт: www.youtube.com/c/wpplus

      Привет. Где хранится файл style.css? Не забывайте ещё о браузерном кешировании. А также у вас недоточёт: вы и через header.php подключаете стиль и через functions. Выберите какой-то один способ, желательно второй. Откройте главную страницу сайта, откройте исходный код в браузере и посмотрите, есть ли ссылка на ваш файл стилей.

      1
      Ответить4 месяца назад #
      • Дмитрий @

        УХ. Спасибо! Разобрался. Просто удалил в хедере smile

        Ответить4 месяца назад #
  • Михаил cайт: seomi.ru @

    Здравствуйте. Как можно изменить версию основного файла стилей дочерней темы?
    Ведь этот файл автоматически подключается, без какой либо версии.

    Сейчас у меня так:

    <link rel='stylesheet' id='virtue_child-css' href='http://seomi.ru/wp-content/themes/virtue-shild/style.css' type='text/css' media='all'/>
    

    А нужно сделать так, и менять версию по необходимости:

    <link rel='stylesheet' id='virtue_child-css' href='http://seomi.ru/wp-content/themes/virtue-shild/style.css?ver=0.0.1' type='text/css' media='all'/>
    Ответить3 месяца назад #
    • campusboy1946 cайт: www.youtube.com/c/wpplus

      Привет. Попробуй отменить его подключение с помощью wp_deregister_style(), а затем снова подключить как тебе нужно.

      Ответить3 месяца назад #
      • Михаил cайт: seomi.ru @

        Не отключается этот файл. Просто дополнительный файл подключается, тот же файл, но уже с версией.

        Ответить3 месяца назад #
        • campusboy1946 cайт: www.youtube.com/c/wpplus

          А ID скрипта в точности прописан, как и в оригинале? Помнится я такое делал, работало отлично.

          Ответить3 месяца назад #
          • Михаил cайт: seomi.ru @

            Да, пробовал по разному: virtue_child и style
            Не понятно под каким идентификатором он зарегистрирован. Он ведь сам подключается, так как основной файл темы.

            Ответить3 месяца назад #
  • Как правильно подключать шрифты с google fonts?
    Пробовал так

    wp_enqueue_style( 'googlefonts', '//fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic' );

    Выводит:

    <link rel='stylesheet' id='googlefonts-css'  href='//fonts.googleapis.com/css' type='text/css' media='all' />
    Ответить2 месяца назад #
    • Kama4660

      У тебя плагин или тема что-то режет. Такой вариант на чистом ВП работает как нужно...

      Ответитьмесяц назад #

Здравствуйте, !

Ваш комментарий