Подключаем правильно файлы стилей 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 комментарий
Ответить
Сверстала новую страничку на старый сайт. А при посадке стили отваливались. Ваш пример помог, спасибо большое!