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

Рекомендуемый метод подключения 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 'Это страница настроек';
}

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

  • Имран4 июня 2014 в 19:06 #

    Стили выводятся в футере (перед ) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа. КАК их поставить в очередь на вывод где-то посередине HTML??

  • Артем29 декабря 2014 в 11:12 #

    Приветствую, Михаил! С наступающим!
    Подскажи пожалуйста, подключаю стили как положено и ставлю их в очередь, но при этом выдается ошибка 404, типа файл не найден.

    function art_add_css(){
        wp_register_style( 'ivs_style', plugins_url( 'css/style.css', __FILE__)) ;
        wp_enqueue_style('ivs_style');
    }
     
    add_action('wp_enqueue_scripts', 'art_add_css');

    http://snap.ashampoo.com/byDpINdw
    В чем может быть проблема?

    • Миша29 декабря 2014 в 12:12 #

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

      • Артем29 декабря 2014 в 13:12 #

        Не переходит, говорит нету такого файла. Получается, что файл вроде бы загружается, но при этом выдает ошибку, что не может загрузить данный файл. Где-то мой косяк, ладно, найдем. Спасибо

  • Марат18 февраля 2015 в 03:02 #

    Не понятно как всем этим пользоваться человеку, который не разбирается в php и темах вордпресс. Какие действия нужны что бы просто подключить стили к одной странице например фронт энд - для главной, вместо тех стилей что описаны в активной теме? У меня есть 2 темы, отличающиеся стилями. Стили для главной изменены, и их нужно активировать вместо стандартных стилей (в том числе вспомогательные файлы css для ie6-7). Как можно использовать function только для одной страницы?

    • Миша18 февраля 2015 в 07:02 #

      Ну конечно базовые знания PHP (переменные, условия) и WordPress (функции, условные теги) должны быть.

      Условие для главной - is_front_page().

      • Марат18 февраля 2015 в 10:02 #

        Спасибо за скорость) Пока не понятно какое отношение имеют условия для главной и как подключить при этом стили тк не понятно в какие страницы темы вносить условия и функции показанные на этой странице.

        • Миша18 февраля 2015 в 16:02 #

          Посмотрите, где в теме у вас подключаются стили, потом:

          if( is_front_page() ) {
          // подключаем стили для главной
          } else {
          // подключаем стантартные стили
          }
  • Максим29 июня 2015 в 14:06 #

    Подскажите, пожалуйства

    Пытаюсь подключить сss только для внутренних страниц. Но упорно не хочет корректно срабатывать.

    Этот вариант подключает css везде.

    if( !is_front_page() )
    	wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/inner.css', array(), '14981210', 'screen' );

    а этот не срабатывает вообще

    if( is_page() )
    	wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/inner.css', array(), '14981210', 'screen' );

    В чем может быть ошибка?

    • Артем29 июня 2015 в 14:06 #

      Думаю ошибка в отсутствии фигурных скобок, примерно так должно быть

      if( is_page() || is_single() ) {
      	wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/inner.css', array(), '14981210', 'screen' );
      }
      • Максим29 июня 2015 в 14:06 #

        Спасибо, за оперативный ответ.
        Но результат тот же

        Стили подключаются на условие

        if( !is_page() || !is_single() ) {
        	wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/inner.css', array(), '14981210', 'screen' );
        }

        И не срабатывают вообще на условие

        if( is_page() || is_single() ) {
        	wp_enqueue_style( 'true_style', get_stylesheet_directory_uri() . '/css/inner.css', array(), '14981210', 'screen' );
        }
        • Артем29 июня 2015 в 15:06 #

          Хм, попробуйте сначала зарегистрировать стили, а потом их подключать. Может просто где-то конфликт

          • Максим29 июня 2015 в 15:06 #

            Попробовал вариант с регистрацией. Результат тот же.

            Так стили не подключаются нигде.

            wp_register_style(
            	'true_style', //идентификатор файла
            	get_stylesheet_directory_uri() . '/css/inner.css', //источник
            	null //нет зависимостей
            ); 
             
            if( is_page() ) {
            	wp_enqueue_style( 'true_style');
            } else {
            }

            Так подключаются везде.

            wp_register_style(
            	'true_style', //идентификатор файла
            	get_stylesheet_directory_uri() . '/css/inner.css', //источник
            	null //нет зависимостей
            ); 
             
            if( !is_front_page() ) {
            	wp_enqueue_style( 'true_style');
            } else {
            }

            Мне кажется, у меня почему-то не срабавают вообще фунции условий.
            Мог ли я где-то в этом коде сделать ошибку?

        • Артем29 июня 2015 в 15:06 #

          Что значит не срабатывает? То есть в первом варианте на главной стили подключаются?

          • Максим29 июня 2015 в 15:06 #

            Да, в первом варианте стили подключаются на всех страницах, включая главную.

            Во втором - не подключаются нигде.

  • Максим29 июня 2015 в 15:06 #

    Попробовал вариант с регистрацией. Результат тот же.

    Так стили не подключаются нигде.

    wp_register_style(
    	'true_style', //идентификатор файла
    	get_stylesheet_directory_uri() . '/css/inner.css', //источник
    	null //нет зависимостей
    ); 
     
    if( is_page() ) {
    	wp_enqueue_style( 'true_style');
    } else {
    }

    Так подключаются везде.

    wp_register_style(
    	'true_style', //идентификатор файла
    	get_stylesheet_directory_uri() . '/css/inner.css', //источник
    	null //нет зависимостей
    ); 
     
    if( !is_front_page() ) {
    	wp_enqueue_style( 'true_style');
    } else {
    }

    Мне кажется, у меня почему-то не срабавают вообще фунции условий.
    Мог ли я где-то в этом коде сделать ошибку?

    • Артем29 июня 2015 в 15:06 #

      А вы в каком файле все это прописываете?

      • Максим29 июня 2015 в 15:06 #

        т.е. functions.php

      • Артем29 июня 2015 в 15:06 #

        Странно, что-то не так с условиями. Хотя вроде все правильно записано.
        При таком условии

        wp_register_style(
        	'true_style', //идентификатор файла
        	get_stylesheet_directory_uri() . '/css/inner.css', //источник
        	null //нет зависимостей
        ); 
         
        if( is_page() ) {
        	wp_enqueue_style( 'true_style');
        }

        Должно подключаться только на статических страницах, надо смотреть исходный код страницы, чего он там показывает...

        Ну или так попробовать

        wp_register_style(
        	'true_style', //идентификатор файла
        	get_stylesheet_directory_uri() . '/css/inner.css', //источник
        	null //нет зависимостей
        ); 
         
        if( is_singular() ) {
        	wp_enqueue_style( 'true_style');
        }
        • Максим29 июня 2015 в 15:06 #

          Попробовал. Увы не сработало.

          код страницы page-vnutr.php

          <?php/*
          Template Name: Имя шаблона страницы
          */
          ?>
           
          <?php get_header();?> 
           
          Новая страница по шаблону
           
           
          <?php the_post(); ?>
          <?php the_content(); ?>
           
           
          <?php get_footer(); ?>

          Код header.php

          <!DOCTYPE html>
          <html lang="en">
          <head>
          	<meta charset="UTF-8">
           
           
          	<?php wp_head(); ?>
          </head>
          <body>
          <div class="wrapper">
          	<h1 class="logo">Тестовый шаблон верстки</h1>
          	<!-- МЕНЮ -->
          	<div class="main-menu">
          		<?php wp_nav_menu('primary'); ?>	
          	</div>
           
           
          <h2 class="new_css">Тестируем условную загрузку css - на внутряках будет красным</h2>

          Часть кода из function.php

           
          /**
           * корректное подключение css и js
           */
           
          function primary_scripts_styles() {
          	// wp_enqueue_style('primary-style', get_stylesheet_uri()); 
          	wp_enqueue_style('theme-style', get_template_directory_uri() . '/css/style.css', false, null); 
          	wp_enqueue_script('theme-script', get_template_directory_uri() . '/js/test.js', array('jquery'), null, true); 
          } 
           
          add_action('wp_enqueue_scripts', 'primary_scripts_styles');
           
           
          wp_register_style(
          	'true_style', //идентификатор файла
          	get_stylesheet_directory_uri() . '/css/inner.css', //источник
          	null //нет зависимостей
          ); 
           
          if( is_singular() ) {
          	wp_enqueue_style( 'true_style');
          }

          Нужен html код страницы?

          • Артем29 июня 2015 в 15:06 #

            Хм, даже не знаю что подсказать. Тут скорее ссылка нужна на страницу где должны стили подключаться

            • Максим29 июня 2015 в 15:06 #

              Она на локальном сервере, к сожалению не могу сегодня дать на нее ссылку.

              В любом случае спасибо за советы.

              Может подскажете где-то готовый пример шаблона с корректным подключением этим методом? Чтоб в его коде поковыряться.

              • Артем29 июня 2015 в 16:06 #

                Почему-то так и подумал что это на локалке. Попробуйте перенести на реальных хост. Очень часто бывает что функции ВП не срабатывают на локалке.
                Готовый не подскажу. Такие выкрутасы встречал только в премиум темах

  • Ник31 декабря 2015 в 04:12 #

    Не могу понять, как подключить несколько файлов?
    если пишу новую функцию, то оно ее игнорирует

    function my_css() {
     	wp_enqueue_style( 'css_style', get_stylesheet_directory_uri() . '/css/css.css' );
    }
     
    add_action( 'wp_enqueue_scripts', 'my_css' );
    • Миша31 декабря 2015 в 07:12 #

      Вы можете всё в одну добавлять.

      • Ник2 января 2016 в 02:01 #

        Второй файл который я хочу подключить это JS. Если делаю так, оно не работает

        function my_css() {
         	wp_enqueue_style( 'css_style', get_stylesheet_directory_uri() . '/css/css.css' );
                wp_enqueue_style( 'css_style', get_stylesheet_directory_uri() . '/js/carusel.js' );
        }
         
        add_action( 'wp_enqueue_scripts', 'my_css' );
        • Артем2 января 2016 в 02:01 #

          Логично. Название функции надо менять. У вас повторяется css_style, измените и все нормально будет

          • Ник2 января 2016 в 19:01 #

            Я прописывал и так. Последнюю ф-цию не выводит

            function my_css() {
             	wp_enqueue_style( 'css_style', get_stylesheet_directory_uri() . '/css/css.css' );
            }
             
            add_action( 'wp_enqueue_scripts', 'my_css' );
             
            function my_js() {
             	wp_enqueue_style( 'js_style', get_stylesheet_directory_uri() . '/js/carusel.js' );
             
            }
             
            add_action( 'wp_enqueue_scripts', 'my_js' );
            • Артем2 января 2016 в 21:01 #

              А файлы лежат там где указано?
              Вообще можно и так выводить

              function my_css() {
               	wp_enqueue_style( 'css_style', get_stylesheet_directory_uri() . '/css/css.css' );
                      wp_enqueue_style( 'js_style', get_stylesheet_directory_uri() . '/js/carusel.js' );
              }
               
              add_action( 'wp_enqueue_scripts', 'my_css' );
  • Serg13 января 2016 в 11:01 #

    Помогите доделать фильтр для HTML5:

    Стиль подключаю так:

    if(is_single(1037)) {
        wp_enqueue_style('wal', get_template_directory_uri() . '/wal.css');
    	}

    Нужно добавить атрибут property='stylesheet'

    Так не работает.

    apply_filters( 'style_loader_tag', "<link rel='$rel' property='stylesheet' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle, $href );

    Что я делаю не так?

  • Виталий Моргунов21 апреля 2017 в 12:04 #

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

    add_action( 'wp_enqueue_scripts', 'mv_reporter_scripts' );
     
    function mv_reporter_scripts() {
    	wp_enqueue_script('select2', get_stylesheet_directory_uri() . '/js/select2.min.js',array('jquery')); // подключаем библиотеку select2 для оформления селектов <input>
    	wp_enqueue_style( 'select2.min.css', get_stylesheet_directory_uri() . '/css/' ); // подключаем стили библиотеки select2 для оформления селектов <input>
    }

    Есть еще вроде, параметр-массив у wp_enqueue_style в котором можно указать стили, которые должны подключаться до него, но как их прописать пока не понял. Пользуюсь платной темой и она подключает туеву хучу всяких стилей. Мне бы хотелось, чтобы мои стили подключались последними по списку.

    • Миша21 апреля 2017 в 17:04 #

      Привет ещё раз,

      не поверишь, реально не сталкивался с этим вопросом. По теории можно сказать следующее:

      во-первых, ты спрашивал про массив-параметр - это точно такой же, как и в wp_enqueue_script(), то есть у тебя же в примере array('jquery').

      Если подумать теоретически, то возможно предположить, что подключение стилей и скриптов независимо, в таком случае можно попробовать так:

      add_action( 'wp_enqueue_scripts', 'mv_reporter_scripts', 10 );
       
      function mv_reporter_scripts() {
      	// подключаешь скрипты
      }
       
      add_action( 'wp_enqueue_scripts', 'mv_reporter_styles', 9999 );
       
      function mv_reporter_styles() {
      	// подключаешь стили
      }

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

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

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
  • Миша: Привет ещё раз, не поверишь, реально не сталкивался с этим вопросом. По теории можно сказать следующее: во-первых,...

  • Миша: Привет, вообще без проблем, делаешь всё через require(), require_once() - выбирай любую, какая больше нравится.

  • Виталий Моргунов: Привет! Не могу разобаться, как я могу контролировать порядок подключения стилей. В моем случае мне нужно чтобы стили...

  • Миша: Спасибо!

  • w0rmak: Это было просто. Нашел код в интернете. Добавьте и себе ymaps.load(function () { var input = document.getElem...