WordPress. Как создать дочернюю тему основанную на Cherry Framework 3.x

Alex Ross Июль 15, 2014

Rating: 5.0/5. From 5 votes.

Please wait...

Общая информация

Прежде всего, вам нужно скачать на свой компьютер Cherry Framework и заготовку чайлд-темы:
1. CherryFramework
2. cherry-theme
Затем вам нужно установить Cherry Framework и заготовку чайлд-темы, после чего вы должны активировать заготовку чайлд-темы — именно с ней мы и будем работать в дальнейшем.

После активации чайлд-темы вы увидите сообщение с предложением установить необходимые плагины (Contact Form 7 и Motopress Content Editor). В зависимости от того нужны они вам или нет — можете либо перейти к установке либо скрыть это сообщение.

После этого тема готова к использованию и дальнейшему редактированию.

Попробуем привести нашу заготовку приблизительно к такому виду:

Перед тем как перейти непосредственно к редактированию нашей темы, разберемся с тем, что представляет из себя та тема, что уже у нас есть. Итак, наша чайлд-тема в стандартном виде имеет следующую структуру файлов и папок:

В CherryFramework и чайлд-теме использован препроцессор less, для более удобной работы с CSS-стилями. Поэтому при редактировании стилей желательно менять их именно в .less файлах, фреймворк после этого сам скомпилирует их в CSS, если же вы все таки решили не пользоваться less, а вносить правки в CSS, то делайте это в файле style.css, т.к. остальные CSS-файлы в чайлд-теме автоматически генерируются из .less файлов и обновляются при сохранении опций, поэтому ваши изменения будут утрачены.
- CherryTheme
- bootstrap
- less — содержит все .less файлы связанные со стилями bootstrap фреймворка.
- css — содержит автоматически сгенерированный CSS для bootstrap.
- images — содержит служебные изображения и иконки.
- includes
- plugins — содержит обязательные и рекомендуемы плагины для темы.
- custom-function.php — файл, в который можно добавлять пользовательские функции для данной чайлд-темы.
- custom-js.php — файл, в котором подключаются необходимые для чайлд-темы js-файлы, в этом же файле можно подключать нужные вам js-файлы, добавив их в функцию cherry_child_custom_scripts() с помощью wp_enqueue_script.
- register-plugins.php — файл, в котором объявлены обязательные и рекомендуемы плагины для темы.
- sidebar-init.php — файл, в котором происходит регистрация сайдбаров для данной чайлд-темы. Вы можете регистрировать свои сайдбары в этом файле, объявив их внутри функции cherry_widgets_init() с помощью функции register_sidebar().
- theme-init.php — файл в котором задаются базовые установки чайлд-темы. В частности, задаются размеры миниатюр по умолчанию и размеры дополнительных картинок, регистрируются локации для пользовательских меню, регистрируются пользовательские типы постов и таксономии.
- js — содержит необходимые JS-файлы.
- languages — содержит файлы локализации.
- favicon.ico — иконка вкладки браузера используемая по умолчанию.
- main-style.css — CSS-файл со стилями темы. Генерируется автоматически из style.less, поэтому делать в нем изменения напрямую нельзя.
- options.php — файл содержащий значения для опций темы по умолчанию, кроме того, в нем можно добавлять новые опции.
- rtl.css — файл со стилями для языков с письмом справа налево.
- style.css — основной CSS-файл. Обязательно должен присутствовать для корректной работы всей темы, так же в этот файл можно добавлять пользовательские CSS-стили.
- style.less — .less файл с CSS-стилями темы.
Сборка темы
1. Подготовка
  1. Первым делом, давайте создадим статическую главную страницу и страницу для блога — Pages->Add new (Страницы->Добавить новую). Для главной страницы в качестве шаблона страницы выбираем Home Page.
  2. После этого в меню Settings->Reading (Настройки->Чтение) опцию Front page displays (Главная страница отображает) нужно установить в Static page (Статическая страница) и в качестве Front Page (Главная страница) и Posts Page (Страница Записей) соответственно, выбрать только что созданные страницы.
  3. Переходим в меню Settings->Permalinks (Настройки->Постоянные ссылки) и задаем настройки для постоянных ссылок. Выбираем, к примеру, «Post name» и сохраняем изменения.
  4. Переходим в меню Appearance->Menus (Внешний вид->Меню) и создаем новое меню. В «Theme locations» для него выбираем «Header Menu», добавляем нужные нам страницы и сохраняем изменения.
    
    После этих шагов у нас должно получиться что-то подобное:
2. Настройка слайдера
  1. Для начала вам нужно определиться, какой размер слайдов вам нужен, и задать его в theme-init.php. В нашем примере это 1170х720. Откройте файл theme-init.php, найдите в нем следующую строку:
```
add_image_size( 'slider-post-thumbnail', 940, 446, true ); // Slider Thumbnail
```
    и заменяем соответствующие значения, то есть, в нашем случае получится:
```
add_image_size( 'slider-post-thumbnail', 1170, 720, true ); // Slider Thumbnail
```
  2. Теперь нам нужно изменить некоторые параметры в инициализации слайдера, для этого откройте файл custom-function.php и добавьте в конец файла, перед закрывающим тегом ?>, следующий код:
```
							add_filter( 'cherry_slider_params', 'my_rewrite_slider_params' );
							function my_rewrite_slider_params( $params ) {
									$params['height'] = "'61.5%'";
									$params['minHeight'] = "'200px'";
									return $params;
							}	
						
```
    число 61.5% получилось в результате деления высоты наших слайдов на их ширину и умножения на 100%, этот параметр необходим для того, чтобы размеры слайдера корректно менялись при разных разрешениях экрана. 200px — это минимальная высота слайдера, величина до которой может уменьшаться ваш слайдер.
  3. Ваш слайдер готов к работе, осталось добавить сами слайды. Это можно сделать, следуя данной инструкции. В итоге, должно получиться нечто подобное:
    
    Если вы загрузили изображения для слайдера до того, как установили размер слайда в файле theme-init.php — ваши картинки не будут иметь нужный размер, чтоб исправить это, вы можете воспользоваться плагином Regenerate Thumbnails или же просто загрузить изображения слайдов еще раз.
3. Общая стилизация
  1. Для начала давайте загрузим свой логотип. Для этого в админ панели откройте Cherry Options->Logo & Favicon (Опции Cheryy->Лого и Фавикон) и либо загрузите ваше изображение с логотипом, либо выберите опцию «Text Logo» и задайте стили с помощью соответствующих настроек.
  2. Перейдите на вкладку General и задайте цвета фона для body и для header — в нашем случае и там и там это белый, так же вы можете задать цвет ссылок, стили для заголовков в теме и так далее.
4. Cтилизация хеддера
  1. Задаем общие стили, убираем нижнюю границу, расставляем необходимые отступы, выставляем логотип и слоган, как показано на первом изображении. Как уже упоминалось выше, все CSS-стили рекомендуется добавлять в файл style.less, из которого они автоматически будут компилироваться в главный файл CSS-стилей (main-style.css). При необходимости, вы можете найти детальную информацию по работе с less здесь.
  2. Переписываем нужные шаблоны. По умолчанию все файлы шаблонов находятся во фреймворке, но если нам нужно изменить расположение или порядок элементов, изменить HTML разметку какой-то части страницы, то возникает необходимость редактировать некоторые файлы шаблонов. Для этого нужно перенести нужный вам файл из фреймворка в чайлд-тему с сохранением структуры папок и изменить его нужным образом уже в папке с чайлд-темой (редактировать файлы в самом фреймворке нельзя, так как все внесенные изменения будут утеряны при обновлении фреймворка).
    
    Рассмотрим подробнее на примере: представим что, в той теме, которую мы собираем мы хотим объединить меню и логотип в одну строку, а форму поиска разместить над ними. Для этого нам нужно отредактировать файл шаблона wrapper-header.php, который находится в папке «wrapper» во фреймворке. Мы создадим такую же папку «wrapper» в папке с нашей чайлд-темой и скопируем в нее файл wrapper-header.php. Все файлы в чайлд-теме имеют более высокий приоритет и именно они будет использованы для вывода элементов на странице. Осталось только изменить код, так как нам нужно: объединить логотип и меню в одну строку, а поиск вынести над ними, в итоге код в этом файле должен выглядеть примерно так:
```
							<?php /* Wrapper Name: Header */ ?>
							<div class="row">
								<div class="span6 hidden-phone pull-right" data-motopress-type="static" data-motopress-static-file="static/static-search.php">
									<?php get_template_part("static/static-search"); ?>
								</div>
							</div>
							<div class="row">
								<div class="span5" data-motopress-type="static" data-motopress-static-file="static/static-logo.php">
									<?php get_template_part("static/static-logo"); ?>
								</div>
								<div class="span7" data-motopress-type="static" data-motopress-static-file="static/static-nav.php">
									<?php get_template_part("static/static-nav"); ?>
								</div>
							</div>
						
```
    Сохраните все изменения и проверьте результат, после выполнения предыдущих шагов у вас должно получиться что-то подобное:
  3. Стилизуем оставшиеся элементы — меню, форму поиска и так далее. Если вы последовали рекомендациям и выбрали для редактирования less файл, то на данном этапе это облегчит вам работу и сэкономит время, так как в less существует понятие переменных, с помощью которых, изменив значение самой переменной в одном месте, мы сможем быстро изменить стили во всех элементах, где использована эта переменная. Все переменные находятся в файле bootstrap/less/variables.less. Открыв этот файл, вы увидите, что часть переменных в нем закомментирована, эти переменные так же можно использовать при задании стилей, но их значения определены не в файле variables.less, а в опциях темы в админ панели. То есть, если вы используете где-то переменную @linkColor, то ее значение будет взято из опции Link Color в опциях темы, в нашем случае это будет #e46568, аналогично можно использовать переменные:
```
						@textColor,
						@linkColorHover,
						@bodyBackground,
						@baseFontSize,
						@baseFontFamily,
						@baseLineHeight
						
```
    Остальные переменные можно изменять (задавать) непосредственно в файле variables.less, к примеру, у нас flat дизайн и нам не нужны скругленные углы, поэтому значения переменных @baseBorderRadius, @borderRadiusLarge, @borderRadiusSmal мы изменяем на 0 и так далее.
    
    Нумерацию для пунктов меню добавим по принципу, изложенному в этой статье.
  4. Скрываем форму поиска в опциях. У вас может возникнуть вопрос — зачем мы ее стилизовали, чтоб потом скрывать? Но возможно в будущем вам понадобится добавить форму поиска хедер и тогда достаточно будет активировать ее в опциях и не нужно будет тратить время, вспоминая, где хранятся связанные с ней CSS-стили и как их редактировать.
  5. В опциях темы (Cherry Options) на вкладке Navigation есть опция Use stickUp menu — с помощью нее вы можете активировать фиксированное меню, которое при скролле страницы вниз, все время остается вверху экрана как-бы «прилипая» к нему. Но с таким дизайном более правильным будет “приклеивать” к верху экрана не только меню, а весь хедер полностью. Внесем необходимые правки в нашу тему. Откройте файл custom-function.php и добавьте в конец файла, перед закрывающим тегом ?> следующий код:
```
						add_filter( 'cherry_stickmenu_selector', 'my_change_selector' );
						function my_change_selector($selector) {
								$selector = '.header';
								return $selector;
						}
						
```
    Этот код меняет элемент, для которого будет срабатывать эффект “прилипания” к верхнему краю экрана. Вы можете настроить его для любого своего элемента, просто заменив .header на нужный вам CSS-селектор. После этого добавьте в CSS-стили темы следующий код:
```
						.header.isStuck {
							right: 0;
							left: 0;
							box-shadow: 0 5px 10px rgba(0,0,0,.1);
						}
						
```
    Работа над стилизацией хедера закончена. В итоге, вы должны получить следующий результат:
5. Добавление и стилизация контента
  1. Для начала давайте ненадолго вернемся к слайдеру и добавим в него текстовые баннеры и застилизируем элементы навигации.
  2. Переходим к наполнению контентом домашней страницы и его стилизации. Весь контент страницы мы будем создавать в редакторе с помощью стандартных элементов и шорткодов, добавляемых фреймворком.
    
    Отдельно остановимся на заголовках — на нашем первом изображении они имеют специфичные стили — большие отступы и границы, здесь мы становимся перед выбором — либо задать такие стили для всех заголовков в теме по умолчанию либо воспользоваться шорткодом Title, доступным в CherryFramework.
    
    Первый способ не очень удобен тем, что многие плагины и просто элементы темы, расположенные вне контента так же используют в своей HTML-разметке различные заголовки, которые унаследуют наши стили и в некоторых случаях это может привести к неожиданным и не очень приятным результатам, в итоге, придется тратить дополнительное время, исправляя стили нужных элементов. Чтоб избежать этого, мы будем использовать шорткод Title, и соответственно только заголовки внутри этого шорткода будут оформлены нужным нам образом. Структура контента у нас будет примерно такой:
```
							[row]
							[span4]
							[title_box title="Lingerie"]
							<a href="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-1.jpeg">
							<img class="alignnone wp-image-31 size-full" src="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-1.jpeg" alt="page-img-1" width="370" height="337" /></a>
							[spacer]
							[/span4]
							[span4]
							[title_box title="News"]
							<a href="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-2.jpeg">
							<img class="alignnone wp-image-34 size-full" src="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-2.jpeg" alt="page-img-2" width="370" height="337" /></a>
							[spacer]
							[/span4]
							[span4]
							[title_box title="Fashion Trends"]
							<a href="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-3.jpeg">
							<img class="alignnone wp-image-35 size-full" src="http://yourwebsite.com/wp-content/uploads/2014/06/page-img-3.jpeg" alt="page-img-3" width="370" height="337" /></a>
							[spacer]
							[/span4]
							[/row]
							[row]
							[span6]
							[spacer]
							[title_box title="welcome"]
							Mauris fermeum dictum magna. Sed loreet aliquam leote llus dolor dapibus eget elementum vel curs eleifend elit. Aenean aucto. wisi et urna. Aliqat volutpat.
							Duisac turpis. Integer rutrum ante eu lacuestibulum libero nisl porta vel scelerisque eget malesuada at nequeVivamus eget nibh. Etiamursus leo vel metus. 
							Nulla facilisi. Aenean nec eros. Vestibulum ante ipsu. m primis in faucibus orci luctus et trices posuere cubilia Suspendisse sollici udin velit sed leo. 
							Ut pharetra au.
							[button text="read more" link="#" style="primary" size="normal" target="_self" display="inline" icon="no"]
							[/span6]
							[span6]
							[spacer]
							[title_box title="why us"]
							Mauris fermeum dictum magna. Sed loreet aliquam leote llus dolor dapibus eget elementum vel curs eleifend elit. Aenean aucto. wisi et urna. Aliqat volutpat.
							Duisac turpis. Integer rutrum ante eu lacuestibulum libero nisl porta vel scelerisque eget malesuada at nequeVivamus eget nibh. Etiamursus leo vel metus. 
							Nulla facilisi. Aenean nec eros. Vestibulum ante ipsu. m primis in faucibus orci luctus et trices posuere cubilia Suspendisse sollici udin velit sed leo. 
							Ut pharetra au.
							[button text="read more" link="#" style="primary" size="normal" target="_self" display="inline" icon="no"]
							[/span6]
							[/row]
							
```
    Детальную информацию о шорткодах доступных в Cherry фреймворк вы можете найти в следующем туториале: WordPress. Как использовать шорткоды (на основе Cherry).
    
    После стилизации нужных элементов наша тема примет такой вид:
6. Стилизация футера
  1. Редактируем общие стили футера — границы, отступы, фон и так далее.
  2. Добавляем и стилизуем виджеты. По умолчанию в Cherry фреймворк доступны 4 области виджетов для футера, которые разбиты на равные по ширине колонки. В данном случае нам такая структура подходит, если бы нам нужно было ее изменить, то нам необходимо было бы редактировать 2 файла:
    - includes/sidebar-init.php в нашей чайлд-теме. В этом файле регистрируются все области виджетов для нашей темы. В нем же c помощью функций register_sidebar(), unregister_sidebar() мы можем добавлять новые, удалять или изменять существующие области виджетов.
    - wrapper/wrapper-footer.php файл в папке CherryFramework, перед редактированием его необходимо скопировать в папку «wrapper» в чайлд-теме. В этом файле вызываются области виджетов для футера, и вы можете изменить существующую HTML-разметку, расположение областей виджетов, вывести свою область виджетов с помощью функции dynamic_sidebar.
  3. В опциях темы (Cherry Options) на вкладке Footer (Футер) в опции Footer copyright text (Текст авторского права в футере) задаем нужный текст для копирайта.
Основная часть работы завершена. Теперь осталось просмотреть сайт целиком, поправить стили, которые вас не устраивают, но по сути, тема готова к работе.
Дополнительная информация. Подробная документацию по фреймворку вы можете найти на официальном сайте Cherry Framework.

Ниже приведен список .less файлов Bootstrap фреймворка, которые вам могут понадобиться при стилизации вашей темы:
- variables.less — содержти все .less переменные. В этом файле вы можете узнать, какие переменные уже объявлены, изменить их значения, добавить свои собственные переменные.
- buttons.less — стилизация кнопок по умолчанию.
- forms.less — стилизация всех элементов форм по умолчанию.
- mixins.less — миксины (mixins) используемые по умолчанию.