Создание макета для шаблона в Joomla!

Первым делом нам понадобится страница XHTML. Допускается использования сервисов для генерации шаблонов. Примером нам послужит стандартный шаблон с футером, шапкой и двумя колонками. template 1

Следующим образом выглядит разметка HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Далее рассмотрим внешний вид файла style.css:

* {

margin: 0;

padding: 0;

}

body {

font: 12px/18px Arial, Tahoma, Verdana, sans-serif;

}

a {

color: blue;

outline: none;

text-decoration: underline;

}

a:hover {

text-decoration: none;

}

/* Begin of styles for the demonstration (you can remove them) */

a.expand {

width: 150px;

display: block;

margin: 10px 0 0;

}

a.expand:hover {

height: 500px;

}

/* End of of styles for the demonstration */

p {

margin: 0 0 18px

}

img {

border: none;

}

input {

vertical-align: middle;

}

#wrapper {

width: 100%;

min-width: 1000px;

}

/* Header

---------------------------------------*/

#header {

height: 150px;

background: #FFE680;

}

/* Middle

---------------------------------------*/

#middle {

border-left: 250px solid #B5E3FF;

border-right: 250px solid #FFACAA;

height: 1%;

position: relative;

}

#middle:after {

content: '.';

display: block;

clear: both;

visibility: hidden;

height: 0;

}

#container {

width: 100%;

float: left;

overflow: hidden;

margin-right: -100%;

}

#content {

padding: 0 20px;

}

/* Sidebar Left

---------------------------------------*/

#sideLeft {

float: left;

width: 250px;

position: relative;

background: #B5E3FF;

left: -250px;

}

/* Sidebar Right

---------------------------------------*/

#sideRight {

float: right;

margin-right: -250px;

width: 250px;

position: relative;

background: #FFACAA;

}

/* Footer

---------------------------------------*/

#footer {

height: 100px;

background: #BFF08E;

}

Обзор макета

Макет делится на локации, где в будущем выводится основной контент в виде компонента и дополнительный контент в виде модулей. template 2

Далее рассмотрим схемы вывода контента:

Контент шапки

Здесь выводится контент, заключённый между тегами <head>…</head>, заголовок всей страницы, мета описание, подключаемый JavaScript и прочее. Конструкцию будет следующей:

<jdoc:include type="head" />

Основной контент (компонент)

Конструкция для вывода основного контента конструкция выглядит так:

<jdoc:include type="component" />

Контент сообщения

Используется для отображения системных сообщений, например сообщений об ошибках. Выглядит вот так:

<jdoc:include type="message" />

Контент модулей

Для вывода содержимого модулей используем такую конструкцию:

<jdoc:include type="modules" name="position" style="xhtml" />

где name - это позиция в которой опубликованы модули, а style - стиль для вывода их позиций.

Также предусмотрен метод countModules, для подсчёта модулей.

Контент модуля

Для вывода контента определённого модуля используется такая конструкция:

<jdoc:include type="module" name="custom" title="Title for module" />

где name - это название модуля, а title - заголовок (необходимо, чтобы он совпадал с настройками модуля)

Есть возможность добавления в конструкцию дополнительных атрибутов для контроля вывода контента, например style=«xhtml».

Не забывайте проверять настройки модуля, в том числе публикацию и доступность для пользователя.

Использование параметров в шаблоне

Параметры шаблона необходимо устанавливать в xml файле описния шаблона. Чаще всего пользуются Менеджером шаблонов в админке Joomla. Использование параметров регулирует поведение шаблона, в том числе цвет фона, изображения и т.п. Чтобы получить значение параметра используем:

<?php $this->params->get('Имя параметра'); ?>

Для вывода его значения:

<?php echo $this->params->get('Имя параметра'); ?>

Все типы параметров описаны в XML файле.

Шаблон для Joomla

Учитывая эти данные необходимо переписать HTML шаблон, чтобы получить на выходе шаблон Joomla. Следующим действием мы расставим позиции модулей по их местам, подключим необходимые css стили и укажем области для вывода сообщений и компонента.

<?php

// защита от прямого доступа к файлу

defined('_JEXEC') or die;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >

<head>

<jdoc:include type="head" />

<!--[if lte IE 6]>

<![endif]-->

</head>

<body>

<?php if ($this->params->get('logo')) : ?>

<img src="/<?php echo $this->baseurl ?>/<?php echo htmlspecialchars($this->params->get('logo')); ?>" alt="MyLogo" />

<?php endif;?>

<jdoc:include type="modules" name="top" style="xhtml" />

</div>

<jdoc:include type="message" />

<jdoc:include type="component" />

</div>

</div>

<jdoc:include type="modules" name="left" style="xhtml" />

</div>

<jdoc:include type="modules" name="right" style="xhtml" />

</div>

</div>

<jdoc:include type="modules" name="footer" style="xhtml" />

</div>

</div>

</body>

</html>

Сохраним это в виде основного файла шаблона index.php. В зависимости от параметра “logo” в этом примере будет выводиться соответствующая картинка в верхней части шаблона. Свойства наподобие $this->baseurl являются стандартными свойствами Joomla, которые берутся из классов JDocumentHTML и JDocument.

Файл инструкций шаблона

Следующим шагом создаётся файл инструкций templateDetails.XML

<?xml version="1.0" encoding="utf-8"?>

<name>Mytemplate</name>

<author>SmokerMan</author>

<authorEmail>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</authorEmail>

<license>GNU General Public License version 2 or later</license>

<description>TPL_MYTEMPLATE_XML_DESCRIPTION</description>

<files>

<folder>language</folder>

<filename>index.html</filename>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

</files>

<position>right</position>

<position>footer</position>

</positions>

<language tag="ru-RU">ru-RU/ru-RU.tpl_mytemplate.ini</language>

<language tag="ru-RU">ru-RU/ru-RU.tpl_mytemplate.sys.ini</language>

</languages>

<field name="logo" type="media"

label="TPL_MYTEMPLATE_LOGO_LABEL"

description="TPL_MYTEMPLATE_FIELD_LOGO_DESC" />

</fieldset>

</fields>

</config>

</extension>

Локализация

Для локализации значений обычно используются файлы локализации. Создать их необходимо в каталоге language. Вот пример файла описаний и позиций для локализации на русский язык: language/ru-RU/ru-RU.tpl_mytemplate.sys.ini.

TPL_MYTEMPLATE_XML_DESCRIPTION="Это мой первый шаблон"

TPL_MYTEMPLATE_POSITION_TOP="Модули вверху"

TPL_MYTEMPLATE_POSITION_LEFT="Модули слева"

TPL_MYTEMPLATE_POSITION_RIGHT="Модули справа"

TPL_MYTEMPLATE_POSITION_FOOTER="Модули внизу"

В той же директории создаём файл ru-RU.tpl_mytemplate.ini. для перевода значений параметров.

TPL_MYTEMPLATE_LOGO_LABEL="Логотип"

TPL_MYTEMPLATE_FIELD_LOGO_DESC="Выберите желаемый логотип"

Конечная структура

Для запрета листинга директорий в каждой можно создать пустые файлы index.html

Рассмотрим структуру файлов для шаблона Joomla: template 3

Теперь создаём zip архив с нашими файлами и устанавливаем с помощью менеджера расширений в Joomla.