Здравствуйте, уважаемые посетители. Сегодня мы поговорим о шаблонах WordPress. Фактически, эта статья продолжает тему, начатую в статье «Как поставить задачу верстальщику?» и содержит рекомендации, которые помогут Вам при постановке задачи исполнителям.
Небольшое вступление по теме
При создании шаблона важно четко представлять а) какие цели преследует наш сайт; б) что должен будет делать наш пользователь на сайте; в) иметь понимание структуры и функционала сайта, желательно оформленное в виде прототипа. Многие веб-студии, фрилансеры используют для создания сайтов (в т.ч. и сайтов-магазинов) платформу WordPress. Преимущества использования очевидны: бесплатность, универсальность (благодаря множеству расширений), отсутствие потребности в найме высококвалифицированных специалистов — с работой Wordpress под силу разобраться даже Junior программисту. По сути, для создания сайта на Wordpress обычно требуется создание темы (шаблона) и доработка функционала в виде изменения существующих или создания новых плагинов (дополнений).
Шаблон Wordpress от шаблонов других CMS, по сути, отличается только структурой и использованием собственных функций. Над созданием шаблона могут трудиться четыре человека (менеджер, дизайнер, верстальщик, программист), либо же два или вовсе один. Сложного в создании самого шаблона из готового макета ничего нет, необходимо всего лишь обладать знаниями HTML / CSS / Javascript / PHP. Для тех, кого связка HTML / CSS / Javascript / PHP звучит, как непонятный набор слов, сразу скажу — существует масса шаблонов как платных, так и бесплатных, на любой вкус. Также существует масса людей, которые делают такие шаблоны под заказ.
Именно потому, что даже если Вы никогда не будете вовлечены в процесс создания шаблона, но будете вынуждены объяснять, что Вам нужно, другим людям, я и написал данную заметку. Она не претендует на универсальность, и «заточена» под WordPress только потому, что это одна из наиболее распостраненных платформ для создания сайта.
Начинаем писать ТЗ для темы WordPress
Конечно, после того, как мы определились, что и как будет размещено и работать в шаблоне, важно всю эту информацию правильно передать исполнителю/исполнителям. Начало работы над шаблоном может быть:
- На этапе получения готового дизайна.
- На этапе получения готовой верстки.
- На этапе, когда нет ни дизайна, ни верстки и мы ставим задачу на создание темы с ноля.
Отдельно каждый этап, полагаю, расписывать не требуется. Поэтому по созданию темы WordPress мы будем говорить в обобщенном ключе.
И не важно, Вы project manager и передадите эту задачу подчиненным или заказываете сайт найденному в интернете или еще где-нибудь фрилансеру. Вам нужно ответить сначала для самого (самой) себя на ряд важных вопросов:
- Что готово по самому сайту? (т.е. определяем, на каком этапе мы находимся)
- Есть ли сформированные требования к дизайну сайта (шрифты, логотипы, цвета, наличие бренд-бука)?
- На каких устройствах и в каких браузерах будет работать сайт?
- Верстка будет [tooltip title=»» content=»Резиновая верстка — это отображение сайта на всю ширину экрана и изменение ширины сайта при изменении ширины экрана, соответственно.» type=»classic» ]резиновой[/tooltip] или [tooltip title=»» content=»Фиксированная верстка — это верстка шаблона определенного размера, как правило, 960px. Такая верстка смотрится одинаково на всех разрешениях экрана.» type=»classic» ]фиксированной[/tooltip]?
- Есть ли представление того, какие будут страницы на сайте, их количество и отличия?
- Есть ли на примете готовые решения, которые можно использовать под WordPress (например, слайдеры, плагины форм и т.п. Возможно, ваш сотрудник/подрядчик уже с ними работал и не составит труда их внедрить в новый шаблон)?
- Есть ли прототип сайта, либо описание функционала страниц?
- Требуются ли настройки шаблона (изменение цвета, шрифта и т.п. из админпанели)?
- Будет ли структура шаблона отличаться от стандартной структуры шаблона WordPress? (этот момент полезно вспомнить, если Вы действительно знакомы со структурой шаблона WordPress)?
Исходя из озвученных выше вопросов прописываем небольшой документ, фактически, с развернутыми ответами на них. Содержание получится приблизительно такого толка:
1) Основные требования (ширина, цвет, если есть бренд-бук — краткое описание со ссылкой на бренд-бук, ссылки на макеты дизайна, где будет располагаться результат верстки, ориентировочные сроки выполнения задачи)
Например:
- цвета и шрифты, а также их использование описаны в бренд-буке, который прилагается к данному документу
- основная логика работы темы — в приложенном прототипе (для того, чтобы открыть прототип, прочтите инструкцию)
- ширина страниц сайта – фиксированная;
- шаблон должен корректно отображаться в распостраненных браузерах (IE7+, Firefox 3+,
- Google Chrome, Safari). Для старых браузеров должна быть предусмотрена страница-заглушка с рекомендациями обновить браузер.
- шрифты должны корректно отображаться на ЖК-мониторах во основных ОС (MS Windows, GNU/Linux, Apple OS)
- визуальные эффекты должны быть выполнены, по возможности, с использованием CSS
- шаблон должен называться «company», основные свойства задаются из админпанели сайта
2) Разметка шаблона (ну тут все понятно)
Например:
- для основных элементов сайта используется блочная (div) верстка;
- страницы должны располагаться в центре экрана;
- верхний колонтитул (header) должен был прижат к верхнему краю окна и иметь высоту 150 px;
- в верхнем колонтитуле должен располагаться логотип компании с ссылкой на «Главную» и строка поиска по сайту;
- на всех страницах должно отображаться основное меню навигации;
- на второстепенных страницах (кроме главной) должны выводиться «хлебные крошки»
- в основной части всех страниц должен располагаться баннер «карусель» с информацией о значимых проектах, значимость определяется установкой галочки «отображать в карусели» в настройке публикации;
- нижний колонтитул (footer) должен быть прижат к нижней части окна и иметь высоту 90 px;
3) Описание страниц (каждая по отдельности, как главная, так и вспомогательные — описание для сингла, для страниц, для главной, для категорий)
Например:
- В шаблоне используется три типа страниц, которые отдельно описаны в пункте 5. В таблице ниже представлен пример сравнительной таблицы.
Название страницы | Файл шаблона | Файл верстки, если есть | Страница прототипа, если есть | Файл с дизайном | Краткое описание |
Главная страница | front-page.php | home.html | Home | main_05.psd | Главная страница сайта |
Основной шаблон страницы | page.php | article.html | Article | article_05.psd | Основной шаблон страниц сайта по умолчанию |
Шаблон страницы контактов | contacts.php | contacts.html | Contacts | contact_05.psd | Шаблон страницы контактов и формы заявки |
Шаблон страницы клиентов | clients.php | clients.html | Clients | client_05.psd | Шаблон страницы отображения клиента компании |
Шаблон вывода записей | single.php | single.html | Zapis | zapis_05.psd | Шаблон записи |
Шаблон вывода категорий | category.php | category.html | Category | category_05.psd | Шаблон вывода записей категории |
Шаблон настроек темы | theme-options.php | options.html | Opts-backend | options_05.psd | Шаблон страницы настроек темы |
Шаблон отображения страницы 404 ошибки | 404.php | 404.html | 404 | 404_05.psd | Шаблон 404 страницы (Страница не найдена) |
Шаблон вывода результатов поиска | search.php | search.html | search | search_05.psd | Шаблон страницы результатов поиска |
4) Настройки шаблона (при необходимости)
Например:
В шаблоне должна быть предусмотрена возможность смены фонового цвета / изображения сайта, а также логотипа прямо из административной панели. За вывод настроек отвечает файл theme-options.php. Доступ к настройкам темы: Консоль —> Внешний вид —> Настройки темы «company»
5) Структура шаблона и размещение стилей шаблона (обычно просто древовидная структура с названиями файлов шаблона)
Например:
Для текстового редактора CMS должны быть разработаны три основных шаблона для публикаций:
- Базовый шаблон – page.php. Весь текст содержимого должен быть оформлен в соответствии с бренд-буком. Тег заголовка h1 должен иметь размер 1em от общего размера шрифта. Теги h2, h3, strong должны иметь размер 0,5em общего размера шрифта.
- На основе базового шаблона создаются шаблоны для страниц «Контакты» и «Клиенты» должны отображаться изображения анонса, анонсы публикаций и ссылки «узнать больше» на полную версию статьи если таковая имеется. Полная версия статьи должна выводиться во всплывающем окне с использованием JavaScript, после перехода по ссылке «узнать больше»
- Для вывода записей категорий создается отдельный шаблон category.php. Записи для этих страниц должны быть сложены прямоугольными плитками одинакового размера по 3 в ряд с одинаковым отступом между плиток. Каждая плитка должна быть обрамлена пунктирной линией. В плитке должно отображаться изображение анонса, анонс публикации и ссылка «узнать больше» на полную версию статьи если таковая имеется.
- Полная версия статьи должна выводиться во всплывающем окне с использованием JavaScript, после перехода по ссылке «узнать больше»
- Основные стили шаблона размещаются в файле style.css. Вспомогательные — в папке css в корневом каталоге шаблона company
Ниже представлена структура оговариваемого шаблона с объяснениями:
company — основная папка шаблона
-css — папка со стилями
—custom.css — папка дополнительных стилей (редактора итп)
—index.php — файл защиты от прямого доступа
-js — папка с файлами javascript
—custom.js — основной файл javascript
—index.php — файл защиты от прямого доступа
-img — папка картинок шаблона
—back.jpg
—divider.jpg
—index.php — файл защиты от прямого доступа
-archive.php — шаблон вывода архивов записей
-404.php — шаблон вывода ошибки «страница не найдена»
-category.php — шаблон категории
-comments.php — шаблон комментариев
-contacts.php — шаблон вывода страницы «Контакты»
-clients.php — шаблон вывода страницы «Клиенты»
-header.php — шаблон вывода заголовка (шапки сайта)
-footer.php — шаблон вывода подвала сайта
-front-page.php — шаблон главной страницы
-functions.php — файл расширений, настроек, модификаций темы
-index.php — файл защиты от прямого доступа
-page.php — базовый шаблон страницы
-sidebar.php — служебный шаблон вывода левой/правой колонки
-single.php — базовый шаблон записей
-search.php — шаблон отображения поисковой выдачи
-searchform.php — шаблон отображения поисковой формы
-theme-options.php — файл настроек темы
Итоги
Естественно, представленная структура — не истина в первой инстанции. Структура может упрощаться / усложняться. Подведем краткие итоги:
1) Мы обсудили некоторые ньюансы создания тем WordPress.
2) На примерах постарались создать ориентировочное ТЗ для исполнителя.
При необходимости что-то разобрать более подробно — спрашивайте в комментах.
Полезные ссылки:
Кодекс Вордпресс — http://codex.wordpress.org
Иерархия шаблонов в том же кодексе — http://codex.wordpress.org/Иерархия шаблонов