Создание шаблона Joomla за 6 шагов. Шаг 1.

Начнем создание шаблона для CMS Joomla 1.6.

Файлы, которые входят в шаблон

При конструировании собственного шаблона нужно скоординировано создать несколько папок и файлов, которые необходимы для его работы. Все файлы размещаются в директории с именем шаблона  в папке /templates/ в каталоге, в котором установлена Joomla.  Например, если у вас есть два шаблона, один из которых называется Element, а второй Voodoo, то их папки будут выглядеть  следующим образом:

/templates/Voodoo
/templates/Element

Обратите внимание на то, что имя папки и шаблона должны быть одинаковыми. Названия чувствительными к регистру символов (Voodoo и voodoo - разные имена) и в них не должно быть пробелов.

Для нашего шаблона мы будем использовать имя RusellerSimple. Соответственно его каталог будет выглядеть как /templates/RusellerSimple.

В состав шаблона обязательно должны входить два файла, templateDetails.xml и index.php:

/RusellerSimple/templateDetails.xml
/RusellerSimple/index.php

Данные файлы используются ядром Joomla.

Первый файл (templateDetails.xml) является описанием шаблона в XML формате. Он содержит метаданные, которые указывают Joomla имя автора, права использования, файлы и различные данные, необходимые для работы шаблона. Информация используется при установке шаблона в систему.

Второй файл (index.php) служит для генерации страниц.

Почти все шаблоны используют дополнительные файлы, хотя их наличие не является обязательным:

/RusellerSimple/template_thumbnail.png
/RusellerSimple/params.ini
/RusellerSimple/css/template.css
/RusellerSimple/images/logo.png

/RusellerSimple/template_thumbnail.png - снимок страницы шаблона (обычно уменьшается до размера 140х90 px), который после установки становится доступным для просмотра в "Менеджере шаблонов".

/RusellerSimple/params.ini - текстовый файл, который хранит значения различных параметров, используемых в шаблоне.

/RusellerSimple/css/template.css - файл стилей CSS шаблона. Расположение папки и имя файла можно изменять, однако его надо задать в файле index.php. В последующих уроках вы увидите, что очень выгодно иметь несколько файлов стилей.

/RusellerSimple/images/logo.png - изображение, которое используется в шаблоне. Обычно все картинки помещают в одну папку (в нашем примере - /images). Названия файла и папки могут быть какими угодно.

templateDetails.xml

Файл templateDetails.xml действует как декларация, которая описывает все файлы и папки, которые входят в состав шаблона. Также в него включается информация описательного характера - имя автора, права использования, дата создания и так далее. Некоторые данные выводятся в "Менеджере шаблонов". В нашем примере используется такой XML файл:

<?xml version="1.0" encoding="utf-8"?>
	<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//RU"
	"http://www.joomla.org/xml/dtd/1.6/template-install.dtd">
	<install version="1.6" type="template">
<name>RusellerSimple</name>
<creationDate>09/07/11</creationDate>
<author>Сергей Фастунов</author>
<authorEmail>
 Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
 </authorEmail>
<authorUrl>http://www.ruseller.com</authorUrl>
<copyright>Copyright (C) 2011 Евгений Попов</copyright>
<license>GPL</license>
<version>1.0.0</version>
<description>Первый шаблон серии уроков "Создание шаблонов для Joomla"</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>params.ini</filename>
<folder>images</folder>
<folder>css</folder>
</files>
<positions>
<position>breadcrumbs</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>footer</position>
<position>debug</position>
</positions>

<config>
<fields  name="params">
<fieldset  name="basic">
<field
name="colorVariation"
type="list"
default="blue"
label="Вариант цвета"
description="Основной цвет шаблона">
<option
value="blue">синий</option>
<option
value="red">красный</option>
</field>
</fieldset>
</fields>
</config>
</install>

Давайте посмотрим, какое значение имеют некоторые строки:

• <install version="1.6" type="template"> - данная директива является командой для инсталлятора. Опции указывают, что устанавливается шаблон для Joomla версии 1.6.
• <name>RusellerSimple</name> - определяет имя шаблона. Также оно используется для создания папки в каталоге шаблонов. Поэтому в нем должны содержаться только системные символы. Если вы создаете шаблон вручную, то имя его должно совпадать с именем папки шаблона в каталоге.
• <creationDate>09/07/11</creationDate> - дата создания шаблона.
• <author>Сергей Фастунов</author> - имя автора.
• <authorEmail> Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript </authorEmail> - адрес email автора.
• <authorUrl>http://www.ruseller.com</authorUrl> - адрес сайта автора.
• <copyright>Copyright (C) 2011 Евгений Попов</copyright> - информация о владельце прав использования шаблона.
• <license>GPL</license> - вид лицензии на шаблон.
• <version>1.0.0</version> - номер версии.
• <description>Первый шаблон серии уроков "Создание шаблонов для Joomla"</description> - описание шаблона.
• <files></files> - в данном разделе перечисляются файлы, которые используются в шаблоне. Для описания файлов используются два вида тегов <filename> и <folder>:

  <filename>index.php</filename>
  <filename>templateDetails.xml</filename>
  <filename>params.ini</filename>
  <folder>images</folder>
  <folder>css</folder>

  Тег <filename>  обрамляет имя файла, а <folder> - имя папки.
• <positions></positions> - данный раздел описывает все доступные положения в шаблоне. Имена положений должны совпадать с тем, что определяется в файле index.php.
• <config></config> - в данном разделе описываются параметры, которые используются в шаблоне. Например, в примере приводится задание параметров для изменения цветовой схемы шаблона.

index.php

Файл index.php представляет собой комбинацию кода PHP и HTML, которые полностью задают представление данных в шаблоне.

Рассмотрим критическую часть файла для создания правильного шаблона: директиву !DOCTYPE, которая находится в верхней части.

<?php
	/**
* @copyrightCopyright (C) 2011 Евгений Попов
* @licenseGPL
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Самое первое выражение PHP просто выводит информацию об авторских правах  и лицензии, а также предотвращает непосредственный доступ к файлу.

Код $app = Jfactory::getApplication(); является вызовом функции, которая позволяет получить и использовать в шаблоне различные параметры Joomla (например, имя сайта).

Директива !DOCTYPE является фундаментальным компонентом веб страницы, которая указывает браузеру, как ее выводить. Она указывает, как браузер будет обрабатывать теги HTML и, что даже более важно, как будет интерпретироваться CSS (есть ли на странице устаревший код, содержится ли XML и так далее).

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

Директива DOCTYPE должна быть расположена в первой строке, а путь к странице описания стандарта должен приводиться полностью. Например, браузер Internet Explorer 6 в случае ошибки распознавания стандарта переходит в режим обратной совместимости и начинает отображать страницу как Internet Explorer 4. 

Наш шаблон создается в расчете на использование в Internet Explorer 6 и далее. Поэтому очень важно соблюсти наличие директивы DOCTYPE в качестве первой строки генерированного HTML файла, чтобы в дальнейшем использовать как можно меньше ухищрений в коде.

За директивой DOCTYPE следует XML выражение:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

И за ним следует секция head:

<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/<?php echo $this->baseurl?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
</head>

Код <?php echo $this->language; ?> вытягивает из Joomla информацию об используемом на сайте языке и вставляет ее в код шаблона.

Код <jdoc:include type="head" /> вставляет в заголовок страницы развернутую информацию, которая устанавливается в настройках Joomla. Например, код заголовка страницы нашего шаблона будет выглядеть так:

<head> 
  <base href="http://joomla/index.php" /> 
  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
  <meta name="robots" content="index, follow" /> 
  <meta name="keywords" content="" /> 
  <meta name="rights" content="" /> 
  <meta name="language" content="ru-RU" /> 
  <meta name="generator" content="Joomla! 1.6 - Open Source Content Management" /> 
  <title>Home</title> 
  <link href="/index.php?format=feed&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" /> 
  <link href="/index.php?format=feed&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" /> 
  <script src="/media/system/js/core.js" type="text/javascript"></script> 
  <script src="/media/system/js/mootools-core.js" type="text/javascript"></script> 
  <script src="/media/system/js/caption.js" type="text/javascript"></script> 
 
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" /> 
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" /> 
<link rel="stylesheet" href="/templates/RusellerSimple/css/template.css" type="text/css" /> 
</head>

Большая часть информации заголовка генерируется "на лету" и соответствует тому, какой материал выводится в текущий момент.

Последние строчки в разделе заголовка нашего шаблона предназначены для генерации ссылок на страницы стилей CSS:

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

Первые два файла, system.css и general.css, содержат общие стили для Joomla. А последний, является файлом стилей шаблона, который мы назвали template.css. Код <?php echo $this->template ?> возвращает путь к текущему шаблону. Такое использование позволяет сделать наш код более универсальным. При создании следующего шаблона можно будет просто скопировать туда строку и код будет работать правильно.

CSS шаблона может включать сколько угодно файлов. Например, для задания различных стилей для различных браузеров или для разных сред вывода информации (на экран, напечатать, на мобильные устройства). Например, следующий код определяет использование дополнительного файла CSS для Internet Explorer 6 (в нашем простом шаблоне мы его не используем):

<!--[if lte IE 6]>
	<link href="/templates/<?php echo $this->template ?>/css/ieonly.css"
	rel="stylesheet" type="text/css" />
<![endif]-->

А следуюший код является примером использования параметров шаблона. В "менеджере шаблонов" можно выбрать цветовую схему, а в соответствии с выбранным значением параметра будет загружаться соответствующий файл со стилями:

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />

А код HTML будет выглядеть следующим образом:

<link rel="stylesheet" href="/templates/RusellerSimple/css/red.css" type="text/css" />

Раздел body страницы шаблона

Итак, раздел заголовка страницы шаблона готов. Теперь можно приступить к созданию непосредственно тела.

Нужно вставить все выражения Joomla, код HTML и добавить модули. Для нашего примера код тела страницы будет выглядеть следующим образом:

<body>
	<?php echo $app->getCfg('sitename');?><br />
	<jdoc:include type="modules"  name="top" />
	<jdoc:include type="modules"  name="left" />
	<jdoc:include type="modules"  name="breadcrumbs" />
	<jdoc:include type="component" />
	<jdoc:include type="modules"  name="right" />
	<jdoc:include type="modules"  name="footer" />
	<jdoc:include type="modules"  name="debug" />
</body>

Модули должны соответствовать тому, что было описано в templateDetails.xml. Если запустить наш шаблон, то сайт с тестовым наполнением будет выглядеть следующим образом:

В коде используются команды Joomla.

Код <?php echo $this->template ?> вставляет в код страницы информацию об имени сайта.

Выражение jdoc используется для вставки в код HTML модулей или компонентов.

Для вставки вывода информации компонента, который определяется связанным пунктом меню, используется код <jdoc:include type="component" />.

Для вставки модуля используется код <jdoc:include type="modules" name="right">. Данная строка генерирует код HTML всех модулей, которые размещены в позиции "right". Порядок следования модулей определяется в соответствии со значениями "Порядок", которое можно установить в "Менеджере модулей".

Установка шаблона

В Joomla версии 1.6 недостаточно просто скопировать файлы шаблона в папку /templates. Нужно еще и провести поиск и установку модуля. Выполняются данные операции в "Менеджере расширений" на закладке "Поиск".

Сначала нажимаем кнопку "Найти" (файлы шаблона уже должны быть скопированы в папку /templates). Когда Joomla завершит поиск, нужно выбрать найденный шаблон и нажать кнопку "Установить". После завершения установки можно переходиить к другим панелям для конфигурации системы с новым шаблоном.

Анонс

На следующем шаге мы подключим стили CSS к нашему шаблону.

• Комментарии