2 апреля 2007 в 23:11
На мой взгляд, для друпала существует три кардинальных подхода для создания тем.
Первый: берем готовую тему и подсовываем ей свой CSS файл. В оригинальной документации на drupal.org эти темы называются CSS-only themes. Типичный пример такой темы в стандартной поставке 5.1 - тема Minelli (подтема Garland'а) или Marvin (подтема Chameleon'а). Мы в дальнейшем пройдем этот путь на примере темы Bluemarine опять же из стандартной поставки.
Второй подход: Если тема сделана на базе какого-либо движка (в частности phpTemplate), то для более значительных изменений можно поменять шаблоны, оставив код движка нетронутым. Опять же, наш подопытный кролик Bluemarine как раз создан на основе этого движка. Соответственно, и издевательства по второму пунку будут как раз происходить именно над ним.
Вариант третий (на самом деле я немного схалтурил и свалил сюда все остальные варианты). Мы вносим изменения в код движка или пишем самостоятельно свой движок темы. Простор для творчества безграничный. Трудозатраты, впрочем, тоже.
Почему я так поделил? Та все тот же принцип 80/20: 80% изменений вполне укладываются в пункт 1. 80% оставшихся - в пункт 2. И 80% людей не способны качественно выполнить пункт 3.
Итак, вернемся к phpTemplate. Он использует файлы вида something.tpl.php для формирования вывода соответствующих функций theme_something(). Например:
theme('page')(page.tpl.php): шаблон страничкиtheme('block')(block.tpl.php): шаблон блокаtheme('box')(box.tpl.php): шаблон общего содержимогоtheme('comment')(comment.tpl.php): шаблон комментарияtheme('node')(node.tpl.php): шаблон материала
Например содержимое block.tpl.php нашей любимой темы. Конечно же Bluemarine.
Беглый просмотр и поиск знакомых букв по файлам .tpl.php оставим на домашнее задание, а сейчас сконцентрируемся на пункте 1: правка темы с использованием CSS.
Как ясно из приведенного кусочка, всем более-менее значимым элементам темы присвоен свой класс, а некоторым даже и уникальный id. Задача - разобраться что чему присвоено и правильно изменить CSS для темы. Он нам пригодится в дальнейшей работе.
Что делаем дальше? Ставим друпал, выставляем тему по умолчанию Bluemarine, создаем хоть одну страничку (надеюсь не надо рассказывать как), выходим на главную и смотрим код страницы. Ужасаемся. Но потом собираем силу воли в кулак и начинаем смотреть кусочками.
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Тут в принципе все понятно. Если не понятно, сходи по указанному адресу 
Если и там ничего не понятно, пока не заморачивайся. Главное отсюда - XHTML 1.0 Strict. Это означает, что у нас все жестко и мы работаем по стандарту XHTML 1.0.
Дальше заголовок:
<title>Drupal</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="alternate" type="application/rss+xml" title="Drupal RSS" href="http://drupal.clear/?q=rss.xml" />
<link rel="shortcut icon" href="/misc/favicon.ico" type="image/x-icon" />
<style type="text/css" media="all">[user=import]import[/user] "/modules/node/node.css";</style>
<style type="text/css" media="all">[user=import]import[/user] "/modules/system/defaults.css";</style>
<style type="text/css" media="all">[user=import]import[/user] "/modules/system/system.css";</style>
<style type="text/css" media="all">[user=import]import[/user] "/modules/user/user.css";</style>
<style type="text/css" media="all">[user=import]import[/user] "/themes/bluemarine/style.css";</style>
<script type="text/javascript"> </script>
</head>
Вон аж сколько CSS подключается. Увидев знакомое слово bluemarine надо уже насторожиться. И первым делом проверить этот CSS.
Оставшуюся страничку я буду рассматривать укрупненно (да здравствует FireBug, незаменимая в таких делах штука)
...
</table>
<table id="content" cellspacing="0" cellpadding="0" border="0">
...
</table>
<div id="footer"/>
А что у нас написано про #header?
#header {
background-color:#6699CC;
}
Все сразу становится на свои места
Казалось бы, имеющий глаза - да увидит. Имеющий руки - да пощупает.
Домашнее задание - пробежаться по коду до самого нижнего уровня. Осознать названия классов элементов. После этого заглянуть в page.tpl.php, помедитировать (но ничего не менять! мы все еще в первом пункте). Следующий этап - разборки с меню.
__________________________
Комментарии
Прикольно.Ждем продолжения
Кажись оЧепятка.
А вообще, с нетерпением жду продолжения. Аж, кончаю!
Вариант третий: Мы вносим изменения в код движка или пишем самостоятельно свой движок темы
А движок-то чем не угодил?!
Ты что, для написания новой темы будешь переписывать движок? Типа эта тема основана на движке phpTemplate_1, а эта: phpTemplate_2, так?
Если потребности возникнут, некоторые вон даже ядро патчат. Куда уж там движку...
"Та все тот же принцип 80/20: 80% изменений вполне укладываются в пункт 1. 80% оставшихся - в пункт 2."
Кажись оЧепятка.
Нет, это не очепятка, а реальность
В тему - http://www.lullabot.com/articles/hacking_phptemplate
В тему - http://www.lullabot.com/articles/hacking_phptemplate
Это следующий шажок. Сначала с CSS разобраться )
интересно почитать
а темы для уроков были взяты для старого друпала!?
???
Я старый друпал в глаза не видел. Начал жизнь с версии 5.0.
Неточности могут быть в той части, которую я дергаю с сайта drupal.org. Возможно где-то недоглядел и изменились названия функций/модулей. Так что поправьте если что.
Здравствуйте. Можете обьяснить?
1. Допустим у меня есть блок aggregator.
2. Я сделал файл block-aggregator-tpl.php в нем содержание стандартного блока в принцыпе:
3. Закачал на сервер в папку с другими tpl.php
Этого достаточно что бы Друпал использовал этот файл для вывода блока aggregator или мне в page.tpl.php надо прописать include?
Спасибо за ответ.
Сорри, уже нашел рядом ))
http://www.drupal.ru/node/3087
а можно в каждой части темы "Создание новой темы" расставить ссылки на остальные част? спасибо.
Все верно с этгого надо было начать!
спасибо!
Насчет тем для 47 друпы, разницы считай почти никакой, основное различие это в переменных вывода. Меняете все на те что используются в 5 друпе и все работает.
Прога, очень понравилась... Спасибо...
Полезная тема!
Причем тут создание новой темы, когда речь идет о редактировании нашей любимой bluemarine ))). Возможно я не понимаю...
Создание новой темы(с нуля) это пункт третий и, зачастую, лишний-))