Перед створенням нового, власного, шаблону, необхідно зрозуміти його структуру, з чого складається шаблон. Розбирати складу шаблону ми будемо на основі демонстраційного шаблону, тому рекомендується всім читачам завантажити цей шаблон - набагато простіше розібратися з шаблоном, маючи приклад під рукою.
Демонстраційний шаблон упакований в архів. Тут зробимо невеликий ліричний відступ: в Joomla! будь-який компонент, модуль або шаблон перед установкою повинні бути архівовані в zip-архів. Не питайте мене чому. Пропонуємо вам розпакувати архів з шаблоном. З'явиться папка з назвою шаблону (наприклад, rd_demotemplate), в якій знаходяться всі важливі файли шаблону або, іншими словами, в цій папці знаходиться сам шаблон.
Після установки Joomla. ви напевно помітили серед інших папок папку / templates. Саме в цій папці зберігаються всі встановлені шаблони. У стандартній комплектації Joomla! встановлюється з двома шаблонами - madeyourweb і rhuk_solarflare_ii. Після установки системи, папка / templates виглядає так:
Зверніть увагу, що назва папки шаблону повинно мати таку ж назву, як і у самого шаблону, а також не повинно містити пробіли. Іноді в назву шаблону додають ініціали або ім'я дизайнера, наприклад: rhuk_solarflare.
Тепер перейдемо до вивчення безпосередньо самого шаблону. Відкрийте папку rhuk_solarflare_ii і зверніть увагу на файли templateDetails.xml і index.php.
Можна сказати, це найбільш важливі файли шаблону, тому вони завжди повинні знаходиться в основній папці шаблону.
index.php - Розмітка шаблону. Містить код оформлення, параметри виведення компонентів і модулів. (X) HTML і PHP.
Крім перерахованих вище файлів, до складу шаблону також входять: скріншот шаблону. файли css. зображення.
Щоб встановити шаблон, зайдіть в "Панелі управління" сайту -> "Установка / видалення" -> "Шаблони сайту" і вкажіть zip-архів з шаблоном.
Крім автоматичної установки, ви можете встановити шаблон вручну. Досить розпакувати архів, і розпаковану папку з шаблоном скопіювати в папку / templates вашого сайту.
templateDetails.xml
Приклад templateDetails.xml звичайного шаблону:
А тепер розглянемо кожну строчку файлу:
- mosinstall - Містить інформацію про встановлення шаблону. Параметр type = "template" вказує, що встановлюється шаблон.
name: - Ім'я шаблону. В процесі установки буде створена папка з ідентичним ім'ям, тому в назві шаблону можна використовувати прогалини.
Саме цей файл визначає розмітку шаблона і відповідає за виведення компонентів / модулів на екран. Саме в цьому файлі нам доведеться проводити більшу частину часу створення шаблону. І саме цей файл відповідає за відповідність шаблону стандартам W3C. Гаразд, пора переходити до вивчення цього файлу. Перш за все, для кожного шаблону необхідно визначити DOCTYPE. тег повідомляє браузеру про тип поточного документа і як його інтерпретувати. Розрізняють декілька версій і типів (X) HTML-документів. Тип нашого шаблону - XHTML 1.0 Transitional.
Крім версії XHTML Transitional. існує версія Strict. Знову ж при описі відмінностей між цими двома версіями все впирається в стандарти W3C.
- XHTML 1.0 Strict використовується в тому випадку, якщо в документі йде чітке розділення оформлення і змісту. При цьому код веб-сторінки містить тільки теги розмітки, а сам вид елементів задається через стилі.
- XHTML 1.0 Transitional зазвичай застосовується, коли правило поділу оформлення та змісту виконується не повною мірою. У цьому випадку допускається в коді документа використовувати теги фізичного проектування (наприклад, тег ) І лише частково стилі.
Що ще знаходиться в index.php?
Добре, з визначенням DOCTYPE ми розібралися, тому в наступному коді визначення типу документа я опущу. Всі нормальні шаблони складаються з двох головних частин: заголовка (
) І тіла документа ( ). Розділ заголовка може містити текст і теги, але вміст цього розділу не показується безпосередньо на сторінці. Тепер розберемо на прикладі нашого шаблону. Погляньте на код:І знову, як у випадку з templateDetails.xml, я розшифрую кожен рядок вищенаведеного коду:
Цей рядок повідомляє браузеру, яка кодування використовується на сайті. Якщо вказівка кодування відсутня, браузер намагається сам визначити, який тип символів використовується в документі і вибирає необхідне кодування автоматично. Браузер не завжди може точно розпізнати мову веб-сторінки і в деяких випадках пропонує в'єтнамську кодування замість кирилиці. З цієї причини краще завжди вказувати наведену рядок.
Підставляє в веб-сторінку метатеги. Метатеги використовуються для зберігання інформації призначеною для браузерів і пошукових систем. Наприклад, механізми пошукових систем звертаються до метатегах для отримання опису сайту, ключових слів та інших даних. Дані для формування метатегов беруться з глобальної конфігурації сайту. Включає в себе наступні поля:
Підключення іншого css-файлу
Для підключення таблиці пов'язаних стилів використовується тег в заголовку сторінки шаблону Joomla. Шлях до файлу зі стилями може бути як відносним, так і абсолютним. У нашому випадку використовується відносний шлях до файлу. Конструкція повертає в документ назву поточного шаблону Joomla сайту, а вірніше - назва папки з шаблоном Joomla.
Переваги підключення окремого файлу стилів:
- Використовується один файл зі стилем
- Можна змінювати таблицю стилів без модифікації index.php
- При зміні стилю в одному єдиному файлі, стиль автоматично застосовується до всіх відповідних елементів.
- Файл із стилем при першому завантаженні поміщається в кеш на локальному комп'ютері, тому завантаження сайту відбувається швидше.
Висновок вмісту через index.php
Цей файл призначений не тільки для виведення мета-інформації і визначення типу шаблону Joomla. Головне призначення index.php - висновок вмісту (новин, модулів і т.д.). В Joomla! вже є всі необхідні команди виведення вмісту, їх потрібно тільки вставити в потрібне місце шаблону. Нижче наведені найосновніші коди шаблони Joomla 1.0.x.
Розглянемо їх по порядку:
- Виводить назву сайту в будь-якому місці шаблона.
- Pathway. Показує, в якому розділі сайту користувач знаходиться.
- Висновок модулів в позиції "top"
- Висновок модулів в позиції "left"
- Висновок основного вмісту - новин / компонентів і т.д.
- Висновок модулів в позиції "right"
- Footer шаблону. Дана команда підключає файл footer.php. що знаходиться в папці / includes сайту.