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

Демонстрационный шаблон упакован в архив. Здесь сделаем небольшое лирическое отступление: в Joomla! любой компонент, модуль или шаблон перед установкой должны быть заархивированы в zip-архив. Не спрашивайте меня почему. Предлагем вам распаковать архив с шаблоном. Появится папка с названием шаблона (например, rd_demotemplate), в которой находятся все важные файлы шаблона или, другими словами, в этой папке находится сам шаблон.

После установки Joomla!, вы наверняка заметили среди прочих папок папку /templates. Именно в этой папке хранятся все установленные шаблоны. В стандартной комплектации Joomla! устанавливается с двумя шаблонами - madeyourweb и rhuk_solarflare_ii. После установки системы, папка /templates выглядит так:

/templates
   /madeyourweb
   /rhuk_solarflare_ii

Обратите внимание, что название папки шаблона должно иметь такое же название, как и у самого шаблона, а также не должно содержать пробелы. Иногда в название шаблона добавляют инициалы или имя дизайнера, например: rhuk_solarflare.

Теперь перейдем к изучение непосредственно самого шаблона. Откройте папку rhuk_solarflare_ii и обратите внимание на файлы templateDetails.xml и index.php:

/rhuk_solarflare_ii
  templateDetails.xml
  index.php

Можно сказать, это наиболее важные файлы шаблона, поэтому они всегда должны находится в основной папке шаблона.

templateDetails.xml - Информационный XML-файл шаблона, содержит информацию о шаблоне (автор, дата создания и т.д.), а также указывает, какие файлы входят в состав шаблона (изображения, css, php и т.д.) - при установке шаблона эти файлы будут скопированы в соответствующие папки шаблона.

index.php - Разметка шаблона. Содержит код оформления, параметры вывода компонентов и модулей. (X)HTML и PHP.

Помимо перечисленных выше файлов, в состав шаблона также входят: скриншот шаблона, файлы css, изображения.

/rhuk_solarflare_ii
   template_thumbnail.png
   /css
      template_css.css 
   /images
      logo.png

• template_thumbnail.png - Небольшой скриншот шаблона. Необходим для предварительного просмотра шаблона в "Панели управления Joomla".
• template_css.css - Основной файл с CSS-стилями. Здесь настраивается оформление для различных областей шаблона.
• logo.png - Изображение, использованное в оформлении шаблона. В папке /images может находиться любое количество изображений.

Чтобы установить шаблон, зайдите в "Панели управления" сайта -> "Установка/удаление" -> "Шаблоны сайта" и укажите zip-архив с шаблоном.

Кроме автоматической установки, вы можете установить шаблон вручную. Достаточно распаковать архив, и распакованную папку с шаблоном скопировать в папку /templates вашего сайта.

templateDetails.xml

• templateDetails.xml - В файле templateDetails.xml находится вся информация о шаблоне: автор, дата создания и т.д. Кроме этого, здесь описываются все файлы (изображения, css, php и т.д.), входящие в состав шаблона.

Пример templateDetails.xml обычного шаблона:

<mosinstall type="template" version="1.0.x">
<name>Название шаблона</name>
<creationDate>11/12/06</creationDate>
<author>Автор</author>
<copyright>GNU/GPL</copyright>
<authorEmail> 
 Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script
  </authorEmail>
<authorUrl>www.joom.ru</authorUrl>
<version>1.0</version>
<description> Пример templateDetails.xml обычного шаблона </description>
<files>
	<filename>index.php</filename>
	<filename>js/ie.js</filename>
	<filename>template_thumbnail.png</filename>
</files>
<images>
	<filename>images/header.png</filename>
	<filename>images/background.png</filename>
	<filename>template_thumbnail.png</filename>
</images>
<css>
	<filename>css/base.css</filename>
	<filename>css/norightcol.css</filename>
	<filename>css/template_css.css</filename>
</css>
</mosinstall>

А теперь рассмотрим каждую строчку файла:

• mosinstall - Содержит информацию об установке шаблона. Параметр type="template" указывает, что устанавливается шаблон.

name: - Имя шаблона. В процессе установки будет создана папка с идентичным именем, поэтому в названии шаблона нельзя использовать пробелы.

• creationDate - Дата создания шаблона. Может быть "8 Мая", "19/08/06" и т.д.
• author - Имя автора шаблона. Можете использовать любое имя.
• copyright - Информация о авторских правах на шаблон.
• authorEmail - E-mail автора шаблона. Этот e-mail защищен от спам-ботов. Для его просмотра в вашем браузере должна быть включена поддержка Java-script
• authorURL - Ссылка на веб-сайт автора.
• version - Текущая версия шаблона.
• files - Здесь указываются файлы, входящие в состав шаблона: php и т.д, но не изображения и файлы css. Каждый файл должен быть заключен в контейнер <filename></filename>.
• images - Аналогично файлам, только в этом разделе указываются изображения, входящие в состав шаблона. Также, каждое изображение должно быть заключено в контейнер.
• css - Аналогично, только здесь указываются файлы css-стилей. Как и в случае с файлами и изображениями, каждый css-файл должен быть заключен в контейнер <filename></filename>.

index.php

Именно этот файл определяет разметку шаблона и отвечает за вывод компонентов/модулей на экран. Именно в этом файле нам придется проводить большую часть времени создания шаблона. И именно этот файл отвечает за соответствие шаблона стандартам W3C. Ладно, пора переходить к изучению этого файла. Прежде всего, для каждого шаблона необходимо определить DOCTYPE. Тег <!DOCTYPE> сообщает браузеру о типе текущего документа и как его интерпретировать. Различают несколько версий и типов (X)HTML-документов. Тип нашего шаблона - XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>" xml:lang="<?php echo _LANGUAGE; ?>">

 Кроме версии XHTML Transitional, существует версия Strict. Опять же при описании различий между этими двумя версиями все упирается в стандарты W3C:

• XHTML 1.0 Strict используется в том случае, если в документе идет четкое разделение оформления и содержания. При этом код веб-страницы содержит только теги разметки, а сам вид элементов задается через стили.
• XHTML 1.0 Transitional обычно применяется, когда правило разделения оформления и содержания выполняется не в полной мере. В этом случае допускается в коде документа использовать теги физического проектирования (например, тег <TT>) и лишь частично стили.

Что еще находится в index.php?

Хорошо, с определением DOCTYPE мы разобрались, поэтому в следующем коде определение типа документа я опущу. Все нормальные шаблоны состоят из двух главных частей: заголовка (<HEAD>) и тела документа (<BODY>). Раздел заголовка может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. Теперь разберем на примере нашего шаблона. Взгляните на код:

<?php defined( '_VALID_MOS' ) or die( 'Доступ ограничен' ); ?>
<!--Определение DOCTYPE -->
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" />
</head>

И снова, как в случае с templateDetails.xml, я расшифрую каждую строчку вышеприведенного кода:

<?php defined( '_VALID_MOS' ) or die( 'Доступ ограничен' ); ?>

Предотвращает прямой доступ к файлу шаблона index.php. Допустим, пользователь в адресной строке браузера набрал адрес вида "http://site/joomla/templates/rd_demotemplate/index.php" - в итоге вместо исходного кода файла, Joomla! покажет ему 'Доступ ограничен'.

<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

Эта строка сообщает браузеру, какая кодировка используется на сайте. Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку.

<?php if ($my->id) { initEditor(); } ?>

Загрузка WISYWYG-редактора в фоновом режиме при посещении сайта. После авторизации пользователи, которым дан соответствующий доступ, впрочем, как и администраторы, могут редактировать новости/статьи прямо на сайте, не пользуясь "Панелью управления". Очень удобно, когда необходимо за считанные минуты исправить очепятку в тексте.

<?php mosShowHead(); ?>

Подставляет в веб-страницу метатэги. Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Данные для формирования метатэгов берутся из глобальной конфигурации сайта. Включает в себя следующие поля:

<title>Учебник Создание шаблона Joomla</title>
<meta name="description" content="doctype, установка joomla, создание шаблона для joomla" />
<meta name="keywords" content="doctype, шаблон, joomla" /> 
<meta name="Generator" content="Joomla! - Copyright (C) 2005 Open Source Matters. All rights reserved." />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="images/favicon.ico" />
<link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet" type="text/css" />

Подключение другого css-файла

 Для подключения таблицы связанных стилей используется тег <LINK> в заголовке страницы шаблона Joomla. Путь к файлу со стилями может быть как относительным, так и абсолютным. В нашем случае используется относительный путь к файлу. Конструкция

<?php echo $cur_template; ?>

Достоинства подключения отдельного файла стилей:

• Используется один файл со стилем
• Можно изменять таблицу стилей без модификации index.php
• При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем соответствующим элементам.
• Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, поэтому загрузка сайта происходит быстрее.

Вывод содержимого через index.php

Этот файл предназначен не только для вывода мета-информации и определения типа шаблона Joomla. Главное предназначение index.php - вывод содержимого (новостей, модулей и т.д.). В Joomla! уже имеются все необходимые команды вывода содержимого, их нужно только вставить в нужное место шаблона. Ниже приведены самые основные коды шаблоны Joomla 1.0.x:

<body>
<!-- 1 --><?php echo $mosConfig_sitename;?>
<!-- 2 --><?php mospathway()?>
<!-- 3 --><?php mosLoadModules('top');?>
<!-- 4 --><?php mosLoadModules('left');?>
<!-- 5 --><?php mosMainBody();?>
<!-- 6 --><?php mosLoadModules('right');?>
<!-- 7 --><?php include_once( $mosConfig_absolute_path .'/includes/footer.php' );?>
</body>

Рассмотрим их по порядку:

1. Выводит название сайта в любом месте шаблона.
2. Pathway. Показывает, в каком разделе сайта пользователь находится.
3. Вывод модулей в позиции "top"
4. Вывод модулей в позиции "left"
5. Вывод основного содержимого - новостей/компонентов и т.д.
6. Вывод модулей в позиции "right"
7. Footer шаблона. Данная команда подключает файл footer.php, находящийся в папке /includes сайта.