В данном разделе мы рассмотрим создание простой дочерней темы.
Подготовка к работе
Предположим, что вы уже скачали копию WordPress для разработки и тестирования собственной темы. Также предположим, что вы заполнили разрабатываемый блог некоторым фиктивным контентом.
Для чего нужен фиктивный контент? Фиктивный контент позволяет протестировать вашу тему с качественными, разнообразными материалами. Естественно, если у вас уже есть собственный блог на WordPress, вы могли бы экспортировать его контент в разрабатываемый блог. Однако, нужно обязательно проверить, чтобы при импорте в блоге были размещены различные заголовки, списки, изображения, и т.д. Импорт фиктивного контента — самый быстрый способ размещения разнообразного контента в своем блоге. На сайте кодекса WordPress вы можете загрузить специальный тестовый файл, который заполнит ваш блог записями всех форм и размеров, страницами, метками, рубриками и различными вложениями. Специальный плагин Dummy Content позволяет добавить и удалить фиктивный контент при помощи простого нажатия кнопки.
Скачаем копию Thematic и активируем ее для изучения основных возможностей данного фреймворка. Если открыть код домашней страницы, то можно увидеть полезную разметку, наполненную именами классов, идентификаторами, микроформатами и т.д. Ниже приведен элемент body моего тестового блога:
<body class="wordpress y2010 m05 d01 h14 home blog not-singular loggedin mac firefox ff3">
Один из div элементов, окружающих первую запись на странице, имеет вид:
<div id="post-86" class="hentry p1 post publish author-raena category-uncategorized untagged comments-open pings-open y2008 m04 d01 h11 alt slug-test-post" >
Множество классов позволяет быстро проводить необходимую стилизацию.
Наша тестовая запись, размещенная выше, имела непомеченный класс, поскольку у записи не было присоединенных меток. Для записей, обладающих метками, мы будем иметь классы следующего вида: tag-tagname. К примеру, записям, обладающим классом tag-love, можно задать следующее представление:
.post .tag-love .entry-title {
background: url(heart.gif) center left no-repeat
}Вы хотите, чтобы первая запись на главной странице имела крупный шрифт? Нет ничего проще! Фреймворк Thematic ставит в соответствие каждой записи специальный класс с номером этой записи. Класс home тега body определяет главную страницу. Таким образом, для того чтобы увеличить размер шрифта в первой записи, достаточно указать следующие стили:
body.home .p1 { font-size: 1.5em }Хотите изменить размер заголовка на определенной странице? Thematic размещает уникальный класс для каждой записи и ID для каждой страницы. Следовательно, чтобы изменить размер заголовка, нужно указать следующие стилевые правила:
body.pageid-14 #header { height: 500px; } Хотите синхронизировать стили с IE6? Забудьте про все сущестующие хаки и приемы. Thematic создает специальные классы для различных браузеров:
body.ie6 #branding {
/* do IE 6 specific stuff here */
} Подробно изучите разметку фреймворка Thematic перед тем, как вести работу по созданию собственной темы. Динамические идентификаторы и классы, которые добавляет данный фреймворк, позволяют выполнить качественное представление темы без внесения каких-либо изменений в код.
На данной стадии полезно также заглянуть в директорию, в которой расположен Thematic. В ней мы увидим множество различных файлов шаблона, подпапок, а также файл readme и стилевые таблицы CSS. Некоторые из имен файлов являются очевидными: header.php отвечает за логику заголовка, post.php влияет на представление записей и т.д. В папке library темы содержится множество различных полезных CSS, Javascript и PHP-файлов, которые позволяют решить некоторые популярные задачи. Мы рассмотрим их функциональность позже, однако если ваше любопытство не знает границ, вы можете самостоятельно исследовать их на данном этапе.
Thematic также обладает примером дочерней темы, имеющей название thematicsamplechildtheme. Внутри папки thematicsamplechildtheme находятся файл style.css, funtions.php и readme. Мы возьмем эту тему в качестве основы для создания своей собственной темы.
Создание дочерней темы
Скопируйте папку thematicsamplechildtheme в каталог wp-content/themes и переименуйте ее. Я назову свою тему «Wicked», поэтому и папка получит аналогичное название. Затем, мы должны будем внести некоторые изменения в информацию о теме, которая хранится в файле style.css. Откройте файл style.css в своем любимом текстовом редакторе. Вы увидите следующие строки:
/* Theme Name: A Thematic Child Theme Theme URI: Description: Use this theme to start your Thematic Child Theme development. Author: Ian Stewart Author URI: http://themeshaper.com/ Template: thematic Version: 1.0 Tags: Thematic . Thematic is © Ian Stewart http://themeshaper.com/ . */
Что мы имеем? Во-первых, объемный блок комментариев в самом начале файла, который выполняет важную задачу: он определяет заголовок темы, автора, URI, краткое описание, метки и номер версии. Эта информация отображается рядом с каждой загруженной темой в панели администратора (вкладка Темы), исключая два пункта: Template, который сообщает, что Thematic является нашей родительской темой, и строку, содержащую символ копирайта, в которой можно указать любую дополнительную информацию относительно вашей темы.
Давайте теперь персонализируем информацию о теме. В случае чего, вы всегда сможете вернуться к этому шагу и внести в файл стилей необходимые поправки.
/*
Theme Name: Wicked Theme
Theme URI: http://example.com/themes/wicked
Description: A Thematic child theme that's just for kicks.
Author: Raena Jackson Armitage
Author URI: http://example.com/themes
Template: thematic
Version: 0.1
Tags: Thematic, three-columns, blue, grey, gray
.
This theme is © 2010 Raena Jackson Armitage.
.
*/Теперь, после того как мы внесли все необходимые изменения в стилевой файл, наша новая тема должна появиться в панели администратора рядом с уже установленными темами, как показано на рисунке:
С этим мы разобрались. Теперь активируем нашу тему и продолжим работу с ней.
Стильное представление
Приступим к редактированию стилей для придания теме более яркого и красочного представления. Фреймворк Thematic загружает в style.css различные наборы стилей, которые позволяют значительно облегчить работу, связанную со стилизацией темы. Импорт файлов стилей в style.css определен сразу под заголовком:
/* Reset browser defaults */
@import url('../thematic/library/styles/reset.css');
/* Apply basic typography styles */
@import url('../thematic/library/styles/typography.css');
/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-r-fixed.css');
/* Apply basic image styles */
@import url('../thematic/library/styles/images.css');
/* Apply default theme styles and colors */
/* It's better to actually copy over default.css into this file
(or link to a copy in your child theme) if you're going to do
anything outrageous */
@import url('../thematic/library/styles/default.css');
/* Prepare theme for plugins */
@import url('../thematic/library/styles/plugins.css');Теперь приступим к созданию более привлекательного стиля темы. Внесем некоторые изменения в типографию, цвета и макет.
Первое, что мы изменим, это переместим сайдбар в левую часть. Thematic включает в себя папку library/layouts, содержащую файлы стилей для различных макетов. К примеру, двухколоночный макет с левым сайдбаром определяется файлом 2c-l-fixed.css, двухколоночный макет с правым сайдбаром — 2c-r-fixed.css, трехколоночный макет с сайдбарами по обеим сторонам от основного контента — 3c-fixed.css, и т.д. В данном случае нам понадобится файл 2c-l-fixed.css. Подключить его можно в файле style.css с помощью следующей строки:
/* Apply a basic layout */
@import url('../thematic/library/layouts/2c-l-fixed.css'); Если ни один из существующих макетов не удовлетворяет вас, вы можете удалить все команды @import из style.css и определить в нем собственное расположение элементов.
Теперь поговорим немного о цвете. Наверно, вы обратили внимание на комментарий относительно файла default.css в примере, приведенном выше? В комментарии сказано, что если мы планируем сделать что-либо экстраординарное, то нам понадобится скопировать файл default.css в собственную тему.
То, что мы собираемся сделать далее, вряд ли можно охарактеризовать как нечто экстраординарное, однако пренебрегать советом скопировать файл default.css не стоит. Скопируем файл из каталога с фреймворком Thematic в каталог с дочерней темой и изменим соответствующее значение @import. Зададим файлу default.css новое имя, к примеру, newstyles.css:
/* Apply default theme styles and colors
-- This is a copy of the Thematic default.css */
@import url('newstyles.css'); Далее отыщем в нем следующий участок:
#header {
z-index:2;
}
#branding {
padding:88px 0 44px 0;
}
#blog-title {
font-family:Arial,sans-serif;
font-size:34px;
font-weight:bold;
line-height:40px;
}
#blog-title a {
color:#000;
text-decoration:none;
}
#blog-title a:active,
#blog-title a:hover {
color: #FF4B33;
}
#blog-description {
color:#666;
font-size:13px;
font-style:italic;
}
Выполнить замену цветов довольно просто: в данном случае я выбрал темно-синий цвет для бэкграунда. Соответственно, пришлось менять цвет основного текста и цвет ссылок.
#header {
z-index:2;
background: #07426c;
}
#blog-title a {
color:#fff;
text-decoration:none;
}
#blog-title a:active,
#blog-title a:hover {
color: #f47920;
}
#blog-description {
color:#eee;
font-size:13px;
font-style:italic;
}
Как все это будет выглядеть? Результат показан на рисунке.
Естественно, останавливаться на достигнутом не стоит. Вы можете самостоятельно поэкпериментировать со стилями и выбрать подходящее для себя представление.
