Як створити шаблон для Joomla самостійно

CMS Joomla займає друге місце за поширеністю в інтернеті. Тому багатьох цікавить питання, як створити шаблон для Joomla. Спробуємо навчитися цього.

Про Joomla

Назва CMS більше нагадує ім’я чорношкірої красуні. І це не дивно, адже воно має африканське коріння.

У перекладі з мови суахілі Joomla означає «єдність».

Joomla являє собою систему управління контентом (CMS), реалізовану на основі php і JavaScript з вбудованою підтримкою СУБД MySQL. Вона є нащадком відомого движка Mambo.

Як окрема CMS Joomla почала своє існування не так давно. Її перша версія вийшла лише в 2005 році. Останній є версія 3.3, яка вийшла в жовтні 2014.

До особливостей даної CMS можна віднести:

• Багатомовність – в базову версію движка вже включена підтримка декількох мов. З допомогою інсталяції лінгвістичних пакетів можлива реалізація інтерфейсу адміністративної та вибіркової частин Joomla на більшості існуючих мов;
• Безкоштовність – движок, як і багато шаблони для сайту Joomla, поширюється на безкоштовній основі і має повністю відкритий код;
• Легковажність – до складу інсталяційного пакета CMS входить лише мінімальний набір інструментів. По мірі необхідності він легко розширюється за допомогою установки потрібних доповнень. Завдяки цьому легко оптимізується займане ресурсом простір на хостингу і зменшується навантаження на сервер:

В основі віртуального хостингу лежить обмеження не тільки на займане ним дисковий простір. Крім цього існують обмеження на споживання потужностей серверу сайтами, розташованими на ньому.

Робота з шаблонами в Joomla

В Joomla основним засобом зміни зовнішнього вигляду сайту є шаблон. Він виступає свого роду кістяком, на якому кріпляться всі інші модулі розширення. До особливостей даної CMS також належить можливість установки шаблонів не тільки для фронтальної частини сайту, але і для адміністративної.

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

Вони можуть розповсюджуватися як на платній, так і на безкоштовній основі. Движок є системою управління контентом з відкритим кодом. Тому створити шаблон Joomla можна і самостійно:

Додатково в панелі адміністрування налаштовується стиль відображення кожної з тем. Ця можливість доступна через вкладку «Параметри» в «Менеджері шаблонів»:

Після натискання на ім’я шаблону в списку відкривається нове вікно. З його допомогою інтерфейсу можливе часткове редагування шаблону Joomla.

Ще однією унікальною можливістю даного движка є використання для оформлення відразу декількох шаблонів. Тобто для пунктів одного меню можна використовувати кілька тем:

Для зміни коду сторінок теми в «Менеджері шаблонів» потрібно перейти на вкладку «Шаблони». У списку нижче вибрати потрібний елемент і натиснути на посилання «Параметри»:

На наступній сторінці вибираємо файл для редагування. Після натискання посилання з ім’ям файлу у вікні редактора шаблонів Joomla відображається код обраної сторінки:

Установка нового шаблону

Для установки нового шаблону до адміністративної частини Joomla використовується «Менеджер розширень». Він доступний через однойменний пункт в панелі управління. У його розділі видно кілька вкладок. Мають досвід роботи з админками CMS поле «Пошук» може ввести в деякий оману.

Поле служить не для пошуку нових розширень в інтернеті. Сторінка дозволяє знайти потрібний модуль серед вже завантажених встановлених в CMS.

Але нас цікавить вкладка «Установка». Після переходу в даний розділ потрібно вибрати один із трьох варіантів, як поставити шаблон на Joomla. Точніше, потрібно встановити місце знаходження інсталяційного пакету:

• Файлова система;
• Каталог CMS;
• Шлях URL.

У разі вдалої установки вгорі з’явиться відповідне системне повідомлення:

Тепер, якщо пройти в «Менеджер шаблонів», то в списку встановлених тем можна побачити новий елемент:

Створення шаблону

Перед тим, як змінити шаблон Joomla або створити новий, потрібно визначитися з його складом. Обов’язковими файлами є:

• index.php – відповідає за генерацію сторінок;
• templateDetails.xml – в цьому файлі міститься опис самого шаблону у форматі xml. В його полях зберігаються метадані про автора, версії розширення і інші значення. Всі ці параметри будуть використані системою при роботі сайту.

Теми Joomla зберігаються в директорії templates. Створимо в ній папку під назвою «test». Тут будуть зберігатися всі файли майбутнього шаблону. Всередині цієї папки створимо ще одну папку з ім’ям css. Тут будуть розміщені всі файли стилів.

Для прикладу візьмемо вже зверстану сторінку html з наступним кодом:

Документ без назви
* {
margin:0;
}
body {
height: 100%;
min-width:900px;
font-family:Cambria, «Times New Roman’, serif;
background:#C0C0C0;
font-size:36px;
}
html {
position:relative;
min-height:100%;
}
#header {
height:100px;
background:#0080FF;
color:#fff;
padding-top:10px;
}
#content {
padding-top:20px;
padding-bottom: 100px;
}
#footer {
height: 50px;
padding-top:10px;
background:#0000A0;
position: absolute;
bottom: 0;
width: 100%;
}
#header .in_header {
width:800px;
margin:auto;
}
#content .in_content {
width:800px;
margin:auto;
}
#footer .in_footer {
width:800px;
margin:auto;
}

Заголовок

Контент

Підвал

Перед тим, як редагувати шаблон Joomla далі, весь css потрібно перенести в файл style.css і зберегти його в папці «css». Код файлу залишиться без змін.

Тепер створюємо xml опис шаблону. У ньому задаються значення тих параметрів, які відображаються в «Менеджері шаблонів». Вміст файлу templateDetails.xml:

Test
1 May 2014
Man
avtor.mail.ru
http://www.avtor.ru
Copyright (C) 2005 — 2014 Open Source Matters, Inc. All rights reserved.
GNU General Public License version 2 або пізнішої версії
1.6.0
TPL_TEST_XML_DESCRIPTION
css
index.html
index.php
templateDetails.xml
top
footer

Загальні опису кожної з груп параметрів подано в коментарях. Більш докладну інформацію про значення конкретного поля можна отримати в технічній документації до CMS Joomla.

Але це ще не все. До того, як зробимо шаблон для Joomla, залишилося пару кроків. Тепер потрібно створити файл index.php. Ось його код:

params->get(‘logo’)) : ?>

Заголовок

Підвал

Розберемося з кодом:

• рядок виводить вміст заголовка;
• виводить вміст блоку;
• виводить блок, позиція якого вказана в значенні атрибута name. У полі name встановлюється один з вбудованих стилів (xhtml, rounded, outline та інші);
• у разі помилок з’являється системне повідомлення.

Тепер додамо по порожньому файлу index.html у кожну папку. Вони потрібні для заборони лістингу між директоріями. Залишилося лише створити архів з усіма файлами шаблону і встановити його через Менеджер розширень». Після інсталяції його ім’я буде відображено у списку «Менеджер розширень»:

Альтернатива

Створити шаблон для Joomla самостійно досить складно. Тому в якості альтернативи слід розглянути інші рішення.

Насправді альтернативних рішень не так вже й багато. Після довгих пошуків в інтернеті вдасться натрапити лише на кілька можливих варіантів. Наведемо їх короткий огляд:

• datsko.it – авторський проект. Автор постійно працює над удосконаленням свого дітища. Хочеться відзначити зрозумілий і простий інтерфейс без набридливої реклами. А також цілком гідний генерований код, який видає цей конструктор шаблонів Joomla:



• cooltemplate.com – ще один генератор. Має англомовний інтерфейс і інструментарієм. Згенеровані ним шаблони потребують певної доробки:



• TemplateToaster – додаток, з яким можна безкоштовно ознайомитися протягом пробного періоду. Воно дозволяє створювати шаблони для декількох популярних CMS. Має наворочений візуальний редактор з можливістю перегляду створеного шаблону в різних браузерах без участі локального сервера.

Але не варто сильно розраховувати на програми для створення шаблонів Joomla. Як показує практика, згенерований код ними потребує серйозного доведення. Тому знання веб-програмування, css і html усе одно будуть потрібні. Так що можна навчитися розробляти шаблони самому або почекати, поки програми стануть більш досконалими. А коли це буде, ні один африканський чаклун не передбачить.