Создание шаблона

Руководство по созданию макета (болванки) для шаблона

рейтинг: 9.9/10, голосов: 14

Русская Joomla 2.5 CMS

Для начала необходима обычная XHTML страничка. Можно воспользоваться каким-нибудь сервисом для генератора HMTL шаблонов. Или создать шаблон самостоятельно. Рассмотрим, в качестве примера, часто используемый шаблон с шапкой, футером и двумя колонками по бокам.

Изначальная разметка страницы

Разметка 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;
}

Обзор макета для Joomla

С точки зрения Joomla этот макет разбивается на области, где будет выводиться основное содержимое (компонент) и дополнительное (модули).

Разбиение макета на области

При создании шаблонов Joomla используются следующие конструкции для вывода содержимого:

Содержимое HEAD

Здесь выводятся содержимое между тегами <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 — это название модуля, в данном примере это будет mod_custom
title — заголовок модуля, должен совпадать с настройками модуля

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

При добавлении позиций или модуля в шаблон, не забывайте проверять настройки модулей — публикацию модуля и доступность модуля для текущего пользователя.

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

Параметры для шаблона устанавливаются в XML файле описания шаблона. Их можно устанавливать в административной панели Joomla для нужного шаблона («Расширения» -> «Менеджер шаблонов»). С помощью этих параметров можно контролировать поведение шаблона, например, задать какой-то цвет для фона, вывести в качестве логотипа нужную картинку и т. п. Для получения значения параметра в шаблоне используется:

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

Соответственно для вывода значение параметра используется:

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

Стандартно в Joomla используется несколько типов для параметров, которые описываются в 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/tyle_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 соответственно.

XML файл инструкций для шаблона

Теперь нужно создать XML файл инструкций для шаблона 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>j-wiki@bk.ru</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 через «Менеджер расширений».

Внизу можете загрузить готовый архив с созданным шаблоном.

Прикрепленные файлы:

Скачать joomla_1_7_template_example.zip

Объем: 3.96 KB; Тип: zip; Загрузок: 1016; в сутки: ~6; Обновлен: 20:20, 27 Ноября 2011;

Смотрите также:

Обновлено: 11 Февраля 2012, 03:36

Автор: smet.kate

Оценка: 9.9

Метки: css, html, templateDetails_xml, xml, макет, шаблон

Категории: Разработка шаблонов Joomla

Комментарии (5) Добавить комментарий

sergius

30 Марта 2012, 22:26

#

↑ 0 ↓ ответ

Не знаю, насколько это важно для Вас.
Вот ошибка в ссылке в шаблоне:
<link rel="stylesheet" href="/
Правый слеш надо убрать!
С Уважением!
Arthur

19 Апреля 2012, 21:01

#

↑ 0 ↓ ответ

Именно так! Первый слеш лишний!
Роман

20 Апреля 2012, 19:46

#

↑ +1 ↓ ответ

Ошибка! Не найден XML-файл установки Joomla!
Файл XML есть!
- Юрий
  
  27 Апреля 2012, 23:26
  
  #
  
  ↑ 0 ↓ ответ
  
  Роман, возможно вы сохранили файл не в той кодировке, например в блокноте кодировка по умолчанию ANSI, а нужно в Юникоде, у меня такое было.
duncan

27 Апреля 2012, 03:57

#

↑ 0 ↓ ответ

Роман, проверьте сам файл, может скобки не закрыты