wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all' )
$handle (строка) рабочее название, идентификатор таблицы стилей, которую нужно подключить (поставить в очередь) $src (строка|логическое) абсолютный URL таблицы стилей на сайте. Этот параметр (а также все последующие) нужен только в том случае, если WordPress ещё не знает про таблицу стилей с указанным идентификатором, то есть, если она уже зарегистрирована при помощи wp_register_style(), то этот и последующие параметры отпадают. $deps (массив) зависимости от других CSS-файлов, то есть, если есть какие-то стили, которые нужно загрузить перед нашим подключаемым файлом, то нужно перечислить их идентификаторы в массиве $ver (строка|логическое) версия файла. По умолчанию — текущая версия WordPress. Можно указать null , тогда версия не будет указана вообще. Параметр нужен для того, чтобы посетитель получал актуальную версию файла, а не из кэша. Подробнее про параметр. $media (строка) атрибут media таблицы стилей. По сути означает — для каких устройств предназначен данный файл стилей, например all — для всех, print — для печати и т.д.
Хочу тем не менее также ответить вам и на этот вопрос. И правда, почему CSS-файл нельзя подключить напрямую к HTML, например вставить тег ?
Итак, вот почему – если вы подключите 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 .
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 'Это страница настроек'; }
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
Правильно добавляет файл CSS стилей. Регистрирует файл стилей, если он еще не был зарегистрирован. Если файл стилей был предварительно зарегистрирован через wp_register_style(), то его можно добавить в очередь, указав название (идентификатор) в первом параметре $handle . Если файл не был предварительно зарегистрирован, то эта функция зарегистрирует файл и добавит его в очередь. Добавленный в очередь файл стилей выводится в части документа. С версии 3.3 можно вызывать в середине документа. В этом случае файл будет выведен в подвале, перед тегом (где вызывается wp_footer() ).
Ошибка начинающих разработчиков. Функция ничего не выведет, если в теме не используется wp_head() или wp_footer(). Именно в момент вызова этих функций срабатывает хук, который добавляет стили.
Работает на основе: WP_Dependencies::add() , WP_Dependencies::enqueue()
Основа для: wp_enqueue_code_editor()
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’
В этом примере, мы зарегистрируем и подключим стили и скрипты, используя событие ‘ 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
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() .
| С версии 2.6.0 | Введена. |
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 ); >
26 комментариев
Полезные 3 Все
Нужно подключить css-файл, не находящийся в папке темы. Пробовал и условный путь и абсолютный:
wp_enqueue_style ('advent', get_stylesheet_directory_uri (). '//сайт.ru/Adventure/css/advent.css');
Но в итоге все равно идет обращение к папке тем:
https://сайт.ru/wp-content/themes/baddim-blank//сайт.ru/Adventure/css/advent.css?ver=6.3.1
Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие.
Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем!
1. Заходим в административное меню и переходим в Внешний вид -> Редактор.
2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл».
Как видите, с административной панели всего за несколько кликов можно добраться до стилей вашего шаблона WordPress.
Для редактирования стилей этим способом нам нужно:
1. Найти файл style.css в корне папки вашей активированной темы (шаблона).
Путь к файлу: wp-content\themes\название_вашей темы\style.css
2. Открываем с помощью текстового редактора (я пользуюсь Notepad++) файл style.css и вносим необходимые изменения.
3. После того как внесете все необходимые правки в стилях не забудьте сохранить файл style.css.
Редактирование таким способом актуальнее всего если сайт размещен на локальном сервере. В таком случае, вам не нужно будет каждый раз обновлять страницу редактирования CSS стилей в административном меню после каждого изменения.
Согласитесь, проще и быстрее нажать Ctrl+S в текстовом редакторе и сразу смотреть изменения на сайте, чем после каждого обновления стилей пересохранять страницу в административном меню.
Если у вас что-то не получилось или возникли вопросы, смело пишите в комментариях!
Здравствуйте, друзья! В этом уроке мы поговорим о том, как в WordPress можно добавить свои CSS стили или изменить существующие. Замечу, что данных урок рассчитан в большей степени для тех, кто уже имеет базовые знания в использовании CSS стилей. И так, давайте начнем! Способ №1 1. Заходим в административное меню и переходим в Внешний вид -> Редактор. 2. В открывшейся странице по умолчанию будет открыто окно редактирования стилей вашей темы (шаблона). После того как вы добавите свои новые стили или измените уже существующие, не забудьте сохранить изменения нажав кнопку «Обновить файл». Как видите, с административной панели всего за несколько кликов можно…
Итог : Уважаемые читатели! Не поленитесь проголосовать и оставить комментарий. Таким образом я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!
У меня есть проблема. Хочу подключить css по-человечески к теме wordpress. В интернетах пишут, что в functions.php нужно прописать это:
function my_theme_load_resources() < wp_enqueue_style('my_theme_style', get_template_directory_uri() . '/style.css'); >add_action('wp_enqueue_scripts', 'my_theme_load_resources');И это совершенно не работает. Скоро я впаду в депрессию. Вроде все верно написано, «get_template_directory_uri() . ‘/style.css'» возвращает верную ссылку. А толку ноль.
Помогите, иначе котята пострадают.
1 комментарий
Простой 1 комментарий
Сергей Делeу @sergeydeleu
У меня сработало! Возможно, не подключен wp_head()?
Решения вопроса 0
Ответы на вопрос 6
Посмотрите functions.php в стандартной теме twenty fifteen. Может натолкнёт на мысль:
if ( is_singular() && wp_attachment_is_image() ) < wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141010' ); >wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20141212', true ); wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array( 'expand' => '' . __( 'expand child menu', 'twentyfifteen' ) . '', 'collapse' => '' . __( 'collapse child menu', 'twentyfifteen' ) . '', ) ); > add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' ); ?>В частности, если у вас один файл со стилем, подключайте его как дефолтный:
// Load our main stylesheet. wp_enqueue_style( 'main-style', get_stylesheet_uri() );Таким образом будет подключен style.css в корне директории вашей темы.
Ответ написан более трёх лет назад
Комментировать
Нравится 2 Комментировать
1. Та ли тема используется?
2. Есть ли в шаблоне записи вывод get_header() ?
3. style.css из текущей темы должен вообще подключаться автоматически.
Ответ написан более трёх лет назад
Нравится 1 2 комментария
AndersDir @AndersDir Автор вопроса
1) Да, тема та используется.
2) Шапку вывожу, да. Может быть в ней тоже нужно что-то прописать?
3) Увы.
AndersDir: в шапке прописывается для вывода стилей
А у меня наоборот. Твоя конструкция сработала, а моя нет:
function register_styles() wp_register_style(‘my-bootstrap’, get_template_directory_uri() .
‘/libs/bootstrap/css/bootstrap.min.css’);
wp_enqueue_style(‘my-bootstrap’);
wp_register_style(‘style’, get_template_directory_uri() .
‘/style.css’);
wp_enqueue_style(‘style’);
>
add_action( ‘wp_enqueue’, ‘register_styles’ );
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Все элементарно просто в wordpress основной стиль подключается автоматически хотя во всех темах идет подстраховка
function my_theme_load_resources() wp_enqueue_style(‘my_theme_style’, get_stylesheet_uri());
>
add_action(‘wp_enqueue_scripts’, ‘my_theme_load_resources’);
В корне темы должен быть style.css он как раз таким образом и подключается
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Автор сайта xakplant.ru
Про правильное подключение стилей в wordpress написал статью «Правильное подключение JS и CSS в WordPress»
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Подключение файла syle.css, в принципе, разжевано уже давно и очень подробно, но у меня возник вопрос, ответ на которой я пока не нашел: style.css подключается автоматически в дочерней теме и подставляет в конце версию файла.
style.css?ver=3.3.7
При внесении изменений в таблицу стилей — версия не обновляется и, соответственно, не отображается. Учитывая то, что установлен кеширующий плагин и CDN — приходится пересоздавать кеш, что очень неудобно.
Решил подключить style.css следующим образом:
add_action( 'wp_enqueue_scripts', 'add_styles' ); function add_styles() < $css_file = get_stylesheet_directory() . '/style.css'; wp_enqueue_style( 'css-file', get_stylesheet_directory_uri().'/style.css', NULL, filemtime($css_file) ); >Все стало нормально, но потом я заметил, что подключается два инстанса style.css, что не есть хорошо.
Отсюда вопрос: как подкрутить версию таблицы стилей, что бы она изменялась каждый раз при внесении изменений в style.css?
Заранее благодарю!