ГлавнаяТемыНовая версия темы Semicolon с настройкой цветов

Новая версия темы Semicolon с настройкой цветов

Ранее в этом году мы выпустили журнальную тему Semicolon, которую скачали уже более 30,000 раз из официальной директории WordPress.org. Несколько часов назад мы выложили обновление, которое включает в себя настройку цветов с автоматической коррекцией контрастности и некоторые другие приятные дополнения.

Настройка цветов

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

Именно по этой причине в последней стандартной теме WordPress Twenty Fourteen разработчики решили отказаться от подобного функционала, а многие темы предлагают ряд предопределенных цветовых схем для избежания этой проблемы.

В теме Semicolon мы выбрали немного другой подход. Он позволяет выбрать цвет фона, текста и «акцента», после чего тема Semicolon, посчитав люминесценцию каждого цвета, их автоматически откорректирует для достижения необходимого уровня контрастности.

Например:

Автоматическая коррекция цветов в 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

Обновить тему Semicolon можно в панели администрирования WordPress в разделе Консоль → Обновления, или скачать архив вручную из директории тем на WordPress.org. В случае возникновения проблем не забывайте нам о них сообщать.

Подписаться на рассылку

Подписаться → Подпишитесь на бесплатную рассылку журнала WP Magazine и получайте новости, события, подборки тем и плагинов, уроки, советы и многое другое в мире WordPress!

  • Nikita Haidukoff

    Не могу разобраться, как поменять цвет шрифта в виджетах? Хочу сделать белый фон (с этим разобрался) и черный шрифт (с этим возникли проблемы).

    • Если речь о первом блоке виджетов, то он использует цвет акцента в качестве фона, а цвет текста уже подбирается с учетом контрастности, независимо от общего выбранного цвета текста. Вы можете воспользоваться третим разделом для виджетов у которого нет фона, или же самостоятельно определить некоторые цвета с помощью CSS.

      • Nikita Haidukoff

        Все получилось, спасибо большое! Воспользовался третьим разделом.

  • Дмитрий

    А могу ли я убрать из одиночных запесей блок «автор»?
    И как это сделать?

  • Anatoly Yumashev

    Еще вопрос по меню социальных кнопок. Как его настроить чтобы иконки были видны?

    • Просто добавляйте ссылки на ваши профили соц. сетей в этом меню и Semicolon автоматически подберет для вас иконки, если они есть.

      • Алексей

        Подскажите в каком меню добавлять?

        • Алексей, создайте новое меню, назовите его как угодно. Добавьте в него ссылки на ваши социальные профили, а затем присвойте это новое меню зоне «Social Menu» в настройке данного меню, или в разделе «Управление областями».

          • rokugan

            А можно каким-либо образом изменить автоматически подобранные иконки? При добавлении rss ленты, которая у меня идет через feedburner, ставится иконка-звездочка, что не очень устраивает.

  • Константин, скажите, а можно как-то реализовать вот такой формат постов?

    https://yadi.sk/i/xT_MuaXlaaCcV

    • Можно, но не «из коробки». Вам придется несколько изменить тему с помощью дочерней, чтобы добавить рубрики, краткие описания и другие элементы. Если вы не знаете, как это сделать самостоятельно, то проще всего нанять фрилансера, который сделает это для вас.

    • Ууух, свой лук эт ми! :) На самом деле я полностью уверен, что на WordPress не так и сложно сделать подобный вывод постов. Проблема больше в самих постах. У лук эт ми там целый конструктор-админка, которой они все хвастаются и которую они там пилят не один год, наверное. С другой стороны, лично меня напрягает полностью разный дизайн у каждого поста, да и дополнительных читателей такие «извращения» вряд ли добавляют. Люди за информацией приходят, а не за версткой статьи в 3 колонки с анимацией на фоне и еще не пойми чем :)

  • bhaktilata

    Константин! Не совсем понятно, как выводятся два текстовых блока с картинкой на Главной сразу под меню?

    • Если вы имеете ввиду две выделенные записи, то это через модуль Featured Content плагина Jetpack. В файле readme.txt об этом подробно написано.

      • bhaktilata

        Модуль с заголовком «Five New York…» — это выделенный материал? Тогда понятно. Спасибо.

        • Именно, этот функционал и реализован в модуле Featured Content плагина Jetpack, его настроить можно в разделе «Избранное содержимое» в конфигураторе темы WordPress, там можно указать метку, она должна быть одна. А при публикации записей с указанием этой метки (можно среди других меток) она становится выделенной.

          Кстати, в новой версии Semicolon добавить или удалить эту метку можно одним щелчком по «звездочке» во всплывающем меню при наведении на записи. Это видно в последнем скриншоте в статье.

  • Подскажите как в этой теме сделать текст на сером фоне, наподобие как на главной странице вашего сайта (WP Magazine — это онлайн журнал посвящённый системе…..)
    И добавить в футере меню (о проекте, рекомендуем и т.п.)

    • В футер можно добавить любые виджеты в т.ч. произвольное меню, это в разделе Внешний вид → Виджеты, там раздел Footer Sidebar. Текст на сером фоне можно вывести с помощью плагина или дочерней темы, вот пример.

  • Константин, подскажите, что сделать, чтобы при шеринге поста в соц. сети подтягивалась картинка, которая стоит как featured?

    • Активируйте плагин Jetpack, в нем есть модуль Open Graph, который использует специальную разметку для Twitter, Facebook и других социальных сетей. Есть и другие аналоги этому плагину, можно поискать в директории WordPress.org.

      • В Jetpack ничего подобного не нашел. Но, буду искать другие варианты. Спасибо.

        • Попробуйте активировать модуль Поделиться (Sharing) или Публикация (Publicize).

  • Rusty

    После обновления почему-то перестали отображаться новости в рубриках. Пришлось вернуть 0.8.1

    • Напишите подробнее, желательно со ссылкой на пример.

  • Константин, добрый день.
    Установил Semicolon из wordpress.org, хотелось бы понять: при просмотре поста у меня не отображается featured image — это так и задумано? Если да, то можно ли всё-таки как-то эту картинку отображать?

    Кроме того, тема не реагирует на настройки «показывать excerpt». Возможно, тоже можно как-то это «включить»? Заранее спасибо.

    • В дизайне темы это не предусмотрено, но вы можете создать дочернюю тему и использовать the_post_thumbnail() и the_excerpt() там где вам необходимо.

  • Kondrashov

    Константин, здравствуйте! Подскажите пожалуйста, как в теме можно сделать выпадающее меню?

    • В данной теме не предусмотрено выпадающее меню.

      • Kondrashov

        Все равно огромное спасибо за тему, как и за Expound. Замечательные, стильные шаблоны. Если бы на своих сайтах зарабатывал, поделился бы))

  • F4RR3LL

    Что делаю не так. Установил тему Semicolon версии 0.9 перехожу на сайт и пишет ->

    Internal Server Error

    The server encountered an internal error or misconfiguration and was unable to complete your request.

    Please contact the server administrator, webmaster@webserwer.meximas.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.

    More information about this error may be available in the server error log.

    • Найдите лог ошибок PHP, в нем будет написано подробнее о возникшей ошибке и тогда мы сможем ее исправить. Если вы не знаете где искать этот лог то обратитесь в службу поддержки вашего хостинг провайдера.

      • F4RR3LL

        Еще одна смешная фишка когда нажимаю на теме настроить переходит на страницу где написано просто «Хакер, что ли?» это кто то так со мной шутит? ^D

        • К теме не имеет никакого отношения, возможно какой-нибудь из ваших плагинов.

          • F4RR3LL

            плагины стандартные

    • И что интересно, тоже самое было. Все плагины деактивировал — ничего не поменялось. Потом jetpack установил, что-то там активировал, и все заработало. Что это было, не понятно.

      • Было бы гораздо полезнее, если бы вы сообщили текст ошибки :)

      • F4RR3LL

        Спасибо большое! Помогло)

  • F4RR3LL

    Извиняюсь за тупость, но как сделать прозрачный слой, как вот на этом сайте на виджете, где «Подписаться» Смотрю там background-color: rgba(58,58,58,0.03); но найти в редакторе не могу(

  • Максим Партизан

    Подскажите новичку, установил тему, активировал перехожу на сайт выдает ошибку 502 bad gateway, остальные темы работают нормально

    • Максим, какая у вас версия PHP?

      • Максим Партизан

        5.3.10

        • Можете посмотреть логи на сервере, чтобы узнать в чем конкретно ошибка? Спасибо!

          • Максим Партизан

            Лог ошибок пуст, к сожалению… может я не там смотрел, у меня isp manager, открывал вкладку «журнал ошибок»

      • Максим Партизан

        5.3.10

  • F4RR3LL

    Подскажите, как сделать записи на главной странице кроме квадратных еще и широкими. Заранее спасибо!

    • Читайте файл readme.txt, там все написано.

      • F4RR3LL

        Читал, но не увидел ответа)

  • Рустам

    Здравствуйте, подскажите , пожалуйста, записи на главной странице кроме квадратных еще и широкими в WordPress 4. Не могу найти в Jetpack внешний вид — настройки — популярного содержания.

    • klientovod

      Читайте файл readme.txt

  • klientovod

    Добрый день, как Вы добавили на сайт надпись?

    WP Magazine — это онлайн журнал посвящённый
    системе управления контентом WordPress. Здесь вы найдёте много полезной
    информации, как для начинающих, так и для опытных разработчиков.Можете дать пример этого кода и куда его вставлять в шаблоне. :))

  • bhaktilata

    Здравствуйте, Константин! Подскажите, пожалуйста, как кроме картинок вставить также краткое описание статьи на главной странице (введение)?

    • С помощью небольшого плагина, см. этот комментарий.

      • bhaktilata

        Что-то там ничего такого не обнаружил. Хотелось бы вставить на главной: картинку, заголовок, описание, автор. также вставить в полную статью картинку в начале статьи, миниатюра почему-то не выводится.

        • Если вы имеете ввиду вставить доп. информацию для каждой записи в сетке, то в самой теме это не предусмотрено и вам нужно для этого создать дочернюю тему, а там уже выводить все что угодно и где угодно. То же самое касается миниатюры в начале статьи. В данной теме миниатюры выводятся лишь в архивах.

          • bhaktilata

            Приходится дублировать картинку. Но что делать? Тема неплохая, в смысле достаточно быстрая и жаль, что столько ограничений. :)

  • Кирилл Лузянин

    Здравствуйте. Спасибо большое за тему. Уже несколько месяцев пользуюсь. Единственное не получается у меня корректно вставить баннер над линией над социальными иконками. Возможно кто-нибудь поможет?

  • Максим

    На денвере работает исправно. На хостинге, после добавления первой записи сайт ломается и выдает ошибку
    Internal Server Error

    • Максим

      Почитал комменты, установил jetpack — проблема решилась, но осадок есть

      • Максим

        [Sun Jan 11 08:52:49 2015] [warn] [client 194.28.172.10] (104)Connection reset by peer: mod_fcgid: error reading data from FastCGI server
        [Sun Jan 11 08:52:49 2015] [error] [client 194.28.172.10] Premature end of script headers: index.php
        [Sun Jan 11 08:52:49 2015] [error] [client 194.28.172.10] Caught race condition abuser. attacker: 2221, victim: 0 open file owner: 0, open file: /usr/local/apache/customerror/500.html

        • Не связанная ошибка. Смотрите error.log вашего веб-сервера.

  • plan_OK

    объясните для гуманитария, как сделать иконки на главной различных размеров, про featured content читал, но понять нифига не могу, если можно. спасибо

  • Алексей Ожогин

    Константин, не могли ли вы помочь? Решил изменить немного поиск и столкнулся с проблемой: кнопка «найти» упорно не хочет прижиматься к полю ввода — остается зазор 3-5 пикселей.

  • Дмитрий

    Добрый вечер. А как на этой теме сделать выпадающие меню ? И поставить логотип?

  • Kristina Shoba

    Не получается русифицировать. Уже скачала шт 10 файлов. Пишет The package could not be installed. No valid plugins were found. Plugin install failed.