На JoomlaForum есть раздел «Мой сайт на Joomla», который я периодически просматриваю. Глядя на работы новичков я, честно говоря, прихожу в ужас. Большинство работ сделаны по советам «10 грубейших ошибок при создании сайта», только советы были интерпритированы с точностью наоборот. Хочу немного обобщить всяческие советы непосредственно для меню.

Основная ошибка: слишком много пунктов меню

Зачем больше 5 пунктов в главном меню? У вас всегда есть футер. И тот человек, который ищет что-то конкретное, всегда докрутит до футера и кликнет, на интересующий его пункт меню. Вот пример отвратительного меню:

Главная | О нас | Почему мы | Цены | Услуги | Скидки | Акции | Предложение посредникам | Вакансии | Наша техника | Задайте нам вопрос | <a name="cut"></a>  Фотогалерея | Контакты

Допустим, фирма занимается бурением скважин. Значит они продают «услуги по бурению» и их клиенты скорее всего хотят себе на даче пробурить ту саму скважину. Что интересует такого клиента? Ответ очевиден — цена качественного решения. Тоесть «Во сколько мне это все обойдется?»
Берем пункты меню которые ему (в данной статье я буду этим самым покупателем) будут полезны на этом сайте:

1. Главная — не нужно, но этот пункт меню дефолтный. Оставляем.
2. О нас — не нужно, я готов обратится и к Тургению Стуслову, если тот делает качественно и недорого. Удаляем.
3. Почему мы — да действительно? Если мне делать нечего, то почитаю на досуге. Удаляем
4. Цены — о именно это я и искал. Оставляем.
5. Услуги — хм, а в «ценах» разве не написаны услуги? Удаляем.
6. Скидки — интересно, наверно сильно завышают цены, потому и скидки делают, да они всем скидки делают, сначала накрутят сверху 10% — потом на них скидки и делают… Удаляем.
7. Акции — наверно пробури 5 скважин и получи в подарок подержанное колесо от 131 ЗИЛа или флэшку на 512 Mb. Удаляем.
8. Предложение посредникам — я вообще-то просто скважину хочу, но если сосед захочет, я ему рекомендую эту фирму, то может мне копеечка перепадет. Удаляем.
9. Вакансии — не, у меня есть работа, а если и надо найти работу, то ищу на сайтах соответствующей тематики. Удаляем.
10. Наша техника — наверно фотки старых зилков… может взглянуть? Удаляем.
11. Задайте нам вопрос — а я думал в пункте «контакты» написаны все ваши контактные данные, там и можно задать вопрос. Удаляем.
12. Фотогалерея — надеюсь там хоть показано, как вы бурите и реализованные объекты — посмотрим. Оставляем.
13. Контакты — о да. Цены у вас на сайте наверно неактуальные, дай-ка вам напишу вопросец. Звонить не буду.

Вот так вас жестоко, я, обычный потребитель, ваше меню, пардон, кастрировал.

Главная | Цены | Фотогалерея | Контактная информация

Так… тут меня должны засыпать вопросами, а как-же скидки, вакансии и т.д.… ща… секундочку:

• О нас — это можно написать внизу на главной странице, только в 2-х предложениях. Вообще про данную контору я бы так написал «Бурим скважины», и написал бы это в шапке сайта под логотипом. А полноценный текст (если клиент сильно настаивает) спрятал бы за пунктом меню в футере.
• Почему мы — просто абсолютно ненужный текст, который никто не читает, кроме вебмастеров, которые хотят создать такой-же пункт меню.
• Услуги — просто запомните навсегда: «Услуги и цены», лучше просто «Цены».
• Скидки — скидки пишите в прайс-листе. А еще лучше сделайте форму в прайсе, где человек может поставить галочку напротив скидки (например — я пенсионер) — и пусть ему в прайсе цены меняются.
• Акции — акции Эппла после выхода 5-го айфона упали. Но суть не в этом. Акции — это банеры, яркие сочные банеры, но никак не пункт меню. Акции должны быть либо временными: с 1 января по 15 января в подарок фильтр очиски воды. 30-31 февраля скважины бесплатно! Если акция постоянная — то это уже спецпредложение или просто навязываемая услуга.
• Предложение посредникам — переносите в футер.
• Вакансии — футер.
• Наша техника — это в фотогалерее должно быть.
• Задайте нам вопрос — это должно быть в разделе «Контактная информация» или же небольшой онлайн чат, который всегда надоедает, на каждой странице и периодически выскакивает с заголовком «Могу ли я вам чем-то помочь?» — Мне например охота туда писать только одно «Да вы уже ...».
• Контакты — не, контакты мы никуда не переносим, но теперь, когда у нас появилось свободное место в меню, мы там можем написать «Контактная информация». В моем понимании «Контакты» — это такие усы у троллейбуса и трамвая, которыми он протирает провода, ну или штырьки у розетки. Вообще я сам пишу часто эти контакты, но советую забыть эту привычку.

Идеальное решение, для любителей все-таки запихать всё, абсолютно всё, в главное меню — сделайте его выпадающим и логическим. Как пример хорошего логического меню — я всегда давал официальный сайт браузера оперы. У них кстати в 2009 было 8 пунктов, 2010 — 7, 2011 — всего 6 пунктов.

Дополнено после комментариев al-teen  

Старайтесь писать короткие названия пунктам меню. Например пункт «Предложение посредникам» можно сократить до: «Посредникам». Люди поймут. Или «Сохранить в черновиках» можно сократить до: «В черновики». «Авторизация» — «Вход», «Каталог продукции» — «Каталог» и т.д.

• Создаем меню через менеджер меню в панели администратора ( Крестик «Создать», заполняем все поля, «Сохранить»).
• Выбираем в списке  созданное меню, жмем «Создать», из списка выбираем нужный пункт, пишем заголовок, псевдоним, сохраняем.
• Создаем еще несколько пунктов.

В панели администратора заходим в менеджер модулей ( Расширения => модули ), над списком модулей находим кнопку «Новый» ( Крестик ). На открывшейся странице находим пункт «Меню», жмем на него. Слева в верхней строчке пишем название модуля, оно же будет заголовком, выводящимся на странице. Варианты включить и выключить для отображения заголовка ( показать или скрыть его на странице сайта ), включить или отключить модуль. Выбыраем из списка позицию шаблона, в которой будет выведено меню (например «top» или «left»). Ниже: выбор группы пользователей, для которых показывать меню, дополнительные стили для меню.

Справа видим выпадающий список со всеми меню, выбираем по названию созданное нами ранее. Ниже предоставляются варианты отображения, выбираем «Список». Можете поэкспериментировать с остальными вариантами. Разница в способах представления на уровне HTML разметки. Но чаще используется именно Список.Далее идут пункты «Начальный уровень» и «Последний уровень», «Всегда показывать подпункты» — это настройки уровней вложенности для пунктов меню, о них информация ниже. Расположение нового окна — параметры JavaScript — расположение всплывающего окна, например,

top=50,left=50,width=200,height=300

В дополнительных параметрах возможно указать интервал между пунктами горизонтального меню (показывать или нет), кэширование ( рекомендуется когда меню уже создано и отредактировано — кэширование позволяет оптимизировать работу сайта ). Ниже располагаются настройки:

• ID тега меню — CSS-идентификатор (id), назначенный для тега UL верхнего уровня (необязательный параметр).
• CSS-суффикс класса меню (здесь можно задать особый класс CSS для визуальной организации меню).
• CSS-суффикс класса модуля (здесь задается особый класс CSS для визуальной организации модуля (содержимого меню))

Через них возможно привязывать к меню собственные CSS стили. Например указав для суффикса класса меню

Код:

_main

Код:

<ul class="menu_main">

Код:

<ul class="menu">

Максимальный уровень вложенности меню по умолчанию стоит 10. То есть меню может содержать максимум 10 уровней вложенных подменю. Уровни больше этого числа будут игнорироваться. Если не показываются подпункты некоторого уровня, то увеличьте это число. В других настройках возможно настроить:

• Показывать значки меню — включает отображение значков меню. Формат значков зависит от конкретного шаблона.
• Расположение значков меню — задает расположение значков меню справа или слева.
• Ссылка на значок меню — значок сам по себе является ссылкой.
• Развернутое меню — задает, должен ли пункт меню всегда быть развернут, даже если нажатие происходит по другим меню. Активировать родительский пункт - активная ссылка присваивается родительскому пункту при переходе по ссылке в дочернюю категорию.
• Постоянная подсветка активных пунктов — выделение активной ссылки.
• Изображение отступа — задает значки, которые будут отображаться в дереве меню уровнем ниже. Можно задать использование значков из шаблона, значки Joomla по умолчанию, не использовать вовсе или задать каждому уровню вложенности своё изображение.
• Изображение отступа 1-6 — задает индивидуальный значок каждому уровню иерархии.
• Разделитель — задает разделитель пунктов вертикального меню.
• Разделитель по концам — задает разделитель пунктов в горизонтальных меню.

Жмем «Сохранить». На странице сайта появляется соданное нами меню. Таким образом мы создали простое меню, без всяких эффектов.

2) Расширяем меню.

Расширить свойства меню можно путем CSS, JavaScript и PHP. Существует множество готовых решений, но редко они соответсвуют требованиям конкретного сайта без необходимости их «допиливать». Эти решения мы не будем разбирать в данной теме, а разложим варианты, наиболее часто задаваемых вопросов в разделе.

Простое горизонтальное меню.

 ul.menu {
	padding:<span>0</span>;
	margin:<span>0</span>;
 
}
 ul.menu li {
	float: left; /* выравниваем ссылки по горизонтали */
	list-style-type: none; /* убираем маркеры списка*/	
	padding-left:<span>10px</span>; /* внутренний отступ слева */	
	padding-right:<span>10px</span>; /* внутренний отступ справа */	
	padding-bottom:<span>0px</span>; /* внутренний отступ снизу */	
	padding-top:<span>0px</span>; /* внутренний отступ сверху */	
	background-image: url(../images/menu_sep<span>.gif</span>) no-repeat right top; /* разделитель */	
	position:relative; /* позиционируем в блоке родителя */	
}
 
 ul.menu a {
	display: block; /* делаем кликабельной всю кнопку */	
	height: 22px; /* высота кнопки*/	
	padding: 0 10px; /* внутренний отступ справа и слева */	
	overflow: hidden; /* запрещаем обтекание */	
	color: #7a7a7a; /* цвет ссылки */	
	font-family:Grotic; /* название шрифта */	
	font-style:bold; /* жирность шрифта */	
	font-size: 11px; /* размер шрифта */	
	text-decoration:none; /* убираем подчеркивание ссылки */	
	padding-top:<span>3px</span>; /* внутренний отступ сверху */
}
 ul.menu li.active a, ul.menu li a:hover {
	color:#E8A03D; /* цвет ссылки при наведении и активной ссылки */	
}

Так же можно вместо разделителя задать цвет кнопки, или присвоить ей графику.

Аналогично

background-image: url(../images/menu_sep.gif) no-repeat right top;

возможно присвоить к 

ul.menu a 

и

ul.menu li.active a, ul.menu li a:hover

Простое вертикальное меню делается аналогично, за исключением отсутствия в

ul.menu li элемента float: left;

Можем несколько расширить наше простое меню в визуальном плане при помощи средств стандартной для Joomla библиотеки mootools. Например добавить анимацию при наведении на ссылку

В поле между тэгами

<head> </head>

Вашего шаблона, добавляем

<script type="text/javascript">
window.addEvent('domready', function(){
    var el = $$('#my_menu li'),
	 color = el.getStyle('backgroundColor', '#333');
       $$('#my_menu li').set('margin', 0).addEvents({
	     mouseenter: function(){
		 this.morph({'margin-left': 5,'background-color': '#676768'});},
		 mouseleave: function(){
		 this.morph({margin: 0,backgroundColor: color});
	}});
});
</script>

В строках

'background-color': '#...'

Редактируем цвет кнопок.

Ниже в шаблоне, позицию для модуля меню оборачиваем блоком

<div class="my_menu"></div>

То есть выглядеть это будет примерно следующим образом

<div id="my_menu">
    <jdoc:include type="modules" name="leftmenu" />
</div>

За работоспособносьт примера ручаться не стану по ряду причин, но в общих чертах думаю понятно, каким образом возможно назначить различные эффекты для нашего меню.

Создание выпадающего меню средствами CSS.

• В менемжере меню создаем новые пункты меню и присваиваем им родительский пункт.
• В настройках модуля меню Начальный уровень — 0, Последний уровень — 2 или более.

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

В файл template.css шаблона добавляем строчки:

ul.menu {
	position: absolute;
	top: 78px;
	left: 172px;
	list-style-type: none;
	padding:<span>0</span>;
	margin:<span>0</span>;
 
}
 ul.menu li {
	float: left;
	list-style-type: none;
	padding-left:<span>10px</span>;
	padding-right:<span>10px</span>;
	padding-bottom:<span>0px</span>;
	padding-top:<span>0px</span>;
	background-image: url(../images/menu_sep<span>.gif</span>);
	background-position: right top;
	background-repeat: no-repeat;
	position:relative;
}
 
 ul.menu a {
	display: block;
	height: 22px;
	padding: 0 10px;
	overflow: hidden;
	color: #7a7a7a;
	font-family:Grotic;
	font-style:bold;
	font-size: 11px;
	text-transform: uppercase;
	text-decoration:none;
	padding-top:<span>3px</span>;
}
ul.menu li.active a, ul.menu li a:hover {
	color:#E8A03D;
}
ul.menu li a, ul.menu li.active ul li a  {
	color:#7a7a7a;
}
 
ul.menu li ul {
    display:none;
    position:absolute;
    top:<span>2em</span>;
    left:<span>0</span>;
    padding:<span>0px</span> 0px 7px;
    margin:<span>0px</span> 0px 7px;
    background-color:white;
    opacity:<span>0</span>.<span>75</span>;
}
ul.menu li:hover ul {
    display:block;
}
ul.menu li:hover ul li a{
    height:auto;
}

Вертикальное это меню или горизонтальное, сторону, в которой отображаются подпункты при наведении можно настроить в каскаде

ul.menu li ul

оперируя свойствами

  top:2em;
   left:0;
   padding:0px 0px 7px;
   margin:0px 0px 7px;

Из минусов данного метода можно выделить сложности с IE6 — не воспринимает :hover, лечится костылями на JS, Сложности с восприятием 4го и более уровней. То есть подобным методом корректно можно обработать вложениея лишь до 3го уровня включительно. Если нужно обработать больше вложений, рекомендую использовать средства JS.

Выпадающее меню на JS+CSS.

Создаем отдельный файл menu.js, в него заносим код:

window.addEvent('domready', function() {
 
var Element = $$('.moduletable_shop ul.menu li.parent').set({
    'events': {
        'mouseover': function(){ this.addClass('hilite') },
        'mouseleave': function(){ this.removeClass('hilite') }
    }
});
});

В CSS добавляем:

ul.menu li ul{
ul.menu li ul{
  display:block;
 
  z-index:<span>-2</span>;           /*Здесь прячем подпункты на нижние слои*/
  position:absolute;
  margin-left: 220px;  /*Отступ справа = ширина родительского пункта меню*/
  margin-top: -93px;   /*Отступ снизу = высота родительского пункта меню*/
 
 }
 ul.menu li.hilite ul{
   z-index:<span>100</span>;          /*Вот здесь класс hilite наш - выводим меню в верхние слои*/
 }

Оперируя свойствами

margin-left: 220px;
 margin-top: -93px;

добиваемся четкого отображения раскрывающихся категорий.

3) Устраняем недочеты.

В стандартном mod_mainmenu существуют несколько досадных недоработок.   Если на сайте используется несколько модулей меню на основе стандартного mod_mainmenu – мы получаем ошибку валидации – для каждого активного пункта меню UL LI создается id=«current» (в случае создания связанных меню, многоуровневых либо просто дублирование модуля) Лечится просто – в файле templates/шаблон/html/mod_mainmenu/default.php (что это такое и что делать если такого файла нет – объяснять не буду, читаем документацию по шаблонизации движка) находим строку примерно 71

$node->addAttribute('id', 'current');

и заменяем на

$node->addAttribute('id', 'current'.$id);

Теперь у нас к каждому current добавляется идентификатор itemid.

Для лучшей поисковой оптимизации к каждой ссылке на сайте рекомендуется добавлять атрибут title="" с описанием. В стандартном модуле его нет, но лечится весьма не сложно.

Копируем файл modules/mod_mainmenu/tmpl/default.php в папку шаблона, т.е. он должен размещаться по адресу templates/название_шаблона/html/mod_mainmenu/default.php

Открываем файл, находим строку

if (isset($path) && $node->attributes('id') == $path[0]) {

и перед ней вставляем код

   if ($node->name() == 'a') {
        $children = $node->children();
    foreach ($node->children() as $child)
    {
      if ($child->name() == 'span') {
                $node->addAttribute('title', $child->_data);
      }
    }
    }

Теперь у нас ссылки меню получают атрибут title="".

Код

<a href="http://december.com/html/4/element/div.html"><span><div</span></a> id="mushroom"><span></div></span>

Код

#mushroom{
    background: url(sprite<span>.gif</span>) no-repeat -36px 0px;
    height: 18px;
    width: 18px;
}

• Метод Николаса Галагера, cтилизация псевдо-элемента фоновым изображением:

Код

#first:before { 
	content: ""; 
	float: left; 
	width: 15px; 
	height: 15px; 
	margin: 4px 5px 0 0; 
	background: url(sprite<span>.png</span>) -15px 0; 
}

• Метод нового url()/clip, использование свойства content для вставки спрайта, подрезанного с помощью свойства clip:

Код

#second { 
	position: relative; 
	padding-left: 20px; 
	background-image: expression(this.runtimeStyle.backgroundImage="none",this.innerHTML = '<img alt="" src="sprite.png">'+this.innerHTML); 
} 
 
#second:before, 
#second img { 
	content: url(sprite<span>.png</span>); 
	position: absolute; 
	top: 3px; 
	clip: rect(0 30px 15px 15px); 
	left: -15px;
	_left: -35px;
}

• Отображение при печати. В отличие от фоновых изображений, при печати они распечатаются в документе.
• Доступность. В отличие от фоновых изображений, они будут отображать в режиме high contrast или при контрастных CSS стилях.
• Работает в IE. Метод подходит для Internet Explorer 6 и 7.

Код

.more:after { 
	white-space:nowrap; 
	content: " <span>\00BB; /* » */
} 
.more { 
	white-space:nowrap; 
	background-image: expression(this.runtimeStyle.backgroundImage="</span>none",this.innerHTML = this.innerHTML+' »'); 
}

<jdoc:include type="component" />

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

    1. type — типы элементов вывода.

• component — как писал выше, выводит основное содержание страницы. Может вызываться только один раз в шаблоне.
• head — объявляется так же один раз после открывающего тэга <head>. Служит для вывода стилей, скриптов, <title> и метаданных текущей страницы.
• message - выводит системные сообщения. Объявляется один раз в теле документа (body).
• installation  — ничего не выводит и представляет собой «инструкцию» для установки.
• module — выводит на странице единичный модуль. Количество объявлений не ограничено.
• modules — в отличии от предыдущего типа, позволяет выводить в своей позиции не единичое число модулей.

Для первых четырех указанных типов достаточно лишь указать их на странице. В случае с типом модуля задача немного усложняется. Для того, чтобы вывести на странице модуль нам нужно сперва создать для него модульную позицию с уникальным идентификатором (название позиции модуля). Это делается при помощи атрибута name=«имя позиции» и обязательным добавлением строки:

<position>название позиции</position>

    2. style — описание стиля вывода (mod chrome).

От указанного стиля зависит внешний вид и структура оболочки модуля. Выглядит как

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

• xhtml - выводит модуль в блоке с заголовком

  function modChrome_xhtml($module, &$params, &$attribs)
  {
      if (!empty ($module->content)) : ?>
          <div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
          <?php if ($module->showtitle != 0) : ?>
              <h3><?php echo $module->title; ?></h3>
          <?php endif; ?>
              <?php echo $module->content; ?>
          </div>
      <?php endif;
  }

• table — выводит модуль в верстке табличной структуры
  

  function modChrome_table($module, &$params, &$attribs)
  { ?>
      <table cellpadding="0" cellspacing="0" class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
      <?php if ($module->showtitle != 0) : ?>
          <tr>
              <th>
                  <?php echo $module->title; ?>
              </th>
          </tr>
      <?php endif; ?>
          <tr>
              <td>
                  <?php echo $module->content; ?>
              </td>
          </tr>
          </table>
      <?php
  }

• horz — выводит содержимое модуля в ячейке таблицы, горизонтально

  function modChrome_horz($module, &$params, &$attribs)
  { ?>
      <table cellspacing="1" cellpadding="0" width="100%">
          <tr>
              <td>
                  <?php modChrome_table($module, $params, $attribs); ?>
              </td>
          </tr>
      </table>
      <?php
  }

• rounded — выводит модуль в нескольких вложенных блоках для сложного стилевого оформления в виде графических границ (напр. закругленных углов)

  function modChrome_rounded($module, &$params, &$attribs)
  { ?>
          <div class="module<?php echo htmlspecialchars($params->get('moduleclass_sfx')); ?>">
              <div>
                  <div>
                      <div>
                          <?php if ($module->showtitle != 0) : ?>
                              <h3><?php echo $module->title; ?></h3>
                          <?php endif; ?>
                      <?php echo $module->content; ?>
                      </div>
                  </div>
              </div>
          </div>
      <?php
  }

• outline — добавляет к блоку модуля предустановленные стили css

  function modChrome_outline($module, &$params, &$attribs)
  {
      static $css=false;
      if (!$css)
      {
          $css=true;
          jimport('joomla.environment.browser');
          $doc = JFactory::getDocument();
          $browser = JBrowser::getInstance();
          $doc->addStyleDeclaration(".mod-preview-info { padding: 2px 4px 2px 4px; border: 1px solid black; position: absolute; background-color: white; color: red;}");
          $doc->addStyleDeclaration(".mod-preview-wrapper { background-color:#eee; border: 1px dotted black; color:#700;}");
          if ($browser->getBrowser()=='msie')
          {
              if ($browser->getMajor() <= 7) {
                  $doc->addStyleDeclaration(".mod-preview-info {filter: alpha(opacity=80);}");
                  $doc->addStyleDeclaration(".mod-preview-wrapper {filter: alpha(opacity=50);}");
              }
              else {
                  $doc->addStyleDeclaration(".mod-preview-info {-ms-filter: alpha(opacity=80);}");
                  $doc->addStyleDeclaration(".mod-preview-wrapper {-ms-filter: alpha(opacity=50);}");
              }
          }
          else
          {
              $doc->addStyleDeclaration(".mod-preview-info {opacity: 0.8;}");
              $doc->addStyleDeclaration(".mod-preview-wrapper {opacity: 0.5;}");
          }
      }
      ?>
      <div class="mod-preview">
          <div class="mod-preview-info"><?php echo $module->position."[".$module->style."]"; ?></div>
          <div class="mod-preview-wrapper">
              <?php echo $module->content; ?>
          </div>
      </div>
      <?php
  }

• none — аналогично не указанному вообще style. Выводит модуль без оформления и заголовка

  function modChrome_none($module, &$params, &$attribs)
  {
      echo $module->content;
  }

Все предустановленные стили располагаются в файле templates/system/html/modules.php. Но мы не ограничены использованием только предоставленных вариантов, а вполне можем создавать свои собственные.

    3. Создание пользовательского mode chrome.

Итак, предоставленные по умолчанию типы представления модулей не удовлетворяют текущих требований. Нужно добавить свой собственный стиль оформления. В качестве примера выберем достаточно часто повторяющуюся ситуацию. По заданию нужно вместо <h3> поместить заголовок модуля в тэг <span>, который является семантически нейтральным. Так же требуется поместить контентблок модуля в отдельный <div>. Для создания собственного стиля вывода модуля, воспользуемся стандартными средствами. В большинстве шаблонов  Joomla существет папка html/ (templates/имя шаблона/html/), используется для так называемой шаблонизации. То есть, если скопировать в эту папку шаблон модуля,  то вместо шаблона из директории modules/my_module/tmpl/default  будет выводиться файл из templates/имя шаблона/html/my_modules/default. Аналогично шаблонизируются и компоненты. Удобно и практично. В папке html/ Вашего шаблона создадим файл modules.php. Если такой папки в шаблоне нет, то создадим ее. В файл запишем

<?php
function modChrome_modbox($module, &$params, &$attribs) // Вызываем функцию
{
    if (!empty ($module->content)) : /* Проверяем наличие в поиции включенного модуля */?>
        <div class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')); /* выводим суффикс css класса модуля */ ?>">
        <?php if ($module->showtitle != 0) : /* проверяем включен ли заголовок модуля */ ?>
            <span class="title"><?php echo $module->title; /* Выводим заголовок */ ?></span>
        <?php endif; ?>
            <div class="modcontent">
                <?php echo $module->content; /* Выводим содержимое модуля */ ?>
            </div>
        </div>
    <?php endif;
}
?>

<jdoc:include type="modules" name="user1" style="modbox"/>

<jdoc:include type="modules" name="mymodule" />

type=«modules» — указания типа выводимого элемента.

name=«mymodule» — название модульной позиции.

Минимальная информация, необходимая для создания позиции в шаблоне. Используется для вывода на странице модулей, например: меню навигации, формы авторизации, «хлебных крошек» и т.д. Так же можно указывать title="" для обозначения подсказки, style="" для обозначения стиля вывода модуля. В случае отсутствия style модуль будет выводиться без заголовка. Обозначения стилей подробнее разберем в следующих статьях. А пока, в качестве наглядного примера создадим простой шаблон для Joomla.

Для этого необхомо создать пустую папку c произвольным названием, пусть будет mytemplate, в ней создадим папку css. Далее создадим файлы templateDetails.xml, index.php и пустой файл index.html для защиты от несанкционированного просмотра содержимого папки. В css/ файл стилей template.css.

Содержимое templateDetails.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <!-- Общая для всех xml шапка, определяющая тип документа и его кодировку -->
<extension version="2.5" type="template" client="site"> <!-- Указание инсталлятору Joomla о версии и типе устанавливаемого расширения -->
    <name>mytemplate</name> <!-- Имя шаблона в списке менеджера шаблонов -->

    <files> <!-- Контейнер для списка файлов шаблона. -->
        <folder>css</folder> <!-- Указание папок -->
        <filename>index.html</filename> <!-- Указание файлов -->
        <filename>index.php</filename>
    </files> <!-- Обязательно требуется для стандартного установщика Joomla. Важно! Если информация о папках или файлах, указанная в данном блоке не соответствуют действительности, например не верно указано имя, или файл отсутствует, то получим ошибку установки -->

    <positions> <!-- Контейнер для списка модульных позиций шаблона -->
        <position>debug</position> <!-- Указание имени модульной позиции -->
        <position>header</position>
        <position>menu</position>
        <position>footer</position>
    </positions>
</extension>

<?php
// Защита от прямого обращения к сценарию.
defined('_JEXEC') or die;
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">
<meta charset="utf-8">
<head>
        <jdoc:include type="head" /> // Требуется для вывода информации <title></title>, meta стилей и скриптов расширений.
        
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css">
        // Подключаем системные стили
        <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css">
        // Подключаем файл стиля шаблона. Важно! Путь к файлу необходимо указывать в точности, как написано здесь, то есть абсолютный путь. 
        // В противном случае чревато неправильным отображением шаблона на внутренних страницах. То же касается и подключения js файлов.
</head>
  <body>
    <div id="page"> 
        <header>
            <jdoc:include type="modules" name="header" /> // Модульная позиция header
        </header>
        <nav>
            <jdoc:include type="modules" name="menu" style="xhtml" /> // Модульная позиция menu
        </nav>
        <section>
            <jdoc:include type="message" /> // Позиция вывода системных сообщений
            <jdoc:include type="component" /> // Вывод информации компонентов
        </section>
        <footer>
            <jdoc:include type="modules" name="footer" /> // Модульная позиция footer
        </footer>
    </div>
    <jdoc:include type="modules" name="debug" /> // Вывод отладочной информации
  </body>
</html>

body{margin:0;padding:0;}
header,nav,section,footer{display:block;padding:5px;}
#page{border:1px #000 solid;width:960px;margin:0 auto;}
header{height:100px;}
nav{width:200px;float:left;margin:10px 0;}
section{width:730px;float:right;margin:10px 0;}
footer{height:100px;}

Пример, наглядно демонстрирующий простоту работы с шаблонами Joomla. Алгоритм несложный, взять готовый шаблон HTML и вывести в нужных местах нужные элементы. Конечно же, в более сложных шаблонах приходится использовать условия отображения, скрипты, пользоваться другими возможностями Joomla, а так же вести разработку на различных шаблонных фрэймворках (Gantry, T3 и т.д.). Но если Вам не требуется ничего сверхординарного и сложного, то вполне можно обойтись даже описанным выше простейшим функционалом.