Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь
Главная → Блог → Drupal → Как создать свою тему на Drupal 7?

Как создать свою тему на Drupal 7?

Раздел: 
Drupal

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

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

Взять и оформить все при помощи CSS то достаточно просто, но что делать если для оформления необходимо доработать html код страниц сайта, а для любого нормального проекта это необходимо, да и вообще создать свою структуру сайта, с удобными нам регионами вывода материалов и блоков? Вот этим вопросам и будет посвящена данная глава курса.

Как создать тему?

Для того, чтобы Ваша тема появилась в админке и стала доступной для подключение достаточно просто создать папку с ее названием в соответствующей директории (напоминаю, пользовательские темы должны лежать в папке ваш_сайт/sites/all/themes) и в нее положить файл с расширением .info.

Это обязательный минимум. Кроме него в теме должны присутствовать:

  • template.php — файл в который будет вставляться php код для расширения возможностей темы ( добавить нестандартные шаблоны, изменить код отдельных элементов, к примеру хлебных крошек)
  • шаблоны tpl.php — файлы в которых мы собственно и работаем с кодом страниц и их отдельных элементов. Именно в них будет происходить темизация
  • css и js файлы- обычные файлы со скриптами и оформлением

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

Файл .info

Синтаксис

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

В его имени можно использовать английские буквы нижнего регистра и знаки подеркивания.

Для примера я создам тему с названием mytheme. Выглядеть это будет следующим образом:

Drupal название темы

Содержимое

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

name = My Theme
description = Special theme for the site. By Vaden Pro /
version = VERSION
core = 7.x
 
; ---------STYLESHEETS---------
stylesheets[all][] = css/style.css
 
 
; ---------REGIONS---------
regions[header] = Header
regions[sidebar_left] = Sidebar left
regions[content] = Content
regions[footer] = Footer
 
; Information added by Drupal.org packaging script on 2015-10-15
project = "drupal"

Это значит следующее:

  • name — Название Вашей темы, которое будет отображаться в административной панели Drupal
  • description – описание, которое также будет находиться в административной панели
    Drupal администрирование темы
  • version — версия темы, выводится рядом с ее названием, если написать сюда VERSION, то будет совпадать с текущей версией движка, если написать свое значение (к примеру 7.Х-1.1) то будет выводиться оно.
  • core — как и name обязательный параметр, говорит о том для какой версии Drupal создана наша тема.
  • ;что-то там — синтаксис комментария в info файле, точка с запятой в начале строки
  • stylesheets[all][] = css/style.css — подключение css файлов в тему (подробнее о подключении js и css файлов в шаблон темы)
  • scripts[] = js/scripts.js — таким же образом подключаем и js файлы при необходимости
  • regions[header] = Header –создаем ключевые области нашей темы. Подробнее описание смотри чуть дальше.
  • project — говорит о том для какой платформы вообще создана данная тема

Пара слов о создании регионов для темы. Предположим у нас есть типичный сайт со следующей структурой:

Структура страницы

Соответственно мы хотим, чтобы у нас была возможность выводить блоки сайта в этих регионах, вот этой строкой в файле .info:

regions[header] = Header

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

Drupal регионы темы

Кроме вышеперечисленного минимума в файл инфо еще можно добавить:

  • screenshot — позволяет задать превью темы для админ панели, просто указываем путь к картинке:
    screenshot = screenshot. png
  • features — позволяет добавлять в настройки темы дополнительные, позволяющие перекрывать глобальные настройки тем, к ним относят следующие:

    features[] = logo
features[] = favicon
features [] = name
features [] = slogan
features [] = node_user_picture
features [] = comment_user_picture
features [] = comment_user_verification
features [] = mainjnenu
features [] = secondary_menu

  • php — если в проекте нужно испльзовать строго определенную версию php, то ее также можно указать напрямую, к примеру: php = 5.3
  • settings — позволяет задавать дополнительные настройки темы, подробнее о этом поговорим в курсе о профессиональной темизации друпал, сейчас же просто достаточно знать что такое есть.

Шаблоны .tpl.php

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

Для удобства работы в дальнейшем создадим папку templates внутри нашей темы, в которой и будут храниться все наши файлы tpl.php.

html.tpl.php

Предположим мы хотим делать сайт с использованием html 5, а значит нам нужно переопределить стандартный друпаловский !DOCTYPE (подробнее о html структуре страницы). Для этого нам необходимо подключить соответствующий шаблон.

Можно просто в нашей папке создать файл с таким названием и установить ему кодировку UTF-8 без BOM, но лучше взять исходник из ядра, для этого переходим из корня сайта modules/system, там находим и копируем файл html.tpl.php, после вставляем его в соответствующую папку нашей темы, открываем и вносим нужные нам правки:

Drupal изменение html.tpl.php

Код на который мы заменяем открывающий тег html и !DOCTYPE для подключения html5:

<!DOCTYPE HTML>
<html lang="ru-RU">

Также именно в этом шаблоне мы получаем доступ к тегу head всего сайта. К примеру, если нам нужно в кучную добавить кнопки социальных сетей на страницы сайта, именно тут мы можем добавить их код в тег head.

page.tpl.php

Аналогично предыдущему шаблону можно скопировать с modules/system/page.tpl.php, а можно просто копировать и переназвать шаблон html.tpl.php, потому что в отличие от html в page мы уже будем делать первую верстку нашей страницы, а значит код нам лучше написать в ручную (пара слов о том, как правильно создавать структуру страницы на html 5):

<?php if ($page['header']): ?>
  <header>
      <?php print render($page['header']); ?>
  </header>
<?php endif; ?>
 
<?php if ($page['sidebar_left']): ?>
  <aside class="leftSidebar">
      <?php print render($page['sidebar_left']); ?>
  </aside>
<?php endif; ?>
 
<section class="mainContent">
 
    <?php if ($messages): ?>
      <div id="messages">
          <div class="section clearfix">
              <?php print $messages; ?>
          </div>
      </div>
    <?php endif; ?>
 
    <?php if ($tabs): ?>
      <div class="tabs">
          <?php print render($tabs); ?>
      </div>
    <?php endif; ?>
 
    <?php if ($breadcrumb): ?>
      <div id="breadcrumb"><?php print $breadcrumb; ?></div>
    <?php endif; ?>
 
    <?php print render($page['content']); ?>
 
</section>
 
 
<?php if ($page['footer']): ?>
  <footer>
      <?php print render($page['footer']); ?>
  </footer>
<?php endif; ?>

Разберем чуть подробнее код:

Для того, чтобы вывести в шаблон страницы конкретный регион темы используется строка:

<?php print render($page['header']); ?>

Как не сложно догадаться ['header'] мы просто берем из файлика .info, напоминаю , в нем регион определен как (обращу внимание, что в шаблоне страницы в [header] добавляем кавычки ['header']):

regions[header] = Header

Аналогично выводим все остальные регионы.

Далее добавляем ему желаемую обертку (если мы хотим, чтобы все блоки из региона шапки были в теге <header></header>, то этот тег и добавляем).

И ставим проверку на php, чтобы в случае, когда у нас в конкретном регионе нету содержимого (как сейчас, когда тема только создана и все блоки в ней отключены):

<?php if ($page['header']): ?>
…
<?php endif; ?>

Откуда берем условие мы уже и так разобрали, все что внутри этого тега не будет выведено на страницу если в регионе ['header'] нет ни одного блока. Ну и получили итог:

<?php if ($page['header']): ?>
  <header>
      <?php print render($page['header']); ?>
  </header>
<?php endif; ?>

Проделали это со всеми регионами примера и добавили в вывод на страницу:

  • Хлебные крошки
        <?php if ($breadcrumb): ?>
      <div id="breadcrumb"><?php print $breadcrumb; ?></div>
    <?php endif; ?>
  • Системные сообщения (понадобятся в дальнейшем для работы с темизацией)
        <?php if ($messages): ?>
      <div id="messages">
          <div class="section clearfix">
              <?php print $messages; ?>
          </div>
      </div>
    <?php endif; ?>
  • И табы для удобства навигации
        <?php if ($tabs): ?>
      <div class="tabs">
          <?php print render($tabs); ?>
      </div>
    <?php endif; ?>

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

template.php

Также обязательный для создания файл. Копируем любой из наших уже созданных файлов tpl.php, удаляем из него код, переименовываем и ложим этот файл в корень темы. Открываем, ставим в начале файла открытый тег <?php (поскольку в нем будет только php код) и давайте для начала добавим в него код, который убирает системную ссылку на drupal.org из вывода на страницу. Теперь содержимое template.php выглядит так:

<?php
 
//Убираем автоматичекую генерацию ссылки на сайт друпала в теме:
function mytheme_html_head_alter(&$head_elements) {
  unset($head_elements['system_meta_generator']);
}

style.css

Как мы помним мы также подключили в тему и файл css из .info файла:

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

А значит просто создаем папку css в которую и положим наш файл style.css.

Подводя итоги

На этом создание скелета нашей будущей темы можно считать законченным. Дальше будет идти работа уже по оформлению конкретных отдельных частей сайта.

Для удобства сразу добавим в нашу тему пока пустые папки:

  • js — сюда будем при необходимости ложить файлы скриптов
  • img — для картинок
  • views — для файлов tpl.php, которыми будем темизировать предстваления (чтобы не запутаться их лучше отделить от обычных tpl шаблонов)

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

Drupal структура темы

Ключевые слова: 
Темизация

Курсы по Drupal (в открытом доступе)

Знакомимся с Drupal 7. С нуля до уверенной разработки
Уровень сложности:
Начальный