Дизайн шаблону Joomla для front-end розробника зовсім незнайомого з CMS


Слово Jumla мовою суахілі означає «всі разом», «як одне ціле».

Колись давно, досить довгий час я верстав сайти на HTML/CSS/JavsScript і не мав жодного уявлення про CMS.
Страшним моментом було те, що як я вважав володіння PHP є вкрай необхідним, однак за фактом якихось базових знань виявилося достатньо (простий код виявляється зрозумілий програмісту будь-якої іншої мови, а лізти в нетрі не обов'язково).
Для людини, що володіє тільки версткою і скриптами, досить достатньо знати якісь певні моменти, для того, щоб з ходу приступити до роботи з Joomla.
Щось в цих моментах схоже з іншими CMS, що відрізняється.
Постарався викласти ці моменти коротко. Якщо б вони мені були відомі відразу, то зміг би почати створювати адміністровані користувачами сайти набагато швидше.
Отже, якщо ви володієте HTML, але не маєте уяви про CMS Joomla, то вам слід натиснути кнопку нижче.

Для загального уявлення основні поняття цієї CMS:
Шаблон/Template — сукупність папок/файлів, що визначають компонування і дизайн сторінок сайту. На одному сайту можна мати безліч встановлених шаблонів. Таким чином можна змінювати дизайн сайту за лічені секунди, переключивши з одного шаблону на інший.
В HTML шаблону визначені області сторінки (як правило, це div блоки), у яких виводиться певна вміст. Наприклад, як правило, в центральній області відображається вміст сторінки. Власник/автор сайту буде мати можливість створювати статті-артикули з допомогою вбудованого редактора WYSIWYG, які і будуть відображатись в цій області.
Також в HTML шаблоні можуть бути визначені області для відображення різних об'єктів.
Як правило, це такі області як: шапка документа (те, що завжди відображається вгорі), підвал (що відображається внизу), область меню, якісь області з боків. Тут вже все залежить від побажань автора шаблону. Ці галузі називають позиціями.
У шаблону є й інші функції, які будуть описані далі.
Модуль/Module — об'єкт з HTML/PHP/CSS/JavaScript кодом, який може бути відображений у певних відведених для цього місцях сторінки. Приклад типових моделей: перемикач мови сайту, блок авторизації на сайті, рядок з пошуком по сайту, голосування і т. п.
Додаток/Plugin — це об'єкт з HTML/PHP/CSS/JavaScript кодом, який може бути вбудований всередину вмісту сторінки. Відміну від модуля тільки в місці відображення на сторінці. Автор артикулу, при роботі в редактором WYSIWYG буде мати можливість вставити певний код (подібний HTML коду). На самому сайті цей код буде замінений на подібний об'єкт модулю.
Компонент/Component — глобальний об'єкт, який має безліч налаштувань. Як правило, на додачу до компоненту йдуть і модулі і плагіни. Для прикладу компонентом може бути гостьова книга, інтернет-магазин, форум. Всі ці об'єкти мають безліч настроювань і можуть виводиться окремою сторінкою.
WYSIWYG редактор — текстовий онлайн редактор (what you see is what you get). З допомогою спрощеної панелі, схожою на панель Microsoft Word або WordPad можна створювати статті, які редактор автоматично перетворює в код HTML.

І модулі і плагіни та компоненти це розширення/extensions. З допомогою розширень, встановивши саму CMS, ви можете зробити з сайту і інтернет магазин і блог і форум і що ваша душа забажає.
Все розширення надаються у вигляді zip-архіву, який можна завантажити/інсталювати на сайт через адміністративну панель.
Основним каталогом розширень є каталог офіційного сайту Joomla http://extensions.joomla.org/
Викачавши з нього можна бути з певною часткою впевненості, що розширення не містить шкідливого або рекламного коду. Принаймні, хотілося б вірити, що всі подібні розширення своєчасно безжально видаляються з каталогу. Я, як і багато, волію популярні, а відповідно перевірені розширення, так як їх розробники цінують свою репутацію.
Сама CMS розвивається і за час свого розвитку проходила через етапи глобальних змін, які виразилися в тому, що на даний момент є декілька версій системи. Це версія 1,5 версія 2,5 і версія 3.x (3.x означає, що версії лінійки 3 сумісні між собою — 3.1 3.2 і 3.3)
Якщо у вас сайт на версії Joomla 2.5 то вам підійдуть тільки розширення від цієї версії, тобто розширення різних версій несумісні.

Як встановлювати розширення і робити налаштування розглядати я не буду. З цим розбереться і тлумачний школяр і людина далека від IT. Мені більше цікаві моменти розробки і редагування шаблона і розширення, а також зміни дизайну сторонніх розширень.
Ви можете знайти сотні, а то й тисячі платних і безкоштовних шаблонів з готовим дизайном і змінити їх на свій смак, але найчастіше в них міститься безліч абсолютно непотрібних для вас функцій. Більш професійним підходом буде створити свій власний шаблон.
Заготівку з пустого шаблону цілком можна знайти в мережі, а можна і створити з нуля.
Шаблон являє собою папку, за архивированную в архів формату zip.

Необхідними для папки є файли:
index.php — основний файл, який буде описувати саму структуру та дизайн сторінки
component.php — відображення сторінки в прийнятному для принтера вигляді
error.php — подання для сторінки 404
favicon.ico — іконка для нашого сайту
template_preview.png та template_thumbnail.png — картинки попереднього перегляду шаблону
templateDetails.xml — файл в якому міститься опис шаблону.
Для зручності структуризації всередині папки знаходяться також підпапки з зрозумілими назвами:
css — для стилів
images — для зображень
js — для скриптів
language — для ini файлів з перекладом текстів на різні мови.
Зверніть увагу, що з міркувань безпеки, у кожній папці обов'язково повинен знаходиться порожній файл index.html
У папці шаблону може бути присутнім і папка html. У цій папці містяться зміни зовнішнього вигляду для будь-яких компонентів Joomla — так звані перевизначення.
В цілому структура шаблону залишається незмінною для версій Joomla 1.5, 2.5 і 3.x

Розглянемо вміст спрощеного варіанту templateDetails.xml
Після шапки
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

слід основною тег:
<extension version="2.5" type="template" client="site">

Далі шапка з описом шаблону:
<name>blanktemplate</name><!--ім'я вашого шаблону -->
<creationDate>2014-12-20</creationDate><!--дата шаблону -->
<author>your name</author><!--ім'я розробника-->
<copyright>Copyright © 2014 alexalex.ua</copyright><!--автор шаблону-->
<authorEmail>admin@alexalex.ru</authorEmail><!-- ваш e-mail -->
<authorUrl>http://www.alexalex.ua</authorUrl><!-- ваш сайт -->
<version>1.0.0</version><!--номер версії шаблону -->

Далі, як правило, йде опис шаблону, яке можна оформити за допомогою HTML:
<description><![CDATA[ 
<h1> Мій шаблон </h1>
<p>Створено <a href="http://www.alexalex.ua" target="_blank">Це найпростіший з шаблонів!</a>.</p>
]]></description>

Всі файли, необхідні для шаблону необхідно описати в templateDetails.xml
<files>
<folder>css</folder>
<folder>images</folder>
<folder>js</folder>
<folder>language</folder>
<filename>component.php</filename>
<filename>error.php</filename>
<filename>index.php</filename>
<filename>index.html</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
</files>

Якщо ви не забули, то сторінка нашого сайту буде розбита на частини — позиції.
Позиції, як правило, розташовані всередині div-блоків. Приклад того, як можуть бути розташовані позиції з сайту joomla.org:

Ці позиції теж потрібно вказати в описі шаблону. Кількість позицій за вашим бажанням. Назви ви можете придумати свої, а можете слідувати стандартним назвам:
<positions>
<position>top</position>
<position>footer</position>
<position>debug</position>
</positions>

Якщо у вас багатомовний сайт, то вам необхідно описати і використовувані вами мови
<languages folder="language">
<language tag="en-GB">en-GB/en-GB.tpl_blanktemplate.ini</language>
<language tag="ru-UA">uk-ua/uk-ua.tpl_blanktemplate.ini</language>
</languages>

Це опис має на увазі, що всередині папки language у вас знаходяться 2 підпапки en-GB і ru-RU в яких містяться файли з перекладами. Ці файли містять текст у вигляді «КЛЮЧ=значення». Причому ім'я ключа обов'язково повинно бути набрано великими літерами.
Наприклад:
DEMOTEXT=«Приклад тексту»

Також в шаблоні можна описати різні перемикачі для зміни налаштувань шаблону, які зможе змінювати простий користувач або адміністратор сайту (програміст). На сайті перемикачі виглядають подібно наступним:

Для прикладу розглянемо можливість задати якийсь колір. Створимо один з перемикачів. Для цього додамо такий кусок коду:
<config>
<fields name="params">
<fieldset name="basic">
<field name="templateBGColor" class="" type="color" default="#FFFFFF"
label="Колір тла теми" description="Це колір фону сторінки" />
</fieldset>
</fields>
</config>

Значення цього кольору можна буде вивести на сторінці. Як це зробити читайте далі.

Розглянемо тепер файл index.php і постараємося зробити яку-небудь компонування.
В початок файлу додамо код php:
<?php defined( '_JEXEC' ) or die; // цей рядок з міркувань безпеки забороняє прямий доступ

$doc = JFactory::getDocument(); // змінна, яка зберігає посилання на документ
$tpath = $this->baseurl.'/templates/'.$this->template; // змінна з відносним адресою шаблону

// додаємо стиль css за допомогою такої конструкції
$doc->addStyleSheet($tpath.'/css/template.css.php');

// додаємо javasript
$doc->addScript($tpath."/js/custom.js");

?>

Далі стандартна «шапка» сторінок:
<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">

<head>
<jdoc:include type="head" />
</head>

Тут <jdoc:include type=«head» /> додасть типові для «шапки» теги в заголовок. Такі, наприклад, як: мета-теги з описом, ключові слова, якісь інші підключаються розширеннями файли, скрипти і стилі та ін

В наш тег body ми додамо значення стилю висновок кольори нашого перемикача, для того, щоб адміністратори сайту, незнайомі з css, могли з адмінки змінити колір фону сторінки:
<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">

Далі можемо верстати наш шаблон на div-ах.
Висновок позиції всередині div або семантичного блоку HTML5 буде таким:
<div> 
<?php if ($this->countModules( 'footer' )) : ?>
<jdoc:include type="modules" name="footer" /> 
<?php endif; ?>
</div>

Даний код перевіряє, чи має який-небудь модуль бути відображений в даній позиції footer, і в разі, якщо має бути — виводить на екран вміст модуля. Звичайно ж, можна не здійснювати перевірку, а просто відобразити в будь-якому випадку:
<jdoc:include type="modules" name="footer" /> 

Для відображення іншої позиції необхідно тільки замінити footer на назву іншої позиції.

Для виведення основного вмісту сторінки використовуються теги:
<jdoc:include type="message" />
<jdoc:include type="component" />

Також помістимо їх усередині потрібного div.

Як приклад оформлення шаблону наведу кілька прикладів:
Якщо ви не забули (а якщо забули, то поверніться на пару абзаців вгору) — у нас є 2 папки en-GB і ru-RU з файлами перекладу. В них ми внесли для прикладу текст на двох мовах. Цей текст у нас позначений кодовим словом DEMOTEXT. Відобразити цей текст ми можемо з допомогою php коду:
<?php echo JText::_( 'DEMOTEXT' ) ?>

Причому, цей текст можна вставляти й значення параметра (наприклад title або alt) і як вміст параграфів і навіть в url посилань.

Картинки в шаблоні знаходяться, як правило, в директорії images. Для того, щоб відобразити картинку, скористаємося також невеликим кодом php який виведе шлях до теки, в якій знаходиться наш шаблон
<?php echo $tpath; ?>

Змінну $tpath ми оголошували в самому початку сторінки, а в якій папці шаблону знаходиться картинка ми знаємо.
Приклад виводу зображення логотипу:
<img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="sayHelloHabr()">

Тут onclick=«sayHelloHabr()» запустить функцію з файлу custom.js який ми підключали в якості зовнішнього файлу зі скриптами.

Повний код нашої простенького шаблону:
<?php defined( '_JEXEC' ) or die; // цей рядок з міркувань безпеки забороняє прямий доступ

$doc = JFactory::getDocument(); // змінна, яка зберігає посилання на документ
$tpath = $this->baseurl.'/templates/'.$this->template; // змінна з відносним адресою шаблону

// додаємо стиль css
$doc->addStyleSheet($tpath.'/css/template.css.php');

// додаємо javasript
$doc->addScript($tpath."/js/custom.js");

?>

<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">

<head>
<jdoc:include type="head" />
</head>

<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">

<p><?php echo JText::_( 'DEMOTEXT' ) ?></p>

<header class="header">

<img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="sayHelloHabr()">

<nav class="navtop" role="navigation"> 
<?php if ($this->countModules( 'top' )) : ?>
<div class="top">
<jdoc:include type="modules" name="top" /> 
</div>
<?php endif; ?> 
</nav>

</header>

<main class="content"> 
<jdoc:include type="message" />
<jdoc:include type="component" /> 
</main>

<footer class="footer"> 
<?php if ($this->countModules( 'footer' )) : ?>
<jdoc:include type="modules" name="footer" /> 
<?php endif; ?>
</footer>

<jdoc:include type="modules" name="debug" />

</body>
</html>

Що вийшло в підсумку можна завантажити за посиланням — простенький шаблон.
Зробити гарний дизайн навіть для верстальника, не кажучи вже про front-end розробника не проблема.

Шаблон сайту, по суті, є поданням з шаблону MVC (model-view-controller = модель-представлення-контролер). Тобто це та частина, яка відповідає за виведення інформації і дизайн. Більшість модулів і компонентів слідують цим же принципом.
Якщо необхідно змінити зовнішній вигляд будь-якого модуля, то можна взяти його подання та змінити код HTML під свої потреби.
Найчастіше, код модулів оновлюється. Усуваються якісь помилки. Для того, щоб після кожного оновлення модуля не змінювати вид представлення, можна створити перевизначення/override. Це файл або файли, які будуть знаходиться в папці шаблону і будуть визначати зовнішній вигляд модуля.
Зробити це можна в адміністративній панелі по дорозі:
Extensions — Template manager — Templates (Розширення — Менеджер шаблонів — Шаблони)
— натискаємо на наш шаблон (потрапляємо в онлайн редактор нашого шаблону) і переходимо на закладку Create Overrides (Створити перевизначення)
Створивши перевизначення, ми зможемо побачити, що в папку html будуть додані файли або папки. Можна помістити папку html з цими файлами відразу в наш zip шаблон і встановлювати на сайт готовий шаблон вже маючи в ньому зміни зовнішнього вигляду для якихось модулів.

Спробуйте створити свій шаблон для сайту і в разі успіху ви зможете так само легко редагувати подання, а там рукою і до створення різних модулів або плагінів недалеко!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.