В 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>admin@alexalex.ru</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 шаблон и устанавливать на сайт готовый шаблон уже имея в нем изменения внешнего вида для каких-то модулей.