Темизация в Drupal 7. Базовые принципы

 

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

В Drupal 7 внешний вид страниц задается при помощи регионов. На картинке показаны стандартные регионы - шапка сайта, левая и правая колонки, содержимое и подвал. Также на картинке вы можете увидеть файловую структуру темы Drupal 7.

лэндинг на drupal 7

Регионы, которые будут использоваться в данной теме, прописываются в info файле темы. Это основной файл темы, без которого она не будет работать.

Файлы темы

Допустим, мы создаем тему под названием "Example". В таком случае все файлы темы будут собраны в папку example. Эту папку, в свою очередь, необходимо положить в директорию sites/all/themes корневого каталога сайта.

Для того, чтобы тема определилась в системе Drupal достаточно одного info файла. В этом случае для корректного отображения страниц Drupal будет использовать стандартные файлы из системных каталогов. Файл info должен быть назван в точном соответствии с названием папки с темой: examle.info.

Структура info файла

name = Example
description = Example theme
core = 7.x

;;;;;;;;;;;;;;;;;;;;;
;; Регионы
;;;;;;;;;;;;;;;;;;;;;

regions[navigation] = 'Navigation'
regions[header] = 'Top Bar'
regions[highlighted] = 'Highlighted'
regions[help] = 'Help'
regions[content] = 'Content'
regions[sidebar_first] = 'Primary'
regions[sidebar_second] = 'Secondary'
regions[footer] = 'Footer'
regions[page_top] = 'Page top'
regions[page_bottom] = 'Page bottom'

;;;;;;;;;;;;;;;;;;;;;
;; Подключение файлов JS и CSS
;;;;;;;;;;;;;;;;;;;;;

stylesheets[all][] = css/style.css
scripts[] = js/script.js

Файлы html.tpl.php и page.tpl.php задают общую структуру вашей страницы. Как известно, любой html документ состоит из header'а (содержимое тегов <head></head>) и содержимого (все, что находится между тегами <body></body>).

Структура html-документа

<html>
<head>
...
</head>
<body>
...
</body>
</html>

Если сопоставить с файлами шаблона темы Drupal 7, то в файле page.tpl.php прописывается все, что содержится внутри тега <body>, а в файле html.tpl.php - все, что вне его.

Файл template.php служит для переопределения стандартных функций системы для целей вашей темы. Остальные файлы (node.tpl.php, comment.tpl.php и т.д.) вы можете включить в вашу тему по желанию. Они отвечают за темизацию отдельных элементов страницы - нод, комментариев и т.д.

Файл page.tpl.php

Файл page.tpl.php, как вы уже поняли, описывает основную структуру страницы вашего сайта на Drupal. Загрузите к себе на компьютер стандартный файл page.tpl.php из папки modules/system корневого каталога вашего сайта и откройте его с помощью программы Notepad++. Вы увидите стандартную разметку html-документа и включения php-кода, которые отвечают за подключение в соответствующие места на вашем сайте регионов. Например, так выглядит включение региона "Содержимое":

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

Таким образом, для того, чтобы темизировать страницу сайта, вам просто нужно изменить html разметку в файле page.tpl.php и положить его в папку templates вашей темы (или просто в папку темы). Таким же образом настраиваются и остальные файлы шаблонов (node.tpl.php, comment.tpl.php и др.).

Практическое задание

  1. Создайте папку demo.
  2. В программе Notepad++ создайте файл demo.info со следующим содержимым:

     

    name = Demo
    description = Demo theme
    core = 7.x

    ;;;;;;;;;;;;;;;;;;;;;
    ;; Регионы
    ;;;;;;;;;;;;;;;;;;;;;

    regions[navigation] = 'Navigation'
    regions[header] = 'Top Bar'
    regions[highlighted] = 'Highlighted'
    regions[help] = 'Help'
    regions[content] = 'Content'
    regions[sidebar_first]  = 'Primary'
    regions[sidebar_second] = 'Secondary'
    regions[footer] = 'Footer'
    regions[page_top] = 'Page top'
    regions[page_bottom] = 'Page bottom'

  3. Положите demo.info в папку demo.
  4. При помощи программы Filezilla подключитесь к вашему сайту и положите папку demo в директорию sites/all/themes корневого каталога сайта.
  5. В браузере перейдите в пункт меню "Оформление" панели меню администрирования сайта, включите тему Demo и сделайте ее темой по умолчанию.