Дизайн шаблона 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.ru</copyright><!--автор шаблона-->
	<authorEmail>[e-mail]</authorEmail><!-- ваш e-mail -->
	<authorUrl>http://www.alexalex.ru</authorUrl><!-- ваш сайт -->
	<version>1.0.0</version><!--номер версии шаблона -->

Далее, как правило, идет описание шаблона, которое можно оформить с помощью HTML:

<description><![CDATA[ 
		<h1> Мой шаблон </h1>
		<p>Создано <a href="http://www.alexalex.ru" 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-RU">ru-RU/ru-RU.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 шаблон и устанавливать на сайт готовый шаблон уже имея в нем изменения внешнего вида для каких-то модулей.

Попробуйте создать свой шаблон для сайта и в случае удачи вы сможете так же легко редактировать представления, а там рукой и до создания различных модулей или плагинов недалеко!