Не секрет, что перед установкой новой темы, необходимо доработать её под собственный блог. Как бы хорош не был шаблон, он редко когда полностью удовлетворяет потребности и предпочтения блоггера. Ведь разработчик шаблона ориентируется на широкие массы блоггеров, а каждый блоггер хочет иметь свой, индивидуальный в оформлении, блог. Для разрешения этого противоречия используется индивидуализация шаблона, т.е. небольшие изменения стиля, навешивание разных “мулек” и “фишек” полезных и бесполезных.

К чему это я? На днях купил себе новый шаблон – Lifestyle Child 2.0.2 от StudioPress, базирующийся на фреймворке Genesis. Постоянные читатели моего блога знают о моём неравнодушии к шаблонам Lifestyle и Church. Новая версия шаблона Lifestyle окончательно поглотила шаблон-близнец Church и претерпела значительные изменения в стиле. Теперь это более минималистичный шаблон, но по-прежнему весьма функциональный. Вы можете убедиться в этом посмотрев на дизайн моего (этого) блога, он использует шаблон Lifestyle Child.

Разумеется, не всё меня устраивало в этом шаблоне и я произвёл некоторые изменения индивидуализирующие его под мои нужды. Тем что и как я сделал я хочу поделиться с моими читателями. В некотором смысле, эта статья является продолжением статьи “Глубокая настройка дочерних тем Genesis“. Надеюсь эта статья поможет Вам индивидуализировать собственный шаблон дочерней темы Genesis.

План

Любая работа должна начинаться с плана. План может корректироваться во время работы, но без плана никак. Впрочем, в данном случае, это ещё и перечень выполненных работ:

1. Добавить цветовую схему
2. Изменить “шапку” шаблона – разобраться с виджетом в “шапке” и уменьшить высоту “шапки”
3. Добавить дополнительный элемент “поиск в блоге” во вторичное меню шаблона
4. Разобраться со шрифтами
5. Добавить область виджетов на странице одиночной статьи после контента статьи
6. Убрать лишние ссылки из “подвала”
7. Добавить поддержку локализации темы

Вот вроде и весь план. Приступим к его реализации. Реализовывать будем профессионально, не изменяя файлы структуры как самого шаблона, так и фреймворка. Изменения будем вносить в файлы functions.php и style.css шаблона темы Lifestyle Child.

Добавляем цветовую схему

Lifestyle Child 2.0  поставляется с уже встроенными 10-ю цветовыми схемами. К сожалению только одна из них (Blue) подходит для моего блога SimpleLib, а для этого блога подходящей схемы не нашлось. Дело в том, что мне хотелось, чтобы цветовая гамма схемы повторяла цветовую гамму предыдущего шаблона, который был установлен на этом блоге – Church Child 1.0. Кроме того, мне хотелось, чтобы “подвал” и “шапка” были темно-серого цвета, как в той же Church Child.

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

Для начала добавим новую цветовую схему “Red” в селектор схем параметров темы. Для этого находим в файле functions.php функцию add_theme_support, определяющую genesis-style-selector и добавляем одну строку для определения новой схемы (выделена в нижеприведённом коде):

Затем добавляем определение изображений шапки для создаваемой схемы (выделенные строки):

Разумеется, эти изображения необходимо создать по образу и подобию существующих.

Теперь самое главное. Перейдём к файлу style.css. Все схемы помечены комментариями. Просто скопируйте фрагмент файла, соответствующий какой-либо цветовой схеме, переименуйте соответствующие имена классов (например lifestyle-red) и настройте цвета по собственному вкусу. Например как у меня:

Теперь у нас есть новая цветовая схема, которую мы можем выбрать на странице настроек темы.

Изменение “шапки” шаблона

Если Вы зайдёте на демо-страницу темы Lifestyle Child, то увидите, что область виджетов для размещения рекламного баннера в “шапке” разработчиками не предусмотрен. Я уже собирался подключать эту область, но оказалось, что область виджетов в “шапке” не отключена и может быть использована по назначению. Правда её размеры заданы неправильно и при помещении в неё виджета, её сносит вниз. Для исправления ситуации внесём небольшие изменения в файл style.css. Уменьшим ширину области до 488px и добавим padding:

Параметры padding подбираются опытным путём. FireBug (FireFox), Dragon Fly (Opera) или “Просмотр кода элемента” (Chrome) Вам в помощь.

Кроме недоразумения с виджетом мне не понравилась слишком большая высота шапки (150px). Может кто-то и будет размещать в “шапке” большую красивую картинку, но мне это не надо. Мне достаточно 100px.

Чтобы изменить высоту “шапки” нам необходимо произвести небольшие изменения в обоих файлах. В файле functions.php изменяем объявление размеров настраиваемого заголовка шаблона. Просто изменяем высоту на 100px:

В файле style.css изменяем высоту в двух местах. Необходимо изменить высоту “шапки”:

и высоту изображения “шапки”:

Теперь можно загрузить изображение для шапки (192х100) на странице Внешний вид->Заголовок и всё будет выглядеть как надо.

Дополнительный элемент во вторичном меню навигации

В оригинале Genesis поддерживает дополнительный элемент (Дата, Поиск, Фиды, Twitter) только в первичном меню навигации. Необходимый элемент можно выбрать на странице настройки темы. Мне захотелось иметь элемент “Поиск” во вторичном меню навигации, а место в первичном меню использовать для чего-нибудь другого.

Делается это довольно просто. В файле functions.php добавляются два фильтра для вторичного меню навигации (один для Genesis, другой для WordPress) и описывается вставляемый элемент:

Решение проблемы шрифтов

В шаблоне Lifestyle Child 2.0 для вывода заголовков используется весьма красивый загружаемый шрифт Oswald. Но есть одна серьёзная проблема – этот шрифт содержит начертания только латиницы, кириллица в нём отсутствует. В результате заголовки использующие кириллицу выводятся шрифтом Arial, а это не вяжется с первоначальной концепцией.

Я нашёл подходящий шрифт на Google Web Fonts – это шрифт Open Sans Condensed.

В файле style.css находим секцию “Import Fonts” и заменяем импорт шрифта Oswald на импорт шрифта Open Sans Condensed:

Не забудьте заменить в файле style.css все встречающиеся “упоминания” Oswald на Open Sans Condensed.

Дополнительная область виджетов

Мне захотелось выводить рекламный баннер в области между телом одиночной статьи и комментариями к ней и я это сделал.

Собственно говоря такая возможность была в предыдущей версии темы, но реализовывалась с помощью включаемого php-файла. В новой версии вывод рекламного баннера разработчики вообще убрали. Можно было бы восстановить старую схему с файлом, но это значило бы, что при необходимости изменений, пришлось бы править файл. Область виджетов значительно удобнее.

Итак, область виджетов. Сначала объявляем action для вывода области виджетов в нужном месте и в нужном виде:

Затем регистрируем область виджетов. Это позволит добавлять виджеты в новую область на админ-странице “Ввнешний вид->Виджеты”:

При желании можно настроить вывод этой области виджетов не только на странице одиночной статьи, но и на страницах архивов.

Изменение текста “подвала”

Про изменение текста и “уборку” лишних ссылок из подвала я уже писал в статье “Глубокая настройка дочерних тем Genesis“. Поэтому приведу лишь код:

Поддержка локализации темы

Если Вы внимательно читали эту статью, то, наверное, заметили, что в кодах встречаются функции такого типа: __('Sidebar After Single Post', 'lifestyle'). Это означает, что строки из этих функций могут быть переведены на любой язык с помощью TEXTDOMAIN. Другими словами, могут выводиться на русском языке. По непонятным мне причинам разработчики темы используют функции TEXTDOMAIN, но не включили поддержку TEXTDOMAIN в шаблон. Исправим эту оплошность:

Для того, чтобы перевод происходил корректно, да и вообще происходил, необходимо создать файлы перевода. Делается это с помощью программы poEdit. Полученные, с помощью программы poEdit, файлы перевода необходимо поместить в корневую папку дочерней темы.

P.S.

Если всё, что Вы прочитали выше, является для Вас “бредом сивой кобылы” (ну, или “горячечным бредом minimus’а”), а индивидуализировать свою тему очень хочется, не стесняйтесь, обращайтесь ко мне, я смогу Вам помочь за разумную плату.

© 2012 – 2015, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.