Верстка темы для Drupal 6
Как часто вам приходилось попадать в ситуации когда верстка сделана так, что приходится создавать много дополнительных шаблонов для страниц и блоков. И потом папка темы превращается в некрасивую кучу всевозможных файлов, в которой порой трудно ориентироваться и приходится вносить правки в несколько файлов сразу что бы изменить вид всего одного элемента.
Хотя точно такого же отображения блоков и разделов можно было бы добиться при стандартном выводе тех же блоков и элементов, используя только CSS.
Следующие несколько правил помогут разработчикам и верстальщикам избежать двойной работы в случае, если верстка сначала готовится в простых html файлах, а потом на ее основе делается тема для Drupal.
Общие положения
Кодировка
Изначально все файлы drupal используют кодировку UTF-8 (предупредите об этом верстальщика заранее, что бы лишний раз не пересохранять все его файлы и не переписывать теги).
Идентификация страниц
Как правило дизайн делается для нескольких страниц сайта, например: Главная, Каталог товаров, Страница материала и т.д. Можно конечно сделать для каждой страницы отдельный шаблон в теме оформления (page.tpl.php, page-front.tpl.php, page-node.tpl.php), но обычно в этом нет необходимости и приносит дополнительную сложность в работу с темой. Например если понадобиться добавить в шапку сайта какой то элемент, то придется вносить правки во все шаблоны. Но можно сильно упростить жизнь используя для идентификации страниц классы в теге <body>!
В тег body в атрибут class прописываются основные параметры текущей страницы, например:
<body class="not-front logged-in page-admin one-sidebar sidebar-left">
.not-front – внутренняя страница сайта (.front, соответственно, главная)
.logged-in – пользователь залогинен
.page-admin – определяет раздел сайта. Например на странице материала (товара, или статьи) будет класс .page-node (так же на главной будет прописан этот класс, т.к. главная относится к тому же разделу), а на странице поиска .page-search
.one-sidebar .sidebar-left – показывают структуру страницы (одноколоночная, двухколоночная и т.п.)
Если открыта страница материала (статья, запись блога, форма обратной связи или страница продукта), то присутствует еще класс
.node-type-[тип материала], например:
.node-type-page - простая страница
.node-type-product – карточка продукта
.node-type-webform – страница вебформы
.node-type-news – страница новости
Основные разделы страницы
Далее приведены стандартные для сайтов разделы. В вашей верстке они вполне могут отличаться от приведенных, но все же, по возможности, следует придерживаться предлагаемой структуры и особенно названий классов и идентификаторов элементов. Т.к. сократит время на переписывание кода и уменьшит вероятность появления неиспользуемых стилей в ваших CSS файлах.
Шапка сайта
имеет следующий вид:
<header id="header" role="banner" class="clearfix"> <a href="/" title="Главная" rel="home" id="logo"> <img src="images/logo.png" alt="Главная" /> </a> <div id="site-name-slogan"> <h1 id="site-name"> <a href="/" title="Главная" rel="home"><span>Доставка Цветов</span></a> </h1> </div> </header> <!-- /#header -->
Поиск
Если блок поиска задан не в виде стандартного блока, а например, встроен в шапку сайта, то вид должен быть следующим (это стандартный вывод формы поиска друпалом):
<form action="/" accept-charset="UTF-8" method="post" id="search-theme-form"> <div><div id="search" class="container-inline1"> <div class="form-item" id="edit-search-theme-form-1-wrapper"> <label for="edit-search-theme-form-1">Поиск на сайте: </label> <input type="text" maxlength="128" name="search_theme_form" id="edit-search-theme-form-1" size="15" value="" title="Введите ключевые слова для поиска." class="form-text" /> </div> <input type="submit" name="op" id="edit-submit" value="Поиск" class="form-submit" /> </div></div> </form>
Если блок поиска задан в виде блока в левой или правой колонке, то вид буде следующим:
<section id="block-search-0" class="block block-search clearfix"> <h2>Поиск</h2> <div class="content"> <form action="/" accept-charset="UTF-8" method="post" id="search-block-form"> <div><div id="search" class="container-inline1"> <div class="form-item" id="edit-search-theme-form-1-wrapper"> <label for="edit-search-theme-form-1">Поиск на сайте: </label> <input type="text" maxlength="128" name="search_theme_form" id="edit-search-theme-form-1" size="15" value="" title="Введите ключевые слова для поиска." class="form-text" /> </div> <input type="submit" name="op" id="edit-submit" value="Поиск" class="form-submit" /> </div></div> </form> </div> </section> <!-- /.block -->
Блоки
Стандартый вид блока:
<section id="block-[module]-[delta]" class="block block-[module] clearfix"> <h2>Заголовок</h2> <div class="content"> Содержимое </div> </section> <!-- /.block -->
,где [module] – это название модуля, который отвечает за данный блок, а [delta] – как правило порядковый номер или текстовый идентификатор блока среди блоков одного модуля
что бы лишний раз не переписывать классы и идентификаторы блоков лучше заранее вывести нужные блоки на сайте и скопировать к себе в верстку их структуру.
Боковые колонки
Имеют следующий вид:
<aside id="sidebar-left" role="complimentary" class="sidebar clearfix"> Содержимое </aside> <!-- /sidebar-left –>
Область содержимого
<section id="main" role="main" class="clearfix"> <nav class="breadcrumb"><a href="/">Путь к страницы</a></nav> <a id="main-content"></a> <h1 class="title" id="page-title">Заголовок страницы</h1> <div class="content"> Текст содержимого </div> </section> <!-- /#main –>
Содержимое страницы
Если речь идет о странице материала (например, карточке товара), то лучше сначала создать существующем на сайте страницу этого материала, с необходимой структурой, а потом стилизовать ее на основе полученного html исходника и дизайн-макета.
Если это какая-то живописная главная страница, то принципиальных ограничений нет, разве что использовать класс .front тега body для идентификации содержимого главной страницы
Меню
Меню в блоках имеет следующую структуру:
<ul class="menu"> <li class="leaf first"><a href="/user/1">Мои профиль</a></li> <li class="collapsed"><a href="/node/add">Создать материал</a></li> <li class="expanded"><a href="/admin">Администрирование</a></li> <li class="leaf last"><a href="/logout">Выйти</a></li> </ul>
Основное Меню (верхнее меню ссылок):
<nav id="navigation" role="navigation" class="clearfix "> <ul class="links primary-links clearfix"> <li class="menu-121 active-trail first active"><a href="/node/1" title="Доставка и оплата" class="active">Доставка и оплата</a></li> <li class="menu-122"><a href="/node/2" title="Контакты">Контакты</a></li> <li class="menu-123 last"><a href="/node/3" title="Скидки">Скидки</a></li> </ul> </nav> <!-- /#navigation -->
Желательно ничего не вставлять внутрь пунктов меню и делать все средствами css.
Если внутрь пунктов меню все же потребовалось вставить элементы типа <span>, например для оформления закругленных кнопок, то они не должны быть внутри тега <a>, а только за его пределами, т.к. при выводе меню друпал вырезает все теги из ссылок. и придется дописывать много кода, что бы полностью переопределить вывод меню.