Из чего состоит шаблон Joomla 1.0?

Статья руководства Создание шаблона Joomla

Создание шаблона Joomla 1.0.х
Руководство

Оглавление учебника

Приложения

Любая перепечатка учебника или его части запрещена без согласия администрации Joom.ru

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

Демонстрационный шаблон упакован в архив. Здесь сделаем небольшое лирическое отступление: в 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 вашего сайта.

Содержание

1 templateDetails.xml
2 index.php
3 Что ещё находится в index.php?
4 Подключение другого css-файла
- 4.1 Вывод содержимого через index.php

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> author@email.com </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; ?>

возвращает в документ название текущего шаблона Joomla сайта, а вернее - название папки с шаблоном Joomla.

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

Используется один файл со стилем
Можно изменять таблицу стилей без модификации 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>

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

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

Вернуться: W3C-стандарты

Далее: Создание шаблона Joomla: CSS и HTML