Рекомендуемый метод подключения CSS-стилей в WordPress. Так же, как и wp_enqueue_script(), эта функция ставит файл в очередь на вывод. После этого выводит его в HTML либо между тегами <head>
, либо в футере сайта.
Если хотите узнать больше про правильное подключение CSS стилей WordPress, то могу порекомендовать вам мой видеоурок.
Стили выводятся в футере (перед </body>
) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа.
wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' )
null
, тогда версия не будет указана вообще. Параметр нужен для того, чтобы посетитель получал актуальную версию файла, а не из кэша. Подробнее про параметр.media
таблицы стилей. По сути означает — для каких устройств предназначен данный файл стилей, например all
— для всех, print
— для печати и т.д.Хочу тем не менее также ответить вам и на этот вопрос. И правда, почему CSS-файл нельзя подключить напрямую к HTML, например вставить тег <link rel="stylesheet"...
перед закрывающим тегом </head>
?
Итак, вот почему – если вы подключите CSS напрямую в HTML, то с ним уже ничего нельзя будет сделать, по сути он будет захардкоден в вашей теме WordPress. Его нельзя будет отключить, плагины оптимизации не смогут его сжать или объединить с другими CSS-файлами, невозможно будет поменять порядок подключения с другими стилями.
Стили также можно подключать через хуки 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
.
false
, при этом значении параметра в качестве версии ?ver=
файла стилей будет использоваться текущая версия WordPress, поэтому я бы не рекомендовал оставлять это значение параметра.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, то могу порекомендовать вам мой видеоурок.
Если вы хотите подключить какой-то один определённый CSS-файл для какой-либо определённой страницы сайта, то можете воспользоваться любыми условными тегами WordPress.
Скажу вам, что такое бывает нужно не очень часто, только в том случае, если одна единственная определённая страница сайта содержит огромное количество стилей, которые не используются где-либо ещё.
Например вы хотите подключить отдельный файл для страницы контактов:
add_action( 'wp_enqueue_scripts', 'true_stili_contacts', 25 ); function true_stili_contacts() { if( is_page( 'contacts' ) ) { wp_enqueue_style( 'true_stili', ... ); } }
Не знаете, куда вставлять код?
В данном случае очевидно, что файл с таблицей стилей нужно использовать только на одной-единственной странице — странице настроек данного плагина. 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 'Это страница настроек'; }
Чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или войдите.
Стили выводятся в футере (перед ) только в том случае, если они были поставлены в очередь на вывод где-то в середине HTML-документа. КАК их поставить в очередь на вывод где-то посередине HTML??
Стили не должны быть в футере.
Приветствую, Михаил! С наступающим!
Подскажи пожалуйста, подключаю стили как положено и ставлю их в очередь, но при этом выдается ошибка 404, типа файл не найден.
http://snap.ashampoo.com/byDpINdw
В чем может быть проблема?
Добрый день!
Попробуйте перейти по той ссылке — единственное, в чем на мой взгляд может быть проблема, это ошибка в URL.
Не переходит, говорит нету такого файла. Получается, что файл вроде бы загружается, но при этом выдает ошибку, что не может загрузить данный файл. Где-то мой косяк, ладно, найдем. Спасибо
Не понятно как всем этим пользоваться человеку, который не разбирается в php и темах вордпресс. Какие действия нужны что бы просто подключить стили к одной странице например фронт энд - для главной, вместо тех стилей что описаны в активной теме? У меня есть 2 темы, отличающиеся стилями. Стили для главной изменены, и их нужно активировать вместо стандартных стилей (в том числе вспомогательные файлы css для ie6-7). Как можно использовать function только для одной страницы?
Ну конечно базовые знания PHP (переменные, условия) и WordPress (функции, условные теги) должны быть.
Условие для главной - is_front_page().
Спасибо за скорость) Пока не понятно какое отношение имеют условия для главной и как подключить при этом стили тк не понятно в какие страницы темы вносить условия и функции показанные на этой странице.
Посмотрите, где в теме у вас подключаются стили, потом:
Подскажите, пожалуйства
Пытаюсь подключить сss только для внутренних страниц. Но упорно не хочет корректно срабатывать.
Этот вариант подключает css везде.
а этот не срабатывает вообще
В чем может быть ошибка?
Думаю ошибка в отсутствии фигурных скобок, примерно так должно быть
Спасибо, за оперативный ответ.
Но результат тот же
Стили подключаются на условие
И не срабатывают вообще на условие
Хм, попробуйте сначала зарегистрировать стили, а потом их подключать. Может просто где-то конфликт
Попробовал вариант с регистрацией. Результат тот же.
Так стили не подключаются нигде.
Так подключаются везде.
Мне кажется, у меня почему-то не срабавают вообще фунции условий.
Мог ли я где-то в этом коде сделать ошибку?
Что значит не срабатывает? То есть в первом варианте на главной стили подключаются?
Да, в первом варианте стили подключаются на всех страницах, включая главную.
Во втором - не подключаются нигде.
Не могу понять, как подключить несколько файлов?
если пишу новую функцию, то оно ее игнорирует
Вы можете всё в одну добавлять.
Второй файл который я хочу подключить это JS. Если делаю так, оно не работает
Логично. Название функции надо менять. У вас повторяется css_style, измените и все нормально будет
Я прописывал и так. Последнюю ф-цию не выводит
А файлы лежат там где указано?
Вообще можно и так выводить
странно. я вроде так и делал, а оно не получалось. Спасибо, заработало.
Значит, что-то было не так)))
Всегда пожалуйста
Помогите доделать фильтр для HTML5:
Стиль подключаю так:
Нужно добавить атрибут property='stylesheet'
Так не работает.
Что я делаю не так?
Вот здесь гляньте http://blog.kaygee79.com/wordpress-how-to-wp_enqueue_style-a-less-stylesheet/ less подключают, но вам тоже подойдет
Не совсем то, но на пока сойдёт, работает. Спасибо.
Привет!
Не могу разобаться, как я могу контролировать порядок подключения стилей.
В моем случае мне нужно чтобы стили подключились после скрипта, но простая перестановка не помогла.
Есть еще вроде, параметр-массив у wp_enqueue_style в котором можно указать стили, которые должны подключаться до него, но как их прописать пока не понял. Пользуюсь платной темой и она подключает туеву хучу всяких стилей. Мне бы хотелось, чтобы мои стили подключались последними по списку.
Привет ещё раз,
не поверишь, реально не сталкивался с этим вопросом. По теории можно сказать следующее:
во-первых, ты спрашивал про массив-параметр - это точно такой же, как и в
wp_enqueue_script()
, то есть у тебя же в примереarray('jquery')
.Если подумать теоретически, то возможно предположить, что подключение стилей и скриптов независимо, в таком случае можно попробовать так:
Если ты столкнулся с туевой хучей стилей, то рекомендую тебе взглянуть на плагин, который объединяет их в один файл автоматически. То есть по факту они так и остаются раздельно, но на сайте выводится что-то типо 808320402830.css который включает в себя уже все стили. Название не помню, потому что я люблю всё вручную объединять.