Drupal - урок дев’ятий - Темізація, зробити сайт просто!

З коробки Drupal в своєму розпорядженні п'ять темами. Природно в інтернеті можна знайти безліч чудових тем для Drupal, але людської душі завжди хочеться чогось особливого. Або тема зовсім не підходить, або хочеться змінити якусь дрібну деталь. У вас є свій сайт на Drupal, або ви як раз в процесі його створення? Давайте поговоримо про те, як можна його прикрасити.

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

За замовчуванням в Drupal використовується движок phptemplate (його ви можете знайти в папці / themes / engines, хоча він вам навряд чи знадобиться), його ми і помучиться -) Для прикладів будемо використовувати стандартну тему bluemarine, так як на мою думку вона найбільш проста, і підходить для навчання (ну і тому що я робив на її основі кілька дизайнів -)). Давайте скопіюємо папку / themes / bluemarine. в папку / sites / all / themes (якщо у вас немає папки themes, то створіть її), і перейменуємо в що то типу my_theme.

Всередині ми знайдемо файл bluemarine.info (перейменуйте його в my_theme.info) і 5 файлів з розширенням .tpl.php, вони то нам і потрібні. Кожен з них задає відображення якої те частини сайту. Для роботи теми необхідно всього лише 2 файли * .info, і page.tpl.php.

Давайте завершимо створення нашої теми. Заходимо в файл my_theme.info, він виглядає так:

і замініть вміст на:

Як бачите ми прибрали зайве, і змінили назву (name), і опис (description). Тепер зайдемо в «Administer> Site building> Themes», виберемо нашу тему, і збережемо. Тепер можна спокійно експериментувати -)

Давайте розберемося з файлом Page.tpl.php, і з тим як він виводить сторінку. Можна розділити весь файл на 3 частини: Шапка, вмістилище даних, і погріб, чому такі безглузді назви? Тому що більшість боїться лізти в темізаціі, а то що смішно, - вже не страшно. Розберемо шапку:
перша частина

тут теж немає нічого складного:
if ($ logo) Якщо встановлено логотип, друкуємо логотип.
if ($ site_name) Якщо задано ім'я сайту, то і його надрукуємо.
if ($ site_slogan) Якщо встановлено слоган сайту, він теж заслужив бути надрукованим.
Трохи знання англійської, і чуть чуть кмітливості, і все встає на свої місця.
if (isset ($ secondary_links)) Якщо існує меню secondary_links, друкуємо.
if (isset ($ primary_links)) Те ж саме щодо primary_links.
Виводимо форму пошуку.
А ось це дуже цікаво, виводимо регіон Header, і все що ми в нього засунули.
З шапкою ніби розібралися, перейдемо до вмістилище даних, або як його називають англомовні аборигени - Content (по правді кажучи я його і сам так часто називаю):

Вмістилище даних можна поділити на 3 частини, ліву колонку, праву колонку, і то що посередині.

if ($ left) Якщо в лівому регіоні що то є (блоки), то
Виводимо лівий регіон, це і є вся ліва колонка.

Переходимо до центру
if ($ mission) Якщо адмін ввів «Місію» сайту, друкуємо її.
Виводимо «хлібні крихти» (вони виглядають приблизно так «Home» Administer »Site building», і знаходяться у верхній частині сторінки)
Drupal - урок дев’ятий - Темізація, зробити сайт просто! Заголовок сторінки.
Виберіть (якщо звичайно є)
if ($ show_messages) Виводяться системні повідомлення.
Помошь. В основному її можна знайти в адмінці.
Регіон content.
Іконка RSS.
if ($ right) Якщо в правому регіоні що то є (блоки), то
Виводимо правий регіон.

Ось і все вмістилище даних -) Переходимо до льоху (його так само називають футером, або підвалом):

виводимо системні повідомлення внизу сторінки.
Виводимо регіон footer.
Сторінка законченна.

Ось і весь page.tpl.php, як бачите нічого складного, інші теми движка phptemplate можуть бути більше і важче, але створені за образом і подобою цієї. Ви можете вносити необхідні зміни до код, і вони після оновлення сторінки неодмінно відобразяться. Наприклад, видалимо рядок , і зайдемо в адмінку

Хлібні крихти пропали, а тепер повернемо з на місце, і допишемо за ними:

Хлібні крихти

Простір для дій величезний, хоча звичайно все основні дані про відображенні даних і їх розташуванні зберігаються в файлі style.css.
У файлі page.tpl.php можна використовувати ще і інші змінні, для того що дізнатися які змінні є в наявності, можете додати код

наприклад після рядка

Змінних буде багато, не лякайтеся, список змінних можна знайти тут.

Не бійтеся що небудь змінити, і у вас все вийде -)

Перейдемо до файлу Node.tpl.php. на цьому блозі зміни відбувалися в основному в цьому файлі.

У цій темі він досить таки простий. З цікавих змінних $ page.
if ($ page == 0) Якщо $ page дорівнює 1 (істина), то ми в режимі повного відображення матеріалу, якщо ж 0, то ми в тізері, ця строчка виводить посилання на повний матеріал, якщо ми в тізері. У змінної $ page так само є протилежна змінна $ teaser. яка істинна тільки в тізері.

Нещодавно я додав до своїх сторінок на блозі кнопки додавання статті в різні сервіси. Як це можна реалізувати тут? Код який потрібно додати виглядає так

Він однаковий для всіх сторінок, і у вас буде виглядати так само. На мою оптимальне місце для додавання, це перед виведенням $ links. і потрібно не забути що вони не повинні виводитися в тізері. Код який потрібно додати, у мене виглядає так:

тобто, якщо ми не в тізері, то виводимо кнопки.
вид зміненого файлу

перевіряємо. У тізері немає:

а на повній сторінці є.

Таким же чином можна виводити картинки, довільний текст, і все що вам захочеться. Тільки, якщо будете говорити про витоки української текст, пам'ятайте, що зберігати файл потрібно в UTF-8, інакше на виході замість букв отримаєте кракозябри.

Перше полі не тронаем, це радіус кутів, і такий піде. У другому пишемо dddddd, це колір фону, і він у нас сірий, в третьому пишемо ff3030, це колір самого блоку - червоний. Натискаємо кнопку Create RoundedCornr, і потрапляємо на другу сторінку.

Тут нас цікавлять 4 речі: як буде виглядати наш блок, HTML код, який потрібно буде вставити в файл block.tpl.php, CSS код, який потрібно буде вставити в файл style.css, і 4 картинки з кутами, їх ми закинемо в папку / sites / default / files.

Почнемо з CSS, копіюємо код, і вставляємо в самий кінець файлу style.css, при цьому потрібно чуть чуть підправити назви файлів з кутами, в оригіналі

тобто я просто додав до назви ваш_сайт / sites / default / files /, що б браузер знав де шукати куточки, це потрібно зробити в 4 місцях.
Весь CSS код
.

у вас він буде виглядати трохи інакше.

Далі, копіюємо HTML код і вставляємо в файл block.tpl.php. при цьому старе вміст файлу вставляємо замість тексту

повинно вийти приблизно так

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

Зберігаємо 4 файлик з кутами в папку / sites / default / files і оновлюємо сторінку. вуаля:

Ось ми і отримали червоні блоки, єдине що мене не влаштовує, що блоки стали червоними і в підвалі. В Drupal добре те, що можна темізіровать будь-який елемент по його id. Якщо подивитися код сторінки, то ми побачимо що id блоку navigation - block-user-1. Як відбувається побудова цього id? У файлі block.tpl.php можна це побачити.

Спочатку ставиться block- до нього додається назва модуля, а потім числовий ідентифікатор, названий delta.

Давайте зробимо копію файлу block.tpl.php, і назвемо його block-user-1.tpl.php. а потім вставимо в block.tpl.php початковий код

і оновимо сторінку

ми тільки що переопределили висновок блоку block.tpl.php, так само можна вчинити з будь-сторінкою, нодою, і тд. Наприклад, якщо ми хочемо перевизначити сторінку з нодою під номером 4, то створюємо файл page-node-4.tpl.php. а файл node-story.tpl.php перевизначити висновок всіх нод типу - story.
В принципі тут - все. Використовуючи схожий підхід, ви зможете поміняти багато в темі Drupal, або при бажанні створити свою, якщо звичайно ви наділені дизайнерськими талантами (на відміну від мене <8-D ).
Наостанок давайте створимо свій регіон. Як я вже говорив за замовчуванням їх 5, але буває ситуація, що свої блоки хочеться засунути ще куди небудь, наприклад форму пошуку вставити поруч з логотипом (хоча є змінна $ search_box, для прикладу підійде і форма пошуку). Спробуємо?
Всі нові регіони потрібно прописувати в файлі * .info, вашої теми, при цьому, якщо ви пропишете хоч 1 свій регіон, то доведеться вказати і 5 дефолтних. Діємо -)

Так виглядає наш файл після внесення змін. Як бачите, спочатку ми вписали 5 стандартних регіонів, а потім додали свій - search (ви можете назвати його по своєму), тепер давайте додамо його висновок в файл page.tpl.php, рядок яку потрібно додати виглядає так

я вставив її відразу після виведення логотипу

Природно вашу фантазію ніхто не стримує, можете виводити регіони де захочете)
Зберігаємо, і йдемо в «Administer» Site building »Blocks», есліт все зроблено правильно, то повинен з'явитися наш регіон.

Вставляємо туди блок пошуку, і отримуємо:

вот такой вот ужас. Але я сподіваюся загальний зміст зрозумілий.

На цьому урок закінчений.