Создание новой темы. Часть первая: phpTemplate.

Прислано: steel.ne

пн, 02/04/2007 - 19: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.

  <div class="block block-<?php print $block->module; ?>" id="block-<?php print $block->module; ?>-<?php print $block->delta; ?>">
    <h2 class="title"><?php print $block->subject; ?></h2>
    <div class="content"><?php print $block->content; ?></div>
 </div>

Беглый просмотр и поиск знакомых букв по файлам .tpl.php оставим на домашнее задание, а сейчас сконцентрируемся на пункте 1: правка темы с использованием CSS.

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

Что делаем дальше? Ставим друпал, выставляем тему по умолчанию Bluemarine, создаем хоть одну страничку (надеюсь не надо рассказывать как), выходим на главную и смотрим код страницы. Ужасаемся. Но потом собираем силу воли в кулак и начинаем смотреть кусочками.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

Тут в принципе все понятно. Если не понятно, сходи по указанному адресу :) Если и там ничего не понятно, пока не заморачивайся. Главное отсюда - XHTML 1.0 Strict. Это означает, что у нас все жестко и мы работаем по стандарту XHTML 1.0.

Дальше заголовок:

<head>
  <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">@import "/modules/node/node.css";</style>
<style type="text/css" media="all">@import "/modules/system/defaults.css";</style>
 
<style type="text/css" media="all">@import "/modules/system/system.css";</style>
<style type="text/css" media="all">@import "/modules/user/user.css";</style>
<style type="text/css" media="all">@import "/themes/bluemarine/style.css";</style>
    <script type="text/javascript"> </script>
</head>

Вон аж сколько CSS подключается. Увидев знакомое слово bluemarine надо уже насторожиться. И первым делом проверить этот CSS.

Оставшуюся страничку я буду рассматривать укрупненно (да здравствует FireBug, незаменимая в таких делах штука)

<table id="header" cellspacing="0" cellpadding="0" border="0">
...
</table>
<table id="content" cellspacing="0" cellpadding="0" border="0">
...
</table>
<div id="footer"/>

А что у нас написано про #header?

style.css (line 80)
#header {
background-color:#6699CC;
}

Все сразу становится на свои места :)

Казалось бы, имеющий глаза - да увидит. Имеющий руки - да пощупает.

Домашнее задание - пробежаться по коду до самого нижнего уровня. Осознать названия классов элементов. После этого заглянуть в page.tpl.php, помедитировать (но ничего не менять! мы все еще в первом пункте). Следующий этап - разборки с меню.
__________________________

Комментарии


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

Выберите нужный метод показа комментариев и нажмите "Применить"
Опубликовано konstantinn в пн, 02/04/2007 - 20:33.
konstantinn

Прикольно.Ждем продолжения


Опубликовано Atl в пн, 02/04/2007 - 22:54.
Atl

"Та все тот же принцип 80/20: 80% изменений вполне укладываются в пункт 1. 80% оставшихся - в пункт 2." Кажись оЧепятка.
А вообще, с нетерпением жду продолжения. Аж, кончаю!


Опубликовано Dan в вт, 03/04/2007 - 06:46.
Dan

Вариант третий: Мы вносим изменения в код движка или пишем самостоятельно свой движок темы

А движок-то чем не угодил?!
Ты что, для написания новой темы будешь переписывать движок? Типа эта тема основана на движке phpTemplate_1, а эта: phpTemplate_2, так? :)


Опубликовано Dan в вт, 03/04/2007 - 06:46.
Dan

"Та все тот же принцип 80/20: 80% изменений вполне укладываются в пункт 1. 80% оставшихся - в пункт 2."
Кажись оЧепятка.

Нет, это не очепятка, а реальность :)


Опубликовано vadbars@drupal.org в вт, 03/04/2007 - 06:59.
vadbars@drupal.org

В тему - http://www.lullabot.com/articles/hacking_phptemplate


Я ставлю строчку "php_value error_reporting 7" в файл .htaccess, а вы? :) Полный русский перевод Drupal 5.x и еще некоторых модулей.


Опубликовано Valeratal в вт, 03/04/2007 - 08:48.
Valeratal

интересно почитать


Опубликовано steel.ne в вт, 03/04/2007 - 08:43.
steel.ne

Если потребности возникнут, некоторые вон даже ядро патчат. Куда уж там движку...


Опубликовано steel.ne в вт, 03/04/2007 - 08:49.
steel.ne

а темы для уроков были взяты для старого друпала!?
???
Я старый друпал в глаза не видел. Начал жизнь с версии 5.0.
Неточности могут быть в той части, которую я дергаю с сайта drupal.org. Возможно где-то недоглядел и изменились названия функций/модулей. Так что поправьте если что.


Опубликовано steel.ne в вт, 03/04/2007 - 08:56.
steel.ne

В тему - http://www.lullabot.com/articles/hacking_phptemplate
Это следующий шажок. Сначала с CSS разобраться )


Опубликовано MAMONT в сб, 28/04/2007 - 10:49.
MAMONT

Здравствуйте. Можете обьяснить?

1. Допустим у меня есть блок aggregator.
2. Я сделал файл block-aggregator-tpl.php в нем содержание стандартного блока в принцыпе:
3. Закачал на сервер в папку с другими tpl.php

Этого достаточно что бы Друпал использовал этот файл для вывода блока aggregator или мне в page.tpl.php надо прописать include?

Спасибо за ответ.


Опубликовано MAMONT в сб, 28/04/2007 - 10:54.
MAMONT

Сорри, уже нашел рядом ))
http://www.drupal.ru/node/3087


Опубликовано Strelban в пн, 14/05/2007 - 22:09.
Strelban

а можно в каждой части темы "Создание новой темы" расставить ссылки на остальные част? спасибо.


Опубликовано TARANEZZZ в вс, 23/09/2007 - 11:59.
TARANEZZZ

Все верно с этгого надо было начать!


Опубликовано sanek (гостевой логин) в сб, 13/10/2007 - 17:50.
sanek

спасибо!


Опубликовано shamaner в ср, 17/10/2007 - 16:34.
shamaner

Насчет тем для 47 друпы, разницы считай почти никакой, основное различие это в переменных вывода. Меняете все на те что используются в 5 друпе и все работает.


Опубликовано jackajan в пт, 30/10/2009 - 07:27.
jackajan

Прога, очень понравилась... Спасибо...


Опубликовано UHSF в вт, 18/05/2010 - 18:49.
UHSF

Полезная тема!


Опубликовано badbox в вт, 13/12/2011 - 11:57.
badbox

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


Опубликовано orion76 в ср, 14/12/2011 - 09:49.
orion76

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

Причем тут создание новой темы,

Создание новой темы(с нуля) это пункт третий и, зачастую, лишний-))


Новое на сайте

Ссылки партнёров