Создание новой темы для Drupal 7

Как создать оригинальный сайт Drupal

Темы – это плагины Drupal, которые придают сайту Drupal новый облик. Эта статья посвящена функционированию системы тем Drupal; в ней говорится о различных компонентах тем Drupal и о том, как определить какие компоненты необходимы или могут понадобится, и как создать новую тему с нуля, используя механизм обработки тем по умолчанию PHPTemplate.

Тим Огунжоби, инженер-программист и технический писатель, Xceedia Limited

Фотография Тима ОгунжобиТим Огунжоби (Timi Ogunjobi) – технический писатель и разработчик Web-приложений. Генеральный директор компании Xceedia, специализирующейся на разработке Web- и мобильных приложений. Автор нескольких книг, три из которых посвящены Drupal. Электронный адрес: timi@xceedia.co.uk.



29.08.2012

Тема ― важный компонент пользовательского интерфейса (UI) Web-сайта на основе Drupal. В версии Drupal 7 появилась новая методология реализации тем, хотя структура темы существенно не изменилась. Эта статья учит создавать новые темы Drupal 7.

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

Рисунок 1. Архитектура среды Drupal
Графическое представление архитектуры среды Drupal

Темы отображают данные, которые ядро Drupal извлекает из базы данных через механизм тем, служащий интерфейсом между ядром Drupal и шаблонами тем.

Механизм тем

Механизмы тем - это средства взаимодействия тем с ядром Drupal. Существует несколько механизмов тем, которые можно использовать с Drupal. Вот наиболее популярные из них:

  • PHPTemplate
  • XTemplate
  • Plain PHP
  • Smarty Engine

Другие механизмы тем Drupal

С Drupal часто используются и некоторые другие механизмы тем. В их число входят PHPTAL, wgSmarty, Zengine, Awesomengine, ETS, Haml, XSLengine и Peroxide. Однако в этой статье рассматривается механизм PHPTemplate, потому что это механизм тем по умолчанию, и только он входит в пакет Drupal 7.

При желании можно использовать свой собственный механизм.

Механизм тем Drupal по умолчанию PHPTemplate, который рассматривается в этой статье, использует для функций тем Drupal типа theme_filename() отдельные файлы тем с такими именами, как filename.tpl.php. Каждый из этих файлов содержит HTML-основу и PHP-операторы для работы с динамическими данными. Таким образом, при наличии начальных знаний в области PHP можно легко создавать достаточно сложные темы с помощью PHPTemplate, так как они содержат всего лишь небольшие фрагменты кода.


Планирование темы

Тема состоит из нескольких файлов. Их количество зависит от сложности темы. В теме может быть всего три файла или несколько десятков, включая графические элементы и различные сценарии, размещенные в нескольких папках в каталоге theme. На рисунке 2 показаны типичные описания файлов (цвета, изображения, логотип, шаблоны, таблицы стилей и PHP-файлы), которые могут содержаться в главной папке темы.

Рисунок 2. Типичный состав папки темы
Типичный набор папок и файлов в папке темы

Не все эти файлы необходимы для темы, и в некоторых темах нет даже файла каскадных таблиц стилей (CSS), который многие считают абсолютно необходимым. Структуру темы и то, как она работает, легче понять, когда знаешь, как используются все эти файлы. Рассмотрим некоторые файлы из каталога theme и их функции в рамках общей темы.

Файл .info

.info — это обязательный файл: он должен присутствовать в Drupal, чтобы тема была видна. Файлы .info указывают Drupal внутреннее имя темы. например, если имя файла — ibmtheme.info,, то Drupal присвоит этой теме имя ibmtheme. Если в теме используются такие элементы, как JavaScript, метаданные, таблицы стилей или прямоугольные области, их также необходимо определить в файле .info. Все остальное не обязательно. В листинге 1 это демонстрируется на примере содержимого файла .info темы Bartik.

Листинг 1. Содержимое файла .info темы Bartik
; $Id: bartik.info,v 1.5 2010/11/07 00:27:20 dries Exp $

name = Bartik
description = A flexible, recolorable theme with many regions.
package = Core
version = VERSION
core = 7.x

stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
stylesheets[all][] = css/colors.css
stylesheets[print][] = css/print.css

regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted

regions[featured] = Featured
regions[content] = Content
regions[sidebar_first] = Sidebar first
regions[sidebar_second] = Sidebar second

regions[triptych_first] = Triptych first
regions[triptych_middle] = Triptych middle
regions[triptych_last] = Triptych last

regions[footer_firstcolumn] = Footer first column
regions[footer_secondcolumn] = Footer second column
regions[footer_thirdcolumn] = Footer third column
regions[footer_fourthcolumn] = Footer fourth column
regions[footer] = Footer

settings[shortcut_module_link] = 0
; Information added by drupal.org packaging script on 2011-01-05
version = "7.0"
project = "drupal"
datestamp = "1294208756"

Файлы шаблонов .tpl.php

В каталоге theme есть несколько файлов шаблонов с именами типа xxx.tpl.php. Эти файлы содержат разметку Extensible HTML (XHTML) и PHP-переменные темы. В некоторых случаях они могут содержать и другие виды выходных данных, такие как RSS. В общем случае каждый файл темы Drupal .tpl.php управляет определенными выходными данными. Встраивать сложную логику в файлы шаблонов неудобно и нерационально, так как это затрудняет их обслуживание. Желательно, чтобы они содержали только прямые XHTML-теги и переменные PHP.

В листинге 2 показано содержимое файла node.tpl.php, который описывает выходные данные основного узла ядра темы Garland.

Листинг 2. Содержимое файла node.tpl.php темы Garland
<?php
// $Id: node.tpl.php,v 1.24 2010/12/01 00:18:15 webchick Exp $
?>
<div id="node-<?php print $node->nid; ?>" 
  class="<?php print $classes; ?>"<?php print $attributes; ?>>

  <?php print $user_picture; ?>

  <?php print render($title_prefix); ?>
  <?php if (!$page): ?>
    <h2<?php print $title_attributes; ?>><a href="<?php 
       print $node_url; ?>"><?php print $title; ?></a></h2>
  <?php endif; ?>
  <?php print render($title_suffix); ?>

  <?php if ($display_submitted): ?>
    <span class="submitted"><?php print $submitted ?></span>
  <?php endif; ?>

  <div class="content clearfix"<?php print $content_attributes; ?>>
    <?php
      // Hide the comments and links now so you can render them later.
      hide($content['comments']);
      hide($content['links']);
      print render($content);
    ?>
  </div>

  <div class="clearfix">
    <?php if (!empty($content['links'])): ?>
      <div class="links"><?php print render($content['links']); ?></div>
    <?php endif; ?>

    <?php print render($content['comments']); ?>
  </div>

</div>

Файл template.php

Файл template.php обычно содержит всю логику условных переходов и обработки выходных данных темы. Файл template.php можно использовать также для упрощения файлов .tpl.php темы. Так как это PHP-файл, он обязательно должен начинаться с открывающего тега PHP <?php, но закрывающий тег можно опустить.

Другие файлы

Во многих темах могут появляться некоторые другие необязательные элементы. В их число входит логотип и скриншот, файл theme-settings.php и файлы color.inc.

  • Логотип и скриншот. Эти элементы темы желательны, но не обязательны. Однако для того чтобы внести тему в хранилище Drupal, требуется скриншот. На рисунке 3 показан скриншот темы Garland.
    Рисунок 3. Скриншот темы Garland
    Скриншот темы Garland
  • theme-settings.php. Этот файл содержит параметры управления пользовательским интерфейсом или дополнительные возможности помимо таких общих параметров, как настройки поиска или логотип. Содержимое этого файла для темы Garland, показанное в листинге 3, дает представление о том, что он в конечном итоге должен отображать.
    Листинг 3. Содержание файла theme-settings.php темы Garland
    <?php
    // $Id: theme-settings.php,v 1.3 2010/09/04 15:21:09 dries Exp $
    
    /**
     * @file
     * Theme setting callbacks for the garland theme.
     */
    
    /**
     * Implements hook_form_FORM_ID_alter().
     *
     * @param $form
     *   The form.
     * @param $form_state
     *   The form state.
     */
    function garland_form_system_theme_settings_alter(&$form, &$form_state) {
    
      $form['garland_width'] = array(
        '#type' => 'radios',
        '#title' => t('Content width'),
        '#options' => array(
          'fluid' => t('Fluid width'),
          'fixed' => t('Fixed width'),
        ),
        '#default_value' => theme_get_setting('garland_width'),
        '#description' => t('Specify whether the content will wrap to a fixed 
           width or will fluidly expand to the width of the browser window.'),
        // Place this above the color scheme options.
        '#weight' => -2,
      );
    }

    Отображение будет иметь форму, похожую на рисунок 4.

    Рисунок 4. Страница параметров темы
    Экран параметров темы
  • color.inc. Функция модуля color. заключается в том, чтобы предоставить администраторам возможность полностью изменять цветовую схему темы без необходимости вручную перерабатывать таблицу стилей. Если ваша тема требует поддержки модуля цвета, нужно создать каталог color с файлом color.inc и различными вспомогательными файлами.

Создание темы

Существует два основных метода создания темы: можно построить тему с нуля, или изменить уже существующую. В этой статье мы создадим новую тему с нуля. Тем не менее, мы будем держать под рукой существующие темы, чтобы видеть, как выглядит их структура.

Создание структуры каталогов

Сначала создадим каталог для хранения файлов темы. Самое подходящее место для этого каталога - папка sites/all/themes. Присвоим ему уникальное имя, характерное для нашей темы: оно не должно содержать пробелов.

Хотя это не обязательно, полезно также создать подкаталоги для таблицы стилей (CSS-файлов), изображений и сценариев (если они используются). Это поможет сохранить наглядность.


Создание файла .info

Файл .info ― это просто текстовый файл, содержащий данные ― как правило, параметры, необходимые для описания структуры, а также содержание и параметры настройки темы. Это текстовый файл, каждая строка которого содержит пару из ключа и значения, причем значение расположено справа, а ключ ― слева от знака равенства (=). Пример приведен в листинге 4.

Листинг 4. Пример содержания файла .info темы Garland
; $Id: garland.info,v 1.10 2010/11/07 00:27:20 dries Exp $
name = Garland
description = A multi-column theme that can be configured to modify colors and
   switch between fixed- and fluid-width layouts
package = Core
version = VERSION
core = 7.x
stylesheets[all][] = style.css
stylesheets[print][] = print.css
settings[garland_width] = fluid

; Information added by drupal.org packaging script on 2011-01-05
version = "7.0"
project = "drupal"

Комментарии добавляются после точки с запятой (;) в начале строки. Квадратные скобки ([]) служат для создания массивов связанных значений. Рассмотрим элементы, которые должны или могут включаться в файл .info.

Имя

Значение name (имя) обязательно. Это должно быть наглядное имя, начинающееся с буквы. Имя подчиняется тем же ограничениям, что и при формировании функций в PHP, поскольку Drupal использует его для той же цели. Так что имя может содержать цифры и символы подчеркивания (_), но не дефисы (-), пробелы или знаки препинания. Синтаксис:

name = Garland

Описание

Ключ description (описание) рекомендуется и должен содержать лишь краткое описание темы. Это описание отображается при выборе темы или на странице Appearance. Синтаксис:

description = Тема с несколькими столбцами, в которой можно изменять цвета и 
  переключаться между макетами фиксированной и переменной ширины

Скриншот

Screenshot ― необязательный ключ. Он указывает Drupal, где найти эскиз новой темы. Этот эскиз будет также отображаться на странице Appearance. Если не включить этот ключ в файл .info, Drupal вызовет файл по умолчанию screenshot.png из каталога темы по умолчанию. Если вы решили назвать файл эскиза именем, отличным от screenshot.png, или поместили файл в каталог вне основного каталога темы, нужно добавить этот ключ. Синтаксис:

screenshot = /images/screenshot.png

Чтобы создать скриншот, просто создайте снимок с экрана готовой темы в браузере. Затем обрежьте изображение, измените его размер на 294 x 219 пикселей и сохраните под именем screenshot.png. Поместите этот файл в папку с файлом .info.

Версия

Хотя многие популярные темы содержат ключ version, его использование не рекомендуется. Если вы собираетесь разместить свою тему в хранилище тем Drupal, не нужно включать version, потому что когда выпуск упаковывается для загрузки, drupal.org добавляет строку версии автоматически. Но можно включить любую строку версии по своему усмотрению. Синтаксис:

version = 1.0

Ядро

Ключ core (ядро) - это обязательное значение. Во всех поддерживаемых в настоящее время версиях Drupal нужно указывать версию Drupal, с которой совместимы ваши модули и темы. Заданное значение будет сравниваться с константой Drupal Core Compatibility (она находится в файле include/bootstrap.inc); если совпадение не найдено, Drupal отключит эту тему. Синтаксис константы:

<?php
define('DRUPAL_CORE_COMPATIBILITY', '7.x')
?>

Сценарий упаковки Drupal.org автоматически устанавливает это значение на основе параметров совместимости ядра Drupal в каждом узле выпуска (если вы вносите свою тему в проект).

Механизм

Ключ engine указывает тип механизма, используемого вашей темой. В большинстве случаев он обязателен. Если engine в файле .info отсутствует, Drupal предполагает, что это отдельная тема, реализованная с помощью файла .theme. Большинство тем из репозитория Drupal.org используют механизм по умолчанию PHPTemplate, поставляемый с ядром Drupal. Синтаксис:

engine = phptemplate

Базовая тема

Если ваша тема ― подтема другой, не забудьте объявить ее базовую тему (base theme), чтобы обеспечить наследование. Другими словами, в подтеме будет использоваться файл ресурсов базовой темы. Необходимо ввести внутреннее машиночитаемое имя базовой темы. Синтаксис:

base theme = garland

Области

Создание новых областей темы

Любая часть страницы, которую нужно редактировать на странице администратора Blocks, становится областью. Как правило, она включает в себя заголовок, правую боковую панель, область содержимого и нижний колонтитул. Все области должны быть указаны в файле .info; иначе они не существуют для Drupal.

Ключ regions определяет области блока, доступные для темы. Необходимо определить ключ regions, а затем указать внутреннее машиночитаемое имя в квадратных скобках. После этого нужно в качестве применимого значения указать имя, понятное для человека. Синтаксис:

regions[highlighted] =Mission Statement

Если вы решили не определять области, то для темы Drupal 7 предполагаются следующие значения:

regions[header] = Header
regions[highlighted] = Highlighted
regions[help] = Help
regions[content] = Content
regions[sidebar_first] = Left sidebar
regions[sidebar_second] = Right sidebar
regions[footer] = Footer

Можно переопределить эти области для своих потребностей. В этом случае необходимо объявить линию. Синтаксис:

regions[highlighted] =Mission Statement

Функции

На странице конфигурации темы можно переключать различные элементы страницы. Флажками, отображаемыми на странице конфигурации темы, управляет ключ features (см. рисунок 5). Таким образом, можно исключить флажки для элементов, которые тема не определяет или не использует. Пропуск записи исключает флажок для данной функции; если не определить никаких функций, то будут отображаться все флажки, как предполагается по умолчанию.

Рисунок 5. Страница настройки функций темы
Флажки на странице настройки функций темы

В листинге 5 показаны все элементы, доступные для ключа features.

Листинг 5. Указание функций темы в файле .info
features[ ] = logo
features[ ] = name
features[ ] = slogan
features[ ] = node_user_picture
features[ ] = comment_user_picture
features[ ] = favicon
features[ ] = main_menu
features[ ] = secondary_menu

Таблицы стилей

Раньше темы Drupal по умолчанию использовали таблицу стилей style.css. Однако в текущих версиях, если этот файл не указан в файле .info, он больше не используется. Кроме того, посредством файла .info можно добавлять новые таблицы стилей. Синтаксис:

stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css

Сценарии

Раньше файлы JavaScript обычно просто вызывались как функции в файле template.php темы, например, drupal_add_js(). Однако в Drupal 7 файл script.js присутствует только тогда, когда он указан в файле .info. Синтаксис:

scripts[] = scripts/myscript.js

PHP

Здесь определяется минимальная версия PHP, поддерживаемая темой. Значение по умолчанию берется из константы DRUPAL MINIMUM PHP (она находится в файле includes/bootstrap.inc):

<?php
define('DRUPAL_MINIMUM_PHP', '5.2.4')
?>

Это значение можно изменить, но добавление строки не требуется. Синтаксис:

php = 5.2.4

Значения параметров .info по умолчанию

Файл .info содержит значения по умолчанию, которые Drupal применяет для каждой установленной темы. Drupal применяет к теме значения по умолчанию тех параметров, которые не определены в файле .info. Заметим, однако, что эти значения применяются как группа. Это означает, что если переопределить строку

regions[sub_header] = Sub-header,

то придется пересмотреть и остальные области по умолчанию; в противном случае они будут опущены. Точно так же это правило применяется и к таблицам стилей. Несмотря на то, что таблицы стилей технически не определены в группе, если в файле .info определить другую таблицу стилей, нужно пересмотреть и style.css; в противном случае она включена не будет.

В листинге 6 приведены ключи и значения по умолчанию для тем Drupal 7.

Листинг 6. Значения по умолчанию в файле .info
regions[sidebar_first]  = Left sidebar
regions[sidebar_second] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[highlighted] = Highlighted
regions[help] = Help
regions[page_top] = Page Top
regions[page_bottom] = Page Bottom

engine = phptemplate

features[ ] = logo
features[ ] = name
features[ ] = slogan
features[ ] = node_user_picture
features[ ] = comment_user_picture
features[ ] = favicon
features[ ] = main_menu
features[ ] = secondary_menu

screenshot = screenshot.png

Создание файла page.tpl.php

Теперь рассмотрим содержимое типичного файла page.tpl.php. Изображение, показанное на рисунке 6, взято из темы Garland и демонстрирует, как выглядит исходный код в браузере.

Рисунок 6. Исходный код page.tpl.php в браузере
Исходный код page.tpl.php в браузере

При более внимательном рассмотрении шаблон page.tpl.php оказывается простой HTML-страницей с обильным вкраплением PHP-операторов. Обычно большинство PHP-элементов Drupal уже определены, и все, что нужно сделать, ― это разместить их по своему усмотрению.

Примечание. Список переменных шаблона page.tpl.php находится здесь: http://drupal.org/node/190815 [Core Templates].

Добавление переменных к базовым элементам страницы

Для построения page.tpl.php можно использовать ряд переменных. Выбор зависит от функций, которые нужно реализовать в данной теме. Например, чтобы добавить на страницы иерархические указатели пути, включите переменную $breadcrumbs.

Вот переменные, которые чаще всего используются в page.tpl.php:

  • $site_name
  • $logo (логотип, загружаемый через параметры темы; полезен только при использовании функции логотипа темы)
  • $title (заголовок страницы)
  • $main_menu
  • $secondary_menu
  • $breadcrumbs (элемент навигации, оставляющий след ссылки, когда пользователь погружается вглубь Web-сайта)

Переменные, связанные с администрированием Drupal:

  • $tabs (меню, используемое для редактирования или просмотра меню администратора и т.п.; часто используется в модулях)
  • $messages
  • $action_links

И некоторые другие полезные переменные:

  • $base_path (путь к корню сайта)
  • $front_page (путь к главной странице сайта)
  • $directory (путь к теме)

Переменные вводятся с помощью интерфейса программирования приложений (API) Render:

<?php print render($tabs); ?>

Очевидно, что при наличии уровня подготовки по PHP и HTML выше среднего можно создать отличную тему, изучив приведенный пример файла и используя разрешенные переменные для создания своего собственного.


Построение других файлов шаблонов

Печать или визуализация

Некоторые переменные нужно отображать с помощью функции render(), в то время как другие можно просто вывести на печать. Если массив содержит переменную, как указано на справочной странице page.tpl.php (см. раздел Ресурсы), нужно использовать render(). В противном случае переменную можно распечатать (<?php print $variable; ?>).

К ядру Drupal прилагаются шаблоны по умолчанию и для других файлов темы. Их список приведен на сайте Drupal (см. раздел Ресурсы). Что касается файла page.tpl.php, то лучший способ построить его – найти готовый файл, изучить его и построить по этой модели свой собственный. На сайте Drupal можно найти переменные, разрешенные для использования в любом файле темы.


Файл style.css

В заголовок обычной статической HTML-страницы нужно включить указатель на таблицу стилей, используемую для отображения страницы. Он выглядит так:

<link rel="stylesheet" type="text/css" href="/model.css" />

Как уже говорилось, к теме можно добавлять новые стили или изменять стили по умолчанию. В обоих случаях необходимо внести таблицу стилей темы в файл .info. Что входит в таблицу стилей? К классам CSS применяется тот же модульный подход, какой ядро Drupal использует для стандартных элементов страницы. Хотя разработчики темы создают свои собственные классы, много готовых классов можно найти на сайте Drupal. Полный список классов ядра Drupal 7 см. в разделе Ресурсы.


Заключение

Эта статья содержит обзор функционирования системы тем в Drupal 7. В ней объясняются различные компоненты темы Drupal и процесс создания новой темы с нуля с применением механизма тем по умолчанию PHPTemplate. Мы рассмотрели типичную структуру файла каждого компонента темы. Теперь у вас есть все необходимое для создания своей собственной темы. Вперед!

Ресурсы

Научиться

Получить продукты и технологии

  • Дополнительная информация по Drupal 7.

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Open source
ArticleID=832317
ArticleTitle=Создание новой темы для Drupal 7
publish-date=08292012