Весной 2008 года в блоге Compass Designs был опубликован неплохой цикл статей о создании «чистого» шаблона для Joomla 1.5 (под «чистым» в данном случае понимается шаблон, сверстанный по современным стандартам, т.е. без использования таблиц и с грамотным применением каскадных таблиц стилей). Первые две части цикла содержат в основном общие объяснения терминологии, советы по организации разработки на локальном хосте и т.д., поэтому я решил опубликовать переводы только основных 4-х статей, которые собственно и содержат небольшое руководство по созданию шаблона. Итак, сегодня первая часть, содержащая основные сведения о построении шаблонов Joomla.
Для того, чтобы понять, из чего состоит шаблон, мы начнем с рассмотрения пустого шаблона Joomla.
Шаблон Joomla содержит некоторый набор файлов и директорий. Шаблоны должны быть размещены в директории /templates/ установленного дистрибутива Joomla, каждый в собственной поддиректории. Т.е., если у нас установлены два шаблона, то директория /template/ выглядит примерно так:
Обратите внимание, что название директории для шаблона должно совпадать с названием этого шаблона, как в данном случае «element» и «voodoo». Как правило, названия чувствительны к регистру букв и не должны содержать пробелы. Внутри директории шаблона находятся два ключевых файла:
Имена этих файлов и их расположение должны быть в точности такими, поскольку именно так они вызываются ядром Joomla.
Первый из них — это XML-файл шаблона
templateDetails.xml
Это файл мета-данных в XML-формате, сообщающий Joomla, какие другие файлы, включая файлы изображений, нужны для отображения страницы, которая использует данный шаблон. Обратите внимание на букву «D» в верхнем регистре. Также он сожержит информацию об авторе и копирайте. И наконец, он используется при инсталляции шаблона в административном интерфейсе.
Второй файл — это основной движок шаблона:
Этот файл является самым важным. Он определяет визуальное расположение элементов сайта и сообщает Joomla CMS, куда поместить различные компоненты и модули. Этот файл является комбинацией PHP и (X)HTML.
Практически во всех шаблонах используются дополнительные файлы. Общепринято (хотя это и не является требованием ядра) называть и размещать эти файлы следующим образом:
Это просто примеры. Ниже приведено описание каждого файла:
/element/template_thumbnail.png
Скриншот шаблона (обычно уменьшенный до 140 пикселей в ширину и 90 пикселей в высоту). После установки шаблона, этот скриншот можно увидеть с помощью функции «Preview Image» в разделе «Template Manager» административного интерфейса, а также в модуле выбора шаблона оформления в публичной части (если этот модуль задействован).
/element/css/template.css
Таблица стилей шаблона. Название директории устанавливается произвольно, но вы должны указать, путь к этому файлу в index.php. Название файла тоже может быть любым. Обычно применяется указанные выше название файла, но ниже вы увидите, что есть некоторые преимущества и у использования дополнительных CSS-файлов.
/element/images/logo.png
Любые изображения, включенные в шаблон. Опять же, из организационных соображений, большинство разработчиков размещают их в директории images. Мы указали картинку с названием logo.png в качестве примера.
templateDetails.xml
templateDetails.xml должен содержать перечень всех файлов, содержащихся в шаблоне. Также он включает информацию об авторе и копирайте. Часть этой информации можно увидеть в менеджере шаблонов в административном интерфейсе Joomla. Ниже приведен пример XML-файла:
Поясним отдельные строки:
Содержимое XML-документа — это инструкции для инсталлятора в административном интерфейсе Joomla. Опция type=«template» сообщает инсталлятору, что мы устанавливаем шаблон, предназначенный для Joomla версии 1.5.
Определяет название шаблона. Это имя также будет использовано при создании поддиректории шаблона в директории templates. Если вы устанавливаете шаблон вручную, то вы должны создать поддиректорию с названием, идентичным названию шаблона.
Дата создания шаблона. Это поле задается в свободном формате и может быть любой строкой типа «May 2005», «08-June-1978», «01/01/2004» и т.д.
Имя автора шаблона (вероятно, ваше имя).
Информация о копирайте. Руководство по лицензированию для разработчиков и дизайнеров вы можете найти в форумах Joomla.
E-mail для связи с автором шаблона.
Адрес сайта автора.
Версия шаблона.
Различные файлы, используемые в шаблоне.
Файлы, используемые в шаблоне, заключаются в теги <filename>:
Секция «files» содержит все основные файлы типа PHP-скриптов или изображений для превью шаблона. Каждый файл перечисляется в этой секции внутри тегов <filename> и </filename>. Также здесь указываются дополнительные файлы, например JavaScript-файлы, используемые в шаблоне.
Файлы картинок, используемых в шаблоне, также перечисляются в секции «files». Опять же, каждый файл заключается в теги <filename> и </filename>. Пути к файлам указываеются относительно корневой директории шаблона. Например, если шаблон находится в директории 'YourTemplate', а все картинки находстя в поддиректории 'images', то правильный путь к файлу будет:
Наконец, в секции files перечисляются все файлы стилей, используемые в шаблоне. И снова, имя файла заключается в теги <filename> и </filename>, а путь файла указывается относительно корневой папки шаблона.
Позиции модулей, используемые в шаблоне.
Описывает параметры, которые могут задаваться для различных функций шаблона, например, для изменения его цвета.
Продолжение части 1 здесь: mancocapac.habrahabr.ru/blog/41215
Оригинал статьи на английском можно прочитать здесь:
www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=2
Создание простого пустого шаблона
Для того, чтобы понять, из чего состоит шаблон, мы начнем с рассмотрения пустого шаблона Joomla.
Файлы шаблона
Шаблон Joomla содержит некоторый набор файлов и директорий. Шаблоны должны быть размещены в директории /templates/ установленного дистрибутива Joomla, каждый в собственной поддиректории. Т.е., если у нас установлены два шаблона, то директория /template/ выглядит примерно так:
/templates/element /templates/voodoo
Обратите внимание, что название директории для шаблона должно совпадать с названием этого шаблона, как в данном случае «element» и «voodoo». Как правило, названия чувствительны к регистру букв и не должны содержать пробелы. Внутри директории шаблона находятся два ключевых файла:
/element/templateDetails.xml /element/index.php
Имена этих файлов и их расположение должны быть в точности такими, поскольку именно так они вызываются ядром Joomla.
Первый из них — это XML-файл шаблона
templateDetails.xml
Это файл мета-данных в XML-формате, сообщающий Joomla, какие другие файлы, включая файлы изображений, нужны для отображения страницы, которая использует данный шаблон. Обратите внимание на букву «D» в верхнем регистре. Также он сожержит информацию об авторе и копирайте. И наконец, он используется при инсталляции шаблона в административном интерфейсе.
Второй файл — это основной движок шаблона:
index.php
Этот файл является самым важным. Он определяет визуальное расположение элементов сайта и сообщает Joomla CMS, куда поместить различные компоненты и модули. Этот файл является комбинацией PHP и (X)HTML.
Практически во всех шаблонах используются дополнительные файлы. Общепринято (хотя это и не является требованием ядра) называть и размещать эти файлы следующим образом:
/element/template_thumbnail.png /element/css/template.css /element/images/logo.png
Это просто примеры. Ниже приведено описание каждого файла:
/element/template_thumbnail.png
Скриншот шаблона (обычно уменьшенный до 140 пикселей в ширину и 90 пикселей в высоту). После установки шаблона, этот скриншот можно увидеть с помощью функции «Preview Image» в разделе «Template Manager» административного интерфейса, а также в модуле выбора шаблона оформления в публичной части (если этот модуль задействован).
/element/css/template.css
Таблица стилей шаблона. Название директории устанавливается произвольно, но вы должны указать, путь к этому файлу в index.php. Название файла тоже может быть любым. Обычно применяется указанные выше название файла, но ниже вы увидите, что есть некоторые преимущества и у использования дополнительных CSS-файлов.
/element/images/logo.png
Любые изображения, включенные в шаблон. Опять же, из организационных соображений, большинство разработчиков размещают их в директории images. Мы указали картинку с названием logo.png в качестве примера.
templateDetails.xml
templateDetails.xml должен содержать перечень всех файлов, содержащихся в шаблоне. Также он включает информацию об авторе и копирайте. Часть этой информации можно увидеть в менеджере шаблонов в административном интерфейсе Joomla. Ниже приведен пример XML-файла:
<?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> compassdesigns@gmail.comThis e-mail address is being protected from spambots, you need JavaScript enabled to view it </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>
Определяет название шаблона. Это имя также будет использовано при создании поддиректории шаблона в директории templates. Если вы устанавливаете шаблон вручную, то вы должны создать поддиректорию с названием, идентичным названию шаблона.
<creationDate>August 2007</creationDate>
Дата создания шаблона. Это поле задается в свободном формате и может быть любой строкой типа «May 2005», «08-June-1978», «01/01/2004» и т.д.
<author>Barrie North</author>
Имя автора шаблона (вероятно, ваше имя).
<copyright>GPL</copyright>
Информация о копирайте. Руководство по лицензированию для разработчиков и дизайнеров вы можете найти в форумах Joomla.
<authorEmail>author@somedomain.com</authorEmail>
E-mail для связи с автором шаблона.
<authorUrl>www.compassdesigns.net</authorUrl>
Адрес сайта автора.
<version>1.0</version>
Версия шаблона.
<files></files>
Различные файлы, используемые в шаблоне.
Файлы, используемые в шаблоне, заключаются в теги <filename>:
<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', то правильный путь к файлу будет:
<filename>images/my_image.jpg</filename>
Наконец, в секции files перечисляются все файлы стилей, используемые в шаблоне. И снова, имя файла заключается в теги <filename> и </filename>, а путь файла указывается относительно корневой папки шаблона.
<positions></positions>
Позиции модулей, используемые в шаблоне.
<params></params>
Описывает параметры, которые могут задаваться для различных функций шаблона, например, для изменения его цвета.
Продолжение части 1 здесь: mancocapac.habrahabr.ru/blog/41215
Оригинал статьи на английском можно прочитать здесь:
www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=2
