Читать онлайн "Создание шаблонов Joomla" - RuLit

</files>

Другие элементы XML файла служат для описания шаблона. Вот полный листинг функций такого файла:

Листинг 3: templateDetails.xml

templateDetails.xml

<name>joomla150_book</name>

<author>Hagen Graf</author>

<authorEmail>hagen@cocoate.com</authorEmail>

<authorUrl>http://www.cocoate.com</authorUrl>

<description>… Описание</description>

<files>

<filename>index.php</filename>

<filename>templateDetails.xml</filename>

<filename>template_thumbnail.png</filename>

<filename>css/template.css</filename>

</files>

</install>

CSS файл: В одном шаблоне можно использовать несколько CSS файлов. Название CSS файла и метод его создания не имеют особого значения. Хотя существуют стандартные описания различных элементов CSS. Для нашего тестового шаблона мы используем файл /templates/joomla150_book/css/template.css (Листинг 2).

Графика, Картинки: здесь можно разместить графические файлы, необходимые для шаблона. Во время инсталляции, Установщик шаблонов копирует их в директорию /images. Имя и путь к файлу при этом выглядят так: /templates/joomla150_book/images/[user-defined image files].

Первый запуск

После того, как мы создали структуру директории [ПутьКJoomla!]/templates/, наш шаблон появится в соответствующей секции административной части Joomla! (Extensions | Template). Теперь его можно использовать как шаблон по умолчанию.

Рис. 2: Структура директории и файлы шаблона Joomla150_book

Рис. 3: Новый шаблон в менеджере шаблонов

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

Рис. 4: Вид в веб обозревателе

Внедрение модуля Joomla!

Внедрение модуля Joomla! проводится с помощью команд, встроенных в HTML код. Это могут быть и старые команды Joomla! 1.0.x или Mambo 4.5.x, или новые команды patTemplate. Класс patTemplate служит для дифференцирования PHP и HTML кода. Для интеграции в шаблон различных элементов, Joomla! использует объект типа jdoc. Если, вместо тега <title>, вы вставите в заголовок файла index.php следующую строку, в окне веб обозревателя при загрузке вашего сайта корректно отобразятся иконка сайта, заголовок страницы и символ источника новостей (Newsfeed symbol):

<head>

<jdoc:include type="head" />

</head>

Рис. 5: Иконка сайта и заголовок страницы

Если вы откроете исходный код этой страницы, то заметите, что Joomla! копировала все метаданные, введенные через панель администратора в HTML код. В дополнение к этому источники RSS также были интегрированы в страницу в виде тегов ссылок, отображаемых как символы источников новостей (Newsfeeds) в веб обозревателях, поддерживающих данную технологию (Firefox, Opera и т.д.).

Листинг 4: Метаданные Joomla!

<head>

<title>Joomla 1.5.0 – Home</title>

</head>

Если данный фрагмент кода работает, можно перейти к другим важным объектам jdoc.

Например, команда <jdoc:includetype="modules"name="top"style="-1" /> получает тип вставляемого объекта в качестве параметра (в данном случае это “modules”). Параметр “name” определяет положение модуля. (top, right, left, user1 и т.д.). Установить положение модуля можно также в административной части Joomla! (Extensions | Module Managers, категория Position). Список всех возможных позиций можно посмотреть в Extensions | Templates | Module Positions. Последний параметр “style” содержит значение, которое определяет тип HTML кода, передаваемый модулем. Например, значение –1 передает «чистый» HTML без использования контейнерных тегов <div>.

Параметр Отображение

1 Горизонтальное меню

-1 «Чистое» отображение без использования начального и замыкающего тегов <div>

-2 Отображение в виде XHTML

-3 форматирования круглых углов

Таблица 1: Параметры модуля

Описание возможных вставок в index.php объектов jdoc можно увидеть в следующем листинге:

Листинг 5:index.php сjdoc вставками

<html>

<head>

<jdoc:include type="head" />

</head>

<!– Section 1 –>

<tr>

<!– Part 1 –>

<!– Part 2 –>

<!– Section 3 –>

<!– Part 7 –>

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

</td>

</tr>

</table>

</body>

</html>

Если вы загрузите ваш сайт в веб обозревателе теперь, то увидите что благодаря изменениям, внесенным нами в HTML код, сайт наполнился динамическим контентом.

Конечно, до визуального совершенства еще далеко, но сайт уже работает:

Рис. 6: Шаблон с динамическими данными

Теперь перейдем к CSS форматированию, чтобы улучшить внешний вид нашего сайта.

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