Модульная CSS-стилизация в дочерних темах WordPress

Эта статья из цикла статей «Стилизация дочерних тем», который состоит из следующих пунктов:

1. Основы создания дочерней темы WordPress
2. Модульная CSS-стилизация в дочерних темах WordPress.
3. Использование хуков фильтров в дочерних темах WordPress.
4. Использование хуков действий в дочерних темах WordPress.

В данной статье мы посмотрим, как использовать модульную CSS-стилизацию в дочерних темах WordPress посредством правила @import и тега link. Мы сделаем дочернюю тему под названием Chiron, которая будет использовать модульную стилизацию темы Thematic Theme. Вы можете взять данную тему в качестве фундамента для последующих изменений, предлагаемых в других статьях этого цикла.

Также вы узнаете, что представляют собой хуки фильтров – этот момент будет раскрыт более подробно в последующих статьях цикла.

Что представляют собой модульные CSS-стили?

Основная идея модульной стилизации достаточно проста. Вы разбиваете часто используемые участки CSS-кода на отдельные файлы, которые затем подключаются в главном CSS-файле или в разделе HEAD документа в виде серии ссылок. Для чего это делается? Время разработки новых проектов снижается экспоненциально, поскольку при необходимости вы можете обновить только определенные стилевые таблицы из модульного стилевого набора.

Родительская тема, которую мы будем использовать в последующих статьях — Thematic Theme – включает в себя массу стилевых таблиц, которые могут быть расширены стилями дочерних тем. В результате такого подхода даже новички в области WordPress смогут получить готовую тему всего за пару секунд. Даже не минут. Секунд.

Начало работы

Начнем мы с того, что создадим дочернюю тему из Thematic. Наша дочерняя тема будет называться Chiron. Мы будем ее использовать во всех последующих статьях из этой серии.

Файл style.css темы Chiron будет иметь следующий вид:

/*   
Theme Name: Chiron
Description: A Child Theme of Thematic.
Template: thematic
*/

Вы уже знаете, что делать с этим файлом: сохраняете его в папку wp-content/themes/chiron и активируете вашу новую тему в панели администратора. Помните: тема Thematic Theme должна быть установлена в вашей сборке WordPress!

Получение стилей родительской темы

В данном разделе мы захватим стили родительской темы:

/*   
Theme Name: Chiron
Description: A Child Theme of Thematic.
Template: thematic
*/
 
/* Using @import, we can borrow style sheets from the Parent Theme */
 
/* Reset the browser defaults */
@import url('../thematic/library/styles/reset.css');
 
/* Apply default typography */
@import url('../thematic/library/styles/typography.css');
 
/* Add WordPress image styles */
@import url('../thematic/library/styles/images.css');
 
/* Add a basic layout */
@import url('../thematic/library/layouts/2c-l-fixed.css');
 
/* Start with some default styles */
@import url('../thematic/library/styles/18px.css');

Как вы можете видеть, в файле появилось пять дополнительных строк кода (за исключением комментариев), которые начинаются с правила @import. С помощью этой команды мы превратили нашу пустую HTML-страницу в законченный макет (см. скриншот).

С помощью таких тем, как Thematic, вы можете легко и быстро смешивать разные стили для создания уникального визуального представления.

Параллельная загрузка стилевых таблиц

В своем блоге High Performance Web Sites Стив Саудер сравнил производительность тэга link и правила @import. Если говорить кратко, то суть проблемы состоит в следующем: серия объявлений @import обрабатывается браузером последовательно, в то время как серия тегов link может быть обработана параллельно. Что это означает? Если у вас есть 10 стилевых таблиц, каждая из которых обрабатывается 2 секунды, то общее время обработки всех стилевых таблиц при использовании @import составит 20 секунд, в то время как при использовании тегов link оно составит всего 2 секунды.

Естественно, если ваши стилевые таблицы обрабатываются по 2 секунды, то это уже определенная проблема. Для создания высокопроизводительных сайтов важна каждая доля секунды. Что уж тут говорить о секундах! Ниже приведены некоторые варианты использования модульных стилей в дочерних темах WordPress, позволяющие сохранить высокую производительность сайта.

1. Копирование стилевых таблиц.

Первое, самое простое решение: использовать @import только в процессе создания сайта. Когда ваш сайт уже будет полностью спроектирован, вы можете просто собрать все стилевые таблицы в одну главную таблицу безо всяких @import. Однако в данном решении есть и свой минус: вы теряете все преимущества постоянных стилей родительской темы. Зачем тогда вообще пользоваться дочерними темами? Зачем тогда вообще все это руководство?

2. Фильтрация родительской темы.

Это решение более подходящее для нас. И более простое, особенно если использовать в качестве родительской темы Thematic Theme.

Удалите все объявления @import из style.css дочерней темы и создайте файл functions.php в папке с вашей дочерней темой. Поместите в него следующий фрагмент кода:

<?php
 
function childtheme_create_stylesheet() {
    $templatedir = get_bloginfo('template_directory');
    $stylesheetdir = get_bloginfo('stylesheet_directory');
    ?>
    <link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/typography.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/images.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/layouts/2c-l-fixed.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $templatedir ?>/library/styles/18px.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo $stylesheetdir ?>/style.css" />
     
    <?php    
}
add_filter('thematic_create_stylesheet', 'childtheme_create_stylesheet');
 
?>

Итак, что мы здесь делаем? Мы создаем функцию, которая будет фильтровать другую, уже существующую в Thematic Theme функцию. Фильтрация функции – мощный механизм, который позволяет получить полный контроль над выводом ключевых элементов темы. Более подробно мы рассмотрим фильтры в следующей статье из данного цикла.

В представленном фрагменте кода мы переводим серию объявлений import в серию ссылок в разделе HEAD нашей темы. Именно это советует сделать Стив Саудер в своем блоге High Performance Web Sites.

Источник: themeshaper.com