Подключаем правильно файлы стилей css в шаблоне WordPress
Подключать стили в шаблон в файле header.php
— неправильно.
Правильная практика — подключать их в файле functions.php
используя функцию wp_enqueue_style
.
Это позволяет правильно добавить файл CSS стилей. Зарегистрировать файл стилей, если он еще не был зарегистрирован.
wp_enqueue_style()
как и wp_enqueue_script()
принято вызывать во время событий: wp_enqueue_scripts
и admin_enqueue_scripts
.
Подключаем файлы стилей .css
через functions.php
Использование
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’
Подключение через событие
В этом примере, мы зарегистрируем и подключим стили и скрипты, используя событие '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() ); }
Рабочий пример
/* Load Styles */ function crea_load_styles() { wp_enqueue_style('bootstrap-css', get_template_directory_uri() . '/libs/bootstrap-grid/css/bootstrap.min.css'); wp_enqueue_style('fa-css', get_template_directory_uri() . '/libs/font-awesome-4.7.0/css/font-awesome.min.css'); wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Ubuntu:300,400,500,700&subset=cyrillic'); wp_enqueue_style('main-style', get_template_directory_uri() . '/css/style.css'); wp_enqueue_style('style', get_stylesheet_uri()); } add_action('wp_enqueue_scripts', 'crea_load_styles', 10);
Число «10» в этой строке add_action('wp_enqueue_scripts', 'crea_load_styles', 10);
позволяет подключать наши стили в самую последнюю очередь после всех файлов стилей других плагинов.
Более подробно — здесь https://wp-kama.ru/function/wp_enqueue_style.
15 ноября 2017 года был выпущен WordPress версии 4.9, названный в честь джазового музыканта Билли…
Регистрируем панель виджетов, в которую потом будем размещать виджеты на сайте, я обычно использую такие…
Регистрируем и выводим произвольное меню, созданное в панели: «Внешний вид > Меню» (Appearance > Menus)….
Используя PHP можно загружать содержимое SVG-файлов без лишних запросов к серверу, без использования img или…
1 комментарий
Ответить
Сверстала новую страничку на старый сайт. А при посадке стили отваливались. Ваш пример помог, спасибо большое!