Подключение файлов CSS (для стилевого оформления элементов на странице) осуществляется при помощи специальной для этого функции wp_enqueue_style()
В принципе можно подключать стили (файлы CSS) по разному, хоть прямиком через HTML-элемент <link> 🙂 Но это будет не совсем правильно с точки зрения философии WordPress, его стандартов кодирования, так сказать.
Поэтому единственным правильным методом подключения файлов CSS в вашу тему (на страницы вашего сайта) будет являться метод через специальные функции.
Пример подключения основного файла стилей style.css и в примере после него — произвольного:
<?php
/**
* Подключаем основной файл стилей темы (style.css)
*/
function poet_add_theme_styles() {
wp_enqueue_style( 'style-main', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'poet_add_theme_styles' );Кстати, ниже пример показывает, что мы можем управлять зависимостью одного стиля от другого, то есть очередностью их подключения.
<?php
/**
* Подключаем основной файл стилей темы (style.css) и дочерний
*/
function poet_add_theme_styles() {
wp_enqueue_style( 'style-main', get_stylesheet_uri() );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/theme.css',
array( 'style-main' ), // указываем зависимость
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'poet_add_theme_styles' );Рассмотрим ещё одну функции, при помощи которой мы можем зарегистрировать файлы стилей. Важно понимать отличие этой функции от рассмотренной ранее. Дело в том что при помощи wp_enqueue_style() мы сразу подключаем указанный стиль, а при помощи wp_register_style() мы только регистрируем его в окружении WordPress, что бы он (WordPress) знал этот файл стилей по имени и в нужный момент или при нужном условии мы можем его подключить.
Ниже я демонстрирую тот же самый пример что и в блоке выше, но только прежде регистрирую скрипт с тем же названием, а потом уже подключаю на страницы сайта. Попробуйте уловить смысл при сравнении этих кусочков кода.
<?php
/**
* Подключаем основной файл стилей темы (style.css) и дочерний
*/
function poet_add_theme_styles() {
wp_enqueue_style( 'style-main', get_stylesheet_uri() );
wp_register_style( 'child-style',
get_stylesheet_directory_uri() . '/theme.css',
array( 'style-main' ), // указываем зависимость
wp_get_theme()->get('Version')
);
wp_enqueue_style( 'child-style' );
}
add_action( 'wp_enqueue_scripts', 'poet_add_theme_styles' );Теперь, после регистрации стиля по имени, мы можем его подключать простым вызовом функции wp_enqueue_style( ‘child-style’ ), в которую передаём имя этого файла CSS заданное при регистрации. На самом деле такой метод подключения даёт больше гибкости, особенно для опытных разработчиков.
ООП
Для любителей объектно-ориентированной парадигмы разработки вышеуказанный пример можно записать таким образом:
<?php
/**
* Подключаем основной файл стилей темы (style.css) и дочерний
*/
class Poet_Add_Styles
{
/**
* Constructor.
*/
public function __construct(
// Add stylesheet.
add_action( 'wp_enqueue_scripts', array( $this, 'poet_add_theme_styles' ) );
}
/**
* Add and enqueues stylesheet.
*/
public function poet_add_theme_styles() {
wp_enqueue_style( 'style-main', get_stylesheet_uri() );
wp_register_style( 'child-style',
get_stylesheet_directory_uri() . '/theme.css',
array( 'style-main' ), // указываем зависимость
wp_get_theme()->get('Version')
);
wp_enqueue_style( 'child-style' );
}
}
new Poet_Add_Styles();Класс с методом-конструктором вызовет этот метод на каждом вновь созданном объекте класса. Поэтому объявление метода-конструктора удобно для инициализации того, что может потребоваться объекту в начале работы.
Проблемы кеширования
Если посмотреть на исходный код страницы сайта на WordPress, то можно заметить вот такие добавки (называются гет-параметрами) к подключаемым файлам стилей
Если рассмотреть пример нашего кода, то он подключает файл theme.css и добавляет гет-параметром версию темы которая прописана в файле style.css. В итоге мы можем заметить версию 1.0
Если бы при регистрации или подключении файла CSS мы бы не указали параметр версии (функцией wp_get_theme()->get(‘Version’)), или установили бы значение false, то была бы тогда использована версия WordPress, как примере ниже, к нашему файлу добавилась версия WP
А если установить null, то никакая версия не будет установлена.
Чем это чревато? Представьте, что вы внесли правки в файл theme.css и изменили стиль оформления элемента, например, с зеленого фона на красный. То пользователь, который уже посещал ваш сайт снова будет видеть зелёный фон. Почему так?
Потому что при первом посещении сайта ресурс в виде файла theme.css в подавляющем большинстве случаев сохраняется в локальное хранилище браузера, что бы при повторном запросе не запрашивать и не загружать его заново с сервера а отдать из локального хранилища браузера.
Получается, что если пользователь не обновит страницу или не почистит кеш, он так и будет видеть зелёный фон у элемента. Вероятнее всего новый стиль загрузится и отобразится у него со сменой версии WordPress или сменой версии темы оформления.
Поэтому, если вы часто вносите правки в файлы стилей, то стоит позаботится о решении этой неприятности.
Как решить эту проблему?
Самый простой способ решения передавать в качестве версии дату последнего изменения файла.
В этом поможет функция filemtime — Получает время последнего изменения файла. Тогда наш код немного преобразится:
<?php
/**
* Подключаем основной файл стилей темы (style.css) и дочерний
*/
function poet_add_theme_styles() {
wp_enqueue_style( 'style-main', get_stylesheet_uri() );
wp_register_style( 'child-style',
get_stylesheet_directory_uri() . '/theme.css',
array( 'style-main' ), // указываем зависимость
filemtime( get_stylesheet_directory() .'/theme.css' )
);
wp_enqueue_style( 'child-style' );
}
add_action( 'wp_enqueue_scripts', 'poet_add_theme_styles' );Ну вот и всё!
P.S. конечно можно внести сюда небольшую оптимизацию и сократить вызов функции get_stylesheet_directory(), которая получает путь к файлу темы (родительской), до одного вызова, а не двух, как в примере. Но лучше остановимся на этом )
