Темизация Drupal

Создание темы Drupal из HTML файлов

Файлы шаблонов

Общее правило работы с шаблонами Drupal:

Скопировать стандартный файл шаблона (список всех стандартных файлов шаблонов и правила их именования: https://www.drupal.org/node/1089656) в папку темы (в корень или в папку templates внутри папки темы)
Изменить его имя по правилам, описанным по ссылке выше или в таблице ниже.

Добавить в шаблон строку типа:

Это шаблон из файла <?php echo basename(__FILE__); ?>

Очистить кэш:
```
drush cc all
```
Посмотреть, что получилось.

Если строка видна, то с шаблоном можно работать дальше — использовать переменные и пр. Не забывая очищать кэш.

Часто используемые шаблоны


Где лежит	Имя файла	Вариации (сверху max приоритет)	Назначение
modules/system/	html.tpl.php	html--internalviewpath.tpl.php html--node--id.tpl.php	Основная верстка сайта
modules/system/	page.tpl.php	page--front.tpl.php page--node--edit.tpl.php page--node--1.tpl.php page--node.tpl.php
modules/node/	node.tpl.php	node--nodeid.tpl.php node--type.tpl.php	Страницы материалов (нод)
modules/taxonomy/	taxonomy-term.tpl.php	taxonomy-term--tid.tpl.php taxonomy-term--vocabulary-machine-name.tpl.php	Страница термина таксономии

Ноды

Шаблон ноды

Базовым шаблоном для материалов (нод) в Drupal 7 является файл node.tpl.php.

Оригинальный файл node.tpl.php находится здесь:

/modules/node/node.tpl.php

Скопируйте его в папку вашей темы (или в папку templates темы) и добавьте в него строку:

Это шаблон из файла <?php echo basename(__FILE__); ?>

Обновите кэш:

drush cc all

Зайдите на любую ноду, чтобы увидеть строку: «Это шаблон из файла node.tpl.php»

Файл шаблона определенного типа материалов должен иметь название:

node--<type>.tpl.php

где <type> — машинное имя типа материала. Например, шаблон для типа материала video:

node--video.tpl.php

Машинное имя типа материала можно увидеть в списке «Структура → Типы материалов» admin/structure/types.

Стандартное содержимое файла шаблона можно взять из файла modules/node/node.tpl.php.

Посмотреть все доступные переменные полей можно с помощью модуля Devel: “Домик → Разработка → Информация о поле”, Поля → клинуть “Array”.

Переменные ноды

Получить все переменные ноды из шаблона:

<pre><?php print_r($node); ?></pre>

Или на странице ноды нажать вкладку Devel (рядом c Просмотр и Правка).

Пример 1: выведем в шаблоне содержимое поля body (основной текст)

С помощью <?php print_r($node); ?> найдем полный путь к переменной body:

Также его можно узнать через вкладку Devel: body → und → 0 → value.

Теперь в шаблоне ноды напишем:

<?php print $node->body['und'][0]['value']; ?>

Пример 2: получим название термина, к которому относится нода, из словаря таксономии hotel_type

<?php 
  $termid = $node->field_hotel_type['und'][0]['tid'];
  $term = taxonomy_term_load($termid);
  $termname = $term->name; // Название термина
?>

<?php print $termname; ?>

Часто используемые переменные

 <h1><?php print $title; ?></h1>
 <h1><?php print $node->title; ?></h1>

 <li>Тип материала: <?php print $node->type; ?></li>
 <li>Изображения: <?php print render($content['field_photo']); ?></li>

Условия

Примеры использования условия:

<?php if ($is_front): ?>
	<p>Этот текст будет показан только на главной странице.</p>
<?php endif; ?>

Если тип материала «hotel»:

<?php if (isset($node)): ?>
	<?php if (($node->type) != "hotel"): ?>
		<p>Это НЕ гостиница.</p>
	<?php else: ?>
		<p>Это гостиница!</p>
	<?php endif; ?>
<?php endif; ?>

или упрошенный вариант:

<?php if (isset($node) and ($node->type) != "hotel"): ?>
	<h1><?php print $title; ?></h1>
<?php endif; ?>

Другие условия:

$is_front — если главная страница
$logged_in — если пользователь авторизован
$is_admin — если пользователь администратор
$status — если материал опубликован
$sticky — если материал закреплен сверху
$promote — если материал отображается на главной странице
$page — если режим полного материала
$teaser — если режим анонса
$readmore — если анонс не включает в себя весь материал
$comment — если комментарии включены
$view_mode — режим просмотра (full, teaser и т.д.)

Таксономия

Получить все переменные термина таксономии из шаблона taxonomy-term.tpl.php (взять из папки modules/taxonomy/):

<pre><?php print_r($term); ?></pre>

function tiun_preprocess_menu_tree(&$variables) {
  $tree = new DOMDocument();
  @$tree->loadHTML($variables['tree']);
  $links = $tree->getElementsByTagname('li');
  $parent = '';
  foreach ($links as $link) {
    $parent = $link->getAttribute('data-menu-parent');
    break;
  }
  $variables['menu_parent'] = $parent;
}
function tiun_menu_tree__menu_catalog(&$variables) {
  return '<ul class="menu ' . $variables['menu_parent'] . '">' . $variables['tree'] . '</ul>';
}
function tiun_menu_link__menu_catalog(&$variables) {
  $element = $variables['element'];
  $sub_menu = '';
  $element['#attributes']['data-menu-parent'] = array($element['#original_link']['menu_name'] . '-' . $element['#original_link']['depth']);
  if ($element['#below']) {
    $sub_menu = drupal_render($element['#below']);
  }
  $element['#localized_options']['html'] = true;
  // чтобы отобразить дополнительную иконку (например, стрелочку, которая 
  // отмечает развернутый пункт списка), нужно внутрь тега '<a href...>'
  // добавить '<span class="arrow"></span>':
  // иконка в начале пункта:
  // $output = l($element['#title'], $element['#href'].'<span class="arrow"></span>', $element['#localized_options']);
  // иконка в конце пункта:
  $output = l($element['#title'].'<span class="arrow"></span>', $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

Этот шаблон формирует код типа такого:

<ul class="menu menu-catalog-1">
  <li class="first expanded active-trail" data-menu-parent="menu-catalog-1">
    <a href="/catalog/telefony" title="Телефоны" class="active-trail">Телефоны</a>
    <ul class="menu menu-catalog-2">
      <li class="first last expanded active-trail" data-menu-parent="menu-catalog-2">
        <a href="/catalog/aksessuary" title="Аксессуары" class="active-trail">Аксессуары</a>
        <ul class="menu menu-catalog-3">
          <li class="first leaf active-trail" data-menu-parent="menu-catalog-3">
            <a href="/catalog/akkumulyatory" title="Аккумуляторы" class="active-trail active">Аккумуляторы</a>
          </li>
          <li class="last leaf" data-menu-parent="menu-catalog-3">
            <a href="/catalog/chehly" title="Чехлы">Чехлы</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="last leaf" data-menu-parent="menu-catalog-1">
    <a href="/catalog/planshety" title="Планшеты">Планшеты</a>
  </li>
</ul>

где используются такие стили:

`menu`	`ul` контейнер для пунктов одного уровня
`menu-catalog-1` `menu-catalog-2`	там же, обозначают соответствующие уровни меню `ul`
`first`	первый элемент `li` списка пунктов меню одного уровня
`last`	последний элемент `li` списка пунктов меню одного уровня (если на одном уровне только один пункт, то он будет помечен обоими стилями: `first last`)
`expanded`	развернутый (открытый) пункт меню `li`
`active-trail`	этим стилем помечаются все пункты меню `li` и ссылки `a href`, которые формируют хлебные крошки к текущей странице
`leaf`	листья `li`

Примеры стилей

Стрелочка из спрайта для пометки развернутого пункта списка

/* Стрелочка справа от развернутой категории. */
/* По умолчанию стрелочку скрываем. */
span.arrow {
  display: none;
}
/* Показываем стрелочку только в случае, если li помечен стилем `expanded`. */
li.expanded > a.active > span.arrow {
  display: inline-block;
  background: url('../icon.png') no-repeat -51px -17px;
  width: 7px;
  height: 4px;
  margin-left: 5px;
  margin-bottom: 3px;
}

Иконка из спрайта вместо стандартного буллета

/* Иконка слева от активной категории */
li {
  position: relative;
}
li > a.active:before {
  content: '';
  /* позиция и размер в спрайте: */
  background: url($icon) no-repeat  -52px -26px;
  height: 5px;
  width: 5px;
  /* позиция относительно родительского элемента: */
  position: absolute;
  top: 20px;
  left: 10px;
}

Меню редактора

Поменять page в 'edit any page content' на соответствующий тип материала.

<?php if (user_access('edit any page content')): ?>
	<div class="editor_menu">
		<div class="btn-group">
			<a href="<?php print 'node/'.$node->nid.'/edit'; ?>" class="btn btn-primary btn-danger">Редактировать</a>
			<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
				<span class="caret"></span>
		 		<span class="sr-only">Меню редактора</span>
		 	</button>
			<ul class="dropdown-menu" role="menu">
				<li><a href="<?php print 'node/'.$node->nid.'/edit'; ?>">Редактировать</a></li>
				<li><a href="<?php print 'node/'.$node->nid.'/delete'; ?>">Удалить</a></li>
				<li class="divider"></li>
				<li><a href="/admin/content">Все страницы</a></li>
			</ul>
		</div>
	</div>
<?php endif; ?>

Ссылки

Drupal-верстка: html-макет или psd-эскиз?
Обзор файлов темы
Создание своего шаблона для Drupal 7 на конкретном примере (drupalfly.ru)

Bootstrap

Темизация Drupal

Зміст

Файлы шаблонов

Часто используемые шаблоны

Ноды

Шаблон ноды

Переменные ноды

Пример 1: выведем в шаблоне содержимое поля body (основной текст)

Пример 2: получим название термина, к которому относится нода, из словаря таксономии hotel_type

Часто используемые переменные

Условия

Таксономия

Меню

Примеры стилей

Меню редактора

Ссылки

Навігаційне меню

Темизация Drupal

Файлы шаблонов

Часто используемые шаблоны

Ноды

Шаблон ноды

Переменные ноды

Пример 1: выведем в шаблоне содержимое поля body (основной текст)

Пример 2: получим название термина, к которому относится нода, из словаря таксономии hotel_type

Часто используемые переменные

Условия

Таксономия

Меню

Примеры стилей

Меню редактора

Ссылки

Навігаційне меню

Пошук