муравей-талисман сайта

ТЗ на создание темы для WordPress

Здравствуйте, уважаемые посетители. Сегодня мы поговорим о шаблонах WordPress. Фактически, эта статья продолжает тему, начатую в статье «Как поставить задачу верстальщику?» и содержит рекомендации, которые помогут Вам при постановке задачи исполнителям.

Небольшое вступление по теме

При создании шаблона важно четко представлять а) какие цели преследует наш сайт; б) что должен будет делать наш пользователь на сайте; в) иметь понимание структуры и функционала сайта, желательно оформленное в виде прототипа. Многие веб-студии, фрилансеры используют для создания сайтов (в т.ч. и сайтов-магазинов) платформу WordPress. Преимущества использования очевидны: бесплатность, универсальность (благодаря множеству расширений), отсутствие потребности в найме высококвалифицированных специалистов — с работой Wordpress под силу разобраться даже Junior программисту. По сути, для создания сайта на Wordpress обычно требуется создание темы (шаблона) и доработка функционала в виде изменения существующих или создания новых плагинов (дополнений).

Шаблон Wordpress от шаблонов других CMS, по сути, отличается только структурой и использованием собственных функций. Над созданием шаблона могут трудиться четыре человека (менеджер, дизайнер, верстальщик, программист), либо же два или вовсе один. Сложного в создании самого шаблона из готового макета ничего нет, необходимо всего лишь обладать знаниями HTML / CSS / Javascript / PHP. Для тех, кого связка HTML / CSS / Javascript / PHP звучит, как непонятный набор слов, сразу скажу — существует масса шаблонов как платных, так и бесплатных, на любой вкус. Также существует масса людей, которые делают такие шаблоны под заказ.

Именно потому, что даже если Вы никогда не будете вовлечены в процесс создания шаблона, но будете вынуждены объяснять, что Вам нужно, другим людям, я и написал данную заметку. Она не претендует на универсальность, и «заточена» под WordPress только потому, что это одна из наиболее распостраненных платформ для создания сайта.

Начинаем писать ТЗ для темы WordPress

Конечно, после того, как мы определились, что и как будет размещено и работать в шаблоне, важно всю эту информацию правильно передать исполнителю/исполнителям. Начало работы над шаблоном может быть:

  1. На этапе получения готового дизайна.
  2. На этапе получения готовой верстки.
  3. На этапе, когда нет ни дизайна, ни верстки и мы ставим задачу на создание темы с ноля.

Отдельно каждый этап, полагаю, расписывать не требуется. Поэтому по созданию темы 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/Иерархия шаблонов

 

About the author

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Я использую Google +

Пример рекламы от Google

Наши партнеры

www.work-zilla.com


Уже дописана статья

Подписка на новости блога