Wordpress

Подключение css wordpress – Как подключить css к теме wordpress? — Toster.ru

23.04.2017

wp_enqueue_style() — функция WordPress

  2.1

wp-includes / functions.wp-styles.php

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

Миша

Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю, но с 2019 выступаю только на тех, которые сам организовываю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.

misha.blog

Как правильно подключить файл стилей в своей теме WordPress?

Stack Overflow на русском

Loading…

  2. 0
  3. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  6. Войти Регистрация

  7. текущее сообщество

    • Stack Overflow на русском справка чат
    • Stack Overflow на русском Meta

ru.stackoverflow.com

wordpress — Подключение css только на страницах моего плагина

Stack Overflow на русском

Loading…

  2. 0
  3. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  6. Войти Регистрация

  7. текущее сообщество

    • Stack Overflow на русском справка чат

ru.stackoverflow.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *