1. архітектура
2. Створення субтеми на базі Omega
3. Налаштування макета
4. 1. Grid settings (настройка сітки)
5. 2. Zone and region configuration (конфігурація зон і регіонів)
6. 3. Debugging (налагодження)
7. 4. Toggle libraries (включення / відключення бібліотек)
8. 5. Toggle styles (включення / відключення стилів)
9. 6. Toggle advanced elements (включення / відключення додаткових елементів)
10. підсумок

Drupal 7 на сьогоднішній день розвинулася настільки, що дозволяє створювати теми оформлення для сайтів будь-якої складності, практично не вдаючись до HTML-верстки. Процес створення таких тем нагадує використання конструктора, вся основна робота по перенесенню ескізу макета в життя лише в завданні необхідних стилів в CSS. Додаткових обмежень при цьому ніяких не виникає, можна створювати теми будь-якої складності, причому повністю настроюються; і хіба що натикаєшся на обмеження самої платформи (Drupal) або обраного фреймворку (Bootstrap).

Ось список основних і допоміжних модулів, які дозволяють домогтися подібного результату:

• Omega Drupal 7 Base Theme - базова тема для Drupal 7, фреймворк для створення власних тем оформлення;
• Omega Tools - тулку (модуль) для простого створення субтем на базі Omega через адмінку;
• Delta - з цього набору нам потрібен модуль Delta Blocks для заміни стандартних компонентів оформлення блоками;
• Block Class - простенький модуль для додавання блокам потрібних нам класів CSS (знадобиться для Bootstrap).

архітектура

Для початку пара загальних слів про архітектуру движка тим оформлення Drupal, для тих хто з нею не знайомий.

1. Власне движок
Спочатку визначається, який движок тим буде використовуватися. З незапам'ятних часів в Drupal використовується в якості движка стандарний PHP (PHPTemplate), шаблони якого представляються собою звичайні HTML-файли з PHP-вставками виду <? Php print $ title?>. Як мені здається, це зручно, т. К. Не потрібно розучувати додатковий синтаксис движка оформлення, а також можна вставляти будь-який код без будь-яких обмежень. Також Drupal дозволяє використовувати будь-який движок тем оформлення, наприклад Smarty, проте вже давно ніхто не поспішає їх прикручувати (для того ж Smarty є версія для Drupal 6, а для 7 вже немає - напевно, нікому не треба).

2. Базова тема
Тема оформлення, яка визначає всі основні стилі, функції та інше для майбутніх субтем. Ваша тема може і не використовувати ніяких базових тим, може бути написана з нуля, або сама бути базовою для інших тем.

3. Субтема
Успадковує всі функції, стилі та інше від базової теми і може їх перевизначати. В якості базової може бути також вказана субтема, і так до нескінченності.

Це дуже гнучка система, яку можна використовувати, наприклад, для незначних модифікацій основної теми сайту (скажімо, щоб прикрасити його до Нового року - створюємо СУБТ, яка висить деякий час, потім її відключаємо, включаємо через рік і так далі). Ну а також ця архітектура дозволяє створювати, використовувати і розширювати такі фреймворки, як Omega або AdaptiveTheme.

Створення субтеми на базі Omega

Для початку завантажуємо і встановлюємо базову тему і модулі, зазначені на початку статті. Далі переходимо в розділ Аppearance (Оформлення) і, якщо модуль Omega Tools у коректно встановлений, бачимо на сторінці посилання Create new Omega subtheme (Створити нову СУБТ) (якщо модуль встановлений, але цього посилання немає - спробуйте очистити кеш). Переходимо по посиланню і задаємо параметри нової теми:

• Name (назва), наприклад Omega Example Theme;
• Machine-readable name (машинне ім'я), наприклад omega_example;
• відзначаємо галочкою пункт Install automatically (Встановити автоматично);
• вибираємо Destination (місце призначення) - директорію з конфігурацією потрібного нам сайту або sites / all, якщо хочемо, щоб тема була доступна всім сайтам в мультісайтового установці (веб-сервер повинен мати права на запис в цю директорію для виконання автоматичної установки);
• в якості Base theme (базової теми) вибираємо Omega;
• як Starterkit (стартового набору) вибираємо Omega HTML5 Starterkit.

Натискаємо кнопку Save and continue (Зберегти і продовжити), підуть 2 простеньких кроку майстра, на яких можна задати додатковий параметри теми, включити її відразу після установки або відредагувати .info-файл. Якщо все зроблено правильно і ніяких помилок у процесі створення не виникло, то наша тема готова! Чи можемо тепер відшукати її в списку тем і встановити за замовчуванням.

Далі починається найцікавіше.

Налаштування макета

Переходимо по посиланню Settings (налаштування) нашої теми і бачимо кілька вкладок, в яких фреймворк Omega пропонує нам тонке налаштування нашого макета (Layout configuration).

1. Grid settings (настройка сітки)

Тут можна вибрати один з типів сітки: Default (960px) - стандарний, адаптивно-фіксований по ширині під основні дозволу екранів (800, 1024, 1280), або Fluid - тягнеться по всій ширині екрану. Користувачі фреймворків типу Bootstrap знають різницю між ними. Також на цій вкладці можна тонко налаштувати @media під необхідну ширину. Ну а для більшості проектів на цій вкладці все можна залишити за замовчуванням.

Через @media до теми підключаються наступні CSS:

• global.css - основний файл стилів, підключається глобально на всіх екранах, в тому числі мобільних, реалізуючи концепцію mobile-first;
• omega-example-alpha-default.css - основний файл стилів для використання з сіткою
• omega-example-alpha-default-narrow.css - файл для екранів шириною близько 800 пікселів
• omega-example-alpha-default-normal.css - файл для екранів шириною близько 1024 пікселів і всіх IE до 9-ї версії
• omega-example-alpha-default-wide.cs s - файл для екранів шириною більше 1200 пікселів

2. Zone and region configuration (конфігурація зон і регіонів)

Вся основна робота по налаштуванню макета сайту буде проходити в цій вкладці. Власне, це і є основна плюшка фреймворка Omega - завдання розташування Drupal-регіонів для розміщення Drupal-блоків не правкою коду шаблону page.tpl.php, а безпосередньо в налаштуваннях теми. Власне, при використанні Omega взагалі відпадає необхідність перевизначати або навіть заглядати в глобальні шаблони, такі як html.tpl.php або page.tpl.php, і інші. Це і є той функціонал, визначений на початку статті, який позбавляє від HTML-верстки макету. Можна зосередитися безпосередньо на CSS і коді на потрібних вам шаблонів виводу, node.tpl.php, наприклад. А ширина або розташування лівої / правої колонок, основного вмісту сторінки або блоків в підвалі тепер налаштовується в пару кліків.

Тепер кілька слів про те, як цим користуватися. На перший погляд все виглядає трохи заплутано, але розібравшись один раз, далі стає все просто. Omega вводить крім стандартної суті регіону в Drupal ще дві: секцію і зону. Секції об'єднують зони, а в зони входять вже звичні нам регіони. Всього секцій три: Header (шапка), Content (вміст) і Footer (підвал), перевизначити їх не можна (хоча необхідності в цьому і не виникає, так як це досить абстрактні сутності). Усередині цих секцій можна як завгодно розмістити зони з регіонами.

У кожної зони є налаштування, основні з яких: Section (секція, якій належить дана зона), Weight (вага, який визначає порядок розташування зон в секції), Column count (кількість колонок для кожної секції можна задати своє, на вибір пропонуються 12, 16 і 24), Primary Region (основний регіон). Ширина кожної зони відповідає ширині сторінки. Якщо заданий основний регіон, то загальна кількість колонок всіх регіонів всередині зони має бути не більше кількості колонок самої зони, і тоді якщо один або декілька регіонів пустують, то регіон, заданий основним, розтягується на що залишилася ширину. Наприклад, якщо на головній сторінці блоки в регіонах Sidebar First (Ліва колонка) і Sidebar Second (Права колонка) відсутні, тоді регіон Content (Вміст) займає по ширині 12 колонок. І якщо на внутрішніх сторінках в лівій колонці з'являються блоки, то регіон з вмістом стане займати по ширині 9 колонок. Ну а якщо блоки будуть присутні в обох колонках, то ширина вмісту буде дорівнює заданій кількості колонок - 6. Це буде відбуватися в тому випадку, якщо в зоні заданий основний регіон, а якщо немає, то регіонів може бути будь-яку кількість будь-якої ширини, усі регіони матимуть задану ширину, порожні регіони (без блоків або з прихованими блоками) виводитися не будуть.

Далі в зоні перераховані належні їй регіони, самі регіони мають аналогічні зонам настройки: Zone (батьківська зона), Prefix (кількість колонок для зміщення, аналогічно класам offset * в Bootstrap), Width (ширина, кількість колонок), Suffix (кількість колонок для відступу після регіону), Weight (вага).

Змінюючи всі ці параметри, можна налаштувати розташування блоків в макеті абсолютно як душа забажає. Регіони можна перевизначити стандартним для Drupal способом - в файлі опису теми .info, точно також перевизначаються і зони, їх може бути скільки завгодно.

Додатково за допомогою модуля Context (його ми не розглядаємо в цій статті) можна повністю перевизначити розташування всіх регіонів для різних сторінок сайту, а також застосувати інші настройки теми. Приклад: великий сайт, різне розташування блоків на головній і внутрішніх сторінках сайту або розділах, плюс сторінка-довідник з онлайн-картою, на якій використовується Fluid-макет.

3. Debugging (налагодження)

Просто цікава плюшка, яка допомагає в роботі: додає 2 кнопки, що дозволяють включати (за замовчуванням - відключати) сітку-оверлей і допоміжні блоки. На малюнку 2 (далі) видно, як виглядає макет з включеними блоками і сіткою. В налаштуваннях я відключаю відображення цих речей за замовчуванням, а самі кнопки роблю видимими тільки для адміністратора.

4. Toggle libraries (включення / відключення бібліотек)

На цій вкладці можна включати або відключати потрібні / непотрібні бібліотеки. Бібліотека - це сутність фреймворка Omega і не має відношення до Libraries API. Бібліотеки визначаються у файлі .info і можуть складатися з файлів JS і CSS. Надалі ми будемо використовувати їх для підключення Bootstrap.

5. Toggle styles (включення / відключення стилів)

Аналогічно попередній вкладці, на цій ми можемо включати або відключати файли CSS, які використовує Omega, а також стандартні стилі Drupal. Дуже зручно, коли ми не хочемо, щоб стилі якогось модуля нам заважали.

6. Toggle advanced elements (включення / відключення додаткових елементів)

Ну і на останній вкладці ми відключаємо всі стандартні елементи Drupal, які не можемо відключити в загальних налаштуваннях теми: повідомлення, вкладки, «хлібні крихти», заголовок сторінки, іконку RSS. Інші елементи відключаємо в загальних для всіх тем налаштуваннях, які знаходяться нижче вкладок і є у кожної теми: логотип, назву сайту, слоган, головне і додаткове меню.

підсумок

В результаті у нас вийшов невинно чистий макет, який ми побачимо перейшовши на головну сторінку.

Для того, щоб повернути стандартні елементи на сторінку (логотип, заголовок сторінки, меню, повідомлення, вкладки та інше), скористаємося модулем Delta Blocks: в його налаштуваннях включимо необхідні нам компоненти, і вже у вигляді стандартних блоків розмістимо їх на сторінці в будь-якому місці . Це також позбавляє нас від правки шаблона page.tpl.php, і дозволяє «на льоту» розміщувати, вмикати та вимикати необхідні елементи.

Ми створили власну повністю настроюється тему оформлення без правки коду файлів основних шаблонів, і навіть без підключення до сервера по FTP / SSH. Але тепер ми хочемо додати в нашу тему всю міць Bootstrap. Про те, як цього домогтися, мова піде в другій частині статті.