RSS   Twitter   Copiny   Copiny
Нашел ошибку? 

Выдели фрагмент текста с ошибкой или неточностью и нажми Ctrl+Enter!

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

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

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

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

Разметка 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" />

Для контроля и подсчета модулей в позициях предусмотрен метод 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/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 соответственно.

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; Загрузок: 4098; в сутки: ~2; Обновлен: 17:20, 27 Ноября 2011;
Смотрите также:
Комментарии (13) Добавить комментарий
  • sergius
    sergius
    30 Марта 2012, 22:26
     ↑  +4  ↓     ответ

    Не знаю, насколько это важно для Вас.

    Вот ошибка в ссылке в шаблоне:

    <link rel="stylesheet" href="/

    Правый слеш надо убрать!

    С Уважением!

    • Расул
      Расул
      04 Июня 2016, 01:27
       ↑  0  ↓     ответ

      Не думаю что слэш убирать нужно. Если файл ищется от корня сайта то слэш необходим....

  • Arthur
    Arthur
    19 Апреля 2012, 21:01
     ↑  +1  ↓     ответ

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

  • Роман
    Роман
    20 Апреля 2012, 19:46
     ↑  +3  ↓     ответ

    Ошибка! Не найден XML-файл установки Joomla!

    Файл XML есть!

    • Юрий
      Юрий
      27 Апреля 2012, 23:26
       ↑  +1  ↓     ответ

      Роман, возможно вы сохранили файл не в той кодировке, например в блокноте кодировка по умолчанию ANSI, а нужно в Юникоде, у меня такое было.

  • duncan
    duncan
    27 Апреля 2012, 03:57
     ↑  +5  ↓     ответ

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

  • Павел
    Павел
    30 Ноября 2012, 22:22
     ↑  -50  ↓     ответ

    Совершенно ничего толком и по делу, бред для дураков

  • Евгений
    Евгений
    22 Января 2013, 16:11
     ↑  +3  ↓     ответ

    Еще одна ошибка в файле шаблона.

    Вот строки кода (ОБРАТИТЕ ВНИМАНИЕ на href="/s<?php и потерянную букву в tyle_ie.css):

    <!--[if lte IE 6]>

    <link rel="stylesheet" href="/s<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/tyle_ie.css" type="text/css" />

    <![endif]-->

    Правильный вариант:

    <!--[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]-->

  • Дмитрий
    Дмитрий
    02 Апреля 2013, 18:10
     ↑  +5  ↓     ответ

    А по-моему, нормальное описание, мне пригодилось.

    Сайту респект!

  • Стоматолог
    Стоматолог
    09 Августа 2013, 02:53
     ↑  +1  ↓     ответ

    Спасибо, по вашей статье сделал наш сайт стоматологии без помощи программистов.

  • Владимир
    Владимир
    13 Октября 2013, 04:31
     ↑  0  ↓     ответ

    На счет того, что не хочет устанавливатся шаблон то причина в том, что вместо тега в templateDetails.xml

    <extension version="1.6" type="template" client="site">

    используйте

    <install version="1.6" type="template">

    по крайней мере мне помогло)

    И еще такой вопрос:

    У меню с всего шаблона отображается только header. Тоесть видно желтый фон. В чем причина?

  • Владимир
    Владимир
    13 Октября 2013, 04:34
     ↑  0  ↓     ответ

    Что то мне подсказывает что причина в етом куске кода:

    <?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" />

  • Леана
    Леана
    11 Июля 2014, 03:51
     ↑  0  ↓     ответ

    У меня получилось только после того, как я добавила доктайп из стандартного файла и удалила комментарии

Оставить комментарий




* обязательно для заполнения

1 введенный почтовый адрес используется только для обратной связи при ответах в комментариях и сервиса gravatar.com
.