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; Загрузок: 4528; в сутки: ~1; Обновлен: 20:20, 27 Ноября 2011;
Смотрите также:
Комментарии (33) Добавить комментарий
  • 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  ↓     ответ

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

  • справка ип на визу словакия
    справка ип на визу словакия
    19 Августа 2017, 06:27
     ↑  0  ↓     ответ

    справка ип на визу словакия

  • najlepsze paski wybielajace do zebow
    najlepsze paski wybielajace do zebow
    04 Сентября 2017, 13:46
     ↑  0  ↓     ответ

    My spouse and I absolutely love your blog and find the majority of your

    post's to be just what I'm looking for. Does one offer guest writers to write

    content available for you? I wouldn't mind creating a post or elaborating on a few of the subjects you write about here.

    Again, awesome web log!

  • оформление швейцарской визы в екатеринбурге
    оформление швейцарской визы в екатеринбурге
    05 Сентября 2017, 11:31
     ↑  0  ↓     ответ

    оформление швейцарской визы в екатеринбурге

  • aliexpress swimsuit haul
    aliexpress swimsuit haul
    07 Мая 2018, 19:31
     ↑  0  ↓     ответ

    Greetings from Florida! I'm bored to tears at work so

    I decided to browse your blog on my iphone during lunch break.

    I really like the information you provide here and can't wait to take

    a look wwhen I get home. I'm surprised at how quick your blog loaded on my phone ..

    I'm not even using WIFI, just 3G .. Anyways, great site!

  • Shona
    Shona
    23 Мая 2018, 21:11
     ↑  0  ↓     ответ

    You'll additionally desire to be sure that anyone retain your money well-hidden on oneself.

  • tinyurl.com
    tinyurl.com
    24 Ноября 2019, 04:41
     ↑  0  ↓     ответ

    Pretty nice post. I just stumbled upon your weblog

    and wished to mention that I've truly loved surfing around your weblog posts.

    After all I'll be subscribing on your rss feed and I am hoping

    you write once more soon!

  • coconut oil there
    coconut oil there
    25 Ноября 2019, 17:33
     ↑  0  ↓     ответ

    Ahaa, its fastidious dialogue about this piece of writing here

    at this weblog, I have read all that, so at this time me also commenting here.

  • plenty of fish dating site
    plenty of fish dating site
    26 Ноября 2019, 22:15
     ↑  0  ↓     ответ

    Good post. I learn something new and challenging on websites

    I stumbleupon everyday. It will always be useful to read through articles from

    other authors and use something from their websites.

  • Alena
    Alena
    09 Марта 2021, 13:18
     ↑  0  ↓     ответ

    What's up colleagues, its enormous piece of writing regarding teachingand fully explained,

    keep it up all the time.

  • tinyurl.com
    tinyurl.com
    26 Марта 2022, 11:39
     ↑  0  ↓     ответ

    Hi there colleagues, how is the whole thing, and what you

    would like to say regarding this article, in my view its actually awesome designed for

    me.

  • tinyurl.com
    tinyurl.com
    27 Марта 2022, 06:58
     ↑  0  ↓     ответ

    At this time it looks like BlogEngine is the best blogging

    platform available right now. (from what I've read) Is that what you are using on your blog?

  • tinyurl.com
    tinyurl.com
    30 Марта 2022, 09:31
     ↑  0  ↓     ответ

    Great article, totally what I needed.

  • extremely cheap flight tickets
    extremely cheap flight tickets
    03 Апреля 2022, 00:27
     ↑  0  ↓     ответ

    Wow! After all I got a web site from where I can actually get valuable information concerning my study and knowledge.

  • fly tickets
    fly tickets
    03 Апреля 2022, 13:38
     ↑  0  ↓     ответ

    Do you mind if I quote a few of your posts as long as I provide credit and sources back to your website?

    My blog is in the very same area of interest as yours and my visitors would

    truly benefit from some of the information you provide here.

    Please let me know if this ok with you. Many thanks!

  • booking flights
    booking flights
    04 Апреля 2022, 05:22
     ↑  0  ↓     ответ

    If you want to improve your familiarity simply keep visiting this

    web page and be updated with the hottest news posted here.

  • cheap one way airline tickets
    cheap one way airline tickets
    05 Апреля 2022, 01:31
     ↑  0  ↓     ответ

    Hello to all, since I am actually eager of reading this website's post to be updated on a

    regular basis. It carries pleasant material.

  • cheap flights booking
    cheap flights booking
    05 Апреля 2022, 08:40
     ↑  0  ↓     ответ

    Hey there! I simply wish to offer you a big thumbs up for your excellent info you've

    got right here on this post. I am returning to your website for more soon.

  • best rates on airfare
    best rates on airfare
    05 Апреля 2022, 14:08
     ↑  0  ↓     ответ

    Great work! This is the kind of information that should be shared around the internet.

    Shame on the seek engines for not positioning this put up higher!

    Come on over and visit my web site . Thank you =)

  • Aurelia
    Aurelia
    04 Сентября 2022, 10:41
     ↑  0  ↓     ответ

    bunadisisj nsjjsjsisjsmizjzjjzjzz zumzsert

  • Sven
    Sven
    13 Сентября 2022, 09:26
     ↑  0  ↓     ответ

    bunadisisj nsjjsjsisjsmizjzjjzjzz zumzsert

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




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

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