Не секрет, что перед установкой новой темы, необходимо доработать её под собственный блог. Как бы хорош не был шаблон, он редко когда полностью удовлетворяет потребности и предпочтения блоггера. Ведь разработчик шаблона ориентируется на широкие массы блоггеров, а каждый блоггер хочет иметь свой, индивидуальный в оформлении, блог. Для разрешения этого противоречия используется индивидуализация шаблона, т.е. небольшие изменения стиля, навешивание разных “мулек” и “фишек” полезных и бесполезных.
К чему это я? На днях купил себе новый шаблон – Lifestyle Child 2.0.2 от StudioPress, базирующийся на фреймворке Genesis. Постоянные читатели моего блога знают о моём неравнодушии к шаблонам Lifestyle и Church. Новая версия шаблона Lifestyle окончательно поглотила шаблон-близнец Church и претерпела значительные изменения в стиле. Теперь это более минималистичный шаблон, но по-прежнему весьма функциональный. Вы можете убедиться в этом посмотрев на дизайн моего (этого) блога, он использует шаблон Lifestyle Child.
Разумеется, не всё меня устраивало в этом шаблоне и я произвёл некоторые изменения индивидуализирующие его под мои нужды. Тем что и как я сделал я хочу поделиться с моими читателями. В некотором смысле, эта статья является продолжением статьи “Глубокая настройка дочерних тем Genesis“. Надеюсь эта статья поможет Вам индивидуализировать собственный шаблон дочерней темы Genesis.
План
Любая работа должна начинаться с плана. План может корректироваться во время работы, но без плана никак. Впрочем, в данном случае, это ещё и перечень выполненных работ:
- Добавить цветовую схему
- Изменить “шапку” шаблона – разобраться с виджетом в “шапке” и уменьшить высоту “шапки”
- Добавить дополнительный элемент “поиск в блоге” во вторичное меню шаблона
- Разобраться со шрифтами
- Добавить область виджетов на странице одиночной статьи после контента статьи
- Убрать лишние ссылки из “подвала”
- Добавить поддержку локализации темы
Вот вроде и весь план. Приступим к его реализации. Реализовывать будем профессионально, не изменяя файлы структуры как самого шаблона, так и фреймворка. Изменения будем вносить в файлы 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 и добавляем одну строку для определения новой схемы (выделена в нижеприведённом коде):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
add_theme_support( 'genesis-style-selector', array( 'lifestyle-blue' => 'Blue', 'lifestyle-charcoal' => 'Charcoal', 'lifestyle-gray' => 'Gray', 'lifestyle-green' => 'Green', 'lifestyle-pink' => 'Pink', 'lifestyle-purple' => 'Purple', 'lifestyle-tan' => 'Tan', 'lifestyle-teal' => 'Teal', 'lifestyle-yellow' => 'Yellow', 'lifestyle-red' => 'Red' ) ); |
Затем добавляем определение изображений шапки для создаваемой схемы (выделенные строки):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
register_default_headers( array( 'default' => array( 'url' => CHILD_URL . '/images/header.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-thumb.png' ), 'blue' => array( 'url' => CHILD_URL . '/images/header-blue.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-blue-thumb.png' ), 'charcoal' => array( 'url' => CHILD_URL . '/images/header-charcoal.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-charcoal-thumb.png' ), 'gray' => array( 'url' => CHILD_URL . '/images/header-gray.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-gray-thumb.png' ), 'green' => array( 'url' => CHILD_URL . '/images/header-green.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-green-thumb.png' ), 'pink' => array( 'url' => CHILD_URL . '/images/header-pink.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-pink-thumb.png' ), 'purple' => array( 'url' => CHILD_URL . '/images/header-purple.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-purple-thumb.png' ), 'tan' => array( 'url' => CHILD_URL . '/images/header-tan.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-tan-thumb.png' ), 'teal' => array( 'url' => CHILD_URL . '/images/header-teal.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-teal-thumb.png' ), 'yellow' => array( 'url' => CHILD_URL . '/images/header-yellow.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-yellow-thumb.png' ), 'red' => array( 'url' => CHILD_URL . '/images/header-red.png', 'thumbnail_url' => CHILD_URL . '/images/thumbs/header-red-thumb.png' ) ) ); |
Разумеется, эти изображения необходимо создать по образу и подобию существующих.
Теперь самое главное. Перейдём к файлу style.css. Все схемы помечены комментариями. Просто скопируйте фрагмент файла, соответствующий какой-либо цветовой схеме, переименуйте соответствующие имена классов (например lifestyle-red) и настройте цвета по собственному вкусу. Например как у меня:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
/* Lifestyle red ------------------------------------------------------------ */ body.lifestyle-red { background-color: #d4b5b1; } .lifestyle-red a, .lifestyle-red a:visited, .lifestyle-red #nav, .lifestyle-red #nav li li a:hover, .lifestyle-red #nav li li a:active, .lifestyle-red #subnav li li a:hover, .lifestyle-red #subnav li li a:active, .lifestyle-red h1, .lifestyle-red h2, .lifestyle-red h2 a, .lifestyle-red h2 a:visited, .lifestyle-red #cat, .lifestyle-red .widget_archive select, .lifestyle-red .s, .lifestyle-red .enews #subbox { color: #A91B33; } .lifestyle-red h2 a:hover { color: #A91B33; } .lifestyle-red div.gform_footer input.button, .lifestyle-red .enews #subbutton, .lifestyle-red .reply a, .lifestyle-red .reply a:visited, .lifestyle-red .searchsubmit, .lifestyle-red #submit { background-color: #3a3a3a; border: 1px solid #3a3a3a; } .lifestyle-red div.gform_footer input.button:hover, .lifestyle-red .enews #subbutton:hover, .lifestyle-red .reply a:hover, .lifestyle-red .searchsubmit:hover, .lifestyle-red #submit:hover { background-color: #793b3b; border: 1px solid #793b3b; } .lifestyle-red #footer-widgets, .lifestyle-red #footer { background-color: #3a3a3a; } .lifestyle-red #bbp_reply_submit, .lifestyle-red #bbp_topic_submit, .lifestyle-red input[type="button"], .lifestyle-red input[type="submit"] { background-color: #3a3a3a; border: 1px solid #3a3a3a; } .lifestyle-red #bbp_reply_submit:hover, .lifestyle-red #bbp_topic_submit:hover, .lifestyle-red input:hover[type="button"], .lifestyle-red input:hover[type="submit"] { background-color: #793b3b; border: 1px solid #793b3b; } |
Теперь у нас есть новая цветовая схема, которую мы можем выбрать на странице настроек темы.
Изменение “шапки” шаблона
Если Вы зайдёте на демо-страницу темы Lifestyle Child, то увидите, что область виджетов для размещения рекламного баннера в “шапке” разработчиками не предусмотрен. Я уже собирался подключать эту область, но оказалось, что область виджетов в “шапке” не отключена и может быть использована по назначению. Правда её размеры заданы неправильно и при помещении в неё виджета, её сносит вниз. Для исправления ситуации внесём небольшие изменения в файл style.css. Уменьшим ширину области до 488px и добавим padding:
|
1 2 3 4 5 |
#header .widget-area { float: right; width: 488px; padding: 19px 0 0 0; } |
Параметры padding подбираются опытным путём. FireBug (FireFox), Dragon Fly (Opera) или “Просмотр кода элемента” (Chrome) Вам в помощь.
Кроме недоразумения с виджетом мне не понравилась слишком большая высота шапки (150px). Может кто-то и будет размещать в “шапке” большую красивую картинку, но мне это не надо. Мне достаточно 100px.
Чтобы изменить высоту “шапки” нам необходимо произвести небольшие изменения в обоих файлах. В файле functions.php изменяем объявление размеров настраиваемого заголовка шаблона. Просто изменяем высоту на 100px:
|
1 2 |
/** Add support for custom header */ add_theme_support( 'genesis-custom-header', array( 'width' => 920, 'height' => 100 ) ); |
В файле style.css изменяем высоту в двух местах. Необходимо изменить высоту “шапки”:
|
1 2 3 4 5 6 7 8 9 |
/* Header ------------------------------------------------------------ */ #header { background: url(images/header.png) no-repeat top left; height: 100px; margin: 0 auto; width: 920px; } |
и высоту изображения “шапки”:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/* Image Header - Partial Width ------------------------------------------------------------ */ .header-image #title-area, .header-image #title, .header-image #title a { display: block; float: left; height: 100px; overflow: hidden; padding: 0; text-indent: -9999px; width: 300px; } |
Теперь можно загрузить изображение для шапки (192х100) на странице Внешний вид->Заголовок и всё будет выглядеть как надо.
Дополнительный элемент во вторичном меню навигации
В оригинале Genesis поддерживает дополнительный элемент (Дата, Поиск, Фиды, Twitter) только в первичном меню навигации. Необходимый элемент можно выбрать на странице настройки темы. Мне захотелось иметь элемент “Поиск” во вторичном меню навигации, а место в первичном меню использовать для чего-нибудь другого.
Делается это довольно просто. В файле functions.php добавляются два фильтра для вторичного меню навигации (один для Genesis, другой для WordPress) и описывается вставляемый элемент:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Add subnav menu item add_filter( 'genesis_nav_items', 'lifestyle_sub_nav_right', 10, 2 ); add_filter( 'wp_nav_menu_items', 'lifestyle_sub_nav_right', 10, 2 ); function lifestyle_sub_nav_right($menu, $args) { $args = (array) $args; if('secondary' != $args['theme_location']) return $menu; ob_start(); get_search_form(); $search = ob_get_clean(); $menu .= '<li class="right search">' . $search . '</li>'; return $menu; } |
Решение проблемы шрифтов
В шаблоне Lifestyle Child 2.0 для вывода заголовков используется весьма красивый загружаемый шрифт Oswald. Но есть одна серьёзная проблема – этот шрифт содержит начертания только латиницы, кириллица в нём отсутствует. В результате заголовки использующие кириллицу выводятся шрифтом Arial, а это не вяжется с первоначальной концепцией.
Я нашёл подходящий шрифт на Google Web Fonts – это шрифт Open Sans Condensed.
В файле style.css находим секцию “Import Fonts” и заменяем импорт шрифта Oswald на импорт шрифта Open Sans Condensed:
|
1 2 3 4 |
/* Import Fonts ------------------------------------------------------------ */ @import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:700&subset=latin,cyrillic,cyrillic-ext,latin-ext); |
Не забудьте заменить в файле style.css все встречающиеся “упоминания” Oswald на Open Sans Condensed.
Дополнительная область виджетов
Мне захотелось выводить рекламный баннер в области между телом одиночной статьи и комментариями к ней и я это сделал.
Собственно говоря такая возможность была в предыдущей версии темы, но реализовывалась с помощью включаемого php-файла. В новой версии вывод рекламного баннера разработчики вообще убрали. Можно было бы восстановить старую схему с файлом, но это значило бы, что при необходимости изменений, пришлось бы править файл. Область виджетов значительно удобнее.
Итак, область виджетов. Сначала объявляем action для вывода области виджетов в нужном месте и в нужном виде:
|
1 2 3 4 5 6 7 8 9 |
// Add sidebar after single post content add_action('genesis_after_post', 'lifestyle_include_adsense', 9); function lifestyle_include_adsense() { if(is_single()) { echo '<div class="sidebar-after-single-post adsense">'; dynamic_sidebar('sidebar-after-single-post'); echo '</div>'; } } |
Затем регистрируем область виджетов. Это позволит добавлять виджеты в новую область на админ-странице “Ввнешний вид->Виджеты”:
|
1 2 3 4 5 |
genesis_register_sidebar(array( 'id' => 'sidebar-after-single-post', 'name' => __('Sidebar After Single Post', 'lifestyle'), 'description' => __('This is after single post widget area', 'lifestyle') )); |
При желании можно настроить вывод этой области виджетов не только на странице одиночной статьи, но и на страницах архивов.
Изменение текста “подвала”
Про изменение текста и “уборку” лишних ссылок из подвала я уже писал в статье “Глубокая настройка дочерних тем Genesis“. Поэтому приведу лишь код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Customize the footer section add_filter('genesis_footer_creds_text', 'church_footer_creds_text'); function church_footer_creds_text($creds) { global $wpdb; $table = $wpdb->prefix . 'posts'; $lastDate = date('Y'); $firstDate = $wpdb->get_var("SELECT YEAR(post_date) FROM $table ORDER BY post_date LIMIT 1"); $text = get_bloginfo('name').'. '.__('All rights reserved', 'genesis').' · [footer_loginout]'; if($lastDate == $firstDate) $creds = "Copyright $firstDate, ".$text; else $creds = "Copyright © $firstDate - $lastDate, ".$text; return $creds; } |
Поддержка локализации темы
Если Вы внимательно читали эту статью, то, наверное, заметили, что в кодах встречаются функции такого типа: __('Sidebar After Single Post', 'lifestyle'). Это означает, что строки из этих функций могут быть переведены на любой язык с помощью TEXTDOMAIN. Другими словами, могут выводиться на русском языке. По непонятным мне причинам разработчики темы используют функции TEXTDOMAIN, но не включили поддержку TEXTDOMAIN в шаблон. Исправим эту оплошность:
|
1 2 |
// Load child theme text domain load_child_theme_textdomain('lifestyle'); |
Для того, чтобы перевод происходил корректно, да и вообще происходил, необходимо создать файлы перевода. Делается это с помощью программы poEdit. Полученные, с помощью программы poEdit, файлы перевода необходимо поместить в корневую папку дочерней темы.
P.S.
Если всё, что Вы прочитали выше, является для Вас “бредом сивой кобылы” (ну, или “горячечным бредом minimus’а”), а индивидуализировать свою тему очень хочется, не стесняйтесь, обращайтесь ко мне, я смогу Вам помочь за разумную плату.
© 2012 – 2015, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
