Существует два основных способа разработки темы Drupal, выбор зависит от исходных материалов, имеющихся в вашем распоряжении. Предположим, разработчик уже подготовил HTML-код и CSS для вашего сайта. Насколько это просто – взять готовую разработку и преобразовать ее в тему Drupal? Это не так уж плохо, и вы можете, вероятно, мгновенно выполнить 80% от всей необходимой работы. Оставшиеся 20% – это то, что отличает мастера создания тем Drupal от новичка. Поэтому давайте начнем с простого.
На заметку Если вы начинаете создание сайта с нуля, обратите внимание на множество крупных разработок, имеющихся на сайте Open Source Web Design (веб-разработки с открытым исходным кодом). Но помните – это разработки HTML и CSS, а не темы Drupal.
Давайте предположим, что вы получили следующую HTML-страницу file.html:
-
-
<html><head>
-
<title>Page Title</title>
-
<link rel="stylesheet" href="global.ess" type="text/css" /></head>
-
<body>
-
<div id="container"><div id="header"><h1>Header</h1></div>
-
<div id="sidebar-left"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>
-
<div id="main">
-
<h2>Subheading</h2>
-
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
-
</div>
-
<div id="footer">Footer</div></div>
-
</body>
-
Нужно преобразовать ее в тему Drupal. Очевидно, что файлы на разрабатываемом Drupal сайте, будут более детализированы, чем эти, но методика будет такой же самой.
Давайте назовем эту новую тему newtheme, так что создайте папку в каталоге sites/all/themes/custom с именем newtheme. Возможно, вам придется создать папки themes/custom, если вы не сделали этого раньше. Скопируйте page.html и global.css в папку greyscale. Затем переименуйте file.html в page.tpl.php, таким образом он послужит новым шаблоном страницы для всех страниц Drupal. Поскольку тема newtheme теперь имеет файл page.tpl.php, вы можете сделать его доступным через интерфейс администратора. Выполните команды Administer--Site building--Themes и сделайте его темой по умолчанию.
Теперь вы должны увидеть вашу разработку в действии. Внешняя таблица стилей пока еще не будет загружаться, и любая страница, на которую вы будете перемещаться на сайте, будет все той же самой HTML-страницей, но главное - начало положено! Любая страница, на которую вы переместитесь на вашем сайте, будет обеспечивать только статическое содержимое page.tpl.php, так как... пока еще нет никакого способа добраться до интерфейса администратора Drupal.
Мы только что заблокировали вас на вашем сайте Drupal. Блокирование неизбежно, но я покажу вам, как теперь выпутаться из создавшейся ситуации. Одно решение состоит в том, чтобы переименовать папку темы, доступной в данный момент. В этом случае вы можете просто переименовать newtheme в newtheme2 и после этого сможете возвратиться на сайт. Это - скороспелое решение, но поскольку вы знаете, какова реальная проблема, вместо этого вы добавите надлежащие переменные в page.tpl.php так, чтобы отображалось динамическое содержимое Drupal, а не статическое.
Каждому файлу шаблона PHPTemplate - будь то page.tpl.php, node.tpl.php, block.tpl.php и т.д. - передается различный набор переменных с динамическим содержимым, предназначенным для использования в этих файлах. Откройте файл page.tpl.php и начните заменять его статическое содержимое соответствующими переменными Drupal.
-
-
<html>
-
<head>
-
<title><?php print $head_title ?></title>
-
<link rel="stylesheet" href="global.ess" type="text/css" />
-
</head>
-
<body>
-
<div id="container">
-
<div id="header"><h1><?php print $site_name ?></h1></div>
-
<?php if ($sidebar_left): ?> <div id="sidebar-left">
-
<?php print $sidebar_left ?> </div> <?php endif; ?>
-
<div id="main" >
-
<h2><?php print $title ?></h2>
-
<?php print $content ?>
-
</div>
-
<div id="footer">
-
<?php print $footer_message ?>
-
</div>
-
</body>
-
</html>
-
Перезагрузите ваш сайт, и вы увидите, что переменные заменяются содержимым из Drupal. Обратите внимание на то, что таблица стилей global.css не загружается, потому что путь к ее файлу стал неправильным. Можно вручную откорректировать путь, или вы могли бы сделать это средствами Drupal и получить немного гибкости и выгод.
Первый шаг состоит в переименовании global.css в style.css. В соответствии с соглашением Drupal автоматически ищет файл style.css для каждой темы. После того как файл будет найден, эта информация добавляется в переменную $styles, которая передается в page.tpl.php. Поэтому давайте обновим page.tpl.php, воспользовавшись данной информацией.
Сохраните ваши изменения и перезагрузите страницу. Обратите также внимание на то, что, если вы просматриваете исходный код страницы, другие таблицы стилей от доступных модулей также оказываются добавленными благодаря переменной $styles. Называя ваш CSS-файл style.css, вы также позволяете Drupal применить по отношению к этому файлу механизм предварительной обработки CSS, чтобы удалить все разрывы строк и пробелы во всех CSS-файлах. Вместо того чтобы обслуживать множество таблиц стилей, Drupal будет теперь обслуживать их как единственный файл.