Новая версия темы Semicolon с настройкой цветов
Опубликовано: 04.09.2018
Ранее в этом году мы выпустили журнальную тему Semicolon, которую скачали уже более 30,000 раз из официальной директории WordPress.org . Несколько часов назад мы выложили обновление, которое включает в себя настройку цветов с автоматической коррекцией контрастности и некоторые другие приятные дополнения.
Настройка цветов
Сегодня уже никого не удивишь функцией настройки цветов в теме для WordPress, но основная проблема такого функционала в том, что пользователям легко сделать неправильный выбор, который повлияет на читабельность их сайта, и в конечном итоге на посещаемость и на показатель отказов.
Именно по этой причине в последней стандартной теме WordPress Twenty Fourteen разработчики решили отказаться от подобного функционала, а многие темы предлагают ряд предопределенных цветовых схем для избежания этой проблемы.
В теме Semicolon мы выбрали немного другой подход. Он позволяет выбрать цвет фона, текста и «акцента», после чего тема Semicolon, посчитав люминесценцию каждого цвета, их автоматически откорректирует для достижения необходимого уровня контрастности.
Например:
Автоматическая коррекция цветов в Semicolon
Таким образом независимо от выбранных пользователем цветов, мы можем гарантировать определенный уровень контрастности, даже если это значит, что мы существенно изменяем выбранный цвет.
Например если пользователь выбрал белый цвет во всех трех случаях, то мы получаем следующую картину:
Тема Semicolon с белыми цветами
Многим пользователям это может показаться очень странным поведением, поэтому мы добавили возможность отключить автоматическую коррекцию, которая включена по умолчанию.
Для настройки цветов в теме Semicolon необходимо установить и активировать плагин Jetpack и его модуль Custom CSS в настройках плагина.
Реализация
Разработчикам тем и плагинов WordPress наверняка будет интересно знать каким образом происходит корректировка цветов в Semicolon.
Для разработки темы мы уже использовали CSS препроцессор Sass, который позволяет изменять цвета с помощью таких функций как lighten() и darken().
Для расчета коэффициента контрастности мы взяли за основу алгоритм из этой статьи (англ.) А с помощью модуля Custom CSS плагина Jetpack мы имеем возможность компилировать Sass (или LESS) код «на лету» например с помощью функции jetpack_sass_css_preprocess().
Таким образом мы просто подставляем пользовательские значения цветов в наш файл .scss, компилируем его содержимое с помощью Jetpack и выводим, если выбранные значения отличаются от стандартных.
Ознакомиться с исходным кодом вы можете в файле functions.php темы Semicolon (метод custom_colors) и в файле css/colors.scss. Обратите внимание на то, как мы используем кэширование CSS кода, поскольку компиляция Sass кода может занимать длительное время.
Другие изменения
В новой версии Semicolon мы добавили стиль для визуального редактора, улучшили поддержку с плагином YARPP, добавили фильтр (semicolon_related_posts_per_page) для управления количеством отображаемых элементов в блоке схожих записей, а также добавили всплывающие кнопки, которые позволяют изменить или прилепить запись на главную:
Всплывающий блок для управления записями в Semicolon
Обновить тему Semicolon можно в панели администрирования WordPress в разделе Консоль → Обновления, или скачать архив вручную из директории тем на WordPress.org. В случае возникновения проблем не забывайте нам о них сообщать.