Заготовка для шаблона на Друпале

Опубликовано Вс, 02/01/2011 - 22:36 пользователем wshurik

Создаем новую папку с название темы. Можно использовать только латинские буквы, цифры и знак подчеркивания. Название должно начинаться с буквы. Мое название темы будет 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>

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

drupal

друпал

темизация

Вы здесь

Заготовка для шаблона на Друпале