Полное пошаговое руководство по созданию тем в Drupal

Тема — это несколько файлов определяющих как будет выглядеть ваш сайт. Вы так же можете создать «под-тему» или другой вариант готовой темы. Необходимым является только файл .info, но большинство тем и под-тем также используют иные файлы. Приведенная ниже диаграмма показывает какие файлы можно найти в обычной теме и под-теме.

.info (обязателен)

Файл .info - это все, что необходимо Drupal, для того что бы увидеть вашу тему. В нем определяются мета данные, стили, ява-скрипты, регионы и т.д. Остальное по желанию.

Внутреннее имя темы так же определяется здесь. Например, если файл называется «drop.info», тогда Drupal определит имя темы как «drop». Drupal 5 и ранние версии для этого используют имя папки.

Файлы info для тем — новинка, появившаяся в Drupal 6. В пятой версии info файлы были только у модулей.

Файлы шаблонов (.tpl.php)

В этих шаблонах располагается xHTML код, и переменные PHP. Иногда они могут выводить другую информацию, например xml rss. Каждый .tpl.php файл определяет вывод какой то части информации. Они опциональны, и если какого то файла нет, будет использован стандартный вывод. Воздержитесь от создания сложной логики в этих файлах. В большинстве случаев это должны быть xHTML-теги, и PHP-переменные. Некоторые из этих шаблонов находятся в папках ядра и модулей. Скопировав эти файлы в папку темы, вы заставите Drupal использовать вашу версию.

Примечание: Информация о теме кешируется. При добавлении или удалении шаблонов или функций, нужно сбросить кеш.

template.php

Вся программная логика, и обработка выходных данных находится в файле template.php. Он не обязателен, но его можно использовать для сохранения чистоты файлов .tpl.php, а так же для определения переменных до того как они сольются с разметкой файлов .tpl.php. Так же тут находятся функции пользователя, переопределения функций темы, и любые другие функции ответственные за вывод информации. Файл должен начинаться с "<?php", на закрывающий тег не нужен, рекомендуется его пропускать.

Под-темы

С первого взгляда, под-темы не отличаются от обычных тем. Основным отличием является то, что они наследуют ресурсы тем-родителей. Для создания под-темы, нужно определить «базовую тему» в файле .info. После этого тема унаследует ресурсы темы родителя. Возможен множественный уровень наследования, т.е. под-тема может указать в качестве «базовой темы» другую под-тему. Пределы наследования неопределенны.

Drupal 5 более старые версии требуют что бы под-темы находились в папке базовой темы. Для 6 версии это не актуально.

Остальное

Логотип и скриншот не обязательны для функционирования темы, но рекомендованы, особенно если вы внесли вашу тему в репозиторий Drupal.
Скриншот будет показан на странице администрирования тем, и в свойстах пользовательского аккаунта (конечно, если выданы соответствующие права). Больше информации можно найти в руководстве по добавлению скриншота.
Для обеспечения административной настройки пользовательского интерфейса или каких-либо «фич» наподобие логотипа, поиска, миссии сайта и т.д., может быть использован файл "theme-settings.php". Это продвинутый функционал. Более подробную информацию можно найти в руководстве по расширенным настройкам.
Для работы модуля color, необходима папка "color" с файлом "color.inc", а так же различные файлы поддержки.
Если вы хотите создать тему на основе темы ядра, создайте под-тему, или скопируйте и переименуйте тему. Изменение тем Garland или Minnelli крайне не рекомендовано, так как они используются для установки и обновления.
Все темы не являющиеся темами ядра, или модификации тем ядра должны находиться в папке "sites/all/themes".Если вы планируете запустить несколько сайтов из одной сборки Drupal, вы можете сделать тему доступной определенному сайту. Почитайте о этом тут.

Определение параметров и компонентов темы

В этом уроке объясняется как задать структуру темы, названия регионов и их количество, стили, и javascript, с помощью редактирования файла .info. В файле .info так же задается какие настройки темы будут доступны из интерфейса администратора.

Так как файл .info кешируется, перед тем как увидеть какие-либо изменения, - очистите кеш.

О файле .info

В Drupal 6, каждая тема должна иметь файл .info в своей папке. Без него тема не будет видна из Drupal. Файл .info должен иметь расширение «.info».

Машинное имя берется из названия темы. Например, если файл называется "drop.info", тогда Drupal определит имя как "drop". Имя должно начинаться с буквы, и не содержать пробелов, и знаков препинания. Разрешен знак подчеркивания, но не тире. Разрешены цифры, но они не должны стоять первыми.

Примечание:
Внимание! Модули с тем же названием что и темы, могут помешать сайту функционировать. Это может привести к дублированию имен функций, что запрещено в PHP. Все установленные компоненты должны иметь уникальные имена. Для создаваемых тем рекомендуется использовать уникальный префикс, например у сайта example.com может быть тема ex_themename.

Под-темы, их структура и наследование

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

sub-theme_branching.png

Представьте себе: создаете основную тему-каркас, а детали и улучшения прикручиваете в под-теме. Можно создать ответвление в котором будет тестироваться другой дизайн. Используете мульти-сайтинг, но хотите что бы все сайты были в одном стиле? Легко. С помощью под-тем можно объединить многие дизайнерские ресурсы. Изменения специфичные для одного сайта, могут быть внесены в его под-тему, но если придется поменять что то везде разом, просто подправьте тему-родителя. При правильном планировании, возможности безграничны.

Для закрепления базовой темы, нужно включить в файл .info команду base theme, например что бы задать для текущей темы базовую тему " themeName", включите в файл следующую строку:

Код
 base theme = themeName 

Что наследуется:

  • Все стили включенные в базовую тему, хотя это можно контролировать.
  • Все ява-скрипты включенные в базовую тему.
  • Все шаблоны (.tpl.php).
  • Все что определенно в файле "template.php". Это включает в себя переопределения функций, препроцессоры, и все остальное. Каждая под-тема может включать включать и свой template.php, вместе с родительским.
  • Скриншот темы родителя, пока файл .info использует те же настройки, что и родительский.

Что не наследуется:

  • logo.png установленный для данной темы. Это не распространяется на загруженные логотипы, так как они используются всегда.
  • Некоторые настройки установленные в .info. Например регионы. Если вы не используете регионы создаваемые по умолчанию, убедитесь что регионы в "page.tpl.php" под-темы, совпадают с тем, что установлено в файле .info. Базовая и под-темы могут использовать свои настройки регионов.
  • Все что заданно в "theme-settings.php".
  • Все что задано в папке color для поддержки модуля color.

Заметьте, что под-тема может быть помещена как в папке базовой темы, так и не в ней. До 6 версии, под-темы должны были находиться в папке базовой темы.

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

Синтаксис очень похож на структура файлов INI. Файл .info — это статичный текстовый файл, предназначенный для настройки темы. Каждая строка в нем, это ключ и значение, разделенные знаком равенства (например: key = value). Текст после точки с запятой, это комментарии. Некоторые ключи используют специальный синтаксис; они используют квадратные скобки для построения массивов. Если вы не знакомы с массивами, их использование должно быть понятным по примерам.

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

  • name обязательно
  • description рекомендовано
  • screenshot
  • version нежелательно
  • core обязательно
  • engine обязательно в большинстве случаев
  • base theme
  • regions
  • features
  • stylesheets
  • scripts
  • php


name (обязательно)

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

Код
 name = A fantasy name 

description (рекомендовано)

Короткое описание темы. Оно отображается на странице выбора темы "Administer > Site building > themes".

Код
description = Tableless multi-column theme designed for blogs.

screenshot

Необязательный ключ — screenshot, говорит Drupal где искать миниатюрное отображение темы, используемое на странице выбора темы (admin/build/themes). Если параметр пропущен, Drupal использует файл "screenshot.png" расположенный в папке темы.
Используйте этот параметр только в случае, если ваш скриншот называется не «screenshot.png», или если вы хотите поместить скриншот вне папки темы (например screenshot = images/screenshot.png )

Код
screenshot = screenshot.png

version (нежелательно)

Ключ version будет добавлен автоматически drupal.org, когда вы выложите тему. Так что вы можете пропустить этот параметр в темах бесплатно выложенных для сообщества. Однако, если вы не собираетесь выкладывать тему на drupal.org, вы можете задать своей теме любое значение version.

Код
version = 1.0

core (обязательно)

Начиная с 6 версии, все файлы .info, должны указывать с какой версией ядра они совместимы. Указанное значение сравнивается с DRUPAL_CORE_COMPATIBILITY. Если они не совпадают, тема отключается.

Код
core = 6.x

Архивирующий скрипт Drupal org выставляет это значение автоматически, в зависимости от совместимости каждого релиза ядра Drupal. Так что у тем загружаемых с Drupal org это значение всегда правильно.

engine (обязательно в большинстве случаев)

Движок используемый темой. Если ничего не указанно, считается что тема использует движок по умолчанию. Большинство тем использует движок "phptemplate".
PHPTemplate определяет функции темы, и ее поведение. Пропустите этот параметр, если не понимаете для чего он.

Код
engine = phptemplate

base theme

Под-темы указывают базовую тему. Это позволяет под-теме использовать ресурсы базовой темы. По-темы могут указывать другие по-темы в качестве базовых тем, создавая множественное наследование. Используйте машинное имя темы, для указания базовой темы. Это использовано в теме Minnelli, под-теме темы Garland.

Код
base theme = garland

Больше информации доступно в разделе со структурой под-тем.

regions

Регионы можно задать в теме с помощью ключа 'regions', за которым должно идти машинное имя региона в квадратных скобках, и после знака равенства имя показываемое людям, т.е.
Если не определен ни один регион, будут использованы значения по умолчанию. Вы можете переписать значения под ваши нужды.

Код
regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer

features

Разные элементы страницы могут быть выключены или включены, для изменения на странице настройки темы. Ключ "features" задает какие из чекбоксов будут отображены на странице настройки темы. Можно выключить элементы не используемые данной темой. Что бы убрать какой-либо чекбокс, пропустите строчку с его определением. Однако, если не будет определенно ни одного, будут выведенны все чекбоксы.

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

Код
features[] = logo features[] = name features[] = slogan features[] = mission features[] = node_user_picture features[] = comment_user_picture features[] = search features[] = favicon ; These last two disabled by redefining the ; above defaults with only the needed features. ; features[] = primary_links ; features[] = secondary_links

stylesheets

По традиции, тема использует файл style.css, но есть возможность добавить стили с помощью вызова drupal_add_css() в файле template.php. Начиная с 6 версии, стили так же можно добавить в файле .info.

Код
stylesheets[all][] = theStyle.css

scripts

По традиции, есть возможность добавить javascript с помощью вызова drupal_add_js() в файле template.php. Начиная с 6 версии, файл script.js включется автоматически (если существует в папке темы). Так же, javascript можно добавить в файле .info.

Код
scripts[] = myscript.js

php

Определяет минимальную версию php, которую поддерживает тема. Значение по умолчанию равно константе DRUPAL_MINIMUM_PHP, которая задает минимальную версию PHP для ядра. Это может быть переопределено при необходимости. Должно быть добавленно для большинства тем.

Код
php = 4.3.3

Примеры файлов .info из тем ядра

info_display.png

Garland:

Код
; $Id: garland.info,v 1.5 2007/07/01 23:27:32 goba Exp $ name = Garland description = Tableless, recolorable, multi-column, fluid width theme (default). version = VERSION core = 6.x engine = phptemplate stylesheets[all][] = style.css stylesheets[print][] = print.css ; Information added by drupal.org packaging script on 2008-02-13 version = "6.0" project = "drupal" datestamp = "1202913006"

Minnelli под-тема темы Garland.:

Код
; $Id: minnelli.info,v 1.7 2007/12/04 20:58:44 goba Exp $ name = Minnelli description = Tableless, recolorable, multi-column, fixed width theme. version = VERSION core = 6.x base theme = garland stylesheets[all][] = minnelli.css ; Information added by drupal.org packaging script on 2008-02-13 version = "6.0" project = "drupal" datestamp = "1202913006"

Заметьте, что все после "; Information added by drupal.org packaging script on 2008-02-13" и ниже, это информация добавленная drupal.org. Вам не нужно добавлять это вручную.

Значения файла .info используемые по умолчанию

Когда значения не определенны, темы использует приведенные ниже.
Примечание: эти значения переопределяются все сразу. То есть, если вы задали регион regions[sub_header] = Sub-header, то он затрет все регионы создаваемые по умолчанию. Для их возвращения, их нужно будет переопределить. Это так же работает и со стилями.

Regions

Код
 regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer

features

Код
 features[] = logo features[] = name features[] = slogan features[] = mission features[] = node_user_picture features[] = comment_user_picture features[] = search features[] = favicon features[] = primary_links features[] = secondary_links

stylesheets

Код
 stylesheets[all][] = style.css

scripts

Код
 scripts[] = script.js 

screenshot

Код
 screenshot = screenshot.png

php (минимальная поддержка)

DRUPAL_MINIMUM_PHP — это константа, она задает минимально необходимую версию PHP для ядра Drupal

Код
 php = DRUPAL_MINIMUM_PHP

Назначаем регионам содержимое

Регион — это область в теме, в которую можно вставлять блоги и другое содержимое. Регионы доступные в теме, задаются в файле .info. Регионы задаются с помощью ключа 'regions', за которым должно идти машинное имя региона в квадратных скобках, и после знака равенства имя показываемое людям, т.е.
Если не определен ни один регион, будут использованы значения по умолчанию.

Код
regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer

Запомните, что внутренние имена регионов, автоматом конвертируются в имена переменных в шаблоне "page.tpl.php". В приведенном выше примере, регион [left] будет выводить все назначенные ему блоки, через переменную $left. Есть некоторые ограничения, на имена задаваемые переменным PHP, убедитесь что внутренние/машинные имена соответствуют этим ограничениям. Основные ограничения состоят в том, что имя должно содержать только цифры, буквы и знак нижнего подчеркивания, первым символом должна быть буква.

Человеко-читаемые имена задаваемые в скобках, используются для обозначения региона на странице "Administer > Site building > Blocks".

Вот страница Blocks для тему Garland:

block_config_garland.png

Примечания:

  • Для вывода каждого блока можно создать свой шаблон (.tpl.php)
  • Добавление пользовательского региона, затрет регионы «по умолчанию». Если вы хотите их сохранить, добавьте их вручную.
  • Порядок в котором определенны регионы сохранится на странице "Administer > Site building > Blocks". Например, Garland использует регионы по умолчанию, подметьте порядок вывода регионов на картинке.
  • Тело страницы выводится в файле page.tpl.php (или его производных) через переменную $content. Если в теме задан регион "content", то все блоки назначенные ему, будут выводиться через эту же переменную.

Файл .info кешируется, поэтому Drupal не заметит его изменения. Для очистки кеша, можно сделать следующее:

  1. Кликните по "clear all cached data" на странице "Administer > Site configuration > Performance".
  2. Если включен блок Devel (идет с модулем Devel), нажмите "Empty cache".
  3. Зайдите на страницу "Administer > Site building > Themes".

Примечания по обновлению:

  • В Drupal 5 и более ранних версиях, регионы задаются с помощью hemeName_regions() или EngineName_regions(). Это не актуально для Drupal 6.
  • Если бы обновляете вашу тему до версии Drupal 6, и в ней есть регионы $sidebar_left и $sidebar_right, переименуйте их в $left и $right.
  • В версиях до 6, переменная $footer_message объединяла регион footer с footer message (задается в "Administer > Site configuration > Site information"). Убедитесь что отдельная переменная $footer создана (если ваша тема использует ее), начиная с 6 версии эти 2 элемента уже не объединяются.

Присвоение содержимого регионам вручную

Содержимое может быть присвоено регионам вручную, с помощью drupal_set_content(). Например, drupal_set_content('header', 'Приветствую!') выведет 'Приветствую!', в регионе header.
Приведем более полезный пример, и попробуем вывести сумму всех комментариев в регионе right. Измените префикс "drop" на название вашей темы. Больше информации на странице preprocessors

Код
<?phpfunction drop_preprocess_comment(&$variables) { // Задаем пару переменных $comment = $variables['comment']; $title = l( $comment->subject, comment_node_url(), array('fragment' => "comment-$comment->cid") ); $new_marker = $comment->new ? t('new') : ''; $by_line = t('by') .' '. theme('username', $comment); // формируем разметку $summary = '<div class="comment-sidebar">'; $summary .= '<span class="title">' . "$title $new_marker</span>"; $summary .= '<span class="credit">' . "$by_line</span>"; $summary .= '</div>'; // Вставляем все в регион drupal_set_content('right', $summary); }?>

Данная функция должна вызываться до того как получены блоки региона, это вызывается с помощью template_preprocess_page > theme_blocks > drupal_get_content.

Проверка занятости региона

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

Код
<?php if($left) { // do something }?>

Однако, переменные регионов не определены в шаблонах на уровне блока, ноды и вида.
Что бы это поправить, я адаптировал часть кода block.module, и создал функцию которая может быть помещена в template.php.
У функции один параметр (имя региона), она возвращает 1, если регион пуст, или 0 в обратном случае. Функция учитывает текущий путь, и настройки видимости блока.

Код
<?phpfunction region_empty($test_region) { /* Проверяем регион на заполнение, если заполнен, возвращаем 1 * */ $test_empty = 1; $result = db_query_range('SELECT n.pages, n.visibility FROM {blocks} n WHERE n.region="%s" AND n.theme="%s"', $test_region, $GLOBALS['theme'], 0, 10); if (count($result) > 0) { while ($node = db_fetch_object($result)) { if ($node->visibility < 2) { $path = drupal_get_path_alias($_GET['q']); $page_match = drupal_match_path($path, $node->pages); if ($path != $_GET['q']) { $page_match = $page_match || drupal_match_path($_GET['q'], $node->pages); } // Когда $block->visibility равно 0, блок показывается // на всех страницах, кроме заданных в $block->pages. Если 1, то //показывается только на страницах заданных в $block->pages. $page_match = !($node->visibility xor $page_match); } else { $page_match = drupal_eval($block->pages); } if ($page_match) $test_empty = 0; } } return $test_empty; }?>

Делаем настройки доступными на странице администрирования.

Разные элементы страницы выводимые темой, могут выключаться или включаться на странице настройки темы расположенной в "Administer > Site building > Themes > themeName". Например, если снять галочку "Site slogan", то вывод слогана будет подавлен.

features_enabled.png

Эти флажки отображаются, если они включены в файле .info. Они задаются ключом 'features' после которого идут пустые скобки, те. features[] = the_feature. Если ничего не заданно, разрешены следующие чекбоксы

Код
features[] = logo features[] = name features[] = slogan features[] = mission features[] = node_user_picture features[] = comment_user_picture features[] = search features[] = favicon features[] = primary_links features[] = secondary_links

Что бы выключить ненужные функции, добавьте нужные в файл .info. Задание нужных функций, выключит остальные. Некоторые функции так же включают связанные формы. Например, 'logo' сделает доступной форму загрузки логотипа.

Файл .info кешируется, поэтому Drupal не заметит его изменения. Для очистки кеша, можно сделать следующее:

  1. Кликните по "clear all cached data" на странице "Administer > Site configuration > Performance".
  2. Если включен блок Devel (идет с модулем Devel), нажмите "Empty cache".
  3. Зайдите на страницу "Administer > Site building > Themes".
  4. hook_features() больше не поддерживается.

Расширенные настройки темы

Каждая тема имеет страницу настройки, она находится в admin/build/themes/settings/themeName. И на этой странице есть форма со стандартными опциями типа “Logo image settings” и “Shortcut icon settings.”

В Drupal 6 автор темы может разнообразить эту страницу добавлением дополнительных настроек. В Drupal 5 нужно установить модуль Theme Settings API прежде чем использовать метод описанный ниже.

Добавляем форму-виджет для любых настроек темы.

Первоначально нужно создать файл theme-settings.php в директории вашей формы, и добавить функцию themeName_settings() или themeEngineName_settings(). themeEngineName_settings() предпочтительнее, потому что позволяет другим пользователям проще создавать темы основанные на вашей. Для создания дополнительных форм, нужно использовать Forms API.

Например, для добавления настроек в тему Garland, нужно создать файл theme-settings.php, и добавить туда функцию garland_settings().

Если пользователь ранее сохранял форму настроек темы, сохраненные значения будут доступны в функции через параметр $saved_settings. Виджеты добавляемые к форме должны быть возвращены как массив Forms API.

Комментарии в примере объясняют детали:

Код
<?php// пример файла themes/garland/theme-settings.php /** * Реализация функции THEMEHOOK_settings() * * @param $saved_settings * массив сохраненных настроек для этой темы. * @return * массив формы. */function phptemplate_settings($saved_settings) { /* * Значения по умолчанию для переменных темы. Убедитесь что $defaults * совпадает с $defaults в файле template.php */ $defaults = array( 'garland_happy' => 1, 'garland_shoes' => 0, ); // Объединим сохраненные переменные, и их значения по умолчанию $settings = array_merge($defaults, $saved_settings); // создаем форму-виджет с помощью Forms API $form['garland_happy'] = array( '#type' => 'checkbox', '#title' => t('Get happy'), '#default_value' => $settings['garland_happy'], ); $form['garland_shoes'] = array( '#type' => 'checkbox', '#title' => t('Use ruby red slippers'), '#default_value' => $settings['garland_shoes'], ); // Возвращаем дополнительную форму-виджет return $form; }?>

Автор темы может создавать комплексные, динамические формы с помощью Forms API (авто-дополнение, сворачивающиеся списки) и JQuery javascript.

Получение значений опций в файлах вашей темы.

для получения значений в template.php или шаблонах .tpl.php нужно использовать функцию
theme_get_setting('varname'). Ищите детали в Drupal API:

Например:

Код
<?php $happy = theme_get_setting('garland_happy'); ?>

Инициализация значений по умолчанию

Поскольку мы не можем быть уверенны что пользователь зайдет на страницу admin/build/themes/settings/themeName, мы должны убедиться что значения по умолчанию для наших настроек будут инициализированы.

Переменные настроек темы не будут установлены до тех пор, пока мы не передадим форму admin/build/themes/settings/themeName в первый раз, поэтому в файле template.php нужно проверить заданны ли переменные. Если не заданны, нужно присвоить им значения по умолчанию. Мы поймем это проверив не пуста ли одна из переменных. Если пуста, мы зададим значения по умолчанию с помощью variable_set(), и обновим настройки Drupal с помощью theme_get_setting('', TRUE).

Добавьте этот код в начале вашего template.php:

Код
<?php/* * Инициализируем настройки темы. */if (is_null(theme_get_setting('garland_happy'))) { // <-- поменяйте эту строку global $theme_key; /* * Значения по умолчанию для переменных темы. Убедитесь что $defaults * совпадает с $defaults в файле template.php */ $defaults = array( // <-- измените этот массив 'garland_happy' => 1, 'garland_shoes' => 0, ); // Получаем значения настройки темы по умолчанию. $settings = theme_get_settings($theme_key); // Не сохраняем toggle_node_info_ variables. if (module_exists('node')) { foreach (node_get_types() as $type => $name) { unset($settings['toggle_node_info_' . $type]); } } // Сохраняем значения настройки темы по умолчанию. variable_set( str_replace('/', '_', 'theme_'. $theme_key .'_settings'), array_merge($defaults, $settings) ); // Обновляем настройки Drupal силой theme_get_setting('', TRUE); }?>

Переменная с именем “garland_happy” в первой строке, должна быть заменена на вашу переменную из файла theme-settings.php.

Добавление настроек в новую версию вашей темы.

После выпуска 1.0 версии вашей темы, вы, возможно, решите добавить некоторые дополнительные настройки в версию 2.0. Обратите внимание на код инициализации в 3 шаге:

  1. В файле theme-settings.php добавьте новые настройки в переменные $defaults и $form.
  2. В файле template.php добавьте настройки в переменную $defaults в коде инициализации настроек темы.
  3. В файле template.php обновите код инициализации что бы проверить наличие одной из новых настроек темы. Например, если вы добавили несколько настроек, и в их числе настройку garland_slippers, нужно изменить первую строчку кода инициализации настроек темы на:
Код
if (is_null(theme_get_setting('garland_slippers'))) {

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

Код
Интегрируем модуль color

Модуль Color позволяет менять администратору цветовую схему. Вы сможете изменить цвета выбранной схемы.

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

Ниже объясняется базис создания темы с изменяемым цветом.

Дизайн

color.module.png

Важно понять как работает модуль color, не каждый дизайн может быть разукрашен.

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

Так же нужно изменить все цвета определенные в стилях. Модуль может плавно менять цвета, используя палитру. Цвета которых не в палитре, могут быть заменены на максимально подходящие (вне зависимости от того, чей цвет меняется: ссылка, текст, цвет бэкграунда).

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

Все созданные файлы записываются в /files/css и используются вместо стандартных изображений. Это означает, что раскрашиваемая тема может работать «из коробки» без модуля color, в цветовой схеме по умолчанию.

Практика

Будем использовать тему Garland как пример. Наиболее важные файлы находятся в папке themes/garland/color:

base.png
Включает в себя основной дизайн темы.

color.inc
Файл включает в себя основные параметры для раскрашивания темы.

preview.css
Стиль используемый для генерации превью изменений цвета.

preview.png
Изображение используется для генерации превью изменений цвета.

Наличие color/color.inc делает доступным выбор цветов в настройках темы. Это обычный PHP-файл, который включает в себя массив $info со следующими значениями:

Схемы

Код
<?phparray('schemes' => array( '#0072b9,#027ac6,#2385c2,#5ab5ee,#494949' => t('Blue Lagoon (Default)'), '#464849,#2f416f,#2a2b2d,#5d6779,#494949' => t('Ash'), '#55c0e2,#000000,#085360,#007e94,#696969' => t('Aquamarine'), '#d5b048,#6c420e,#331900,#971702,#494949' => t('Belgian Chocolate'), '#3f3f3f,#336699,#6598cb,#6598cb,#000000' => t('Bluemarine'), '#d0cb9a,#917803,#efde01,#e6fb2d,#494949' => t('Citrus Blast'), '#0f005c,#434f8c,#4d91ff,#1a1575,#000000' => t('Cold Day'), '#c9c497,#0c7a00,#03961e,#7be000,#494949' => t('Greenbeam'), '#ffe23d,#a9290a,#fc6d1d,#a30f42,#494949' => t('Mediterrano'), '#788597,#3f728d,#a9adbc,#d4d4d4,#707070' => t('Mercury'), '#5b5fa9,#5b5faa,#0a2352,#9fa8d5,#494949' => t('Nocturnal'), '#7db323,#6a9915,#b5d52a,#7db323,#191a19' => t('Olivia'), '#12020b,#1b1a13,#f391c6,#f41063,#898080' => t('Pink Plastic'), '#b7a0ba,#c70000,#a1443a,#f21107,#515d52' => t('Shiny Tomato'), '#18583d,#1b5f42,#34775a,#52bf90,#2d2d2d' => t('Teal Top'), ));?>

Этот массив содержит заранее заданные цветовые схемы Каждая запись состоит из 5 цветов (основной цвет, цвет ссылок, верх шапки, низ шапки, и цвет текста) отформатированных как показано выше, а так же названия.

Первая схема используется как эталон, и должна максимально соответствовать цветам использованным в теме по умолчанию, рисункам, и стилям. Иначе, в финале можно получить не те цвета, которые хотел пользователь. Больше информации о том как рассчитываются цвета, можно найти в секции «Стили».

Копируемые изображения

Код
<?php array('copy' => array( 'images/menu-collapsed.gif', 'images/menu-expanded.gif', 'images/menu-leaf.gif', ));?>

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

Заполнение областей и градиентов.

Для раскрашивания изображения, мы создаем изображение такого же размера, и рисуем цветные области и градиент. Для гибкости, расположение этих областей задается координатами (x, y, ширина, высота):

Код
<?php array('gradient' => array(0, 37, 760, 121));?>

Вы можете задать вертикальный двух-цветный градиент.

Код
<?php array('fill' => array( 'base' => array(0, 0, 760, 568), 'link' => array(107, 533, 41, 23), ));?>

Можно задать регион для каждого из цветов палитры. Регионы будут залиты выбранным цветом. Доступные цвета 'base', 'link', 'top', 'bottom' и 'text'.

Нарезка изображения

Далее вам нужно задать области базового изображения, для нарезки. Еще раз, вы указываете координаты (x, y, ширина, высота), вместе с названием изображения, использованным в стиле. Логотип и скриншот всегда названы одинаково. Скриншот будет урезан до 150х90 пикселей.

Код
<?php array('slices' => array( 'images/body.png' => array(0, 37, 1, 280), 'images/bg-bar.png' => array(202, 530, 76, 14), 'images/bg-bar-white.png' => array(202, 506, 76, 14), 'images/bg-tab.png' => array(107, 533, 41, 23), 'images/bg-navigation.png' => array(0, 0, 7, 37), 'images/bg-content-left.png' => array(40, 117, 50, 352), 'images/bg-content-right.png' => array(510, 117, 50, 352), 'images/bg-content.png' => array(299, 117, 7, 200), 'images/bg-navigation-item.png' => array(32, 37, 17, 12), 'images/bg-navigation-item-hover.png' => array(54, 37, 17, 12), 'images/gradient-inner.png' => array(646, 307, 112, 42), 'logo.png' => array(622, 51, 64, 73), 'screenshot.png' => array(0, 37, 400, 240), ));?>

Файлы

В конце вам нужно указать расположение файлов вашей темы. Вам нужно изображение+ стиль для превью, и базовое изображение:

Код
<?phparray( 'preview_image' => 'color/preview.png', 'preview_css' => 'color/preview.css', 'base_image' => 'color/base.png', );?>

С 6 версии, модуль Color больше не требует наличия base_image, то есть, можно использовать модуль без изображений.

Стили

Модуль color считает файл style.css так же, как и любой другой импортированный с помощью @import, и создаст новый файл style.css. Он изменит цвета в CSS используя одну из выбранных цветовых палитр как эталонных, .в зависимости от контекста.

Однако, если цвет в стиле совпадает с одним из эталонных цветов, он будет проигнорирован.

color-shift.png

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

Результирующие цвета (лиловый и коричневый) отличны от красного, поскольку оригинальные цвета произошли от синего.
С технической точки зрения: сохраняются относительные отличия в оттенке, насыщенности, и яркости.
Если модуль color использует неправильный эталонный цвет, постарайтесь раскидать разные части в разные CSS, каждый в свою секцию { ... }, что бы относительно контекста не возникало путаницы.

Если вы правили стиль темы после изменения цветовой схемы, нужно обновить цветовую схему для восстановления смешанных версий.

Если хотите что бы определенные цвета в стиле не были изменены, их нужно поставить после этого маркера:

Код
/******************************************************************* * Color Module: Don't touch * *******************************************************************/

Вы можете использовать этот маркер в файле style.css только 1 раз. Он действует глобально, то есть, если вы используете его внутри импортированного стиля, все цвета после @import так же останутся нетронутыми.

Делаем что бы цвета совпадали

Очень важно, что бы сгенерированные рисунки совпадали с сдвинутыми цветами в сгенерированном стиле. Иначе могут показаться уродливые края.

Что бы это работало, в тех местах где пиксели базового изображения пересекаются с цветами заданными в CSS, они должны быть простого цвета. Поскольку мы не знаем где в базовом изображении появятся цвета заданные в CSS, мы используем глобальный цвет для смешивания, который должен быть одинаков по всему дизайну. В Garland использован белый цвет. Заметьте что базовое изображение Garland, включает серые и черные пиксели, где в бэкграунде использованы только изображения (например заголовок). Другие цвета тоже отлично подходят.

Код
<?php array('blend_target' => '#ffffff');?>

Мазохисты могут заглянуть внутрь модуля color, особенно интересна функция _color_shift() (прим. переводчика — Судя по всему автор-старый мазохист), если хотите узнать что и почему происходит.

Изменения в PHPTemplate

И наконец, вам нужно вставить хук модуля color в вашу тему. В виде примера мы используем движок PHPTemplate, но это должно подойти и к другим движкам.

В файле template.php вашей темы добавьте этот снипет(Для Drupal 6.x):

Код
<?php/** * Переопределяем или вставляем переменные PHPTemplate в шаблоны. */function phptemplate_preprocess_page(&$vars) { // Хук в color.module if (module_exists('color')) { _color_page_alter($vars); } }?>

В Drupal 5 вам понадобится этот снипет:

Код
<?php/** * Переопределяем или вставляем переменные PHPTemplate в шаблоны. */function _phptemplate_variables($hook, $vars) { if ($hook == 'page') { // Хук в color.module if (module_exists('color')) { _color_page_alter($vars); } return $vars; } return array(); }?>

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

Очищаем кеш темы

Файл .info кешируется, поэтому Drupal не заметит его изменения. Для очистки кеша, можно сделать следующее:

  1. Кликните по "clear all cached data" на странице "Administer > Site configuration > Performance".
  2. Если включен блок Devel (идет с модулем Devel), нажмите "Empty cache".
  3. Зайдите на страницу "Administer > Site building > Themes".

ЗЫ. Вторая часть перевода статьи с друпал орг. Если найдете ошибки, пишите в комментах, статья длинная, мог что то пропустить. В следующей части будет рассказано о работе с CSS при создании темы. Поэтому =====V

Большинство современных сайтов используют внешние таблицы стилей, для управления отображением страниц. В традиционной статичной HTML-странице, указатель на таблицу стилей должен быть помещен в страницу вручную с помощью HTML-кода (обычно в шапке страницы)

Например:

Код
<link rel="stylesheet" type="text/css" href="/mytheme.css" /> 

Этот код говорит браузеру где искать таблицу стилей (mytheme.css) , которая контролирует отображение страницы.

Страница сгенерированная Drupal, для браузера, может выглядеть также: указатели на таблицы стилей помещенные в шапку. Отличие скрыто от глаз, оно в том, что указатели на таблицы стилей добавляются автоматически. Некоторые стили могут добавляться самой темой, другие прикрепляются разными модулями Drupal (для обеспечения стиля «по умолчанию», для выводимой модулем информации).

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

Добавление таблицы стилей

Тут объясняется как добавить таблицу стилей используя файл .info. Программное добавление таблицы стилей будет рассмотрено ниже.

Примечание:
При работе с CSS, убедитесь что оптимизация CSS выключена. Это находится на странице "Administer > Site configuration > Performance". Пока оптимизация стилей включена, изменения не будут видны. Вы можете включить оптимизацию вновь, когда закончите.

Файл .info кешируется, поэтому Drupal не заметит его изменения. Для очистки кеша, можно сделать следующее:

  • Кликните по "clear all cached data" на странице "Administer > Site configuration > Performance".
  • Если включен блок Devel (идет с модулем Devel), нажмите "Empty cache".
  • Зайдите на страницу "Administer > Site building > Themes".

По умолчанию, если в файле .info не указанна ни одна тема, будет использоваться "style.css". Добавить новый стиль просто, для этого служит ключ 'stylesheets'. Запомните, что добавление какого-либо стиля предотвратит загрузку "style.css". Поэтому, если ваша тема использует «style.css», не забудьте добавить и его.

Код
; Добавляем общую таблицу стилей stylesheets[all][] = theStyle.css stylesheets[screen, projector][] = theScreenProjectorStyle.css ; Добавляем стиль для печати stylesheets[print][] = thePrintStyle.css 

Примечания:
Обратите внимание на пустые скобки между [media] и = styleName.css.
Порядок в котором стили перечислены в шапке страницы, повторяет порядок заданный тут.
Таблицы стилей могут быть помещены в под-папках, то есть: stylesheets[all][] = stylesheets/styleName.css. Это удобно для упорядочивания.

Добавление стилей с помощью API

Возможности добавления стилей через файл .info должно быть достаточно для большинства тем. Учитывая статичность файла .info, темы не могут добавляться динамически. В зависимости от того, как тема использует таблицы стилей, это может вообще не иметь значения. Если сомневаетесь – используйте файл .info.
Есть API- функции для работы с таблицами стилей, drupal_add_css и drupal_get_css. Приведем пример динамического добавления стилей:

Измените префикс «drop» на название вашей темы

Код
<?php function drop_preprocess_page(&$variables) { $front_style = path_to_theme() .'/front-page.css'; $path_style = path_to_theme() .'/path-'. arg(0) .'.css'; if (file_exists($front_style) && $variables['is_front']) { $include_style = $front_style; } elseif (file_exists($path_style)) { $include_style = $path_style; } if (isset($include_style)) { drupal_add_css($include_style, 'theme', 'all', FALSE); $variables['styles'] = drupal_get_css(); } } ?>

Этот код подключит таблицу стилей "front-page.css" на главной страницу, или множество других стилей название которых основано на имени страницы. Например, на странице http://example.com/admin будет подключен стиль "path-admin.css".

Примечания:
В зависимости от того, где и когда добавляются стили, может понадобиться drupal_get_css, для того, что бы включить дополнительные стили. Изначально они задаются в template_preprocess_page.
В функции drupal_add_css есть параметр отвечающий за агрегацию добавленного файла. Это нужно отключить (как в приведенном примере), когда подключение таблиц очень динамично, так как агрегирование создаст новый общий файл CSS. Это может замедлить создание страницы, и увеличить трафик.

Куда добавлять код

Этот код можно добавить в файл template.php в директорию вашей темы. Там уже может существовать функция "phptemplate_preprocess_page". Можно просто включить ее в тело вашей функции XXX__preprocess_page.

Так же, возможно придется заменить "variables" на "vars", что бы заставить ее работать.

Создание и интерпретация CSS шаблона (style.css.php)

Хотели создать динамичный CSS? Вот пример как задать шаблону базовый CSS, в который вы можете вставить переменные.
В этом примере мы будем динамически задавать размер заголовка страницы.
Создайте шаблон CSS (style.css.php):

Код
@CHARSET "UTF-8"; #content h1.title{ font-size: <?php print $font_size; ?>px;}
Код для интерпретации шаблона и получения результирующей строки:
Код
$variables = array( 'font_size' => 20, ); extract($variables, EXTR_SKIP); ob_start(); include('style.css.php'); $css = ob_get_contents(); ob_end_clean();
результирующая переменная $css может быть использована для подключения или вставки стиля разными путями:
Код
print '<style type="text/css">'.$css.'</style>';

Переопределяем таблицу стилей модулей или базовой темы

Ядро и поставляемые с ним модули по умолчанию определяют вид выводимых ими данных. Это включает как саму разметку, так и связанные с ней таблицы стилей. Благодаря расширяемой натуре Drupal, обработка всего что выводится в браузер, могло бы стать тяжким бременем для темизаторов. Но эти «значения по умолчанию» могут быть изменены по усмотрению темизатора. Таблицы стилей выводимые ядром и модулями могут быть переопределены так же, как и функции темизации и шаблоны. Не надо напрямую их изменять. Все изменения должны находиться в вашей теме.

Переопределяем таблицы стилей ядра и поставляемых с ним модулей

Для замещения таблицы стилей ядра или поставляемых с ним модулей, стиль должен быть
переопределен в файле .info. Возьмем для примера "system-menus.css". Он находится в "modules/system/system-menus.css". Для игнорирования системой оригинального файла, и загрузки вашего, добавьте следующую строку:

Код
stylesheets[all][] = system-menus.css

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

Примечания:
Переопределение CSS файлов ядра, предотвратит загрузку "style.css". Не забывайте определять «значения по умолчанию», если они используются.
Переопределения темы должны иметь те же медиа типы (media type) что и оригинальный стиль.
Любые присоединенные в тиле элементы, должны быть верны. Дважды проверьте что все свойства 'url()' или правила '@import' в файле, ссылаются на правильные ресурсы.
Порядок вызова стилей перечисленных в шапке страницы будет меняться. Это может изменить некоторые каскадные правила.
Некоторые стили ядра и модулей загружаются условно. Их переопределение в файле .info сделает их используемыми всегда.
Если нужны незначительные изменения, для переопределения стиля можно использовать CSS селекторы, вместо переопределения файла целиком.

Не забывайте очищать кеш после каких либо изменений! Зайдите в Administer > Site configuration > Performance. Прокрутите вниз, и кликните "Clear cached data."

Переопределение таблицы стилей базовой темы.

Что бы не загружать стиль базовой темы, вы можете перепределить таблицу стилей внутри файла .info. Точно так же, как и переопределение стиля модуля или ядра.
Значения в базовой и под-теме должны быть одинаковы:

Код
stylesheets[all][] = masterStyle.css

Если файл существует внутри под-темы, он будет использован, если нет, то и файл базовой темы не будет загружен.

Стандартные стили и классы ядра Drupal

В Drupal принят модульный подход для CSS классов стандартных элементов страницы. Число классов одинаково везде. Этот список напоминает для чего какой класс, и где он появляется. Полный список классов можно найти в Zen starter kit.

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

Элементы страницы
.menu
Этот класс получают все меню, например меню navigation.

.block
Все блоки, http://drupal.org/node/104319 — статья о стилизации блоков.

.links
Список ссылок, включая Primary и Secondary links в шапке страницы, а так же ссылки ноды и терминов таксономии.

Элементы нод
.node
Div обертывающий ноду, включая ее заголовок.

.node-title
Заголовок ноды.

.content
Тело ноды. Это относится и дополнительным модулям наподобие CCK или uploaded files.

.links
Относится ко всем UL являющимся списком ссылок, включая Primary и Secondary links в шапке страницы, а так же ссылки ноды, и термины таксономии. Однако ссылки ноды получают класс .links от вмещающего их DIV.

.terms
Термины таксономии, так же получающие .links и .inline.

.inline
Системный класс для пунктов UL размещенных по горизонтальной линии.

.feed-icon
Иконка RSS, обычно внизу области контента.

Поддержка языков "с права на лево" (RTL)

Включение поддержки RTL языков связанно с переопределением побочных стилей, и парного именования файлов с таблицами стилей.
Включение стилей RTL происходит автоматически. Включение зависит от языковых параметров установленных для сайта.
Например, в теме ядра Garland, "style.css" — основной стиль. Он так же включает "style-rtl.css" для языков RTL наподобие арабского. При включении 2 стилей, сначала грузится основной стиль, а потом RTL стиль. Это позволяет сделать каскадными все наборы правил, не беспокоясь о селекторах использованных в стилях RTL.

Существуют стандарты кодирования, что бы держать стили в порядке. Например комментарий /* LTR */ ставится после строк связанных с LTR-языками. Это относится к floats, margins, padding и т.д.

Пример основного стиля:

Код
ul.primary-links { margin-top: 1em; padding: 0 1em 0 0; /* LTR */ float: left; /* LTR */ position: relative; }

Соответствующий RTL стиль:

Код
ul.primary-links { padding: 0 0 0 1em; float: right; }

При работе с основным файлом CSS, это позволяет минимизировать необходимые изменения.

Вот и все!

7273