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

№8-1,

технические науки

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

Похожие материалы

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

Необходимые знания: HTML и CSS.

Рекомендуется почитать основы языка программирования PHP.

Вступление

Drupal состоит из двух основных частей.

Первая часть - модули. Они отвечают за информационное содержимое сайта. Практически вся информация, которая попадает на наш сайт должна формироваться через модули. Исключением может быть информационное наполнение дизайна. Например,  название сайта, номер телефона или название пунктов меню, которые нужно отобразить в графическом исполнении. В идеале, таких исключений не должно быть, но технологии отображения сайта позволяют ограниченный набор действий. Современные браузеры позволяют сильно увеличить этот набор, но в мире остается огромное количество пользователей с устаревшими версиями. Таким примером является Internet Explorer 6.

Вторая часть - темы. Они отвечают за визуальное отображение сайта. В дистрибутиве Drupal 7 содержится 4 стандартных темы: Bartik, Seven, Garland, Stark. На сайте Drupal.org можно скачать другие темы. Чтобы их установить достаточно разархировать их и поместить в папку sites / all / themes

Управление темами

Для управления темами нужно зайти в пункт меню Оформление.

upravlenie_temami.jpg

Здесь отображены все темы, которые находятся в директории themes (стандартные темы) и sites / all / themes (пользовательские темы). Они разделены на Включенная(ые) тема(ы) и Отключенные темы. Включенных тем может быть несколько, но только одна может быть установлена по умолчанию.

Здесь для каждой темы указано её имя, описание, скриншот, а также ссылки управления темой: Включить, Включить и установить по умолчанию, Установить по умолчанию, Выключить, Настройки. Со всеми ссылками понятно, кроме последней. Остановимся на ней подробнее.

Нажмём для темы Bartik на ссылку Настройка.

parametry_temy_bartik.jpg

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

Следующие два блока позволяют указать файл с логотипом и иконкой. Если установлен параметр Использовать стандартный логотип, то система будет искать в папке с темой файл logo.png. Если же убрать данный параметр, то появлются дополнительные поля, с помощью которых можно указать расположение нашего логотипа, либо загрузить его с локальной машины. В любом случае система будет использовать директорию sites / default / files. Изменить путь к этой папке можно в системе на странице admin/config/media/file-system.

zagruzka_logotipa_dlya_temy.jpg

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

Для начала нужно создать папку с названием нашей темы латинскими буквами или цифрами. Например, mytheme. В этой папке будет находиться информация о нашей теме. Какие файлы и папки здесь могут быть?

mytheme.info

Единственный обязательный файл. Имя файла должно совпадать с названием папки, в которой содержится тема. Например, mytheme.info. Содержит в себе текст определенной структуры:

name = Название темы
description = Описание темы
core = 7.x
stylesheets[media][] = path/to/file.css
scripts[] = path/to/file.js
region[region_name] = Название области сайта

Параметры name и description указывают соответственно название и описание темы. Можно указывать на кириллице с добавлением пробелов.

Строка core = 7.x указывает на то, что тема строится по версию 7.

Параметры вида stylesheets[media][] позволяют добавить css-файлы для нашей темы с учетом media-типа. Значением параметра является путь к css-файла от корневой директории нашей темы.

Например, нужно подключить два css-файла, которые находятся в папке css.

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

После после установки этих css-файлов в html-разметке нашего сайта должны появиться подобные строки:

Параметры вида scripts[] позволяют подключить js-файлы. Перед нами пока такой задачи не стоит, поэтому не будем на этом останавливаться.

Последним параметром, который мы будем рассмативать, является region[region_name]. Данный параметр позволяет указать области нашего сайта. 

Например

region[help] = Помощь
region[highlighted] = Выделенная область
region[content] = Содержимое
region[sidebar_first] = Левая колонка
region[sidebar_second] = Правая колонка
region[header] = Шапка
region[footer] = Подвал

В квадратных скобочках указывается машинное имя, которое мы будем использовать при изменении tpl.php файлов. Значением является нормальное имя области, которое можно увидеть на странице admin/structure/block.

В данном примере указаны области сайта, которые доступны по-умолчанию. В случае, если не указывать области, то будут доступны эти области.

Данный файл может содержать и другие параметры, но для нашей задачи это не актуально. Если кому интересно, то можно посмотреть информацию в сети Интернет.

Файлы вида *.tpl.php

Определяют разметку сайта. Содержат html-код со вставками php-кода, с помощью которого модули добавляют информацию к графическому наполнению. Если они отсутствуют для темы, то система берет шаблонные файлы и использует их. Ниже приведено описание таких файлов с указанием расположения их шаблонных файлов.

Кроме тех, о которых я расскажу ниже и их подвидов, существуют еще специфические шаблоны для модулей, например, block-admin-display-form.tpl.php. О них я рассказывать не буду, иначе объём данной статьи сильно разрастётся. Надеюсь, что после изучения материалов данной статьи уважаемые читатели данной статьи смогут сами освоить специфические шаблоны.

Важно! При изменении файлов темы, если включено кэширование, то не обходимо перед просмотром чистить кеш на странице admin/config/development/performance.

page.tpl.php 

Данный шаблон отвечает за разметку страницы целиком. Шаблонный файл можно взять в директории modules / system.

  

    

      
        " title="" rel="home" id="logo">
          <?php print t('Home'); ?>
                " title="" rel="home">
            

" title="" rel="home">

$main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Main menu'))); ?> $secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Secondary menu'))); ?>

Разберём подробнее данный код. Как я рассказывал выше, данный код содержит в себе html-разметку со вставками php-кода. Эти вставки располагаются между символами <?php и ?>.

Чтобы добавить блок кода, который будет выполняться при соблюдении определенных условий нужно использовать следующую структуру:

	

Также можно задать, если не соблюдается условие, то выполнить другой блок кода:

	

Если условий несколько то их можно объединять с помощью определенных символов: && (Логическое И), || (Логическое ИЛИ), ! (Логическое НЕ).

&& - логическое И || - логическое ИЛИ ! – логическое НЕ
a b a&&b a b a||b a !a
Истина Истина Истина Истина Истина Истина Истина Ложь
Истина Ложь Ложь Истина Ложь Истина Ложь Истина
Ложь Истина Ложь Ложь Истина Истина    
Ложь Ложь Ложь Ложь Ложь Ложь    

Например:

Также можно объединять блоки условий с помощью скобок. 

Многострочные комментарии в PHP добавляются между символами /* и */

Логотип

Рассмотрим пример как можно добавить в шаблон логотип. Возьмем из стандартного шаблона page.tpl.php следующий блок кода:

	
		
			<?php print t('Home'); ?>

С помощью его система добавляет логотип, обрамляя его ссылкой на главную страницу. Размещать данный код можно в любом месте шаблона. В стандартном шаблоне он помещается в теге div с идентификатором header, внутри которого для удобства помещается еще один тег div с заданными классами, а затем наш код.

Рассмотрим данный код подробнее...

Как мы видим логотип выводится при соблюдении условия $logo. Что это значит?

В языках программирования есть понятие переменной. Она предназначена для хранения в себе некоторой информации. Например, числового значения или строки. Значением переменной может быть любая информация, доступная в языке программирования. В языке программирования PHP по правилам имена переменных начинаются с символа $. Таким образом мы понимаем, что строка $logo является переменной. Drupal, как программа (система) написанная на PHP, помещает в эту переменную наш логотип. Таким образом, если мы выбрали логотип, то система будет считать это условие выполненным. Далее переходимк рассмотрению блока кода, который выполняется при соблюдении условия $logo...

Для начала добавляется тег а, который предназначен для добавления ссылки на главную страницу.

В атрибут href, который указывает напраление ссылки, помещается строка php-кода:

Что мы видим?

Для начала слово print. В PHP оно является стандартной функцией для вывода значений переменных и функций.

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

Получается что, система этой строкой выводит значение переменной $front_page. Drupal помещает в эту переменную ссылку на главную страницу.

В конце строки php-кода должен находиться символ-разделитель ";".

В атрибут title, который указывает подсказку при наведении на ссылку, помещается строка php-кода:

Данная строка выводит результат выполнения Drupal-функции t, которая принимает в круглых скобках один параметр строку 'Home'. Данная функция возвращает строку в зависимости от языковых настроек Drupal.

Аналогично добавляется тег img.

В результате просмотра сайта на указанном месте формируется следующая html-разметка:

	
		Главная

Название сайта и слоган

В системе названия сайта и слоган можно задать при установке системы или на странице admin/config/system/site-information.

Рассмотрим пример их добавления в шаблон page.tpl.php:

      
                " title="" rel="home">
            

" title="" rel="home">

Данный код несколько сложен.

Для начала расскажу о переменных, которые здесь используются:

  • $site_name. Содержит в себе название сайта.
  • $site_slogan. Содержит в себе слоган сайта.
  • $title. Содержит заголовок страницы (содержимого). Например, в данный момент должна отобразиться страница с контактной информацией, которая добавлена для сайта в содержимом. Для неё задан заголовок "Контактная информация". Значит данная переменная будет содержать в себе данный заголовок.

Начинается код с условия <?php if ($site_name || $site_slogan): ?>, который открывает блок, содержащий весь остальной код. Он проверяет задано ли название сайта или слоган, если да, то выполняется остальной код, иначе информация не выводится.

Далее помещается остальной код в тег div с идентификатором name-and-slogan.

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

В завершении проверяем слоган сайта. Если он существует, то выводим его, обрамляя тегом div с id="site-slogan".

В результате добавления данного кода при просмотре сайта на указанном месте должна формироваться следующая html-разметка:

	
		Название сайта
		Слоган
	

Основное и дополнительное меню

Теперь рассмотрим возможность добавления меню в шаблон сайта. Можно добавить меню добавлением блока с меню в необходимую область сайта на странице admin/structure/block. В этом случае не нужно изменять файл шаблона, если области сайта уже добавлены. Как это сделать мы рассмотрим ниже. Сейчас же расскажу о возможности добавления основного и дополнительного меню сразу в шаблон. Это позволит добиться более гибкой настройки отображения меню. Добавим в наш шаблон в необходимом месте page.tpl.php следующий код:

     $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Main menu'))); ?>
         $secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Secondary menu'))); ?>
       
    

Этим кодом в начале мы проверяем существует ли меню. Для этого используем переменные Drupal:

  • $main_menu. Основное меню.
  • $secondary_menu. Дополнительное меню.

Затем мы добавляем тег divid="navigation", потом внутрь ещё один с заданными классами, внутри которого выводим основное и дополнительное меню с помощью Drupal функции theme.

Данная функция отображает в зависимости от параметров отображает элемент сайта. Для этого в первом параметре указываем строки: links__system_main_menu (для основного меню) или links__system_secondary_menu (для дополнительного меню). Строки в PHP обрамляются в одиночные или двойные кавычки. В нашем случае мы используем одиночные.

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

Массив - это определенное количество объединённых переменных. Создается массив с помощью функции array, а качестве параметров которой указываются элементы массива (переменные). Переменные указываются в виде: ключ => значение или просто значение, тогда ключём будет являтся числовое значение по-порядку от 0.

array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Main menu'))
  • Ключ links указывает на переменную с меню. В примере указывает на основное меню $main_menu.
  • Ключ attributes указывает на массив аттрибутов тега для обёртки нашего меню.
    • Ключ id указывает идентификатор тега для блока с меню.
    • Ключ class соответственно указывает класс тега. Если таких классов много, как в нашем случае, то указываем их в виде массива без ключей.
  • Ключ heading указывает на заголовок нашего меню. Если его не нужно выводить, то данный параметр указывать не надо. В большинстве случаев это обоснованно. Так мы и поступим.

Также мы разделим данный код на две части, т.е. поместим оба меню в разные части шаблона. Это тоже более обоснованно и в большинстве случаев более применимо.

Основное меню

 $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Main menu'))); ?>

Дополнительное меню

 $secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Secondary menu'))); ?>

В результате мы должны при просмотре сайта увидеть следующие блоки html-разметки:

Основное меню

	

Дополнительное меню

	
  • Моя учетная запись
  • Выйти

Области сайта

Выше я рассказал как можно задать области нашего сайта в info-файле. Теперь нужно добавить в шаблон вывод данных областей сайта. Рассмотрим добавление кода на примере основной части (содержимого).

В info-файле мы указали

region[content] = Содержимое

Теперь на месте расположения данной области мы должны разместить следующий код:

Расскажу подробнее, что делает данный код. Система выводит значение Drupal-функции render в качестве параметра, которой указано значение элемента массива $page с ключом content.

В языке программирования PHP получение значение элемента массива по ключу происходить следующим образом: $array['key'], где $array - переменная, в которую помещён массив других переменных, а key - строковый ключ к элементу массива.

Переменная $page содержит все области сайта, к которым можно обратиться по строковому ключу, указанному в info-файле. Каждое значение содержит html-разметку каждой области, которая задается с помощью шаблона region.tpl.php (см. ниже).

dobavlenie_oblasti_sayta.png

Аналогично нужно поступать с другими областями сайта:

	...
	
	...
	
	...
	
	...
	
	...
	
	...
	
	...
	
	...

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

Меню "хлебные крошки"

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

Пример: Главная » Администрирование » Конфигурация » Разработка

Для добавления меню "Хлебные крошки" нужно добавить в шаблон page.tpl.php следующий код:

    

Переменная $breadcrumb содержит в себе меню. Поэтому мы проверяем его наличие, а потом выводим. Всё просто!

В результате получаем что-то подобное:

	
		Главная » Администрирование » Конфигурация » Разработка
	

Здесь по атрибуту href тега a ясно прослеживается иерархичность страниц сайта.

Заголовок содержимого

В шаблон также нужно добавить вывод содержимого заголовока страницы. За это отвечает переменная $title. Drupal также позволяет задать область перед заголовком (переменная $title_prefix) и после (переменная $title_suffix). Эти области могут использоваться различными модулями, поэтому желательно их тоже добавить.

	

Результат

	

Добро пожаловать на сайт

Другие элементы

Рекомендуется добавить в шаблон вкладки для управления содержимым. Используем переменную $tabs. Обычно их добавляют перед содержимым.

	

Туда же добавляем дополнительные ссылки. Переменная $action_links.

	

После содержимого можно добавить иконки. Переменная $feed_icons.

	

Список переменных

  • $base_path: Путь к корню системы, по умолчанию "/".
  • $directory: Директория в которой находятся шаблоны. Например, modules/system или themes/bartik.
  • $is_front: Сообщает, является ли страница главной. Можно использовать в блоке с условием, где в качестве условия будет эта переменная. Например
	

  • $logged_in: Сообщает, что страница отобращается для зарегистрированного пользователя или нет.
  • $is_admin: Сообщает, что страница отобращается для администратора сайта.
  • $front_page: Путь к главной странице сайта
  • $logo: Путь к логотипу сайта
  • $site_name: Содержит название сайта
  • $site_slogan: Содержит слоган сайта
  • $main_menu: Главное меню
  • $secondary_menu: Дополнительное меню
  • $breadcrumb: Меню "хлебные крошки"
  • $title_prefix: Область перед заголовком страницы.
  • $title: Заголовок страницы.
  • $title_suffix: Область после заголовка страницы.
  • $messages: Сообщения системы
  • $tabs: Вкладки для управления содержимым
  • $action_links: Дополнительные ссылки для управления содержимым
  • $feed_icons: Иконки
  • $node: Содержимое страницы. См. node.tpl.php
  • $page: Страница сайта.

region.tpl.php

Данный шаблон отвечают за разметку определенных областей сайта. Шаблонный файл можно взять в директории modules / system.

	

Список переменных

  • $content: Содержимое области.
  • $classes: Классы для области сайта
  • $region: Название области, которое указывается в info-файле
  • $classes_array: Массив всех классов для области сайта
  • $is_admin: Сообщает, что страница отобращается для администратора сайта.
  • $is_front: Сообщает, является ли страница главной.
  • $logged_in: Сообщает, что страница отобращается для зарегистрированного пользователя или нет.

node.tpl.php

Данный шаблон отвечает за разметку содержимого сайта. Шаблонный файл можно взять в директории modules / node.

nid; ?>">

  

>">

>

Здесь стоит рассказать об одном приёме вывода информации связанной с функцией render. Данный приём позволяет не выводить определённое содержимое переменной. Для этого используется Drupal функция hide. В нашем коде мы сначала скрываем с содержимом список комментариев и ссылки для управления содержимым.

	  

Потом выводим само содержимое без этих элементов

  print render($content);

После этого выводим скрытое содержимое

      hide($content['comments']);
      hide($content['links']);	

Почему бы сразу не вывести всё содержимое? Дело в том, что комментарии и ссылки по-умолчанию выводятся раньше содержимого, а нам это не нужно.

Список переменных

  • $title: Заголовок содержимого.
  • $content: Массив элементов содержимого.
  • $user_picture: Изображение пользователя. Отображение задается в шаблоне user-picture.tpl.php.
  • $date: Форматированная дата создания содержимого.
  • $name: Имя пользователя
  • $node_url: Путь к странице с содержимым.
  • $display_submitted: Whether submission information should be displayed.
  • $submitted: Автор содержимого
  • $classes: Классы для содержимого. Каждый класс описывает характеристики содержимого.
  • $title_prefix: Область перед заголовком содержимого
  • $title_suffix: Область после заголовка содержимого
  • $node: Полный вывод содержимого.
  • $type: Тип содержимого, например, article
  • $comment_count: Количесвто комментариев
  • $uid: Идентификатор автора содержимого
  • $created: Время создания содержимого
  • $classes_array: Список всех классов содержимого
  • $zebra: Выводит "even" для нечётных записей или "odd" для чётных.
  • $id: Идентификатор содержимого
  • $view_mode: Режим просмотра. см. ниже
  • $teaser: Сообщает, происходит вывод содержимого в кратком варианте или нет  (соответствует $view_mode == 'teaser').
  • $page: Сообщает, происходит вывод содержимого в полном варианте или нет  (соответствует $view_mode == 'full').
  • $promote: Сообщает, происходит вывод на главную страницу или нет 
  • $sticky: Сообщает, закреплено ли содержимое на верху страницы или нет 
  • $status: Сообщает, опубликована страница или нет 
  • $comment: Выводит комментарии
  • $readmore: Сообщает, происходит вывод в кратком варианте надписи "Читать далее" или нет 
  • $is_front: Сообщает, является ли страница главной.
  • $logged_in: Сообщает, что страница отобращается для зарегистрированного пользователя или нет.

block.tpl.php

Данный шаблон отвечает за разметку блока. Шаблонный файл можно взять в директории modules / block.

">

  subject): ?>
  

>subject ?>

>

Список переменных

  • $block->subject: Заголовок блока
  • $content: Массив элементов содержимого.
  • $block->module: Модуль, который создал данный блок
  • $block->delta: Идентификатор блока
  • $block->region: Область сайта в котором выводится блок
  • $classes: Классы для содержимого. Каждый класс описывает характеристики содержимого.
  • $title_prefix: Область перед заголовком содержимого
  • $title_suffix: Область после заголовка содержимого
  • $classes_array: Список всех классов содержимого
  • $block_zebra: Выводит "even" для нечётных блоков в области сайта или "odd" для чётных.
  • $zebra: Выводит "even" для нечётных блоков всего сайта или "odd" для чётных.
  • $block_id: Порядковый номер блока в области сайта
  • $id: Порядковый номер блока для всего сайта
  • $is_admin: Сообщает, что страница отобращается для администратора сайта.
  • $is_front: Сообщает, является ли страница главной.
  • $logged_in: Сообщает, что страница отобращается для зарегистрированного пользователя или нет.
  • $block_html_id: Атрибут id для html-разметки блока.

 

 

Графическое наполнение темы

logo.png

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

favicon.ico

Файл иконки по-умолчанию. Его можно создать с помощью бесплатного онлайн-сервиса favicon.ru. Также можно воспользоваться специальными графическими программами.

screenshot.png

Файл скриншота по-умолчанию. Размеры стандартных скриншотов имееют размер 294x219. Как можно сделать скриншот?

Можно воспользоваться специальными программами, а можно сделать скриншот вашего сайта с помощью клавиши Print Screen, например, в размере экрана 960х720. Затем добавляем изображение в любом графическом редакторе, изменяем размер и обрезаем изображение до нужно.

Дополнительные папки

/css

Дополнительная директория для css файлов. Есть смысл её создать, если css файлов становится много.

/js

Дополнительная директория для js файлов.

/images

Дополнительная директория для хранения изображений.

Отдельно хочу рассказать об использовании изображений в теме. Хранить изображения в самой теме, можно только те, которые используются в css-файле, либо логотип. В случае, если изображения добавляются в шаблоны темы с помощью тега img, то такие изображения нужно размещать в директории sites / default / files.

CSS

На основе разметки сайта создаем css-файл.