Темизация в Drupal

Из коробки Drupal располагает пятью темами. Естественно в интернете можно найти множество замечательных тем для Drupal, но человеческой душе всегда хочется чего то особеного. Либо тема совсем не подходит, либо хочется изменить какую то мелкую деталь. У вас есть свой сайт на Drupal, или вы как раз в процессе его создания? Давайте поговорим о том, как можно его приукрасить.
Для того что бы создавать свои темы, или изменять существующие, понадобятся знания PHP, HTML и CSS (чем большие изменения вы хотите внести, чем большие навыки вам потребуются), к сожалению это не входит в тему урока, и вам нужно либо уже иметь знания по этим языкам, или найти уроки по ним где нибудь еще, хотя если вы не лишены смекалки, то кое что понять, и изменить, сможете и после прочтения этого урока.
По умолчанию в Drupal используется движок phptemplate (его вы можете найти в папке /themes/engines, хотя он вам вряд ли понадобится), его мы и помучаем -) Для примеров будем использовать стандартную тему bluemarine, так как по моему мнению она наиболее проста, и подходит для обучения (ну и потому что я делал на ее основе несколько дизайнов -) ). Давайте скопируем папку /themes/bluemarine, в папку /sites/all/themes (если у вас нет папки themes, то создайте ее), и переименуем во что то типа my_theme.
Внутри мы найдем файл bluemarine.info (переименуйте его в my_theme.info) и 5 файлов с расширением .tpl.php, они то нам и нужны. Каждый из них задает отображение какой то части сайта. Для работы темы необходимы всего лишь 2 файла *.info, и page.tpl.php.
Давайте завершим создание нашей темы. Заходим в файл my_theme.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 ; Information added by drupal.org packaging script on 2009-07-01 version = "6.13" v project = "drupal" datestamp = "1246481719" и замените содержимое на: name = my_theme description = Наша тема!!!! version = VERSION core = 6.x engine = phptemplate 

Как видите мы убрали лишнее, и изменили название (name), и описание (description). Теперь зайдем в «Administer › Site building › Themes», выберем нашу тему, и сохраним. Теперь можно спокойно экспериментировать -)

Немного теории:
Page — собственно вся страница, то как она будет выглядеть задается в файле page.tpl.php.
Region — страница включает в себя регионы, если вы добавляли\убирали блоки, то вы делали это как раз в регионах, по уолчанию: Left sidebar, Right sidebar, Content, Header, Footer. В каждый из них можно вставлять блоки. Регионы можно добавлять\убирать, об этом мы поговорим позже.
Block — О блоках вы уже определенно слышали, они выводят какую-либо информацию в нужный нам регион. Их оформление задается в файле block.tpl.php.
Node — это содержание страницы, и задается файлом Node.tpl.php.
Box — выводит элементы страницы в указанном шаблоне. Задается файлом Box.tpl.php.

Давайте разберемся с файлом Page.tpl.php, и с тем как он выводит страницу. Можно разделить весь файл на 3 части: Шапка, вместилище данных, и погреб, почему такие нелепые названия? Потому что большинство боится лезть в темизацию, а то что смешно, - уже не страшно. Разберем шапку:
первая часть

 <?php // $Id: page.tpl.php,v 1.28.2.1 2009/04/30 00:13:31 goba Exp $ ?> <?php print $head ?> <title></title> <?php print $styles ?> <?php print $scripts ?> <script type="text/javascript"> <?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script> 

Тут все просто и не интересно, задается язык, прицепляются файлы CSS и javascript... Переходим ко второму куску:

 <table cellspacing="0" cellpadding="0" border="0" id="header"> <tbody> <tr> <td id="logo"><?php if ($logo) { ?><a title="<?php print t('Home') ?>" href="<?php print $front_page ?>"><img alt="<?php print t('Home') ?>" src="<?php print $logo ?>" /></a><?php } ?> <?php if ($site_name) { ?> <h1 class="site-name"><a title="<?php print t('Home') ?>" href="<?php print $front_page ?>"><?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)) { ?><?php print theme('links', $secondary_links, array('class' => 'links', 'id' => 'subnavlist')) ?><?php } ?> <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist')) ?><?php } ?> <?php print $search_box ?></td> </tr> <tr> <td colspan="2"> <div><?php print $header ?></div> </td> </tr> </tbody> </table> 

тут тоже нет ничего сложного:

 if ($logo) Если задан логотип, печатаем логотип. if ($site_name) Если задано имя сайта, то и его напечатаем. if ($site_slogan) Если задан слоган сайта, он тоже заслужил быть напечатанным. Немного знания английского, и чуть чуть смекалки, и все встает на свои места. if (isset($secondary_links)) Если существует меню secondary_links, печатаем. if (isset($primary_links)) То же самое касательно primary_links. <?php print $search_box ?> Выводим форму поиска. <?php print $header ?> А вот это совсем интересно, выводим регион Header, и все что мы в него засунули. 

С шапкой вроде разобрались, перейдем к вместилищу данных, или как его называют англоязычные аборигены — Content (по правде говоря я его и сам так часто называю):

 <table cellspacing="0" cellpadding="0" border="0" id="content"> <tbody> <tr> <?php if ($left) { ?> <td id="sidebar-left"><?php print $left ?> </td> <?php } ?> <td valign="top"><?php if ($mission) { ?> <div id="mission"><?php print $mission ?></div> <?php } ?> <div id="main"><?php print $breadcrumb ?> <h1 class="title"><?php print $title ?></h1> <div class="tabs"><?php print $tabs ?></div> <?php if ($show_messages) { print $messages; } ?> <?php print $help ?> <?php print $content; ?> <?php print $feed_icons; ?></div> </td> <?php if ($right) { ?> <td id="sidebar-right"><?php print $right ?> </td> <?php } ?> </tr> </tbody> </table> 

Вместилище данных можно поделить на 3 части, левую колонку, правую колонку, и то что посередине.

 if ($left) Если в левом регионе что то есть (блоки), то <?php print $left ?> Выводим левый регион, это и есть вся левая колонка. Переходим к центру if ($mission) Если админ ввел «Миссию» сайта, печатаем ее. <?php print $breadcrumb ?> Выводим «хлебные крошки» (они выглядят примерно так «Home » Administer » Site building», и находятся вверху страницы) <?php print $title ?> Заголовок страницы. <?php print $tabs ?> Вкладки (если конечно есть) if ($show_messages) { print $messages; } Выводятся системные сообщения. <?php print $help ?> Помошь. В основном ее можно найти в админке. <?php print $content; ?> Регион content. <?php print $feed_icons; ?> Иконка RSS. if ($right) Если в правом регионе что то есть (блоки), то <?php print $right ?>Выводим правый регион. 

Вот и все вместилище данных - ) Переходим к погребу (его так же называют футером, или подвалом):

 <div id="footer"> <?php print $footer_message ?> <?php print $footer ?> </div> <?php print $closure ?> </body> </html> <?php print $footer_message ?> выводим системные сообщения внизу страницы. <?php print $footer ?> Выводим регион footer. <?php print $closure ?> Страница законченна. 

Вот и весь page.tpl.php, как видите ничего сложного, другие темы движка phptemplate могут быть больше и тяжелее, но созданы по образу и подобию этой. Вы можете вносить необходимые изменения к код, и они после обновления страницы непременно отобразятся. Например, удалим строчку <?php print $breadcrumb ?>, и зайдем в админку

Хлебные крошки пропали, а теперь вернем из на место, и допишем за ними:

 <?php print $breadcrumb ?> Хлебные крошки 

Простор для действий огромный, хотя конечно все основные данные о отображении данных и их расположении хранятся в файле style.css.
В файле page.tpl.php можно использовать еще и другие переменные, для того что узнать какие переменные есть в наличии, можете добавить код

 <?php print '<pre>'; print htmlspecialchars(print_r(get_defined_vars(), TRUE), ENT_QUOTES); print '</pre>'; ?> 

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

 <?php print $footer ?> 

Переменных будет много, не пугайтесь, список переменных можно найти тут.

Не бойтесь что нибудь изменить, и у вас все получится -)

Перейдем к файлу Node.tpl.php, на этом блоге изменения происходили в основном в этом файле.

 <?php // $Id: node.tpl.php,v 1.7 2007/08/07 08:39:36 goba Exp $ ?> <div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>"> <?php if ($picture) { print $picture; }?> <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?> <span class="submitted"><?php print $submitted?></span> <div class="taxonomy"><?php print $terms?></div> <div class="content"><?php print $content?></div> <?php if ($links) { ?><div class="links">» <?php print $links?></div><?php }; ?> </div> 

В этой теме он довольно таки простой. Из интересных переменных $page.
if ($page == 0) Если $page равно 1 (истина), то мы в режиме полного отображения материала, если же 0, то мы в тизере, эта строчка выводит ссылку на полный материал, если мы в тизере. У переменной $page так же есть противоположная переменная $teaser, которая истинна только в тизере.

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

<script src="http://odnaknopka.ru/ok3.js" type="text/javascript"></script>

Он одинаков для всех страниц, и у вас будет выглядеть так же. По моему оптимальное место для добавления, это перед выводом $links, и нужно не забыть что они не должны выводиться в тизере. Код который нужно добавить, у меня выглядит так:

<?php if ($page) { ?><script src="http://odnaknopka.ru/ok3.js" type="text/javascript"></script><?php }; ?>

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

 <?php // $Id: node.tpl.php,v 1.7 2007/08/07 08:39:36 goba Exp $ ?> <div class="node<?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " node-unpublished"; } ?>"> <?php if ($picture) { print $picture; }?> <?php if ($page == 0) { ?><h2 class="title"><a href="<?php print $node_url?>"><?php print $title?></a></h2><?php }; ?> <span class="submitted"><?php print $submitted?></span> <div class="taxonomy"><?php print $terms?></div> <div class="content"><?php print $content?></div> <?php if ($page) { ?><script src="http://odnaknopka.ru/ok3.js" type="text/javascript"></script><?php }; ?> <?php if ($links) { ?><div class="links">» <?php print $links?></div><?php }; ?> </div> 

проверяем. В тизере нет:

а на полной страничке есть.

Таким же образом можно выводить картинки, произвольный текст, и все что вам захочется. Только, если будете выводить русский текст, помните, что сохранять файл нужно в UTF-8, иначе на выходе вместо букв получите кракозябры.

 <?php // $Id: block.tpl.php,v 1.3 2007/08/07 08:39:36 goba Exp $ ?> <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>"> <h2 class="title"><?php print $block->subject; ?></h2> <div class="content"><?php print $block->content; ?></div> </div> 

Давайте сделаем его ярко-красным, и с округлыми углами? Смотреться будет ужасно, но надо же с чего то начинать -) Как человек ориентированный на программирование, я не особо люблю возиться с дизайном, поэтому мы немного сфилоним. Идем на сайт http://www.roundedcornr.com, нас интересует вот эта менюшка:

Первое поле не тронаем, это радиус углов, и такой пойдет. Во втором пишем dddddd, это цвет фона, и он у нас серый, в третьем пишем ff3030, это цвет самого блока — красный. Нажимаем кнопку Create RoundedCornr, и попадаем на вторую страничку.

Здесь нас интересуют 4 вещи: как будет выглядеть наш блок, HTML код, который нужно будет вставить в файл block.tpl.php, CSS код, который нужно будет вставить в файл style.css, и 4 картинки с углами, их мы закинем в папку /sites/default/files.

Начнем с CSS, копируем код, и вставляем в самый конец файла style.css, при этом нужно чуть чуть подправить названия файлов с углами, в оригинале

 background: url(roundedcornr_419100_tl.png) no-repeat top left; у меня background: url(http://localhost/drupal6/sites/default/files/roundedcornr_419100_tl.png) no-repeat top left; то есть я просто добавил к названию ВАШ_САЙТ/sites/default/files/, что бы браузер знал где искать уголки, это нужно сделать в 4 местах. Весь CSS код . .roundedcornr_box_419100 { background: #ff3030; } .roundedcornr_top_419100 div { background: url(http://localhost/drupal6/sites/default/files/roundedcornr_419100_tl.png) no-repeat top left; } .roundedcornr_top_419100 { background: url(http://localhost/drupal6/sites/default/files/roundedcornr_419100_tr.png) no-repeat top right; } .roundedcornr_bottom_419100 div { background: url(http://localhost/drupal6/sites/default/files/roundedcornr_419100_bl.png) no-repeat bottom left; } .roundedcornr_bottom_419100 { background: url(http://localhost/drupal6/sites/default/files/roundedcornr_419100_br.png) no-repeat bottom right; } .roundedcornr_top_419100 div, .roundedcornr_top_419100, .roundedcornr_bottom_419100 div, .roundedcornr_bottom_419100 { width: 100%; height: 30px; font-size: 1px; } .roundedcornr_content_419100 { margin: 0 30px; } у вас он будет выглядеть чуть иначе. Далее, копируем HTML код и вставляем в файл block.tpl.php, при этом старое содержимое файла вставляем вместо текста Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. должно получиться примерно так <?php // $Id: block.tpl.php,v 1.3 2007/08/07 08:39:36 goba Exp $ ?> <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>"> <div class="roundedcornr_box_419100"> <div class="roundedcornr_top_419100"><div></div></div> <div class="roundedcornr_content_419100"> <h2 class="title"><?php print $block->subject; ?></h2> <div class="content"><?php print $block->content; ?></div> </div> <div class="roundedcornr_bottom_419100"><div></div></div> </div> </div> 

Мой код брать не следует, так как у вас так же будут отличаться названия стилей. Прочто сравните

Сохраняем 4 файлика с углами в папку /sites/default/files и обновляем страницу. Вуаля:

Вот мы и получили красные блоки, единственное что меня не устраивает, что блоки стали красными и в подвале. В Drupal хорошо то, что можно темизировать любой элемент по его id. Если посмотреть код страницы, то мы увидем что id блока navigation — block-user-1. Как происходит построение этого id? В файле block.tpl.php можно это увидеть.

id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">

Сначала ставится block- к нему добавляется название модуля, а затем числовой идентификатор, названный delta.

Давайте сделаем копию файла block.tpl.php, и назовем его block-user-1.tpl.php, а затем вставим в block.tpl.php первоначальный код

 <?php // $Id: block.tpl.php,v 1.3 2007/08/07 08:39:36 goba Exp $ ?> <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>"> <h2 class="title"><?php print $block->subject; ?></h2> <div class="content"><?php print $block->content; ?></div> </div> 

и обновим страницу

мы только что переопределили вывод блока block.tpl.php, так же можно поступить с любой страницей, нодой, и тд. Например, если мы хотим переопределить страницу с нодой под номером 4, то создаем файл page-node-4.tpl.php, а файл node-story.tpl.php переопределит вывод всех нод типа — story.
В принципе тут — все. Используя похожий подход, вы сможете поменять многое в теме Drupal, или при желании создать свою, если конечно вы наделены дизайнерскими талантами (в отличии от меня <8-D ).
Напоследок давайте создадим свой регион. Как я уже говорил по умолчанию их 5, но бывает ситуация, что свои блоки хочется засунуть еще куда нибудь, например форму поиска вставить рядом с логотипом (хотя есть переменная $search_box, для примера подойдет и форма поиска). Попробуем?
Все новые регионы нужно прописывать в файле *.info, вашей темы, при этом, если вы пропишете хоть 1 свой регион, то придется указать и 5 дефолтных. Действуем -)

 name = my_theme description = Наша тема!!!! version = VERSION core = 6.x engine = phptemplate name = my_theme description = Наша тема!!!! version = VERSION core = 6.x engine = phptemplate regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer regions[search] = search 

Так выглядит наш файл после внесения изменений. Как видите, изначально мы вписали 5 стандартных регионов, а потом добавили свой - search (вы можете назвать его по своему), теперь давайте добавим его вывод в файл page.tpl.php, строка которую нужно добавить выглядит так

<?php print $search; ?>

я вставил ее сразу после вывода логотипа

 <?php if ($logo) { ?><a href="<?php print $front_page ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?> <?php print $search; ?> <?php if ($site_name) { ?></code></p> <h1 class="site-name"><a href="<?php print $front_page ?>" 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 } ?> 

Естественно вашу фантазию никто не сдерживает, можете выводить регионы где захотите)
Сохраняем, и идем в «Administer » Site building » Blocks», еслит все сделано правильно, то должен появиться наш регион.

Вставляем туда блок поиска, и получаем:

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

На этом урок закончен.

Естественно это только базис темизации в Drupal. В следующих уроках мы непременно обсудим темизацию всего остального через файл template.php, создадим свой модуль, и наверно еще поработаем с Views (может и их темизируем). Если у кого то есть интересная тема для урока, пишите в комментах)
ЗЫ Пожалуйста, удалите тему которую мы сегодня на ваяли, она ужасна, я боюсь, потомки мне этого не простят.