Из каких файлов состоит шаблон Joomla, и какие функции они выполняют?

 

 

Из каких файлов состоит шаблон Joomla, и какие функции они выполняют
 

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

Компоненты файлов шаблона

Шаблон Joomla состоит из нескольких файлов и папок. Эти файлы находятся в папке /templates/ в корневой директории Joomla, каждый в своей папке. Так, если нас установлено два шаблона, мы увидим такую структуру:

/templates/element
/templates/voodoo

Обратите внимание, что имена папок шаблонов совпадают с названиями самих шаблонов, в нашем случае это «element» и «voodoo». Отметим, что имена присваиваются с учетом регистра и не должны содержать пробелов.

Внутри директории шаблона есть несколько обязательных файлов:

/element/templateDetails.xml
/element/index.php

Имена этих двух файлов их местоположение должны быть именно такими, так как к ним обращается скрипт ядра Joomla.

Первый файл — это XML-файл нашего шаблона.

templateDetails.xml

Это файл метаданных шаблона в формате XML, который передает скрипту сведения о всех файлах, необходимых для формирования страницы по этому шаблону. Не забудьте про прописную «D» в названии. Также в нем указан автор, копирайты и файлы, составляющие шаблон (включая все используемые изображения). Этот же файл используется при установке шаблона из панели администрирования.

Второй файл — собственно, движок шаблона.

index.php

Этот файл наиболее важен. Он задает раскладку страницы и сообщает Joomla где поместить различные компоненты и модули. Файл представляет собой комбинацию PHP и (X)HTML.

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

/element/template_thumbnail.png
/element/css/template.css
/element/images/logo.png

Это пример расположения этих файлов. В Таблице 9.1 описан каждый из них.

Таблица 9.1. Основные файлы, необходимые для шаблона

/templatename/folder/filename

Описание

/element/template_thumbnail.png

Скриншот страницы, собранной браузером по этому шаблону (обычно уменьшаемый примерно до 140×90 пикселей). После того, как шаблон установлен, эта картинка используется при выводе «предварительного просмотра» в Менеджере шаблонов администраторской панели Joomla, а также в модуле выбора шаблона на сайте (если используется этот модуль).

/element/css/template.css

Таблица CSS шаблона. Отдельная папка для таблиц стилей может и не создаваться, но расположение файла должно быть указано в файле index.php. Назвать его вы можете как вам больше нравится. Обычно используется указанное здесь название, но, как будет сказано ниже, есть определенные плюсы в наличие и других файлов CSS.

/element/images/logo.png

Любые изображения, которые используются в шаблоне. Папка создана для упорядочивания структуры. Большинство разработчиков шаблонов делают именно так. В нашем случае, для примера приведен файл logo.png.

 

templateDetails.xml

В templateDetails.xml должны быть описаны все файлы, из которых состоит шаблон. В нем также указывается информация об авторе и авторском праве. Часть этой информации отображается потом в Менеджере Шаблонов административной панели Joomla. Ниже показан пример содержания этого файла:

 

<?xml version="1.0" encoding="utf-8"?>

<install version="1.5" type="template">

<name>TemplateTutorial15</name>

<creationDate>August 2007</creationDate>

<author>Barrie North</author>

<copyright>GPL</copyright>

<authorEmail> Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript. </authorEmail>

<authorUrl>www.compassdesigns.net</authorUrl>

<version>1.0</version>

<description>First example template for Chapter 9 of the Joomla Book</description>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>js/somejsfile.js</filename>

<filename>images/threecol-l.gif</filename>

<filename>images/threecol-r.gif</filename>

<filename>css/customize.css</filename>

<filename>css/layout.css</filename>

<filename>css/template_css.css</filename>

</files>

<positions>

<position>user1</position>

<position>top</position>

<position>left</position>

<position>banner</position>

<position>right</position>

<position>footer</position>

</positions>

<params>

<param name="colorVariation" type="list" default="white" label="Color Variation" description="Color variation to use">

<option value="blue">Blue</option>

<option value="red">Red</option>

</param>

</params>

</install>

 

Давайте рассмотрим значение некоторых из этих строк:

<install version="1.5" type="template">. Содержимое документа XML — инструкция для инсталлятора Joomla. type="template" сообщает инсталлятору, что ставить мы будем шаблон и этот шаблон предназначен для Joomla 1.5.

<name>TemplateTutorial15</name>. Определяет название Вашего шаблона. Имя, которое Вы вводите здесь, будет также использоваться, чтобы создать справочник в пределах справочника шаблонов. Поэтому это не должно содержать характеры, с которыми файловая система не может обращаться, например места. Устанавливая вручную, Вы должны создать справочник, который идентичен названию шаблона.

<creationDate>August 2007</creationDate>. Дата создания шаблона. Для этого поля нет четких правил заполнения. Значение может быть любым, например «май 2005»,« 08-June-1978», «01.01.2004», и так далее.

<author>Barrie North</author>. Имя автора шаблона. Можете поставить свое имя.

<copyright>GPL</copyright>. В этом элементе указывается информация об авторском праве. Пример лицензии для разработчиков и дизайнеров можно посмотреть на форумах Joomla.

<authorEmail> Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript. </authorEmail>. Адрес электронной почты для связи с автором шаблона.

<authorUrl>www.compassdesigns.net</authorUrl>. URL сайта автора.

<version>1.0</version>. Версия шаблона.

<files> … </files>. Различные файлы использующиеся в шаблоне.

Файлы, использующиеся в шаблоне, описаны в атрибуте <files>:

 

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>js/somejsfile.js</filename>

<filename>images/threecol-l.gif</filename>

<filename>images/threecol-r.gif</filename>

<filename>css/customize.css</filename>

<filename>css/layout.css</filename>

<filename>css/template_css.css</filename>

</files>

 

Раздел «files» описывает все файлы, начиная от PHP-движка шаблона до скриншота предварительного просмотра шаблона. Каждый файл, перечисленный в этом разделе, заключен в тег приложен <filename> … </filename>. Также здесь перечислены все дополнительные файлы, например задействованный в шаблоне файл JavaScript.

Все файлы изображений, использующиеся в шаблоне также внесены в раздел «files». Каждый из них заключен в тег <filename> … </filename>. Пути к файлам изображений указываются от корневой папки шаблона. Например, если шаблон находится в папке «YourTemplate» а все изображения находятся в папке «images» внутри папки «YourTemplate», корректным указанием пути будет: <filename>images/my_image.jpg</filename>.

Наконец, все необходимые стили перечислены здесь же. Имя файла описано в <filename> … </filename>, путь указан от корня шаблона.

<positions> … </positions>. Расположение модулей, использующихся в шаблоне.

<params> … </params>. Здесь описаны параметры, которые могут быть установлены для внутренних функций шаблона. Например, для изменения цвета элементов шаблона.

index.php

Что же на самом деле находится в файле index.php? Этот файл представляет собой комбинацию (X)HTML и PHP и определяет все, касающееся разметки и отображения страницы.

Для начала давайте посмотрим на весьма критичную для достижения валидности шаблона запись DOCTYPE в верхней части index.php. Эта маленькая часть кода есть в верхней части каждой веб-страницы. В нашем шаблоне она также присутствует:

 

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Первая строка просто проверяет средствами PHP не обращаются ли к файлу напрямую. Это сделано из соображений безопасности.

DOCTYPE веб-страницы — один из фундаментальных компонентов того, как браузер будет отображать веб-страницу и как он будет интерпретировать CSS. Чтобы стало понятнее, приведу цитату с сайта&nbsp alistapart.com:

[Информация о DOCTYPE на сайте W3C] написана ботанами для ботанов. И когда я говорю о ботанах, я не имею ввиду обычных профессионалов в веб-разработке, таких как вы и я. Я подразумеваю ботанов, которые заставляют нас выглядеть как бабушка в День-Когда-Ей-Пришло-Первое-Письмо™.

Так или иначе, вы можете использовать несколько DOCTYPE. Для начала, DOCTYPE говорит браузеру, как интерпретировать страницу. Здесь также присутствуют слова «strict» и «transitional», определяющие, кстати, обработку float:left и float:right. С тех пор, как появился интернет, у различных браузеров были различные уровни поддержки CSS. Это означает например, что Internet Explorer не поймет команду min-width, устанавливающую минимальную ширину страницы. Чтобы продублировать эффект от этой команды, вы должны заложить в CSS соответствующий «хак».

Некоторые говорят, что применение XHTML как text/html чревато проблемами. Если вы правильно понимаете это утверждение, то вы весьма в теме и это руководство можете не читать. Возможно, что-то полезное для себя вы подчерпнете здесь:hixie.ch/advocacy/xhtml.

«Strict» означает, что HTML (или XHTML) будет интерпретироваться в строгом соответствии стандартами. «Transitional» DOCTYPE же разрешает некоторые отступления от стандартов при интерпретации.

Чтобы еще больше усложнить жизрь, отметим, что есть еще режим «quirks». Если DOCTYPE указан некорректный, устаревший или ссылка на него не работает, браузер входит в режим «quirks». Режим этот введен для поддержки обратной совместимости, то есть Internet Explorer 6, например, будет форматировать страницу так, как это сделал бы IE4.

К сожалению, ваш сайт может начать обрабатываться в режиме «quirks» без вашего особого желания. Обычно это случается по двум причинам:

если ссылка на DOCTYPE взята с сайта WC3 и ссылка оканчивается на «DTD/xhtml1-strict.dtd». Это относительная ссылка внутри сайта WC3, а вам нужно было указать полный URL, как было показано выше.

Microsoft настроила IE6, так, чтобы он выдавал валидные страницы, но при этом находился в режиме «quirks». Это происходит при указании декларации XML перед DOCTYPE.

После DOCTYPE идет декларация XML:

 

<html xmlns="www.w3.org/1999/xhtml"

xml:lang="<?php echo $this->language; ?>"

lang="<?php echo $this->language; ?>" >

 

Не забудьте о режиме «quirks» в IE6. В этой главе мы проектируем шаблон для IE6 +, так что стоит удостовериться, что он будет работать в стандартном режиме. Это минимизирует количество «хаков», которые мы рассмотрим позже.

Внимание! Создание страницы по стандартам (когда вы видите внизу страницы значок «valid XHTML») не означает написание трудоемкого или малопонятного кода. Это просто означает, что написанный вами код соответствует проставленному DOCTYPE. И все! И более ничего.

Таким образом, процессс разработки вашего сайта по стандартам можно описать так: «скажите, что вы будете делать и делайте то, что вы сказали».

Вот некоторые полезные ссылки, которые помогут вам разобраться в «quirks»-режиме и DOCTYPE:

www.quirksmode.org/css/quirksmode.html
www.alistapart.com/stories/doctype
www.w3.org/QA/2002/04/Web-Quality
forum.joomla.org/index.php/topic,7537.0.html
forum.joomla.org/index.php/topic,6048.0.html

Что еще есть в index.php?

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

 

<?php // no direct access defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="www.w3.org/1999/xhtml"

xml:lang="<?php echo $this->language; ?>"

lang="<?php echo $this->language; ?>" >

<head>

<jdoc:include type="head" />

<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/<?php echo $this->template ?>/css/template.css" type="text/css" />

</head>

 

Что все это означает?

Мы уже обсудили значение декларации DOCTYPE в index.php файле. <?php echo $this->language; ?> считывает установки языка из установок Joomla.

Следующая строка должна подключить в заголовок дополнительную информацию:

<jdoc:include type="head" />

Дополнительная информация для заголовка опять же берется из установок Joomla. По умолчанию в ней содержится следующее:

 

<title>Welcome to the Frontpage</title>

<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />

<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="robots" content="index, follow" />

<meta name="keywords" content="joomla, Joomla" />

<link href="/iz-kakikh-fajlov-sostoit-shablon-joomla-i-kakie-funktsii-oni-vypolnyayut.html?amp;view=frontpage&amp;format=feed&amp;Itemid=1&amp;type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />

<link href="/iz-kakikh-fajlov-sostoit-shablon-joomla-i-kakie-funktsii-oni-vypolnyayut.html?amp;view=frontpage&amp;format=feed&amp;Itemid=1&amp;type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />

<script type="text/javascript" src=/localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script>

<script type="text/javascript" src="/localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>

 

Большая часть этой информации создается «на лету» в зависимости от страницы (статья) обрабатываемой движком. Сюда же включаются метатеги для favicon, URL потоков RSS, и некоторых стандартных скриптов JavaScipt.

Последние строчки в заголовке обеспечивают связь с файлами CSS шаблона:

 

<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/<?php echo $this->template ?>/css/template.css" type="text/css" />

 

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

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

 

<!--[if lte IE 6]>

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

<![endif]-->

 

Этот пример — часть технологии использования параметров шаблона:

 

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