Від автора: вітаю Вас, шановні читачі. Будь-який хороший сайт, повинен бути не тільки привабливим і зручно-читати, але ще й обов’язково унікальним у плані зовнішнього вигляду. Тому в даній статті ми з Вами поговоримо про таку тему, як створення шаблону для joomla 3 з абсолютного нуля.
Як Ви знаєте, дизайн сайту, тобто його зовнішній вигляд, формується в шаблоні, але Ви повинні розуміти, що шаблон визначає основну структуру сайту, або якщо сказати трохи інакше, визначає його каркас. Наприклад, скільки буде колонок, як і де буде відображатися основний контент, які стилі і скрипти потрібно підключити і т. д. Зовнішній вигляд вмісту визначається в елементах, які створюють цей контент. Тобто зовнішній вигляд матеріалів визначається в компоненті com_content, зовнішній вигляд модулів – формується безпосередньо в їх макетах і т. д. Але при цьому, у шаблоні Ви можете перевизначити, або замінити, макети відображення вмісту компонентів і модулів, таким чином змінивши дизайн відображення даних.
В даний час створено величезну кількість різних шаблонів як платних, так і безкоштовних, але найчастіше знайти ідеально підходить для конкретного проекту шаблон, дуже складно. Тому, доводиться шукати найбільш підходящий, а потім вносити код зміни і дана ситуація так само буває і з платними варіантами. Тому найкраще рішення – це створення шаблону для joomla самостійно з абсолютного нуля. Звичайно дана задача не з легких, тому що вимагає знання пристрою шаблонів, але цілком здійсненне і в даній статті я постараюся привести основи по даній темі. Чому основи запитаєте Ви? Бо як шаблон невеликого сайту досить об’ємний, що вимагає часу на його розробку і тим більше пояснення. Більш детальну інформацію по створенню шаблонів Ви знайдете в нашому курсі Joomla-Майстер. З нуля до преміум шаблону.
Отже, для початку давайте розглянемо HTML шаблон, який буде використовуватися для даного уроку.
При цьому його файлова структура наступна:
Відповідно створюємо в зручному місці Вашого комп’ютера папку для первісної розробки шаблону Joomla і копіюємо файлову структуру HTML шаблону. Тобто, як кажуть початок покладено.
Далі створимо спеціальний інсталяційний файл формату .xml який буде містити в собі інструкції з встановлення майбутнього шаблону. Даний файл ще називають “маніфест-файл” і будь-яке встановлюється розширення повинно містити його в своїй структурі, безпосередньо в корені. Ім’я даного файла templateDetails.xml і для початку додамо з нього наступний фрагмент коду:
design_studio
1.0.0
27.06.2016
Viktor
[email protected]
http://webformyself.com
Copyright (C) design_studio
License Information
TPL_DESIGN_STUDIO_DESCRIPTION
Даний блок коду – несе описовий характер, тому що визначає ім’я шаблону, його розробника і т. д. Використовуються теги:
name — ім’я шаблону;
version – версія розробки;
creationDate – дата створення;
author – ім’я автора;
authorMail – поштову скриньку автора;
authorUrl – шлях до сайту розробника;
copyright – інформація за копирайтам;
license – інформація про ліцензії, за якою поширюється даний шаблон;
description – короткий опис шаблону. Зверніть увагу .що значення даного тега ,використовується спеціальна мовна константа, значення якої буде описано далі у визначеному файлі.
Далі, додамо до файлової структурі майбутнього шаблону, кілька елементів. Зверніть увагу, що створені каталоги не повинні бути порожніми. Якщо на перших порах, Ви не додаєте файли, то створіть порожній файл, наприклад index.html і помістіть його у всі порожні папки, щоб уникнути помилок установки.
Тепер хотів би пояснити, для чого потрібні тільки що створені елементи:
html – каталог зберігання переопределений макетів різних розширень Joomla. Як я говорив вище, шаблон визначає тільки основну структуру сайту, весь контент формується у видах компонентів і модулів.
language – каталог зберігання доступних локалізацій шаблону.
index.php – основний логічний файл шаблону, де буде прописана його структура.
template_preview.png – скріншот шаблону. Даний скріншот показує зовнішній вигляд шаблону і буде доступний в панелі адміністратора, після установки.
template_thumbnail.png – зменшена копія скріншота – буде відображатися у менеджері шаблонів, як мініатюра, поруч з назвою шаблону.
Далі додамо додатковий блок коду в інсталяційний файл.
css
images
html
language
index.html
index.php
templateDetails.xml
template_thumbnail.png
template_preview.png
Зверніть увагу, що весь доданий код обгорнутий тегом files, тобто даний код містить інформацію про те, які файли і каталоги будуть скопійовані в папку шаблону при установці в CMS Joomla. Відповідно тег визначає ім’я копіюється папки, а — ім’я копируемого файлу. При цьому зазначається інформація тільки верхнього рівня, вкладені файли та папки, які будуть автоматично скопійовані.
Далі, додамо інформацію про підтримувані локалізаціях, тобто іншими словами вкажемо файли, в яких будуть міститися значення для використовуваних мовних констант.
uk-ua/uk-ua.tpl_design_studio.ini
uk-ua/uk-ua.tpl_design_studio.sys.ini
Інформація про доступні локалізаціях прописується в блоці , тобто даний блок містить шляхи до так званих файлів словників. Чому їх називають файлами словниками, запитаєте Ви. Тому як вони містять значення для мовних констант, тобто як би переклади. Зверніть увагу, що разом з нею, я вказав атрибут folder, в якому прописано ім’я каталогу з локалізаціями.
В Joomla, використовується два види файлів для здійснення переказу: звичайні файли формату .ini файли sys.ini. Перші містять дані про переведення форм, налаштувань або будь-які інші рядки, які потрібно перекласти певну мову. Файли sys.ini використовуються для відображення опису розширень під час установки або в менеджерах (шаблонів, компонентів тощо). Таким чином, для однієї мови локалізації потрібні два вищевказаних файлу, і шляхи до них прописуються в тегу . Даний тег використовується разом з атрибутом tag, в якому вказується код мови конкретної локалізації.
Тепер необхідно створити зазначені вище файли словники в каталозі language.
Тепер давайте додамо вміст цих файлів. Файл ru-RU.tpl_design_studio.ini, тобто звичайний файл словників, необхідно додати переклад константи TPL_DESIGN_STUDIO_DESCRIPTION щоб короткий опис відображалося у налаштуваннях шаблону.
TPL_DESIGN_STUDIO_DESCRIPTION=”
Студія дизайну
Опис шаблону
”
При цьому, в якості значення, звичайно ж, використовується значення рядка, при цьому допускається використання тегів мови HTML.
Файл ru-RU.tpl_design_studio.sys.ini крім значення константи описаної вище, необхідно додати переклад назви шаблону, тобто значення константи DESIGN_STUDIO
DESIGN_STUDIO=”Студія дизайну”
TPL_DESIGN_STUDIO_DESCRIPTION=”
Студія дизайну
Опис шаблону
”
Для додавання підтримки додаткових мов, необхідно аналогічно створити каталог з двома файлами словниками і в блоці вказати шлях до них.
І останнє, що ми повинні вказати в інсталяційному файлі – це інформація про доступні позиціях шаблону, де можуть відображатися модулі Joomla. А значить, давайте розділимо шаблон на кілька позицій.
Таким чином, нам потрібно зарезервувати п’ять позицій:
навігація;
шапка сайту;
верхній блок контенту;
ліва бічна колонка;
нижній підвал, або футер.
Область для відображення основного вмісту ми до позицій модулів не прив’язуємо. Після цього додамо наступний код в інсталяційний файл:
position-0
position-1
position-2
position-3
position-4
Тобто доступні позиції, прописуються в блоці , при цьому ім’я окремої позиції, зазначено в тегу . Після цього в файл ru-RU.tpl_design_studio.sys.ini додамо переклади імен позицій.
TPL_DESIGN_STUDIO_POSITION_POSITION-0=”Навігація”
TPL_DESIGN_STUDIO_POSITION_POSITION-1=”Шапка сайту”
TPL_DESIGN_STUDIO_POSITION_POSITION-2=”Верхній блок контенту”
TPL_DESIGN_STUDIO_POSITION_POSITION-3=”Ліва бічна колонка”
TPL_DESIGN_STUDIO_POSITION_POSITION-4=”Футер”
Ім’я константи, формується наступним чином: префікс TPL_, далі вказуємо ім’я шаблону DESIGN_STUDIO, далі рядок _POSITION_ і нарешті, ім’я певної позиції у верхньому регістрі. Таким чином, установчий файл завершений, а значить наведу його повний код.
design_studio
1.0.0
27.06.2016
Viktor
[email protected]
http://webformyself.com
Copyright (C) design_studio
License Information
TPL_DESIGN_STUDIO_DESCRIPTION
css
images
html
language
index.html
index.php
templateDetails.xml
template_thumbnail.png
template_preview.png
position-0
position-1
position-2
position-3
position-4
uk-ua/uk-ua.tpl_design_studio.ini
uk-ua/uk-ua.tpl_design_studio.sys.ini
Тепер файлову структуру майбутнього шаблону упакуємо в архів формату .zip і встановимо стандартним спосіб в CMS Joomla.
Як Ви бачите, установка успішно завершена. На даному етапі ми з Вами зробимо перерву і продовжимо розмову по темі joomla створення шаблону з нуля в наступній статті. Всього Вам доброго і вдалого кодування!!!
