Темизация на базе Zen

Публикую это для удобства людей, просматривающих видео с киевского DrupalCamp. Надо сказать что многое по части темизации было переосмыслено (в частности я теперь гораздо лучше отношусь к 960gs). Но - ниже приведен текст таким, каким он был у меня на ноуте в день DrupalCamp в Киеве. Еще хочется заметить, что сама презентация (и доклад соответственно) была собрана за 10 минут, т.к. это было частью DrupalFAQ - действа, когда люди из зала высказывали "запросы" по темам, о которых хотелось бы узнать побольше. И там же находились докладчики, которые после буквально минутной подготовки импровизировали на тему... Моя импровизация была посвящена теме Zen. Хочется поблагодарить всех, кто задавал вопросы и активно участвовал. ------------------------

Мой учитель Дзен, или как собирать Drupal.

Статья предназначена для людей, которые с одной стороны уже немного знакомы с CMS Drupal, с другой стороны — только начинают разбираться в том, как же быстро делать на нем сайты. Итак, наша цель — с небольшими знаниями английского(или словариком под рукой), на основе темы Zen(http://drupal.org/project/zen) собрать тему для друпала за 30 минут. Что же тут нового, спросите вы? Дело в том, что я не буду рассказывать как на базе Zen'а создать свою тему. Я хочу поделиться общей структурой сборки тем, где Zen — будет нашим главным помощником. Но — не основой. Итак, по пунктам. 1. Мы хотим себе небольшой сайт и подбираем себе шаблон дизайна. И подобрали отличный шаблон Ecobusiness(http://www.opensourcetemplates.org/templates/preview/1312612761/), который открыт и бесплатен. 2.Мы уже имеем установленный drupal 6.x 3.У нас есть скачанная тема zen(http://drupal.org/project/zen) для drupal 6.x. Она нам не понадобится по прямому назначению, ее даже необязательно распаковывать из архива. Обратимся к ней за помощью чуть позже. После чего в админке друпала выставляем тему для администратора http://127.0.0.1/cleardrupal/admin/settings/admin Garland. Дабы когда мы начали работать со своей темой мы могли легко добраться в админку. Далее мы создаем в /sites/all/themes/ папку mytheme. Где и будет располагаться наша с вами тема. В /sites/all/themes/mytheme создаем файл mytheme.info, содержание которого может быть примерно таким: [code] name = MyTheme description = A blank base theme version = .02 core = 6.x engine = phptemplate stylesheets[all][] = reset-min.css stylesheets[all][] = common.css [/code] Из архива темы Ecobusiness копируем в папку mytheme файл index.html и переименовываем его в page.tpl.php, а так же копируем common.css и reset-min.css туда же, где находится у нас page.tpl.php. После чего /admin/settings/performance обнуляем кэш друпала — у нас подхватится новая тема, которую мы только что создали. Выбираем ее как стандартную тему cleardrupal/admin/build/themes. И — видим вполне прогнозируемый результат: У нас не подхватились стили. И вот тут то мы и начинаем впервые работать с замечательной темой Zen. В этом месте я немного подробней остановлюсь на дядюшке Дзене. Эта тема изначально создавалась как большой учебник для начинающих. Учебник в себе, где комментарии к коду наглядно демонстрируют что и как удобно и можно использовать внутри друпал-темы. Лучше любых документаций взять и прочесть все внутренности и комментарии темы Zen — большего «стартового скачка» в плане опыта вам ничто не обеспечит. Но строить тему непосредственно на Zen, особенно если у нас есть какой-то сторонний, приятный нам шаблон часто не слишком гуманно к тому кто решит этим заняться. Дело в том что Zen слишком избыточен. Максимально избыточен. В css-файлах зена есть всевозможные сочетания id и class, которые только возможны в друпале. И код в виде [css] #site-slogan /* The slogan (or tagline) of a website */ { } #header-blocks /* Wrapper for any blocks placed in the header region */ { } [/css] там не редкость. Авторы считают что вам требуется просто вводить что вам требуется в фигурных скобках и пользоваться всем готовым. Примерно то же самое(идейно) наблюдается и в .tpl.php файлах. Но часто именно это и рождает неудобство. Лично я предпочитаю сам продумывать как и где в css у меня идет последовательность описания элементов. И логика Zen'а чаще мешает, нежели помогает. Но если использовать его не как основу, которую необходимо долго и тщательно заполнять(а потом желательно еще и подчищать код), то Zen становится незаменимым учебником. Пусть мы сами создадим каркас темы, благо друпал позволяет затратить на это всего пару минут. И из Zen'а будем дергать только то, что нам нужно и полезно. А подробнейшие комментарии в теме будут нам лучшим оглавлением учебника. Но вернемся к нашему сайту. Друпал не подхватил css, потому что мы не сказали ему это сделать. А что для этого нужно? Смотрим как сделано это в zen, смотрим файл page.tpl.php от темы zen: Сразу же в шапке файла, в комментариях видим следующее: [php] - $styles: Style tags necessary to import all CSS files for the page. - это нам и нужно. Заодно скопируем весь от zen'а: <?php print $head_title; ??> [/php] Вот это и вставим вместо HEAD в page.tpl.php нашей темы mytheme. Обновляем сайт. Что мы видим? Yahoo! Работаем дальше. А дальше мы заменим ненужный html контент на вывод друпала. Методично заменим содержание, меню, разметим регионы. Начнем с содержания. Все что в центре страницы, под заголовками Weekly News Updates и Current Employment News нам не нужно. Находим в page.tpl.php (да, необходимыми познаниями в html чтобы понять что именно нужно удалить, обладать все-таки нужно для этой статьи). В нашем случае это: [html]

Weekly News Updates

Lorem ipsum dolor sit amet, consectetuer adipis cing elit, sed diam nonummy nibh euismod tinci dunt ut laorenim ad minim veniam, quis nostrud exerci tation ullam corper suscipit lobortis nisl ut aliq eet dolore magna aliquam erat volut pat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet.

Current Employment News

Lorem ipsum dolor sit amet, consectetuer adipis cing elit, sed diam nonummy nibh euismod tinci dunt ut laorenim ad minim veniam, quis nostrud exerci tation ullam corper suscipit lobortis nisl ut aliq eet dolore magna aliquam erat volut pat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipis cing elit.

[/html] Заменим это на , получилось что-то около: [php]

[/php] Что у нас получилось? Область контента теперь выводится друпалом. Теперь заменим верхнее меню. Предварительно зайдем в админку и добавим пару пунктов в Primary Links, к примеру Menu1 Menu2 Menu3. И все ведут на http://www.drupal.org и Home, который ведет на , действуем: /admin/build/menu-customize/primary-links/add Далее уже привычным образом смотрим а как в Zen'е выводится меню. Оказывается вот так: Сответственно, на эту строчку мы и заменяем то, что у нас в шаблоне. Было: [html]
[/html] Стало: [php]
[/php] Обновите страницу. Видите, немного не так стало? Все потому что мы забыли про id navigation у
    в исходном шаблоне. Но допустим, нам не хочется лезть переписывать это в css(хотя — самый простой способ), так просто дополним эту строчку до такого вида: [php] 'navigation')); ?> [/php] Обновляем, смотрим. Как родная :) Едем дальше. Текст под названием сайта, а именно: «This is where your welcome message would appear, or perhaps a company description. Welcome to Eco Business - environmentally friendly solutions for the business world.» вполне похож на слоган сайта. И в Zen'е есть замечательное описание переменной, оторое сюда вполне подходит: [code] * - $site_slogan: The slogan of the site, empty when display has been disabled in theme settings. [/code] Соответственно меняем [html] [/html] на [php] [/php] Далее в /admin/settings/site-information вписываем текст нашего слогана, а в /admin/build/themes/settings/mytheme включаем галочку Site slogan. Обновляем страничку — вуаля, наш текст там есть! Теперь перейдем к блокам слева. Там располагается некое меню(Products), и некоторый текстовый блок (Features). Мы разметим левую часть как регион, и сделаем вывод блоков таким образом, чтобы нам ничего не пришлось менять в css исходной темы. Меняем [html]

    Products

    Features

    This week we have our one of a kind sale. Pick your one of a kind plant from our great selection and combine that with a planter box for $5.99.

    Native plant seeds on sale!


    [/html] на [php]

    [/php] И видим следующую картину: Друпал автоматом в этот регион выводит меню. Но что-то не так с представлением блока... Теперь стоит обратиться к темизации блоков. Смотрим как сделано это в теме zen. Уже есть некий файл — block.tpl.php, который задает формат вывода блока. Давайте просто скопируем его к себе в папку нашей темы mytheme. Далее. У нас есть изначальный html-вывод шаблона, это [html]

    Products

    Features

    This week we have our one of a kind sale. Pick your one of a kind plant from our great selection and combine that with a planter box for $5.99.

    Native plant seeds on sale!


    [/html] Как мы видим — используются заголовки h3 и class leftbox, так что заменим в файле block.tpl.php [php] subject): ?>

    subject; ?>

    content; ?>
    [/php] на [php] subject): ?>

    subject; ?>

    content; ?>
    [/php] И смотрим на результат: Вроде вполне приятно. Теперь работаем с правыми блоками. Разметим правую часть как регион. Для этого заменим [html]
    Image:product

    Product Sales

    Lorem ipsum dolor sit amet, consecing elit, sed diam nonummy nibh dunt ut laoreet dolore magna aliqupat. Ut wisi enim ad minim veniam, exerci tation ullamcorper s... more

    Image:product

    Product Sales

    Lorem ipsum dolor sit amet, consecing elit, sed diam nonummy nibh dunt ut laoreet dolore magna aliqupat. Ut wisi enim ad minim veniam, exerci tation ullamcorper s... more

    Image:product

    Product Sales

    Lorem ipsum dolor sit amet, consecing elit, sed diam nonummy nibh dunt ut laoreet dolore magna aliqupat. Ut wisi enim ad minim veniam, exerci tation ullamcorper s... more


    [/html] на [php]

    [/php] Обновляем страницу — правая часть исчезла. Дело в том, что по умолчанию друпал ничего не выводит в правый регион. Давайте назначим для отображения в этом регионе блок Who's online - /admin/build/block Обновляем, смотрим - Общий смысл действий вполне понятен. Доработать элементы, подвал - по такому же принципу, незачем рассматривать в этой статье весь код. Как видите, zen является отличной шпаргалкой для drupal-темизации. В Zen уже описаны все переменные темизации, приведены различные примеры по их использованию. Если у вас есть html-шаблон и хочется быстро сделать его drupal-темой - имеет смысл присмотреться к Zen'у.

Партнерская программа

Кстати, для интересующихся технологиями, у нас есть партнерская программа. Если по вашей специализации:

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

Тогда, добро пожаловать в партнерку :)