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

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

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

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

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

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

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

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

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

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

Отдельно каждый этап, полагаю, расписывать не требуется. Поэтому по созданию темы WordPress мы будем говорить в обобщенном ключе.

И не важно, Вы project manager и передадите эту задачу подчиненным или заказываете сайт найденному в интернете или еще где-нибудь фрилансеру. Вам нужно ответить сначала для самого (самой) себя на ряд важных вопросов:

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

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

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

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

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

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

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

www.work-zilla.com


Шаблоны для сайтов

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

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