Создание тем для Друпала с нуля

Продолжая изучение вопроса создания тем для CMS Drupal, я обнаружил очень интересный материал на Adobe Dreamweaver Developer Center, в котором рассказывалось о том, как упростить создание тем для Друпал с помощью редактора Dreamweaver CS4 и специальных расширений. Не смог оставить без внимания, поэтому публикую перевод материала в своём «бортовом журнале».

Я пропущу вступительную часть материала в котором рассказывается о том, что такое CMS и как они помогают нам жить. Также не буду рассказывать о том какая популярная CMS Drupal. Это не совсем имеет отношение к сути вопроса. Поэтому я перейду непосредственно к описанию процесса создания тем (шаблонов) для сайтов на Drupal. В этой статье вы узнаете об основах создания тем для Drupal и о том, как Dreamweaver CS4 (и Adobe AIR) помогает дизайнерам создавать эти темы.

Общее представление о темах Drupal

Темы для Drupal представляют собой сочетание PHP и соответствующей веб-стандартам верстки (XHTML и CSS). Пуританским подходом в создании темы для Drupal можно считать создание шаблона с помощью только PHP, фактически без шаблона как такового, используя только Drupal API. Веб-разработчики, которые не испытывают трудностей с созданием разметки могут создать тему для Drupal быстрее, чем разработчики, поскольку могут использовать вставки специальных переменных для вывода системных блоков движка непосредственно в разметке страницы в специальных файлах шаблона. Эти шаблоны широко известны как TPL файлы, которые, собственно и имеют расширение.tpl или tpl.php.

Drupal позволяет устанавливать и использовать несколько тем, например одну тему для администраторов, а другую тему для пользователей сайта. Такой подход рекомендуется при установке новых пользовательских тем, тем самым помогает предотвратить проблемы с администрированием сайта, если новая тема имеет какие-то проблемы. Создание разметки (темы) является финальным этапом разработки сайта на Drupal. Именно тема определяет то как будут отображаться данные на вашем сайте.

Если не углубляться в детали то, темы для Drupal представляют собой набор графики, стилей и файлов-шаблонов. Помните, что в самих шаблонах используется XHTML, CSS и PHP. Каждая тема имеет разделена на определённые структурные элементы которые, как правило организованы с помощью <div> тегов. Drupal заполняет эти регионы содержанием сайта. Если вы когда-либо использовали «server-side includes» для хедера и футера вашего сайта, то вы уже можете представить себе то, что Drupal делает при выводе каждой области контента. Контент в Drupal выводится двумя основными логическими единицами nodes (ноды — статьи или объекты) и блоки. Ноды, как упоминалось выше, являются страницами контента, например, новости или записи блога. Блоки являются вторичным контентом, допустим к блокам мы отнесём списки статей или новый опрос, как правило, они выводятся в левой или правой боковой панели сайта.

Использование Dreamweaver для работы с темами Drupal

По умолчанию в Dreamweaver можно редактировать любые файлы шаблонов темы Drupal, которые заканчиваются на .tpl.php, но Dreamweaver не знаком API Drupal или любыми другими пользовательскими типами файлов, которые используются в темах или модулях Drupal (типы файлов, такие как .info и .module). В помощь членам сообщества Drupal и пользователям Dreamweaver, было создано расширение для Dreamweaver, которое позволяет поддерживать типы файлов Drupal и все Drupal API (см. Рисунок 1).

http://www.master-web.info/wp-content/themes/masterweb/images/notice.png); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 246, 191); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(255, 211, 36); border-right-color: rgb(255, 211, 36); border-bottom-color: rgb(255, 211, 36); border-left-color: rgb(255, 211, 36); color: rgb(81, 71, 33); padding-top: 0.8em; padding-right: 0.8em; padding-bottom: 0.8em; padding-left: 45px; background-position: 5px 50%; ">Примечание: Для того чтобы добавить расширение в редактор используйте Менеджер расширений.

Большим преимуществом Dreamweaver при работе с шаблонами Drupal является возможность эффективно применять и изменять стили. Для этого вы можете использовать отображение в проекции «Дизайн» совместно с встроенным редактором CCS. Каждый шаблон может содержать «дизайнерскую» ссылку на стили, которая позволит просматривать некоторые результаты оформления прямо в редакторе. Процесс использования дизайнерских стилей подробно описан в документации по Dreamveawer.

Каждая тема Drupal требует .info файл, который содержит мета-информацию о теме, например, название темы, описание стилей, и регионов. Это не PHP файл, а простой текстовый файл, который есть в каждой теме. Без этого файл Drupal не будет отображать вашу тему в панели администрирования. Рисунок 2 показывает типичную папку темы Drupal (в таком случае показана тема из базовой сборки — «Garland»).

Что из себя представляет .info-файл

Если посмотреть на список файлов в теме Garland, который показан на Рисунке2, то, не считая графических файлов и директорий, мы увидим TPL файлы шаблонов (.tpl.php), файлы стилей и .info-файл с информацией о теме. Заметим, что папка и имя .info-файла совпадают. .info-файл (.info) это первый файл, который необходимо создать, поскольку он будет определять в теме ваши регионы, скрипты и стили. В следующем примере показан типичный .info-файл темы Drupal:

name = Untitled Theme
description = Our very cool theme made in Dreamweaver CS4.
screenshot = custom_screenshot.jpg

version = 1.0
core = 6.x
engine = phptemplate

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer

features[] = logo
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links
stylesheets[all][] = styles.css
stylesheets[print][] = print.css

.info-файл определяет название вашей темы, описание, регионы, особенности (которые мы пока не рассматривали) и стили. В административной панели можно посмотреть как Drupal выводит информацию из этого файла. Для более подробного изучения данного вопроса можно обратится конлайн документации Drupal.

Использование AIR-приложения «Drupal Theme Starter»

C помощью Dreamveawer (как и любого другого текстового редактора) вы можете создать информационный (.info) файл для вашей темы. Но мы можем упростить эту задачу и избавится от лишней ручной работы, используя специальное бесплатное AIR-приложение — Drupal Theme Starter. «Стартер» поможет вам создать .info-файл для темы за несколько секунд. Загрузите и установите приложение и используйте его для создания.info-файла. А потом можно использовать Dreamweaver для редактирования разметки и стилей.

http://www.master-web.info/wp-content/themes/masterweb/images/notice.png); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 246, 191); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(255, 211, 36); border-right-color: rgb(255, 211, 36); border-bottom-color: rgb(255, 211, 36); border-left-color: rgb(255, 211, 36); color: rgb(81, 71, 33); padding-top: 0.8em; padding-right: 0.8em; padding-bottom: 0.8em; padding-left: 45px; background-position: 5px 50%; ">Примечание: При создании .info-файла не используйте в названии темы цифры или спецсимволы, так как Drupal на основании названия данного файла создаст внутренний ID темы, для использования в работе движка.

Рисунок 3. Приложение Drupal Theme Starter: Определяем мета информацию для темы: название, описание, скриншот.
Рисунок 4. Определяем регионы темы и особенности.
Рисунок 5. Объявляем стили и скрипты для темы.

Углубляемся в ядро Drupal

Начинается самая сложная часть для новичков в Drupal. Нет какого-либо магического кода для шаблона Drupal. Все темы базируются на использовании кода, который определен в ядре движка. Для того чтобы идти дальше, нам нужно загрузить последнюю версию Drupal 6.x. Первую свою тему лучше создавать на основании базовой темы, которая идет в сборке движка. Следует скопировать из нее нужные вам файлы. Вы можете оставить сам код и применить к теме свои стили и разметку. На первый взгляд легко. Не так ли? Так что — приступим!

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

1.  Убедитесь, что название вашей папки для темы называется так же, как и ваш .info-файл.
2.  Поместите созданный .info-файл в папку.
3. Откройте .info-файл и посмотрите какие скрипты и стили объявлены в вашей теме.
4. Создайте пустые файлы стилей и скриптов внутри паки. Позже вы заполните их кодом.
5. Загрузите и распакуйте Drupal 6 и зайдите в папку /themes. Вам нужно скопировать в вашу директорию следующие файлы ядра или базовой темы, для того чтобы не делать шаблон с чистого листа:
   
   1.  page.tpl.php: Этот файл должен содержать основные теги разметки: <html>,<head> , и <body>, а также размеченные <div> регионы перечисленные в .info-файле. Этот шаблон может быт найден в папке modules/system, или в паке основной темы themes/garland.
   2.  node.tpl.php: Определяет рендеринг содержимого нодов (node), которые являются страницами материалов в Drupal. Это шаблон может быть найден как в папке modules/node, так и в папке базовой темы themes/garland.
   3.  block.tpl.php: Шаблон для блоков, которые чаще всего появляются в сайдбаре. Этот шаблон может быт найден в папке modules/system, или в паке основной темы themes/garland. Скопированные файлы вы можете править на свое усмотрение. Главное не изменяйте имена этих файлов. Далее создайте свои CSS стили для разметки. Экспериментируйте и наслаждайтесь.

В процессе работы следует передерживаться нескольких правил:

1. Во-первых, для административной части сайта всегда лучше использовать тему из базовой сборки. Это исключит проблемы с работой админки с произвольными темами. В панели управления Drupal выберите «Administration theme» и установите Garland, далее нажмите «Save configuration». Теперь вы можете смело добавлять кастомные темы не опасаясь проблем с управлением сайтом.
2.  В папке /sites/all добавте новые директории с названиями /modules и /themes. Для того чтобы разделить ваши собственные модули и модули, которые вы загружаете с сайтов сообщества стоит в директории sites/all/modules создать две папки с названиями custom (ваши) и contrib (сообщества). Для тем не требуется делать подобное разделение.

Скопируйте папку с вашей темой в sites/all/themes и Drupal должен будет распознать ее на странице управления темами — Themes administration page.

Каждый шаблон начинает работать с загрузки базового файла page.tpl.php, потом подгружаетсяnode.tpl.php для каждой единицы контента, и конечно-же, block.tpl.php для блоков, как, например, форма логина, поиск, и так далее. Каждый шаблон в свою очередь содержит ряд PHP переменных, которые и отвечают за вывод контента (например, $title используется для вывода заголовков нодов (материалов) и блоков). Более подробно о темах можно почитать в Drupal 6 Theme Handbook. Посмотрите на Рисунок 6, чтобы понять где вставляется каждый шаблон при сборке страницы.

http://www.master-web.info/wp-content/themes/masterweb/images/notice.png); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 246, 191); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(255, 211, 36); border-right-color: rgb(255, 211, 36); border-bottom-color: rgb(255, 211, 36); border-left-color: rgb(255, 211, 36); color: rgb(81, 71, 33); padding-top: 0.8em; padding-right: 0.8em; padding-bottom: 0.8em; padding-left: 45px; background-position: 5px 50%; ">Внимание! Никогда не делайте изменения в файлах ядра Drupal!

Помните, что шаблон page.tpl.php не содержит в <head> части тегов <style> или<script>. Друпал автоматически генерирует ссылки на эти файлы в следующем порядке: сначала ссылка <link> на CSS, потом JavaScript с помощью тега <script>. Стили могут быть созданы как в одном так и нескольких внешних файлах. Но помните что большое количество фалов стилей и скриптов негативно сказывается на времени загрузки страницы. Для того чтобы хоть как-то помочь в этой ситуации, Drupal 6 имеет стандартную опцию сжатия CSS и JavaScript, для ускорения загрузки страницы.

Установка новых тем Drupal

После того, как вы создали все необходимы изменения в вашей теме, запустите Drupal для установки вашей темы.

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

Отправляйтесь в корневую директорию вашего Drupal 6 и откройте паку /sites. В этой директории вы можете создать произвольное количество директорий для разных доменов, это одно из замечательных свойств Drupal — создание нескольких сайтов на одном ядре. Именно в паку /sites вы можете добавлять ваши модули и темы.

Следуйте инструкциям ниже для того, чтобы приготовить Drupal для установки кастомных модулей и тем:

http://www.master-web.info/wp-content/themes/masterweb/images/notice.png); background-repeat: no-repeat; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: rgb(255, 246, 191); border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(255, 211, 36); border-right-color: rgb(255, 211, 36); border-bottom-color: rgb(255, 211, 36); border-left-color: rgb(255, 211, 36); color: rgb(81, 71, 33); padding-top: 0.8em; padding-right: 0.8em; padding-bottom: 0.8em; padding-left: 45px; background-position: 5px 50%; ">Запомните! Нельзя устанавливать собственные темы и модули в папки ядра Drupal!

После всех проделанных операций, посетите страницу администрирования вашего Drupal и войдите в раздел управления темами. Рисунок 7 показывает стандартный вид панели управления темами, на этой странице вы должны будете увидеть вашу тему в списке всех тем. Если вы не видите вашу тему, возможно ее нет в нужной директории (drupal/sites/all/themes), или же вы забили включить .info-файл в папку темы, или же названия файла и папки отличаются.

Примените новую тему и посмотрите как она работает на всех страницах вашего сайта. Если видны какие либо проблемы то вновь просмотри все файлы вашей темы в редакторе.

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

Автор статьи Chris Charlton, в следующем материале пообещал рассказать о том как создавать темы для Drupal на основе своеобразного темплайт-кита Zen. Очень интересно, обязательно ознакомлюсь и думаю, что опубликую перевод.

UPDT:

Для всех у кого проблемы с нахождением и скачиванием инструментов, которые описаны в статье, вот — ссылка на архив, в который я вложил DrupalThemeStarter.air и Drupal_API.mxp:DrupalThemeTools.zip

Автора автора