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

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

Прислано: alt3d

ср, 24/11/2010 - 17:15

Другие статьи по теме:

Создаем новую папку с название темы. Можно использовать только латинские буквы, цифры и знак подчеркивания. Название должно начинаться с буквы. Мое название темы будет Simple.

1. Создаем файл Название-темы.info. У меня это simple.info
Открываем. Здесь нужно прописать несколько строк.

Основные параметры и описание темы:

name = Simple
Название темы. Так она будет отображаться в списке установленных тем.

description = Моя тема
Описание темы. Краткий текст для пояснения. Также отображается в списке установленных тем.

screenshot = screenshot.png
Изображение темы. Не обязательно, но так удобнее ориентироваться в списке тем, особенно если у вас их много. У меня это маленькая картинка с логотипом.

core = "6.x"
Версия Drupa для которого написана тема.

engine = phptemplate
Название шаблонизатора. Это стандартный шаблонизатор для Drupal. Есть и другие, но это отдельная тема и сейчас ее разбиратьс смысла нет.

Далее подключаем файлы стилей.

stylesheets[all][] = style.css
Файл стилей для всех устройств. На этом можно остановиться. Если вы планируете сайт для мобильных устройств, или в основном для печати на принтерах можете добавить дополнительные файлы стилей. Например для принтера: stylesheets[print][] = printer.css

Указываем регионы (области страницы) для содержимого сайта.

regions[header] = Header
regions[content] = Content
regions[left] = Left
regions[right] = Right
regions[footer] = Footer
До знака равенства - "машинное" обозначение переменной региона. Вставляется в html-макет страницы. Справа "человеческое" название. Используется для отображения на сайте. Когда будете размещать свои блоки, их можно увидеть в макете страницы.
Это стандартные регионы, обычно используемые для большинства сайтов. Вы можете указать свои дополнительные регионы. Или наоборот убрать лишние.

Закончив, сохраняем файл и закрываем. Создам файл style.css (пока пустой) и screenshot.png

2.Создаем файл page.tpl.php

Пишем в нем стандартный html-код разметки страницы.
У нас будет шапка сайта (head), три колонки(left, center,right) и подвал(footer). В них мы укажем регионы, которые мы задали в info-файле.

У меня получился следующий код.

<html>
<head>
  <title>title>
</head>
<body>
 
  <!—Контейнер для всех частей -->
  <div id = "all">
 
    <!-- Верхняя часть -->
    <div id = "header">
    </div>
 
    <!-- Левая часть -->
    <div id = "left">
    </div>
 
    <!-- Правая часть -->
    <div id = "right">
    </div>
 
    <!-- Центральная часть -->
    <div id = "center">
    </div>
 
    <!-- Нижняя часть -->
    <div id = "footer">
    </div>
 
  </div>
 
</body>
</html>

Сохраним и пока оставим его.

Подведем прмежуточный итог. У нас есть четыре файла:
1. simple.info - файл описания темы
2. screenshot.png - изображение темы
3. style.css - файл стилей
4. page.tpl.php – файл разметки страницы.

Зайдя на страницу администрирования тем вашего сайта вы увидите в списке тем вашу только что созданную тему. Но если сейчас выбрать ее в качестве темы по умолчанию то вы увидите лишь чистую белую страницу.

3. Редактируем файл page.tpl.php

Для начала нам нужно организовать показ материалов, блоков и прочей информации.
Разместим регион для вывода основого контента сайта $content в центре нашего макета. Для этого нужно внутри блока прописать php код

<!-- Центральная часть -->
<div id = "center">
  <?php print $content_top; ?>	
</div>

Обновите страницу. Вы увидите что на ней появилась информация, которая всегда была в центральной части сайта, но нет блоков навигации, шапки сайта и прочего.

Добавим вывод левой части сайта. Обычно там распологается блоки навигации, пользователей и прочей важной информации. Информация о них храниться в переменной $left.

<!-- Левая часть -->
<div id = "left">
  <?php print $left ?>
</div>

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

<!-- Правая часть -->
<div id = "right">
  <?php print $right ?>
</div>

Добавим загрузку файлов стилей для этого добавим в заголовок сайта строку, получим:

<head>
  <title></title>
  <?php print $styles; ?>
</head>

Также полезно добавить вывод скриптов и мета-данных. Это понадобиться нам в позже, но добавим мы их сейчас, чтобы потом не возвращаться. В итоге заголовок выглядит так:

<head>
  <title></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>

Теперь ваш файл стилей и файл стилей для модулей будут загружаться и помогать правильно отображать сайт.

Открываем файл style.css м пишем в нем несколько строк:

body {
  background-color: #ffffff;
  сolor: #333333;
}
 
#all {
  width: 1200px;
  margin: 0 auto;
}
 
#left{
  width: 200px;
  float: left;
}
 
#right{
  width: 200px;
  float: right;
}
 
#center{
  overflow:hidden;
}

Этим мы указали ширину сайта в 1200 пикселей. Боковые панели по 200 пикселей. А центральная часть займет оставшееся положение между ними.
Обновите сайт в браузере и увидите что блоки выстроились и расположены как положено.

Добавим вывод тайтла – информации в верхнем углу браузера. Он содержиться в переменной $head_title. Допишем строку в заголовок сайта.

<head>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
</head>

Добавим вывод верхней и нижней части сайта, дописав соответсвенно строки:

<!-- Верхняя часть -->
<div id = "header">
  <?php print $header; ?>
</div>
 
<!-- Нижняя часть -->
<div id = "footer">
  <?php print $footer; ?>
</div>

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

<?php if ($title): ?>
  <h1><?php print $title; ?></h1>
<?php endif; ?>

Таже добавим вывод системных сообщений и вкладок которые появляються например на странице нод и позволяют легко перейти к ее редактированию. Для этого добавим еще две строки перед $content:

<?php print $messages; ?> 
<?php if ($tabs): ?>
  <div class="tabs"><?php print $tabs; ?></div>
<?php endif; ?>

При желании можно добавить вывод т.н. «хлебных крошек» - цепочки ссылок, позволяющих пользователю лучше ориентироваться на сайте. Вставим строчку в шапку сайта.
<?php print $breadcrumb; ?>

Напоследок нам нужно добавить «закрывающую» переменную для обозначения области, где заканчиваються переменные. Ее содержание обязательно в файле page.tpl.php и распологают ее обычно в конце кода макета, перед тегом body:
<?php print $closure; ?>

Итоговый листинг кода файла page.tpl.php:

<html>
<head>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $head; ?>
  <?php print $scripts; ?>
</head>
<body>
 
  <!—Контейнер для всех частей -->
  <div id = "all">
 
    <!-- Верхняя часть -->
    <div id = "header">
      <?php print $header; ?>
      <?php print $breadcrumb; ?>
    </div>
 
    <!-- Левая часть -->
    <div id = "left">
      <?php print $left ?>
    </div>
 
    <!-- Правая часть -->
    <div id = "right">
      <?php print $right ?>
    </div>
 
    <!-- Центральная часть -->
    <div id = "center">
      <?php print $messages; ?>
      <?php if ($tabs): ?>
        <div class="tabs">
        <?php print $tabs; ?>
        </div>
      <?php endif; ?>
      <?php if ($title): ?>
        <h1><?php print $title; ?></h1>
      <?php endif; ?>
      <?php print $content; ?>
    </div>
 
    <!-- Нижняя часть -->
    <div id = "footer">
      <?php print $footer; ?>
    </div>
 
  </div>
  <?php print $closure; ?>
 
</body>
</html>

У нас получилась «заготовка» . Ее нужно доработать до нормальной темы, добавив картинки и цвета, правильно расположить элементы.

alt3d's blog
Для комментирования войдите или зарегистрируйтесь

Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Применить"

Опубликовано НовичОК в ср, 24/11/2010 - 19:57.

Супер! Спасибо! Вот такие статьи обязательно должны появляться и почаще.

Для комментирования войдите или зарегистрируйтесь

Опубликовано alt3d в ср, 24/11/2010 - 20:20.

Спасибо.
Я сам только начинаю разбираться в друпале. А инфы что-то мало и/или написано слишком сложно.
Написал, думая что будет полезно кому-нибудь. :)

Для комментирования войдите или зарегистрируйтесь

Опубликовано SplasH в ср, 24/11/2010 - 22:32.

для начинающих - http://drupalace.ru/uroki

Для комментирования войдите или зарегистрируйтесь

Опубликовано Владимир Ситников в чт, 25/11/2010 - 07:30.

Спасибо - конечно спасибо, но только вы все слишком упростили...

<!-- Левая часть -->
<div id = "left">
  <?php print $left ?>
</div>

Этот код означает что левый блок выводится всегда, и всегда выводится его оформление...
А это плохо, лишает гибкости...
Вот как надо:

<!-- Регион $header -->        <!-- Рассмотрим структуру типичного региона в Drupal -->
 
	  <?php if ($header): ?> 
	  <!-- header - это машинное название региона. 
	  Оно не должно начинаться с цифры, и может использовать_только_латинский_алфавит_и_нижнее_подчеркивание, 
	  пробелы нельзя. Не забудьте добавить название региона в .info файл вашей темы, там это добавляется так:
      regions[header] = Header of content
		т.е. после = мы пишем человеческое название региона, именно оно будет показываться в админке -->
 
	  <!-- ?php if ($header) Мы задаем условие: если в данном регионе выводится какой-то блок,
	  это можно увидеть на странице блоки /admin/build/block тогда этот регион со всем его css оформлением 
	  отображается, а если блоки в регионе не выводятся, то он и его оформление просто не отображаются на странице, 
	  таким образом, можно создавать очень гибкие настройки показа информации -->
 
		<div id="header-blocks" class="region region-header"> 
		<!-- Задаем оформление региона, сюда вы можете вписать любые id и class -->
 
		  <?php print $header; ?>
		 <!-- Выводим регион на экран если в нем есть какие-то данные -->
 
        </div> <!-- /#header-blocks -->
		<!-- Число закрывающих /div должно быть равно числу открывающих -->
 
      <?php endif; ?>
		<!-- /Конец условия if и конец описания региона -->

Для комментирования войдите или зарегистрируйтесь

Опубликовано alt3d в чт, 25/11/2010 - 07:40.

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

Для комментирования войдите или зарегистрируйтесь

Опубликовано НовичОК в чт, 25/11/2010 - 15:06.

Что мне в этой теме нравится, так это то, что простым, нормальным языком вы пишите - новичкам должно быть предельно понятно. Обязательно нужно продолжать.

Для комментирования войдите или зарегистрируйтесь

Опубликовано TurboAndroid в чт, 25/11/2010 - 16:49.

а как добавить фишку чтобы можно было
1) в этом шаблоне как в стандартных готовых поставить логотип, дать название сайту и слоган и вывести куда-то (+ просто для примера сказать как их подвигать по странице, например вывод логотипа не слева а справа сделать а слева вывести просто рисунок прикольный, все это поверх какой-то подложки)
2) блок вывести поверх блока (например логотип накрывает собой два-три блока не полностью а частично и тп (напр фон шапки и контента разный а логотип с прозрачным фоном частично должен накрыть контент)

Для комментирования войдите или зарегистрируйтесь

Опубликовано Mirocow в чт, 02/12/2010 - 04:52.

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

Для комментирования войдите или зарегистрируйтесь

Опубликовано NaZg в чт, 02/12/2010 - 07:34.

отлично!
спасибо!

Для комментирования войдите или зарегистрируйтесь

Опубликовано mad.squid в чт, 02/12/2010 - 13:04.

Добавьте в статью ссылки на потенциально полезные материалы.

Для комментирования войдите или зарегистрируйтесь

Опубликовано AK47 в чт, 02/12/2010 - 15:28.

Эх, где же была эта статья раньше (месяца так 2 назад) сколько бы времени сэкономил :)
А вообщем,- респект и уважение автору за статью !

Для комментирования войдите или зарегистрируйтесь

Опубликовано rebroff в чт, 02/12/2010 - 16:40.

Спасибо, конечно, но это вещи, в принципе, достаточно тривиальные. А вот про template.php, функции темизации и хуки почитать на таком же понятном языке было бы очень кстати.

ЗЫ Я как раз сейчас копаюсь в переопределении вывода. Здорово помогают Jabber ID. Разберусь - попробую написать понятное непрофессионалам руководство "на пальцах".

Для комментирования войдите или зарегистрируйтесь

Опубликовано Artu в пт, 03/12/2010 - 04:07.

rebroff +1

хотя и этот материал не лишний

Для комментирования войдите или зарегистрируйтесь

Опубликовано natbampo в пт, 03/12/2010 - 06:44.

"Владимир Ситников" написал(а):

А где такие подробные шаблоны как в вашем примере плюс еще и на русском можно взять?

Для комментирования войдите или зарегистрируйтесь

Опубликовано Arturus в пт, 03/12/2010 - 10:17.

Уважаемые, подскажите как победить проблему формирования строки
"Разместить новую Тема на форуме"
дело в том, что она формируется из 2 частей "Разместить новую" - эта часть меняется в разделе "перевод интерфейса" а вторая часть берется из названия материала "Тема на форуме" и естественно она не склоняется. Post new @node_type

Для комментирования войдите или зарегистрируйтесь

Опубликовано graceman9 в пт, 03/12/2010 - 16:07.

Добавлю.
Мучил меня вопрос "почему в теме Garland не указаны регионы, но в admin/build/block регионы присутствуют?" Видимо потому что эти регионы доступны по умолчанию (подумалось). Проверил добавив новый регион - точно! ВСЕ регионы исчезли, а мой добавился. Меня несколько удивило такое поведение и вот я им делюсь. Поправьте если что.

Статье конечно +1 :)

Для комментирования войдите или зарегистрируйтесь

Опубликовано Viola в пт, 03/12/2010 - 18:46.

Очень доступно, спасибо!

А я свою первую тему для Drupal сделала с помощью темы zen, в ней есть starter kit и инструкция. Мне очень понравилось, что в комментариях в начале файла описываются все доступные переменные, и есть несколько готовых css-файлов для разных типов верстки - можно взять за основу нужный тип и внести свои изменения. Файл page.tpl очень продуманный, и хорошо зная css, можно много сделать, даже не меняя верстки.

Для комментирования войдите или зарегистрируйтесь

Опубликовано jaans в пт, 03/12/2010 - 21:14.

Огромное спасибо автору начал самоcтоятельно осваивать drupal и подобного рода статьи очень помогают сделайте еще описания по drupal Спасибо еще раз

Для комментирования войдите или зарегистрируйтесь

Опубликовано cancel.allow в сб, 04/12/2010 - 01:04.

Вдогонку, есть очень неплохая книга по темам «Drupal 6 Themes» автор Ric Shreves (в сети полно). Там просто и в картинках объяснены многие моменты создания и кастомизации тем.

Также не забываем пользоватся официальным api, в котором можно найти все переменные.

Пустые или стартовые темы не всегда хорошее решение, изучение чужого кода и запоминание что-где лежит может усложнить разработку. Попробуйте создать свою «стартовую» тему. Мне, например, ни одна не удобна, в одном проекте использовал blueprint и в конечном итоге от нее не осталось и следа.

Для комментирования войдите или зарегистрируйтесь

Опубликовано rebroff в сб, 04/12/2010 - 10:34.

cancel.allow +1
целиком и полностью поддерживаю идею создания темы с нуля. Тоже сначала ковырял Zen, в итоге плюнул и сделал полностью свою.

Для комментирования войдите или зарегистрируйтесь

Опубликовано run в сб, 04/12/2010 - 19:37.

+100

Для комментирования войдите или зарегистрируйтесь

Опубликовано Ромка в сб, 04/12/2010 - 20:53.

Я конечно прошу пардону, но по моему я эту тему раскрыл в значительно более полном объеме: http://romka.eu/blog/drupal-article-3-part-1-drupal-themeing

Для комментирования войдите или зарегистрируйтесь

Опубликовано Ch в вс, 05/12/2010 - 04:29.

http://habrahabr.ru/blogs/drupal/86453/

Для комментирования войдите или зарегистрируйтесь

Опубликовано natbampo в пн, 06/12/2010 - 08:45.

Давайте по темам продолжим.
Интересует такой вопрос:
Создаю свой элемент темы (в модуле) и нацеливаю его на шаблон. drupal_add_js правильно же вызывать в самом файле шаблона, а не в функциях препроцесса для этого шаблона?

Для комментирования войдите или зарегистрируйтесь

Опубликовано geodez-x в вт, 14/12/2010 - 18:16.

Давно уже есть желание написать что-то свое(в плане темы). Но к большому сожалению нет возможности. Когда начинаешь копать информацию, складывается такое впечатление, что все уже рождаются супер программистами.
Автору респект. Начало хорошее. Продолжай в том же духе!!!

Для комментирования войдите или зарегистрируйтесь

Опубликовано НовичОК в сб, 18/12/2010 - 17:17.

А Ромке вообще огромный респект! Спасибо!

Для комментирования войдите или зарегистрируйтесь

Опубликовано graceman9 в вт, 21/12/2010 - 11:50.

natbampo написал(а):

По-моему правильнее как раз в "функциях препроцесса". Например верстальщику незачем знать про функцию drupal_add_js. Плюс могут быть какие-то условия (связанные с правами например) разрешающие или запрещающие добавление этого скрипта.

Для комментирования войдите или зарегистрируйтесь

Опубликовано natbampo в вт, 21/12/2010 - 12:44.

"graceman9" написал(а):

По-моему правильнее как раз в "функциях препроцесса". Плюс могут быть какие-то условия (связанные с правами например) разрешающие или запрещающие добавление этого скрипта.

дело в том, что шаблон можно переопределить, например в теме. И яваскрипт под него другой потребуется. Если в шаблоне вызывать drupal_add_js, то как раз актуальный скрипт добавится(вместе с шаблоном).
А функции препроцесса выполнятся всегда ВСЕ. И внутри них ты еще не знаешь какой шаблон точно задействуется и в drupal_add_js не знаешь точно что подключать.

"graceman9" написал(а):

например верстальщику незачем знать про функцию drupal_add_js

вот это как раз и сбило тогда, когда спрашивал. Охота же - програминг отдельно, шаблоны с версткой отдельно.

Для комментирования войдите или зарегистрируйтесь

Опубликовано Andrey_Hunter в ср, 31/08/2011 - 10:02.

Добрый день. Помогите пожалуйста.
Занялся изучением Drupal(а) с этого урока.
Когда все фалы описанные в этом уроке созданы и соотв. заполнены.

Я захожу на свой сайт, который располагается на localhost(е) на Denwer(e), не обращайте внимание, фантазии не хватило - http://www.fuckyou.ru/

Страница пустая, нажимаю - "Добавить материал" (http://fuckyou.ru/#overlay=node/add)

Открывается страница, с ошибками

    * Notice: Undefined variable: head_title in include() (line 3 of Z:\home\fuckyou.ru\www\themes\Mythemes\page.tpl.php).
    * Notice: Undefined variable: styles in include() (line 4 of Z:\home\fuckyou.ru\www\themes\Mythemes\page.tpl.php).
    * Notice: Undefined variable: head in include() (line 5 of Z:\home\fuckyou.ru\www\themes\Mythemes\page.tpl.php).
    * Notice: Undefined variable: scripts in include() (line 6 of Z:\home\fuckyou.ru\www\themes\Mythemes\page.tpl.php).
    * Notice: Undefined variable: header in include() (line 15 of Z:\home\fuckyou.ru\www\themes\Mythemes\page.tpl.php).
    * Notice: Undefined variable: left in include() (line 21 of Z:\home\fuckyou.ru\www\themes\Mythemes\page.tpl.php).
    * Notice: Undefined variable: right in include() (line 26 of Z:\home\fuckyou.ru\www\themes\Mythemes\page.tpl.php).
    * Notice: Undefined variable: content in include() (line 40 of Z:\home\fuckyou.ru\www\themes\Mythemes\page.tpl.php).
    * Notice: Undefined variable: footer in include() (line 45 of Z:\home\fuckyou.ru\www\themes\Mythemes\page.tpl.php).
    * Notice: Undefined variable: closure in include() (line 49 of Z:\home\fuckyou.ru\www\themes\Mythemes\page.tpl.php).

Ругается на строки, где пишется - <?php print $header; ?>

Что делать товарищи? Почему так?

Для комментирования войдите или зарегистрируйтесь

Опубликовано alt3d в ср, 31/08/2011 - 18:30.

Что делать товарищи? Почему так?

Сказанное в статье актуально для 6-ой версии друпала. Судя по скрину, у вас 7-ая. Возможно проблема в этом.

Для комментирования войдите или зарегистрируйтесь

Опубликовано potss в пн, 26/09/2011 - 09:33.

Super

Для комментирования войдите или зарегистрируйтесь

Опубликовано erbe в вт, 29/11/2011 - 13:00.

Подскажите как исправить. В этом примере нижняя часть footer накладывается на левую и правую колонки, если содержание content маленькое.

Для комментирования войдите или зарегистрируйтесь

Опубликовано Viola в вт, 29/11/2011 - 16:13.

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