Четверг, 18 декабря 2014 23:00

Создание шаблона Joomla для front-end разработчика

Автор 


Слово Jumla на языке суахили означает «все вместе», «как одно целое». Для общего представления основные понятия этой 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>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 шаблон и устанавливать на сайт готовый шаблон уже имея в нем изменения внешнего вида для каких-то модулей.

http://habrahabr.ru/post/246061/

Авторизуйтесь, чтобы комментировать