Опубликовано автор в категориях Drupal.

drairdrupal
Продолжая изучение вопроса создания тем для CMS Drupal, я обнаружил очень интересный материал на Adobe Dreamweaver Developer Center, в котором рассказывалось о том, как упростить создание тем для Друпал с помощью редактора Dreamweaver CS4 и специальных расширений. Не смог оставить без внимания, поэтому публикую перевод материала в своём «бортовом журнале».

Я пропущу вступительную часть материала в котором рассказывается о том, что такое CMS и как они помогают нам жить. Также не буду рассказывать о том какая популярная CMS Drupal. Это не совсем имеет отношение к сути вопроса. Поэтому я перейду непосредственно к описанию процесса создания тем (шаблонов) для сайтов на Drupal. В этой статье вы узнаете об основах создания тем для Drupal и о том, как Dreamweaver CS4 (и Adobe AIR) помогает дизайнерам создавать эти темы.

Общее представление о темах Drupal

Темы для Drupal представляют собой сочетание PHP и соответствующей веб-стандартам верстки (XHTML и CSS). Пуританским подходом в создании темы для Drupal можно считать создание шаблона с помощью только PHP, фактически без шаблона как такового, используя только Drupal API. Веб-разработчики, которые не испытывают трудностей с созданием разметки могут создать тему для Drupal быстрее, чем разработчики, поскольку могут использовать вставки специальных переменных для вывода системных блоков движка непосредственно в разметке страницы в специальных файлах шаблона. Эти шаблоны широко известны как TPL файлы, которые, собственно и имеют расширение.tpl или tpl.php.

Drupal позволяет устанавливать и использовать несколько тем, например одну тему для администраторов, а другую тему для пользователей сайта. Такой подход рекомендуется при установке новых пользовательских тем, тем самым помогает предотвратить проблемы с администрированием сайта, если новая тема имеет какие-то проблемы. Создание разметки (темы) является финальным этапом разработки сайта на Drupal. Именно тема определяет то как будут отображаться данные на вашем сайте.

Если не углубляться в детали то, темы для Drupal представляют собой набор графики, стилей и файлов-шаблонов. Помните, что в самих шаблонах используется XHTML, CSS и PHP. Каждая тема имеет разделена на определённые структурные элементы которые, как правило организованы с помощью <div> тегов. Drupal заполняет эти регионы содержанием сайта. Если вы когда-либо использовали «server-side includes» для хедера и футера вашего сайта, то вы уже можете представить себе то, что Drupal делает при выводе каждой области контента. Контент в Drupal выводится двумя основными логическими единицами nodes (ноды — статьи или объекты) и блоки. Ноды, как упоминалось выше, являются страницами контента, например, новости или записи блога. Блоки являются вторичным контентом, допустим к блокам мы отнесём списки статей или новый опрос, как правило, они выводятся в левой или правой боковой панели сайта.

Использование Dreamweaver для работы с темами Drupal

По умолчанию в Dreamweaver можно редактировать любые файлы шаблонов темы Drupal, которые заканчиваются на .tpl.php, но Dreamweaver не знаком API Drupal или любыми другими пользовательскими типами файлов, которые используются в темах или модулях Drupal (типы файлов, такие как .info и .module). В помощь членам сообщества Drupal и пользователям Dreamweaver, было создано расширение для Dreamweaver, которое позволяет поддерживать типы файлов Drupal и все Drupal API (см. Рисунок 1).

Примечание: Для того чтобы добавить расширение в редактор используйте Менеджер расширений.

fig01

Большим преимуществом Dreamweaver при работе с шаблонами Drupal является возможность эффективно применять и изменять стили. Для этого вы можете использовать отображение в проекции «Дизайн» совместно с встроенным редактором CCS. Каждый шаблон может содержать «дизайнерскую» ссылку на стили, которая позволит просматривать некоторые результаты оформления прямо в редакторе. Процесс использования дизайнерских стилей подробно описан в документации по Dreamveawer.

Каждая тема Drupal требует .info файл, который содержит мета-информацию о теме, например, название темы, описание стилей, и регионов. Это не PHP файл, а простой текстовый файл, который есть в каждой теме. Без этого файл Drupal не будет отображать вашу тему в панели администрирования. Рисунок 2 показывает типичную папку темы Drupal (в таком случае показана тема из базовой сборки — «Garland»).

fig02

Что из себя представляет .info-файл

Если посмотреть на список файлов в теме Garland, который показан на Рисунке2, то, не считая графических файлов и директорий, мы увидим TPL файлы шаблонов (.tpl.php), файлы стилей и .info-файл с информацией о теме. Заметим, что папка и имя .info-файла совпадают. .info-файл (.info) это первый файл, который необходимо создать, поскольку он будет определять в теме ваши регионы, скрипты и стили. В следующем примере показан типичный .info-файл темы Drupal:

name = Untitled Theme
description = Our very cool theme made in Dreamweaver CS4.
screenshot = custom_screenshot.jpg

version = 1.0
core = 6.x
engine = phptemplate

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

features[] = logo
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links

stylesheets[all][] = styles.css
stylesheets[print][] = print.css

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

Использование AIR-приложения «Drupal Theme Starter»

C помощью Dreamveawer (как и любого другого текстового редактора) вы можете создать информационный (.info) файл для вашей темы. Но мы можем упростить эту задачу и избавится от лишней ручной работы, используя специальное бесплатное AIR-приложение — Drupal Theme Starter. «Стартер» поможет вам создать .info-файл для темы за несколько секунд. Загрузите и установите приложение и используйте его для создания.info-файла. А потом можно использовать Dreamweaver для редактирования разметки и стилей.

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

fig03 Рисунок 3. Приложение Drupal Theme Starter: Определяем мета информацию для темы: название, описание, скриншот.
fig04 Рисунок 4. Определяем регионы темы и особенности.
fig05 Рисунок 5. Объявляем стили и скрипты для темы.

Углубляемся в ядро Drupal

Начинается самая сложная часть для новичков в Drupal. Нет какого-либо магического кода для шаблона Drupal. Все темы базируются на использовании кода, который определен в ядре движка. Для того чтобы идти дальше, нам нужно загрузить последнюю версию Drupal 6.x. Первую свою тему лучше создавать на основании базовой темы, которая идет в сборке движка. Следует скопировать из нее нужные вам файлы. Вы можете оставить сам код и применить к теме свои стили и разметку. На первый взгляд легко. Не так ли? Так что — приступим!

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

  1. Убедитесь, что название вашей папки для темы называется так же, как и ваш .info-файл.
  2. Поместите созданный .info-файл в папку.
  3. Откройте .info-файл и посмотрите какие скрипты и стили объявлены в вашей теме.
  4. Создайте пустые файлы стилей и скриптов внутри паки. Позже вы заполните их кодом.
  5. Загрузите и распакуйте Drupal 6 и зайдите в папку /themes. Вам нужно скопировать в вашу директорию следующие файлы ядра или базовой темы, для того чтобы не делать шаблон с чистого листа:
    1. page.tpl.php: Этот файл должен содержать основные теги разметки: <html>,<head> , и <body>, а также размеченные <div> регионы перечисленные в .info-файле. Этот шаблон может быт найден в папке modules/system, или в паке основной темы themes/garland.
    2. node.tpl.php: Определяет рендеринг содержимого нодов (node), которые являются страницами материалов в Drupal. Это шаблон может быть найден как в папке modules/node, так и в папке базовой темы themes/garland.
    3. block.tpl.php: Шаблон для блоков, которые чаще всего появляются в сайдбаре. Этот шаблон может быт найден в папке modules/system, или в паке основной темы themes/garland. Скопированные файлы вы можете править на свое усмотрение. Главное не изменяйте имена этих файлов. Далее создайте свои CSS стили для разметки. Экспериментируйте и наслаждайтесь.

В процессе работы следует передерживаться нескольких правил:

  1. Во-первых, для административной части сайта всегда лучше использовать тему из базовой сборки. Это исключит проблемы с работой админки с произвольными темами. В панели управления Drupal выберите «Administration theme» и установите Garland, далее нажмите «Save configuration». Теперь вы можете смело добавлять кастомные темы не опасаясь проблем с управлением сайтом.
  2. В папке /sites/all добавте новые директории с названиями /modules и /themes. Для того чтобы разделить ваши собственные модули и модули, которые вы загружаете с сайтов сообщества стоит в директории sites/all/modules создать две папки с названиями custom (ваши) и contrib (сообщества). Для тем не требуется делать подобное разделение.

Скопируйте папку с вашей темой в sites/all/themes и Drupal должен будет распознать ее на странице управления темами — Themes administration page.

Каждый шаблон начинает работать с загрузки базового файла page.tpl.php, потом подгружается node.tpl.php для каждой единицы контента, и конечно-же, block.tpl.php для блоков, как, например, форма логина, поиск, и так далее. Каждый шаблон в свою очередь содержит ряд PHP переменных, которые и отвечают за вывод контента (например, $title используется для вывода заголовков нодов (материалов) и блоков). Более подробно о темах можно почитать в Drupal 6 Theme Handbook. Посмотрите на Рисунок 6, чтобы понять где вставляется каждый шаблон при сборке страницы.

Внимание! Никогда не делайте изменения в файлах ядра Drupal!

fig06

Помните, что шаблон page.tpl.php не содержит в <head> части тегов <style> или <script>. Друпал автоматически генерирует ссылки на эти файлы в следующем порядке: сначала ссылка <link> на CSS, потом JavaScript с помощью тега <script>. Стили могут быть созданы как в одном так и нескольких внешних файлах. Но помните что большое количество фалов стилей и скриптов негативно сказывается на времени загрузки страницы. Для того чтобы хоть как-то помочь в этой ситуации, Drupal 6 имеет стандартную опцию сжатия CSS и JavaScript, для ускорения загрузки страницы.

Установка новых тем Drupal

После того, как вы создали все необходимы изменения в вашей теме, запустите Drupal для установки вашей темы.

Как уже говорилось раньше, базовый набор файлов в вашей теме должен состоять и трех шаблонов, info-файла а также стилей и скриптов.

Отправляйтесь в корневую директорию вашего Drupal 6 и откройте паку /sites. В этой директории вы можете создать произвольное количество директорий для разных доменов, это одно из замечательных свойств Drupal — создание нескольких сайтов на одном ядре. Именно в паку /sites вы можете добавлять ваши модули и темы.

Следуйте инструкциям ниже для того, чтобы приготовить Drupal для установки кастомных модулей и тем:

Запомните! Нельзя устанавливать собственные темы и модули в папки ядра Drupal!

После всех проделанных операций, посетите страницу администрирования вашего Drupal и войдите в раздел управления темами. Рисунок 7 показывает стандартный вид панели управления темами, на этой странице вы должны будете увидеть вашу тему в списке всех тем. Если вы не видите вашу тему, возможно ее нет в нужной директории (drupal/sites/all/themes), или же вы забили включить .info-файл в папку темы, или же названия файла и папки отличаются.

Примените новую тему и посмотрите как она работает на всех страницах вашего сайта. Если видны какие либо проблемы то вновь просмотри все файлы вашей темы в редакторе.

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

fig07

Автор статьи Chris Charlton, в следующем материале пообещал рассказать о том как создавать темы для Drupal на основе своеобразного темплайт-кита Zen. Очень интересно, обязательно ознакомлюсь и думаю, что опубликую перевод.

UPDT:

Для всех у кого проблемы с нахождением и скачиванием инструментов, которые описаны в статье, вот — ссылка на архив, в который я вложил DrupalThemeStarter.air и Drupal_API.mxp: DrupalThemeTools.zip

P. S. Мысли о красоте и комфорте…

Странно, почему многие люди идут напластические операции фото после которых иногда гораздо менее привлекательны чем до? Ведь всякое может случится! Возможно им не комфортно в своем теле, но ведь и тело это, к примеру, не водонагреватели, которые изначально созданы для комфорта. Тело — это оболочка в которой живет человек. И помимо скальпеля есть еще масса вещей которая может украсить эту оболочку, например, коллекция вечерних платьев поможет скрыть недостатки фигуры, но не скроет недостатки души…

51 комментарий к записи “Создание тем для Drupal с Dreamweaver CS4”

  1. Hiway

    @Ольга: Посмотрите в самом конце материала, там я дал ссылку на скачивание архива с DrupalThemeStarter.air и Drupal_API.mxp

    Ответить
  2. VasyOK{!}

    А можно ли редактировать готовые темы Drupal в режиме wysiwyg?

    А можете ли вы привести примеры или ссылки по редактированию готовых тем?

    Ответить
  3. Владимир

    Вот спасибо! Наконец то нашел что-действительно полезное. Кажется начинаю понимать. 🙂 Позволю себе заметить, в тексте одна опечаточка, в предложении: «Но помните что большое количество фалов стилей и скриптов негативно сказывается на времени загрузки страницы», в слове «файлов». 🙂

    Ответить
  4. Yuriy

    Стаья класс! Но есть одно но! вы предлагаете создавать шаблоны на базе существующих! А как создать файлы-шаблоны с нуля. Я не могу понять как пишется и создается файл page.tpl.php, node.tpl.php и block.tpl.php? На каком из принципов происходит их построение! если можно привидите хоть какой-нибуть практический пример! Так легче понять! Зарание спасибо!

    Ответить
    • Hiway

      На самом деле взять базовые страницы page.tpl.php, node.tpl.php и block.tpl.php можно в самих системных модуля. Там они имеют все системные переменные и дефлтную разметку Drupal. Переменные оставляем, а разметку делаем как надо. Все просто. Вряд ли здесь нужен отдельный пост.

      Ответить
  5. Yuriy

    Подскажите как мне быть! Создал шаблон блока с именем
    block-user-1.tpl.php оформил стилями, но он не выводится. используется только файл шаблон по умолчанию block.tpl.php. Может что-то гдето-то нужно промисать, или в чемпроблема? Объясните поподробней как подключитьвновь созданый шаблон-блока? Спасибо!!!!

    Ответить
    • Hiway

      Юрий, шаблон с именем block-user-1.tpl.php будет использоваться только для блока профиля пользователя с id=1 после регистрации. Внимательно изучите номенклатуру и работу хуков и перехватчиков функции theme()

      Ответить
  6. Yuriy

    Ладно! но подскажите одно: как все-таки правильно нужно давать имена вновь созданым шаблонам-блоков? в файл info добавляем скажем новый регитон regions[newregion] = newregion. В файле page.tpl.php прописуем

    после всех этих манипуляций вновь созданый блок должен появиться в новой теме (он у меня не появляется!). Почему?

    Ответить
  7. Yuriy

    Одним словом как в новой теме вывести новый блок который будет отличаться оформлением и месторасположением (в отличие от block.tpl.php)????

    Ответить
  8. Yuriy

    Уважаемые разработчики! Я уже запутался по самые уши! Если кто-поможет буду признателен! Проблема в следущем: создал новую тему, создал три файла (page.tpl.php, node.tpl.php и block.tpl.php и стили офрмления)! Заменил в файле page.tpl.php все содержимое на переменные — выводиться нормально! Теперь мне нужно чтобы справа и снужу страницы выводился правый и левый блок согласно сверстаной страницы. Когда я админке добавляю новые блоки (правый и нижний) а в файле page.tpl.php вставляю соответствующие переменные у нужные места страницы ($footer, $right) и пытаюсь отобразить их то они не выводятся! Выводятся лишь блоки (к примеру кто-в онлайне), а блоки созданые мной с нуля в никакую!!! Может нужно как-то править шаблон-блоков block.tpl.php или по-правде сказать я в тупике полном…. Надеюся что кто-то мне все таки поможет в этом разобраться….

    Ответить
  9. Yuriy

    Сейчас снова попробую, спасибо! А еще один вопрос: а как сделать, чтобы тема админики, скажем имела Garland, в то время как у вех пользователей тема была скажем другая?

    Ответить
  10. Yuriy

    Ничего у меня к сожалению не получается с этими темами!!! Хочу создать новую тему на базе сверстаной страницы, но при этом вновь созданиые блоки не выводятся! Правил и файл инфо указал область… скажите а код в файле block.tpl.php будет одинаков и для остальных файлов шаблона типа block-footer.tpl.php?

    Ответить
    • Hiway

      Да. Может быть одинаковым. Может отличатся по вашему желанию но в любом случае его конструкция должна содержать функции приняты для вывода блока.

      Ответить
  11. Yuriy

    Подскажите еще, вон тот файл block.tpl.php, который лежит в папке с темой, он задает вариант оформления для всех блоков, а мне нужно вывести еще один вид, но он тогда использует этот же файл block.tpl.php.
    Проблема в том, что я создаю файл block-footer.tpl.php, но он не подхватыватывается и не используется 🙁 (очищал кэш, перевыбирал тему). Что может быть не так? Почему, когда я создаю шаблон блока с именем для конкретного вида, друпал его игнорирует и берет шаблон блока дефолтный? Может неправильно задаю имя файлам?
    Заранее спасибо.

    Ответить
    • Hiway

      Имя файла задано верно. Посмотрите внимательно имя области, и находится ли искомый блок в нужной области. А еще попробуйте взять шаблон блока с какой-то дефолтной темы и переименовать его.

      Ответить
  12. Yuriy

    Подскажите как и куда нужно устанавливаь визуальный редактор BUeditor!!! и как затем его подключить чтобы он работал в Друпале? Спасибо!!!

    Ответить
  13. Артем

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

    Ответить
  14. Koff

    спасибо, нужна помощь: при смене темы исчезает один линк (Primary links) из главного меню и не отображается на экране, хотя в списке он есть — это что ошибка в теме?

    Ответить
  15. Oe

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

    Ответить
    • hiway

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

      Ответить
  16. Алексей

    Пытался создать *.info при помощи DrupalThemeStarter.swf
    Увы swf — ка даже не запустилась.
    много багов при инициализации с переменными.
    Помогите плиз)
    Заранее Благодарен если отпишите на маил

    Ответить
    • hiway

      DrupalThemeStarter — это Air приложение и имеет расширение .air, это во-первых. А во вторых это приложение делает только лишь один .info, который по сути вы можете и руками прописать в любом редакторе.
      » много багов при инициализации с переменными. — Что значит эта строка?

      Ответить
      • Алексей

        тогда вопрос как его запускать и как это приложение работает.
        Потому что WINRAR мне распаковал до swf файлов
        просто как air не запускает.
        Тогда у меня два варианта.
        Либо использовать как плагин, но только с чем?
        Либо можно readme куда его всунуть и как запустить и увидеть то что на скриншотах

        Ответить
          • Алексей

            Скажите пожалуйста. Что это такое. Тот самый AIR
            Спрашиваю не для себя… сам уже разберусь.
            Думаю ответ поможет в дальнейшем таким же малоопытным новичкам как я.

  17. Ланин Александр

    Я пользуюсь Portable Dreamweaver CS4. Поставил себе Adobe Extension Manager CS4. Но по ссылке «расширение для Dreamweaver» находу файл «Drupal_API.mxp». А Adobe Extension Manager CS4 не поддерживает файлы *.mxp. Как мне быть?

    Ответить
  18. Yuriy

    Привет, всем! Подскажите. Создал обычный форум, той который идет в приложении с Друпалом. Настроил внешние виды, и вот когда дело дошло до стилизации раздела добавить новую тему (н/p: сылка http://spez/node/add/forum/0), мне вместо разработаных шаблонов(страниц) выдает стандартную страницу Гарленд. Пытался уже создавать и вот такие шаблоны page-node-add-forum.tpl — не помагает, не перекрывается, а отображается все таже стандартная страница Друпала. Как можно переопределить страницу чтобы по указаному адресу загружался нужный мне шаблон? Спасибо

    Ответить
  19. Юрий

    Интересен вопрос.
    Юзаю Dreamweaver CS5.
    В нем по умолчанию есть поддержка работы с Drupal? вот только не полностью еще понятная.
    Если кто разобрался, было бы не плохо выложить инфо относительно возможностей и особенностей CS5 относительно работы с Drupal.

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

    Ответить
    • Hiway

      Юрий, спасибо за лестный отзыв 🙂 Что касается поддержки Drupal в DW CS5, то там реализована поддержка архитектуры системы, то есть фактически, загружая index.php вы сможете полностью увидеть цепочку событий которая повлечет за собой работу сайта, плюс это дает возможность непосредственно в редакторе в режиме LiveView видеть измения в коде. Но не предусмотрено каких-либо сниппетов или наборов функций для работы с системой. Аналогичная ситуация в CS5 для WordPress и Joomla!

      Ответить
  20. vasilich

    тупая статья, с громким именем. а че с этим расширением Dreamweaver-а делать? нафига оно вообще? и какую роль тут играет сам Dreamweaver? кроме как в заголовка статьи

    Ответить
  21. Юрий

    Ребята, если кодить ручками, то мне нравится phpDesigner 7.
    Вопрос конечно на любителя.
    Подсветка кода, подстановка функций, проверка кода, отслеживание классов и функций. Все что нужно чтобы писать сложный код.
    Попробуйте. Не пожалеете.

    Ответить
  22. yuri

    А если тема отображается с ошибками, вернее вообще не отображается, в оформление тоже зайти не дает, сразу выдает ошибку, можно ли как то сбросить настройки, установить тему по умолчанию через хостинг, отредактировав какой либо из файлов?

    Ответить
  23. Da_Bass

    Уже весь измучался… Проблема в том учто например у меня есть сайты на Drupal и я хочу уже готовые сайты редактировать через Dreamweaver, но как это делать я так и не понял. Файлы то все открываются а вот как например мне править и видеть что я сделал не понимаю. Вроде присвоил файлам что это все Drupal , а картинку все равно не выводит. Помогите что сделать то надо.

    Ответить
    • Hiway

      Da_Bass Если у вас сайт на Drupal, то редактировать с помощью Dreamweaver вы сможете только исполняемые файлы, а непосредственно контент редактируется через редактор нод на сайте. А относительно того что не выводит картинку, то нужно в настройках проекта проверить правильность путей, и правильно ли определен удаленный и тестовый сервер. Самый лучший вариант посмотреть видеоуроки по этой теме на сайtе Adobe

      Ответить
  24. Иван

    Здравствуйте, возник вопрос, собсна я новичек в этом деле, поэтому интересно знать, можно ли использовать Дримвивер cs8. И актуальны ли еще те инструменты, которые вы выложили или же они морально устарели? Руководствуясь вашей статьей я смогу создать шаблон для Drupal 7.X ?

    Ответить
    • Hiway

      Иван, здравствуйте.Наверное вы имели ввиду Dreamweaver 8? Так вот использовать или не использовать его — это ваше право. На самом деле функционально редактор позволяет создавать полноценный код. Просто в новых версиях добавленные новые инструменты, те же шаблоны мобильных версий сайтов и прочее, но работать можно и без них.
      А что касается создания тем для Drupal 7, то советую вам почитать эти статьи Создание темы для Drupal 7 и PSD эскиза, часть вторая.

      Ответить

Оставить комментарий

  • (не будет показан)