<
  • Главная
Статьи

Створення тем для Drupal з Dreamweaver CS4

  1. Загальне уявлення про теми Drupal
  2. Використання Dreamweaver для роботи з темами Drupal
  3. Що з себе являє .info-файл
  4. Використання AIR-додатки «Drupal Theme Starter»
  5. Заглиблюємося в ядро ​​Drupal
  6. Установка нових тем Drupal

Продовжуючи вивчення питання створення тем для CMS Drupal, я виявив дуже цікавий матеріал на Adobe Dreamweaver Developer Center, в якому розповідалося про те, як спростити створення тем для Друпал за допомогою редактора Dreamweaver CS4 і спеціальних розширень
Продовжуючи вивчення питання створення тем для 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).

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

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

Кожна тема Drupal вимагає .info файл, який містить мета-інформацію про тему, наприклад, назва теми, опис стилів, і регіонів. Це не PHP файл, а простий текстовий файл, який є в кожній темі. Без цього файл Drupal не відображатиме вашу тему в панелі адміністрування. Малюнок 2 показує типову теку теми Drupal (в такому випадку показана тема з базової збірки - «Garland»).

Що з себе являє .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 теми, для використання в роботі движка.

Малюнок 3 Малюнок 3. Додаток Drupal Theme Starter: Визначаємо мета інформацію для теми: назва, опис, скріншот.
Малюнок 4. Визначаємо регіони теми і особливості.
Малюнок 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!

Ніколи не робіть зміни в файлах ядра Drupal

Пам'ятайте, що шаблон 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 можливість для установки нових тем.

Автор статті Chris Charlton , В наступному матеріалі пообіцяв розповісти про те як створювати теми для Drupal на основі своєрідного темплайт-кита Zen. Дуже цікаво, обов'язково ознайомлюсь і думаю, що опублікує переклад.

UPDT:

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

PS Думки про красу і комфорт ...

Дивно, чому багато людей йдуть на пластичні операції фото після яких іноді набагато менш привабливі ніж до? Адже всяке може трапиться! Можливо їм не комфортно в своєму тілі, але ж і тіло це, приміром, не водонагрівачі , Які спочатку створені для комфорту. Тіло - це оболонка в якій живе людина. І крім скальпеля є ще маса речей яка може прикрасити цю оболонку, наприклад, колекція вечірніх суконь допоможе приховати недоліки фігури, але не приховає недоліки душі ...

Чи не так?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью