Создание макета для шаблона в Joomla!
Первым делом нам понадобится страница XHTML. Допускается использования сервисов для генерации шаблонов. Примером нам послужит стандартный шаблон с футером, шапкой и двумя колонками.
Следующим образом выглядит разметка HTML:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="title" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="/style.css" type="text/css" media="screen, projection" />
<!--[if lte IE 6]><link rel="stylesheet" href="/style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
</head>
<body>
<div id="wrapper">
<!-- #header-->
<div id="header">
</div>
<div id="middle">
<div id="container">
<div id="content">
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideLeft">
</div><!-- .sidebar#sideLeft -->
<div class="sidebar" id="sideRight">
</div><!-- .sidebar#sideRight -->
</div><!-- #middle-->
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</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;
}
Обзор макета
Макет делится на локации, где в будущем выводится основной контент в виде компонента и дополнительный контент в виде модулей.
Далее рассмотрим схемы вывода контента:
Контент шапки
Здесь выводится контент, заключённый между тегами <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" />
<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/style.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/style_ie.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- #header-->
<div id="header">
<?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>
<div id="middle">
<div id="container">
<div id="content">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div><!-- #content-->
</div><!-- #container-->
<div class="sidebar" id="sideLeft">
<jdoc:include type="modules" name="left" style="xhtml" />
</div><!-- .sidebar#sideLeft -->
<div class="sidebar" id="sideRight">
<jdoc:include type="modules" name="right" style="xhtml" />
</div><!-- .sidebar#sideRight -->
</div><!-- #middle-->
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>
Сохраним это в виде основного файла шаблона index.php. В зависимости от параметра “logo” в этом примере будет выводиться соответствующая картинка в верхней части шаблона. Свойства наподобие $this->baseurl являются стандартными свойствами Joomla, которые берутся из классов JDocumentHTML и JDocument.
Файл инструкций шаблона
Следующим шагом создаётся файл инструкций templateDetails.XML
<?xml version="1.0" encoding="utf-8"?>
<extension version="1.6" type="template" client="site">
<!-- Название шаблона -->
<name>Mytemplate</name>
<!-- Это не обязательные элементы, отображают информацию о авторе, лицензии и прочее -->
<creationDate>21 May 2010</creationDate>
<author>SmokerMan</author>
<authorEmail>Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.</authorEmail>
<authorUrl>http://www.j-wiki.ru</authorUrl>
<copyright>Copyright (C) 2005 - 2011 Open Source Matters, Inc. All rights reserved.</copyright>
<license>GNU General Public License version 2 or later</license>
<!-- Версия шаблона -->
<version>1.6.0</version>
<!-- Описание шаблона -->
<description>TPL_MYTEMPLATE_XML_DESCRIPTION</description>
<!-- Файлы из которых состоит шаблон -->
<files>
<!-- Можно указывать директории -->
<folder>css</folder>
<folder>language</folder>
<filename>index.html</filename>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
</files>
<!-- Позиции модулей, используемые в шаблоне -->
<positions>
<position>top</position>
<position>left</position>
<position>right</position>
<position>footer</position>
</positions>
<!-- Установка/Удаление файлов локализации -->
<languages folder="language">
<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>
<!-- Параметры для шаблона -->
<config>
<fields name="params">
<fieldset name="advanced">
<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
<html><body bgcolor="#FFFFFF"></body></html>
Рассмотрим структуру файлов для шаблона Joomla:
Теперь создаём zip архив с нашими файлами и устанавливаем с помощью менеджера расширений в Joomla.