Уроки Joomla! 1.5

---

Урок 9. Перевод HTML-шаблона в шаблон для CMS Joomla! 1.5

Цели:

• Научить создавать шаблоны для CMS Joomla! 1.5.

Задачи:

1. Сформировать знания о структуре каталогов joomla-шаблонов.
2. Сформировать знания о структуре файлов joomla-шаблонов.
3. Овладеть навыками создания joomla-шаблонов.

Созданный в теме №8 HTML-шаблон сайта теперь необходимо адаптировать под CMS Joomla! 1.5. Сперва рассмотрим общие сведения о шаблонах для данной CMS.

Структура каталога шаблона

Шаблон должен быть сохранен в определенной структура каталогов:

• [Путь_к_Joomla] / templates / [имя_шаблона] /
• [Путь_к_Joomla] / templates / [имя_шаблона] / CSS /
• [Путь_к_Joomla] / templates / [имя_шаблона] / images /

В каталогах шаблона должны быть представлены различные файлы с предопределенными именами:

• Файл компоновки. Это HTML-файл, который был создан ранее, но заканчиваться он должен на .php -  [Путь_к_Joomla] / templates / [имя_шаблона] / index.php, поскольку элементы динамического модуля Joomla! должны интерпритироваться PHP.
• Изображение предварительного просмотра. Файл [Путь_к_Joomla] / templates / [имя_шаблона] / template_thumbnail.png содержит изображение предварительного просмотра шаблона, которое предназначено для предварительного просмотра в диспетчере шаблонов Joomla. Изображения предварительного просмотра имеют формат примерно 200x150 пикселей. Вы можите создать этот файл позднее, когда увидите готовый шаблон.
• Метаданные шаблона. Файл [Путь_к_Joomla] / templates / [имя_шаблона] / templateDeteils.xml представляет техническое руководство для инсталлятора шаблонов и содержит инсталляции для выбора шаблона в менеджере шаблонов. Здесь специфицируется место, куда должны копироваться файлы, кто их автор, а также дополнительные метаданные о шаблоне. Для каждого файла, который применяется в шаблоне, соответствующий контейнер XML должен быть наполнен именем файла и корректным путем.

<files>
   <filename> ... имя файла из каталога ... </filename>
   <filename> ... для каждого файла предусмотрен контейнер filename ... </filename>
</files>

Примерное полное содержимое XML-файла:

<install version="1.5" type="template">
<name>joomla_book</name>
<version>1.0</version>
<creationDate>10.10.2010</creationDate>
<author>Author Name</author>
<copyright>GNU/GPL</copyright>
<authorEmail>name@site.com</authorEmail>
<authorUrl>http://www.site.ru</authorUrl>
<description>...описание шаблона...</description>
<files>
   <filename>index.php</filename>
   <filename>templateDeteils.xml</filename>
   <filename>template_thumbnail.png</filename>
   <filename>css/template.css</filename>
</files>
</install> 

• CSS-файл. Для разрабатываемого шаблона можно использовать несколько CSS-файлов. Располагаться данные файлы должны в папке: [Путь_к_Joomla] / templates / [имя_шаблона] / CSS / [css_файлы].
• Графика, изображения. Здесь можно ввести определенные пользователем файлы изображений, которые понадобятся в шаблоне.Располагаться данные файлы должны в папке: [Путь_к_Joomla] / templates / [имя_шаблона] / images / [файлы_изображений].
• Favicon (сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE) - значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Чтобы данный значек был на вашем сайте необходимо расположить файл «favicon.ico» в папку [Путь_к_Joomla] / templates / [имя_шаблона].

1) Откройте папку содержащую шаблоны сайта - Z:/home/yacht-club/www/templates.

2) Создайте новую папку для шаблона, назовите её yacht-template, после чего откройте и создайте дополнительные в ней папки: «css» и «images». Должна получиться следующая структура:

• Z:/home/yacht-club/www/templates/yacht-template - каталог шаблона;
• Z:/home/yacht-club/www/templates/yacht-template/css - каталог для таблиц стилей шаблона;
• Z:/home/yacht-club/www/templates/yacht-template/images - каталог для графических изображений шаблона.

Создание файлов шаблона

3) Скопируйте из папки дистрибутива (/lab_9/template_files/) в папку с шаблоном следующие файлы:

• index.php, templateDetails.xml и favicon.ico - в папку ../templates/yacht-template/
• файлы из папки css (components.css, forms.css, modules.css, navigation.css, template.css) - в папку ../templates/yacht-template/css/

Эти файлы подготовлены специально для типовых шаблонов CMS Joomla! 1.5, можно их использовать для создания других шаблонов в будущем.

4) Скопируйте файлы изображений, которые были подготовлены в теме №8, в папку шаблона Joomla! (../templates/yacht-template/images).

5) Откройте файл HTML-шаблона index.html и скопированный файл index.php.

6) Скопируйте содержимое файла index.html между тегами <body></body> (Рис. 9.1) в файл index.php расположив данную информацию также между тегами <body></body> (Рис. 9.1).

Рисунок 9.1. Файл index.php

7) Сохраните файл index.php.

8) Аналогичным образом скопируйте содержимое файла main.css в конец файла template.css. 

9) Сохраните файл template.css.

В итоге проделанной работы у вас должно получиться следующая структура:

• в папке шаблона (Z:/home/yacht-club/www/templates/yacht-template) должны располагаться файлы: favicon.ico, index.php, templateDetails.xml.
• в папке с изображениями шаблона (Z:/home/yacht-club/www/templates/yacht-template/images): background.jpg, bg1.png, bg2.png, top-menu-center.png, top-menu-left.png, top-menu-right.png.
• в папке со стилями css (Z:/home/yacht-club/www/templates/yacht-template/css): components.css, forms.css, modules.css, navigation.css, template.css.
• файл index.php должен содержать в своем теле (в тегах <body>) HTML-код файла index.html (находившийся также в тегах <body>).
• файл template.css должен содержать код из файла файла main.css разработанного для HTML-шаблона.

Интеграция модуля Joomla!

Элемент <jdoc> предоставляет возможность вставки динамических разделов в шаблон, не используя ни единой команды PHP.

Например, команда <jdoc:include type="modules" name="top" style="none" /> ожидает тип вставки как параметр type, в данном случае - modules. Параметр name задает позицию модуля (top, right, left, user1 и т.д.) на веб-сайте. Эту позицию можно назначить модулю через меню Расширения – Менеджер модулей. Наконец, параметр style содержит значение, которое принадлежит типа HTML-кода, доставляемого модулем. Например, none  обеспечивает чистый HTML-вывод, не окружая его дескрипторами <div>.

Параметры модуля:

• table - модуль отображается в таблице;
• horz - модуль отображается горизонтально в ячейке окружающей таблицы;
• xhtml - модуль выводится в XHTML-совместимый элемент <div>;
• rounded - вывод в формате с отображением скругленных углов. Класс элемента меняется с moduletable на module;
• none - модуль выводится без какого-либо форматирования.

10) Откройте файл index.php.

11) Добавьте модуль для отображения поиска.

Для этого в код:

<!-- Поиск начало -->
<div id="poisk">Тут будет располагаться Поиск</div>
<!-- Поиск конец -->

Вставьте вместо надписи «Тут будет располагаться Поиск» следующий код:

<jdoc:include type="modules" name="search" style="none" />

Рисунок 9.2

12) В среднюю ячейку верхнего меню (её идентификатор - toptd2) вставьте модуль с именем - topmenu, а стиль укажите - horz (рис. 9.3).

Рисунок 9.3

13) Таблица, которая имеет идентификатор contable должна имеет три модуля, в каждой ячейке по одному:

• в первой ячейке: <jdoc:include type="modules" name="left" style="none" />
• во второй ячейке: <jdoc:include type="component" />
• в третьей ячейке: <jdoc:include type="modules" name="right" style="none" />

Таким образом, код данной таблицы должен выглядеть как на рисунке 9.4.

Рисунок 9.4. Таблица с идентификатором contable

14) Последний модуль необходимо разместить в ячейке таблицы с идентификатором «foot»:

<jdoc:include type="modules" name="footer" style="none" />

Рисунок 9.5

Итого в созданном шаблоне получилось интегрировать шесть модулей Joomla!:

• <jdoc:include type="modules" name="search" style="none" /> - для вывода поиска;
• <jdoc:include type="modules" name="topmenu" style="horz" /> - для отображения верхнего меню;
• <jdoc:include type="modules" name="left" style="none" /> - для отображения левой части контента (например, меню);
• <jdoc:include type="component" /> - для отображения компонента, имя компонента выводится из URL (таким образом, здесь будет выводится основной текст контента);
• <jdoc:include type="modules" name="right" style="none" /> - для отображения правой части контента (например, опрос);
• <jdoc:include type="modules" name="footer" style="none" /> - для отображения футтера.

Остался последний момент - необходимо дописать мета данные шаблона.

15) Заполните метаданные шаблона (файл templateDetails.xml) как показано на рисунке 9.6.

Рисунок 9.6. Содержимое файла templateDetails.xml

Применение шаблона к сайту

Теперь созданный шаблон можно применить к сайту и посмотреть, что вышло уже на CMS Joomla!.

16) Запустите Денвер, нажав по значку Start Denwer на рабочем столе.

17) Зайдите в административный раздел сайта Яхт Клуба.

18) Перейдите в раздел Расширения – Менеджер шаблонов.

19) Найдите в списке шаблон созданный в этой теме (если всё выполнялось также как было описано в теме его имя - YachtClub).  Выделите его и нажмите по кнопке По умолчанию (Рис. 9.7).

Рисунок 9.7. Применение шаблона Joomla!

20) Откройте сайт для просмотра. Если всё было сделано верно, то должно получиться как на рисунке 9.8.

Рисунок 9.8. Сайт с шаблоном, созданным в этой теме

Резюме

• Все шаблоны CMS Joomla! 1.5 располагаются в папке - [Путь_к_Joomla] / templates /.
• Файлы стилей шаблона располагаются в папке - [Путь_к_Joomla] / templates / [имя_шаблона] / CSS /.
• Файлы изображений шаблона располагаются в папке - [Путь_к_Joomla] / templates / [имя_шаблона] / images /.
• Основные файлы используемые в шаблоне: файл компоновки, изображение предварительного просмотра, метаданные шаблона, CSS-файл, файлы изображений, файл favicon.ico.
• Для определения местоположения вывода динамических разделов используется элемент <jdoc>.
• Чтобы применить шаблон к сайту используется Менеджер шаблонов.

Контрольное задание

1. Создайте joomla-шаблон по своему проекту.
2. Примените созданный шаблон к вашему проекту.

Вопросы для самоконтроля

1. Расскажите структуру шаблона используемого в CMS Joomla! 1.5.
2. При помощи чего передается динамическая информация в шаблон?
3. Объясните назначение файлов в шаблоне CMS Joomla!.
4. Как установить шаблон на web-сайт управляемый CMS Joomla! 1.5?
5. Какие стили существуют для элементов <jdoc>?