Журнал PC Magazine/RE №11/2009

Drupal: настройка оформления

Drupal часто ругают за однообразность и узнаваемость дизайна, используемого на Drupal-сайтах. То, что за определенным сайтом стоит CMS Drupal, можно определить не только по URL-адресам специфического вида, узнаваемым путям к папкам модулей и главной странице в виде списка последних опубликованных документов, но и по стандартной двух-трехколоночной структуре сайта, наличию стандартных форм авторизации и поиска, облаков тегов, списков новых документов и других часто используемых блоков.

Однако все эти упреки несправедливы. Здесь можно процитировать старый анекдот: «Вы просто не умеете его готовить». На самом деле к Drupal при должном умении можно «прикрутить» дизайн и верстку любой сложности. Можно до неузнаваемости «темизировать», т. е. изменять внешний вид любого HTML-кода, создаваемого Drupal, – все стандартные формы, блоки, документы и списки. Просто для этого нужно понимать, как Drupal генерирует выходные данные (информация об этом была опубликована в PC Magazine/RE, 9/2009), и уметь переопределять этот вывод. Примеров таких детально темизированных сайтов много, в одной из врезок вы можете найти ссылки на некоторые из них.

В этой статье я расскажу о трех этапах темизации, охватывающих практически 100% задач, связанных с изменением внешнего вида сайта: разработка общего шаблона для всех страниц сайта и «кастомных» шаблонов для избранных страниц; разработка шаблонов для разных типов документов и списков; изменение внешнего вида форм (поиск, авторизация и любые другие стандартные и создаваемые внешними модулями формы).

Но прежде чем переходить к решению задач, познакомимся с основными используемыми терминами и структурой любой «темы оформления».

Тема оформления – это набор файлов, отвечающих за внешний вид сайта. Тема оформления определяет HTML-макет страницы, используемые на ней CSS-файлы и JavaScript. Несмотря на то что шаблоны, используемые в темах оформления, позволяют исполнять PHP-код, в них не должно быть кода, не связанного с отображением информации. Тема оформления должна на входе получать готовые массивы данных, а на выходе создавать из них HTML-код. Логика программы реализуется в модулях.

Для создания тем оформления можно использовать различные шаблонные «движки» (шаблонизаторы), такие как Smarty, PHPTAL и др., однако по умолчанию в системе может быть применен только PHPTemplate – шаблонный «движок», специально разработанный для Drupal. Если надо разработать тему оформления для Drupal с нуля, то рекомендуется использовать именно его, но если на Drupal переносится существующий сайт, для которого уже разработан шаблон на основе одного из альтернативных шаблонизаторов, то можно добавить его, разместив соответствующий «движок» в папке sites/all/themes/engines вашей инсталляции Drupal. Скачать модули, интегрирующие Drupal с внешними шаблонизаторами, можно по ссылке http://drupal.org/project/Theme+engines.

Все страницы разделяются на регионы – области страницы, каждая из которых может содержать один или несколько блоков с данными. Например, по умолчанию большинство стандартных тем оформления состоит из пяти регионов: левая и правая колонка, шапка, подвал сайта и регион с основным его содержимым. Такой макет страницы наиболее популярен, поскольку удовлетворяет требованиям большинства пользователей; с его помощью удобно строить новостные сайты и блоги. Однако это не означает, что все сайты, использующие Drupal, должны иметь такую структуру. Разработчик может определять в макете страницы любое количество дополнительных регионов и размещать их в любых самых неожиданных местах.

Блок – это набор особым образом сформатированных данных. Внешний вид и содержимое блока определяются создающим его модулем и функциями темизации (подробнее об этих функциях см. PC Magazine/RE, 9/2009), а расположение – администратором сайта. Используя специальный графический интерфейс, администратор может методом буксировки (drag-and-drop) разместить любой блок системы в любом из доступных регионов. Примером блока может служить форма входа в систему или облако тегов.

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

Если вас устраивает такой вариант, то вы можете дальше не читать этот текст, а поэкспериментировать с темами оформления, ссылки на которые приведены во врезке. Дальше рассказ пойдет об анатомии темы оформления для «движка» PHPTemplate.

Как и в случае с модулем, разработка которого рассматривалась в предыдущей статье, тема оформления должна иметь уникальное имя, состоящее из строчных латинских букв, цифр и знаков подчеркивания, и это имя должно начинаться с буквы. Тема оформления – это несколько файлов, которые располагаются в папке sites/all/themes/имя_темы относительно корня Drupal.

PHPTemplate при сборке страницы берет информацию из пяти основных файлов: имя_темы.info, page.tpl.php, node.tpl.php, block.tpl.php, template.php. Если же включен модуль comment, для вывода комментариев используется шаблон comment.tpl.php.

Файл имя_темы.info содержит служебную информацию: название и описание темы оформления, список используемых в ней *.css– и *.js-файлов и список регионов (ссылку на подробное описание всех параметров, используемых в *.info-файле темы, можно найти во врезке в конце статьи). Данные, находящиеся в этом файле, кэшируются в базе данных, и чтобы внесенные в него изменения вступили в силу, нужно этот кэш сбросить. Самый простой способ сделать это – просто зайти на страницу со списком тем и нажать кнопку Save configuration; при этом сбросится только закэшированная информация из *.info-файла, но не весь кэш сайта.

Page.tpl.php – это основной шаблон, в нем размещается HTML-код всей страницы, которая позже будет выведена пользователю. В частях страницы, где будет выводиться содержимое регионов и основной текст, должны располагаться соответствующие переменные. Например, если в *.info-файле не указано иное, то в каждой теме оформления присутствует пять основных регионов (их описание я давал выше), которые представлены переменными $left, $right, $header, $footer, $content. В первых четырех переменных выводятся блоки, размещенные в соответствующих регионах, в переменной $content находится основное содержимое страницы, а это или шаблон node.tpl.php (если просматривается документ, – например, новость или запись в блоге) с выведенными в нем данными, или страница, созданная каким-либо модулем, – например, список, генерируемый модулем Views.

Кроме переменных, содержащих видимые пользователю данные, в шаблоне page.tpl.php должно размещаться несколько служебных переменных. Скажем, между тегами страницы располагаются переменные $head, $styles, $scripts. В этих переменных Drupal собирает HTML-код, добавляющий к странице мета-теги, файлы стилей и java-скрипты соответственно. Наличие этих трех переменных позволяет программистам в своих модулях, используя API-функции drupal_add_css(), drupal_add_js() и некоторые другие, добавлять к странице свои стили или другие файлы, не изменяя файлов темы оформления.

В файле page.tpl.php, кроме перечисленных выше, может находиться еще десяток переменных, выполняющих разные функции: $primary_links, $secondary_links, $search_box, $tabs, $messages, $breadcrumbs, $closure и т. д. Все они важны. При необходимости описание всех доступных в page.tpl.php переменных можно найти по ссылке, размещенной во врезке в конце статьи.

Часто бывает нужно создать разное оформление для страниц сайта. Движок PHPTemplate имеет необходимые для этой задачи возможности. Чтобы задать свой шаблон для определенной страницы, следует в папке с темой оформления создать копию файла page.tpl.php и присвоить ей имя, соответствующее одной из масок: page-front.tpl.php будет использоваться как шаблон для главной страницы сайта; а page-путь_к_внутренней_странице.tpl.php – как шаблон для указанной внутренней страницы; page-node.tpl.php – при просмотре материала; page-node-nid.tpl.php, где nid – id документа – при просмотре документа с указанным id; page-node-edit.tpl.php используется при редактировании документа. Кроме того, вы можете использовать шаблоны maintenance-page.tpl.php и maintenance-page-offline.tpl.php, которые будут выводиться в случае ошибок соединения с базой данных или в случае первода сайта в offline-режим.

Node.tpl.php – шаблон, по умолчанию используемый для вывода содержимого документа. В шаблоне node.tpl.php размещается HTML-код, задающий форматирование документов, таких как Страницы (Page) и Новости (Story); в нем доступны переменные $title, $teaser, $content, содержащие заголовок, анонс и полный текст документа, а также ряд служебных переменных.

При просмотре страницы, скажем, с текстом новости выводится шаблон страницы page.tpl.php, в котором в регионе, отведенном для вывода основного содержимого (переменная $content), размещается содержимое шаблона node.tpl.php. Как и в случае с общим макетом страницы (page.tpl.php), для каждого типа документа может быть определен свой шаблон – так, часто для новостей используется один макет, для статических страниц другой, а для фотографий – третий. Чтобы определить свой шаблон для каждого типа контента, в папке с темой оформления нужно создать копию файла node.tpl.php и дать ей имя node-имя_типа_контента.tpl.php, т. е., например, файл node-blog.tpl.php будет использоваться для отображения записей в блоге, а node-book.tpl.php – для отображения страниц книги.

Block.tpl.php – определяет внешний вид блока; как и в случае с материалами, шаблон блока может быть задан для каждого модуля (блоки, создаваемые модулем user, будут использовать один шаблон, а блоки, создаваемые модулем block, – другой) или для каждого блока в отдельности. Маски имен файлов шаблонов для блоков имеют вид: шаблон block-module_name.tpl.php и используется для всех блоков, создаваемых модулем module_name; шаблон block-module_name-delta.tpl.php может использоваться в случае, если модуль создает несколько блоков и вы хотите каждому из них задать свой шаблон. Параметр delta – это id блока, который задается создающим его модулем. Шаблон block-region.tpl.php служит для отображения блока в определенном регионе.

Каждый модуль, написанный с применением слоя темизации Drupal, должен разделять функции, генерирующие данные, и функции темизации, оформляющие эти данные в виде HTML-кода. Функции темизации регистрируются модулями через специальный хук hook_theme() и имеют имена, начинающиеся с префикса theme_, например, theme_list(). Такие функции не реализуют никакой бизнес-логики, а только получают набор данных на входе и отдают сформированный HTML-код на выходе. Функции темизации могут быть переопределены в файле template.php, т. е. разработчик может заменить стандартное оформление данных, возвращаемых модулем, по своему желанию. Для этого нужно скопировать в него соответствующую функцию темизации, заменить в ней префикс theme_ на имя используемой темы и внести в нее необходимые изменения.

Из всех перечисленных выше файлов обязательный только *.info, в случае отсутствия в папке с темой файлов page.tpl.php, node.tpl.php, block.tpl.php или template.php будут использоваться стандартные шаблоны. Ссылку на список стандартных шаблонов можно найти в конце статьи.

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

Параметры stylesheets определяют список CSS-файлов, которые будут подключены ко всем страницам. В первой паре квадратных скобок через запятую может быть указан список параметров, присваиваемых атрибуту media HTML-тега link (подробную информацию о назначении этого атрибута можно найти по ссылке во врезке в конце статьи). Из перечисленных здесь имен файлов, а также из файлов стилей, которые подключены модулями через функцию drupal_add_css(), будет сформирован HTML-код, подключающий указанные стили и доступный в шаблоне page.tpl.php в переменной $styles. Кроме того, шаблонизатор попытается найти в папке с темой оформления файл style.css; если он есть, то он также будет подключен к странице.

Аналогичное назначение и у параметра scripts. Перечисленные в нем JavaScript, а также сценарии, добавленные модулями через функцию drupal_add_js(), будут подключены ко всем страницам сайта. Если в папке с темой оформления есть файл script.js, он также будет подключен к каждой странице.

Параметры regions определяют список доступных в шаблоне page.tpl.php регионов. Значение в скобках станет PHP-переменной, например $left или $footer (поэтому здесь недопустимо использовать пробелы, дефисы и другие запрещенные в именах PHP-переменных символы), а значение после знака «равно» – именем региона, доступным на странице управления блоками.

Файл page.tpl.php при использовании приведенного выше *.info-файла может иметь структуру подобную приведенной в листинге 2. Это очень простой пример, призванный продемонстрировать общую логику разработки темы оформления для Drupal, поэтому здесь опущено много деталей. Лучший способ научиться темизировать Drupal – изучить существующую тему оформления, например тему Zen. Она содержит детальное описание всех используемых стилей и переменных.

Переменные $header, $left и $footer в нашем примере будут заполнены HTML-кодом блоков, которые администратор сайта разместит в соответсвующих регионах. В переменной $head_title будет находиться загловок страницы, «склеенный» Drupal из имени сайта и заголовка текущей страницы, а переменные $head, $styles и $scripts будут заменены соответственно метатегами, ссылками на файлы стилей и JavaScript.

Переменная $content в шаблоне page.tpl.php заменится на содержимое текущей страницы, например на тело документа (шаблон node.tpl.php) или содержимое, генерируемое каким-либо модулем. Если в текущей теме оформления нет файла node.tpl.php, то используется одноименный файл из ядра Drupal, находящийся в папке modules/node.

В шаблоне node.tplp.php доступно несколько переменных, самые важные из них: $title – заголовок документа, $node – объект, содержащий полную информацию о текущем документе, $submitted – HTML-код, содержащий информацию об авторе документа, $content – основное содержимое (тело) текущего документа. Не путайте переменную $content из шаблона node.tpl.php с одноименной переменной из шаблона page.tpl.php. В первой есть только «тело» текущего документа без дополнительной информации (автор, дата публикации и т. д.), а во второй – полный HTML-код, который будет показан пользователю в регионе content. Например, при просмотре ленты последних новостей переменная $content каждой новости будет содержать текст одной новости, а переменная $content в шаблоне page.tpl.php – HTML-код всех выводимых новостей (см. врезку «Описание схемы страницы»).

Самый простой пример шаблона node.tpl.php см. в листинге 3. Все переменные, которые выводятся в шаблоне page.tpl.php, могут быть переопределены в функции phptemplate_preprocess_page(), размещенные в файле template.php текущей темы оформления. Аналогично все переменные шаблона node.tpl.php могут быть переопределены в функции phptemplate_preprocess_node(). Кроме того, в этих функциях могут быть определены дополнительные переменные, которые станут доступны в соответствующих шаблонах. Пример практического использования данных функций можно найти в документации (http://api.drupal.ru) или в одной из существующих тем оформления – например, приведенных во врезке «На заметку: готовые решения».

Прежде чем говорить об изменении внешнего вида форм, ознакомимся с основами Drupal Forms API – программного интерфейса, используемого для генерации форм. Применение Forms API несколько сложнее создания HTML-форм вручную, так как требует изучения логики его работы, однако его использование обязательно, поскольку Forms API решает ряд важных задач:

• любой разработчик может добавить или удалить элементы в форме, созданной другим разработчиком, не меняя ее исходного кода;

• любой разработчик может добавить дополнительные функции проверки и обработки введенных пользователем данных без изменения исходной формы;

• формы, созданные с использованием Forms API, защищены от атак, связанных с отправкой пользователем модифицированной формы;

• любой разработчик может изменить внешний вид формы, не изменяя ее исходного кода.

Каждая форма в Drupal представляет собой функцию, возвращающую ассоциативный массив. Этот массив должен содержать информацию обо всех элементах формы, функциях проверки (валидаторы, validators) и обработки (сабмиттеры, submitters) введенных данных. Данная функция должна быть расположена в файле модуля, о разработке модуля говорилось в статье, опубликованной в PC Magazine/RE, 9/2009.

Рассмотрим простой пример.

Приведенная выше функция генерирует форму, состоящую из текстового поля, выпадающего списка с тремя элементами и кнопкой для отправки данных. Имя этой функции – ее уникальный идентификатор ($form_id), который будет использоваться для отображения и изменения данной формы сторонними модулями. Чтобы вывести форму на экран, нужно через hook_menu создать страницу, где будет вызвана функция drupal_get_form, принимающая в качестве параметра $form_id формы, которая должна быть отображена на экране:

В массиве, возвращаемом функцией test_form($form_state), не определены процедуры проверки значений и заполнения полей (структур), поэтому ядро Drupal после нажатия на форме кнопки Submit попробует найти и выполнить функции form_id_validate и form_id_submit. В нашем случае, как легко догадаться, это будут функции с именами test_form_validate и test_form_submit:

Функция-валидатор проверяет выбранное в выпадающем списке значение и, если оно не one, посылает сообщение об ошибке с указанием, какой элемент формы вызвал ошибку. Функция-сабмиттер выводит на экран введенные пользователем значения. В реальном случае эта функция должна будет сохранить данные в базе данных.

При желании программист может в массиве $form функции test_form задать свойство #submit, содержащее массив обработчиков значений и свойство #validate с массивом валидаторов (см. листинг 4). Зеленым цветом выделены строки, добавленные к ранее описанным функциям. Код модуля также дополнится функциями из листинга 5.

Здесь добавлен валидатор, который проверяет текст, введенный в текстовое поле; если его длина оказывается меньше трех символов, то генерируется сообщение об ошибке.

При создании форм всегда рекомендуется использовать не стандартные валидаторы и сабмиттеры, а объявлять их явно, так как в этом случае сторонние программисты смогут дополнить массивы #submit и #validate своими функциями. Если используются стандартные валидаторы и сабмиттеры, то сторонние программисты смогут только заменить существующие функции своими, а это не всегда удобно.

Теперь вернемся к основной теме статьи – темизации Drupal. Функция drupal_get_form, получив на вход $form_id, идентификатор формы, которую нужно вывести на экран, вызывает функцию form_builder, проверяющую права доступа текущего пользователя к каждому из полей формы, и при наличии этих прав выводит стандартный HTML-код для каждого элемента формы. Каждый созданный элемент формы имеет уникальный атрибут id. Самый простой способ переопределения внешнего вида элементов формы – создание CSS-файла с описанием стилей нужных элементов формы. Если этого недостаточно, элементам формы можно добавить параметры #prefix и #suffix, которые будут содержать HTML-код, выводимый до и после созданного элемента. Если и этого мало, можно определить параметр #theme, который должен содержать используемое имя функции темизации.

Персональные функции темизации можно задать для всей формы целиком или для каждого ее элемента. По умолчанию Drupal для темизации формы пробует найти функцию theme_form_id, поэтому использование параметра #theme не обязательно.

Все функции, определенные параметром #theme, должны быть также объявлены через hook_theme (описание этого хука было дано в предыдущей статье).

Давайте изменим внешний вид созданного текстового поля. Для этого сначала создадим реализацию хука hook_theme:

Затем модифицируем массив $form["example_text_field"], который создается в функции test_form, добавив в него параметр #theme:

Теперь мы можем объявить функцию theme_example_text_field_theme_function и задать в ней любой HTML-код для отображения выбранного элемента:

Кроме того, эту функцию можно переопределить, не изменяя кода модуля. Для этого в файле template.php, который находится в папке с текущей темой оформления, нужно создать копию этой функции, заменив в ней префикс theme на имя текущей темы.

Если в реализации hook_theme использовать параметр template, например, так:

то HTML-код, ответственный за отображение элемента Web-страницы в браузере, можно будет задавать не в исходном тексте функции темизации, а в отдельном файле-шаблоне с соответствующим именем; в нашем примере это example-text-field.tpl.php. Такой подход удобен, если с сайтом должны работать дизайнеры, не имеющие опыта Web-программирования.

Если же возникла необходимость изменить внешний вид всей формы, а не только отдельных ее элементов, нужно проделать то же самое: указать значение параметра #theme формы, объявить в hook_theme функцию темизации и, наконец, реализовать ее. Давайте внесем необходимые изменения в наш код. Функция hook_theme будет выглядеть следующим образом:

Исходный текст обновленной функции test_form приводится в листинге 6.

Также нам потребуется и сама функция темизации формы. Определим ее:

Как и с любой другой функцией темизации, ее содержимое можно вынести во внешний шаблон.

Ну а теперь осталось научиться модифицировать из внешнего модуля существующую форму. Для решения этой задачи нужно воспользоваться одним из двух хуков: или hook_form_alter, через который проходят массивы всех обрабатываемых форм и в котором каждый массив можно отредактировать, или hook_form_form_id_alter, где form_id должен быть заменен на идентификатор нужной формы. Через этот хук проходит только выбранная форма. На вход оба этих хука получают массив формы (в нашем примере это массив, который генерируется функцией test_form), и в этот массив могут быть добавлены или из него могут быть удалены любые параметры: #theme, #prefix, #suffix, #submit, #validate и другие.

Для примера добавим к форме контейнер, который может содержать в себе несколько полей. Переместим в него два поля и сменим заголовок одного из них:

Вот и все. В этой статье я рассказал об основных принципах темизации Drupal, более подробную информацию вы можете найти в документации.