Как создать тему(template) для Drupal

test

/*-->*/

Вольный перевод: http://tips.webdesign10.com/how-to-make-a-drupal-theme

От переводчика: Судя по тому что сейчас есть 7-мая ветка, но по мере развития основные элементы построения темы(по крайней мере идеология проектирования) менялись не сильно, думаю что данная тема будет актуальна и для всех веток Drupal. Перевод не дословный, а вольный, но надеюсь в большинстве своем достаточно точный. По вопросам перевода этого текста: nelexis[at]gmail.com


 

Как создать тему для Drupal


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

Данная информация в основе своей была написана для версии Drupal 4.7, но была обновлена и дополнена для версии Drupal 6 4 марта 2009.

Перейдите в вашу директорию /themes . У вас должна быть в ней тема с названием /bluemarine. Мы используем ее как пример.

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

Вот список файлов темы Bluemarine для Drupal 6:

Файлы темы Drupal

  • bluemarine.info — обязательный файл для 6-й ветки Drupal, в котором находиться информация о теме.

  • page.tpl.php — Основной шаблон предопределенный для большинства страниц.

  • style.css — The CSS файл устанавливающий CSS правила шаблона.

  • node.tpl.php — Этот файл предопределяет контент нод.

  • block.tpl.php — Предопределяет контент блоков.

  • comment.tpl.php — Предопределяет контент комментариев.

  • logo.png — Ваше лого, если вы используете один логотип.

  • screenshot.png — скриншот вашей темы, который используется в админке и в настройках профиля если пользователь может выбирать тему шаблона.

  • box.tpl.php — создает рамки вокруг таких обьектов как коментарии. Смотрите так же http://drupal.org/node/11814.

  • style-rtl.css — это новый файл в Drupal 6 Bluemarine. Я думаю что это CSS для языков с поддержкой введения символов с права на лево и вы можете его игнорировать если не используете такие языки.

page.tpl.php и style.css

Файлы page.tpl.php и style.css основные для вашей темы Drupal. Файл page.tpl.php это микс из HTML и PHP. Посмотрите в файл и внесите кусок PHP кода который хотите использовать. К примеру следующий отрывок из файла page.tpl.php вставляет информацию сайта <head>. Просто скопируйте в ваш шаблон этот отрывок кода.

<head> <title><?php print $head_title ?></title> <?php print $head ?> <?php print $styles ?> <?php print $scripts ?> <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script> </head>

Следующий код из файла page.tpl.php использует оператор PHP if для вывода опциональной информации, такой как первичные ссылки, вторичные ссылки и слоган сайта. Вы можете настроить их отображение в админке Drupal. Шаблон Bluemarine использует таблицы, но вы можете спокойно удалить их и сделать шаблон на 100% основанным на CSS.

<table border="0" cellpadding="0" cellspacing="0" id="header"> <tr> <td id="logo"> <?php if ($logo) { ?><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"> <img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?> <?php if ($site_name) { ?> <h1 class='site-name'><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?> <?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?> </td> <td id="menu"> <?php if (isset($secondary_links)) { ?> <div id="secondary"><?php print theme('links', $secondary_links) ?></div><?php } ?> <?php if (isset($primary_links)) { ?> <div id="primary"><?php print theme('links', $primary_links) ?></div><?php } ?> <?php print $search_box ?> </td> </tr> <tr> <td colspan="2"><div><?php print $header ?></div></td> </tr> </table>

Файл styles.css

Файл style.css без каких-либо хитростей. Я рекомендую Firefox Web Developer Toolbar для создания файла style.css. Используйте настройку панели Display ID & Class Details в меню Информация чтобы увидеть классы CSS и ID генерируемые Drupal. После этого добавьте правила вашего CSS в файл style.css.

Прочие файлы темы Drupal

Остальные файлы в вашей теме это block.tpl.php, box.tpl.php, comment.tpl.php, и node.tpl.php. Каждый контролирует часть вывода шаблона. Файл comment.tpl.php определяет размещение коментариев. Это простой и легкий PHP: "Если здесь картинка пользователя, вывести картинку пользователя.

<div class="comment<?php if ($comment->status == COMMENT_NOT_PUBLISHED) print ' comment-unpublished'; ?>"> <?php if ($picture) { print $picture; } ?> <h3 class="title"><?php print $title; ?></h3> <?php if ($new != '') { ?><span class="new"><?php print $new; ?></span><?php } ?> <div class="submitted"><?php print $submitted; ?></div> <div class="content"><?php print $content; ?></div> <div class="links">&raquo; <?php print $links; ?></div> </div>

Ваша первая собственная тема

Скопируйте тему Bluemarine и положите ее в директорию /sites/all/themes/. Этой директории не существует сразу после установки, в этом случае вам нужно ее создать. Смотрите файл README в /sites/all/ для дополнительных подробностей. Переименуйте скопированную вами тему на новое название. Выберите ее в админке.

ВНИМАНИЕ: В 6-й версии Drupal 6 есть так же файл с информацией о теме(info). Для смены названия темы вам нужно так же изменить имя темы в файле bluemarine.info:

; $Id: bluemarine.info,v 1.4 2007/06/08 05:50:57 dries Exp $
name = Bluemarine
description = Table-based multi-column theme with a marine and ash color scheme.
version = VERSION
core = 6.x
engine = phptemplate

Оставьте большую часть HTML из файла page.tpl.php и замените те участки тем HTML который нужен в вашей теме. Оставьте PHP, изменяя его только если требуется. Если вы используете Linux для Web разработки, вы можете использовать Quanta Plus как редактор для редакторивания ваших файлов шаблона сразу на сервере. Каждый раз как вы сохраняете файл в Quanta Plus, удаленная копия файла будет обновлена.

Используйте Firefox Web Developer Toolbar's Display ID & Class Details возможности для просмотра CSS информацией для вашего шаблона при просмотрет в браузере. Или создайте новый style.css из существующего, или модифицируйте один из существующих из других шаблонов, которые вам понравились.Чтобы отредактировать вывод блоков, нод и комментариев редактируйте block.tpl.php, node.tpl.php, и comment.tpl.php файлы соответственно.

Когда закончите с собственной темой, сделайте скриншот с разрашением 150x90 пикселей. Сохраните его в директории с темой как screenshot.png.

Переменные используемые в шаблонах

Отрывки PHP кода в примере всего-лишь выводят PHPшаблонные переменные. Полный список доступных PHP-шаблонных переменных, которые вы можете использовать в своих темах можете найти на странице сайта Drupal.org PHPtemplate variables. Список доступных переменных от 24 июля 2007:

$breadcrumb
HTML для отображения «хлебных крошек» вверху страницы.
$closure
Нужно для отображения нижней части страницы, для любых динамических javascript которые должны вызываться тогда, когда страница уже отображена полностью.
$content
HTML контент генерируемый Drupal для отображения
$directory
Директория в которой размещена тема , в виде
themes/box_grey or themes/box_grey/box_cleanslate.
$footer_message
Нижнее сообщение предопределенное в настройках админки.
$head
HTML как генерируемый drupal_get_html_head().
$head_title
Текст для отображения как заголовок страницы.
$help
Динамическая подсказка, главным образом для админки.
$is_front
Возвращает истину если это главная страница.
$language
Отображает язык используемый на сайте.
$layout
Настройка позволяющая вам использовать различные типы разметки ('none', 'left', 'right' or 'both') зависящие от того как много колонок доступно.
$logo
Путь к рисунку с логотипом, как предопределено в конфиге темы.
$messages
HTML для статуса и сообщений об ошибках, отображается вверху страницы.
$mission
Текст с целью сайта.
$node
(5.x и более поздних версий)Если Вы находитесь на странице page.tpl.php отображающем ноду в полноэкранном режиме, тогда $node доступен Вашему шаблону.
$onload_attribute
(4.7 и старее) Onload tags to be added to the head tag, to allow for autoexecution of attached scripts.
$primary_links (array)
Массив содержащий ссылки предопределенные как php-шаблонная специфика блока конфигурации.
$scripts
(5.x и более поздние) HTML для загрузки файлов JavaScript files и делает доступными настройки JS. В предыдущих версиях, файлы javascript вшивались в page.tpl.php
$search_box
Истина если поле поиска включено.
$search_button_text
(4.7 и более старые)Переведенный текст на кнопке поиска.
$search_description
(4.7 и более старые версии)Переведенное описание для кнопки поиска.
$search_url
(4.7 и более старые версии)URL the search form is submitted to.
$secondary_links (array)
Массив содержащий ссылки определенные в php-шаблоне специальном блоке конфигурации.
$sidebar_left
HTML для левой колонки.
$sidebar_right
HTML для правой колонки.
$site
Название сайта, всегда заполнено.
$site_name
Название сайта используемое в шапке, пустое если отключено отображение названия.
$site_slogan
Слоган сайта, пустое когда отключено.
$styles
Required for stylesheet switching to work. This prints out the style tags required.
$tabs
HTML для отображения вкладок вверху страницы.
$title
Название, отличное от head_title, в большинстве случаев название нод.

Это не все переменные доступные для использования в шаблонах. Более подробный список вы можете найти в Главе 8 книги Pro Drupal Development. Верю что Глава 8 свободна для загрузки.

Так же посмотрите эти две книги от Packt Publishing: Drupal 5 Theming и Building powerful and robust websites with Drupal 6.

Больше документации об создании шаблонов

Больше информации как создать шаблон для Drupal посмотрите в официальном Drupal Theme Developer's Guide, anatomy of a Drupal 6 theme page, и Themeable Functions list.

Когда вы будете готовы создать тему для Drupal 6 из существующей, посмотрите David Lanier's Minimal Drupal 6 Theme Creation tutorial.

 

 

Категория: 

Делитесь с друзьями в социальных сетях! Оставляйте комментарии!

Share/Save

Это Вам так же может быть интересно!