Руководство по созданию шаблона Joomla

Введение

Некоторые замечания:

• Данное руководство предназначено для Joomla версии 1.0.12
• Оно предназначено для людей уже знакомых с HTML и CSS
• К сожалению, здесь не рассматриваются вопросы CSS-классов в Joomla. Это совершенно другой разговор.

1. Разработайте концепцию дизайна вашего сайта

До того как сесть за разработку шаблона вам стоит рассмотреть свой сайт повнимательнее. Я использую Adobe Fireworks, вы же можете использовать ту программу, с которой вам будет наиболее комфортно работать.

Самый главный совет — делайте макет настолько простым, насколько это возможно. Избегайте делать шаблоны, которые потребуют создания сложных структур вложенных таблиц.

Ниже нарисован мой макет:

2. Определитесь какие элементы Joomla вы будете использовать

Когда вы разрабатываете макет вам необходимо решить какие же элементы Joomla вы будете использовать. Это звучит немного сложно, для новичков. Так что же такое элемент? Я попытаюсь объяснить это попроще, с примерами.

Представьте себе Joomla как оборудование какого-либо офиса. Где же вы разместите столы или стулья?

Белая страница вашего будущего шаблона — это комната в офисе. Столы и стулья — это элементы Joomla. Где вы захотите разместить ваши статьи, последние новости, меню?

Существует всего два типа элементов, которые вам необходимо хорошо знать — это Main Body и позиции модулей. Все сайты, построенные на Joomla, используют их.

Main Body — это то место, где вы видите ваши статьи. Это ядро вашего сайта — полные версии статей, списки статей, гостевая книга — все это отображается там. Они все появляются на одном и том же месте страницы — не одновременно конечно же, все зависит от выбранного пункта меню.

Модули — это меню, голосования, заголовки, баннеры и так далее. Это даже может быть статичный текст. Некоторые люди назвают это боковыми блоками. Мы будем говорить, что это мини-статьи которые отображаются вокруг Main Body.

Новые позиции модулей — это то место, где вы хотите разместить ваши модули. Вы можете поместить их в любое место, но пытайтесь использовать для названий позиции говорящие за себя имена, такие как right, left, top, bottom, footer, и т.д.

Если ваши голосования или меню будут расположены в одной части страницы (например справа или наверху), вы можете определить всего лишь одну позицию для них. Почему? Потому что Joomla позволяет иметь множество модулей на одной и той же позиции. Вы даже можете изменять их порядок следования.

И еще одно замечание про модули — вы можете настроить модули так, что бы они появлялись только при нажатии пользователя на определенные пункты меню.

Например, у вас есть два пункта меню — Автомобили и Мотоциклы. Когда пользователь читает что-то под пунктом меню Автомобили вы хотите показать некоторый графически блок. Однако, когда пользователь читает то, что было под пунктом меню Мотоциклы, вы хотите показать другой графический блок, но на той же самой позиции модуля. Так вот знайте — это возможно, вам достаточно настроить модули в админке. Модули это очень мощный инструмент Joomla, почти все что угодно может быть расположено как модуль.

Существует много модулей, встроенных в Joomla, но все они не обязательны:

• Дата — отображает текущую дату, основанную на времени вашего сервера.
• Низ (footer) — для отображения копрайта внизу страницы. Я не использую его, потому что они слишком громоздкий для редактирования, я лучше сделаю свою собственную позицию bottom и расположу мой текст там.
• Хлебные крошки (pathway) — это навигация вашего сайта.
• Имя сайта — используйте его, если хотите что бы имя вашего сайта было написано в какой-либо части вашей страницы.

3. Определитесь, где вы расположите элементы Joomla

Теперь посмотрите на макет и решите где вы расположите Main Body и позиции модулей. Ниже нарисован мой каркас:

Как вы заметили, я не использую какие-либо дополнительные элементы. Я использую только Main Body и позиции модулей. Мой шаблон действительно очень прост. Мой девиз таков: если что-либо можно сделать модулем — не встраивайте это в код шаблона.

Существует одна общая ошибка — попытка все что угодно запихать в шаблон. Я знаю людей, которые пихают в него меню или баннеры, в то время как они легко могут быть сделаны модулями. Попытайтесь избежать этой ошибки, помните — модули проще редактировать, чем шаблоны.

Шаблон должен быть всего лишь скелетом сайта. Располагайте в нем только тот текст и графику, которые не будут изменяться по крайней мере пол года или больше. Например, логотип, фоновые изображения, таблицы, которые разделяют контент и элементы.

4. Создайте необходимые директории

Создайте нижеследующую структуру директорий:

• Создайте директорию template_name (или дайте ей какое угодно другое имя, главное что бы там не было пробелов)
• Внутри создайте 2 папки: css и images.

В этих папках мы будем сохранять элементы шаблона. Их назначение будет разъяснено позже.

5. Создайте HTML-версию макета

Пришло время вспоминать HTML. Вам придется потратить на это время. Не беспокойтесь, если это займет несколько часов или дней. Посмотрите на ваш шаблон и начните создавать его HTML-версию. Да, с заголовками, тэгами body и таблицами. После создания сохраните его под именем template.html. Ваш логотип и другие графические элементы тоже должны стать частью шаблона.

Используйте ту программу, с которой вам наиболее всего удобно работать. Например, некоторые люди используют текстовый редактор, а некоторые — Macromedia Dreamweaver.

Куда и что сохранять:

• В папку template_name — файл template.html, который мы затем переименуем в index.php
• В папку template_name/images — все изображения
• В папку template_name/css — CSS-файл (назовите его template_css.css)

Начните создавать ваш CSS файл. Для первоначальных классов вы можете использовать чистый CSS-файл на русском языке, в котором описаны все стили, используемые в Joomla.

6. Переименуйте макет в index.php

Сохраните где-нибудь ваш макет на всякий случай, и переименуйте template.html в index.php.

7. Создайте код для Joomla-элементов

Пришло время разместить код Joomla-элементов в вашем шаблоне. Существует специальный код, который нужен для каждого элемента. Вам просто необходимо разместить его на нужном месте, а элементы Joomla появятся там автоматически.

Откройте index.php (раньше это был template.html) в текстовом редакторе. Конечно же можно использовать тот же Dreamweaver, но убедитесь что вы редактируете именно исходный код. Определитесь, где же будут расположены элементы Joomla и вставьтет соответствующий код:

• Main Body

<?php mosMainBody(); ?>

• Модуль

<?php mosLoadModules ( 'position_name' ); ?>

Измените строку position_name на ту, какую же позицию вы хотите здесь показать. Если имя позиции модуля right, то вы должны написать:

<?php mosLoadModules ( 'right' ); ?>

• Дата

<?php echo mosCurrentDate(); ?>

• Низ (footer)

<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>

• Хлебные крошки (pathway)

<?php mosPathWay(); ?>

• Имя сайта (pathway)

<?php echo $mosConfig_sitename; ?>

Например, если вы хотите разместить Main Body в центральной таблице, вы должны разместить код

<?php mosMainBody(); ?>

внутри этой таблицы:

8. Создайте код для тэгов «header»

Мы все еще делаем index.php. Убедитесь, что файл все еще открыт в текстовом редакторе. Теперь вам надо удалить следующий код:

И заменить его вот этим:

 
<?php defined( '_VALID_MOS' ) or die( 'Доступ запрещен' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $GLOBALS['mosConfig_live_site'];?>/templates/<?php 
echo $GLOBALS['cur_template']; ?>/css/template_css.css" rel="stylesheet" type="text/css" />
</head>
 

10. Измените путь для всех изображений

Теперь вам необходимо изменить пути для картинок. Напоминаю, что все картинки на данный момент выглядят вот так:

<img src="images/filename.gif" />

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

К счастью, существует простой способ решить эту проблему. Используйтет функцию Найти и Заменить в вашем текстовом редакторе и найдите все что ниже:

<img src="images/..." />

И замените это следующим:

<img src="<?php echo $GLOBALS['mosConfig_live_site'];?>/templates/<?php echo $GLOBALS[cur_template];?>/images/..." />

Теперь ваш код будет выглядеть примерно следующим образом:

Сохраните измененный файл index.php.

10. Создайте XML-файл

Теперь вам надо создать XML-файл, содержащий информацию о вашем шаблоне. Это обязательное требование, потому что Joomla просматривает этот файл, для того, что бы вы смогли установить его.

Проще всего делать XML-файл шаблона с помощью генератора XML Template Generator RE, но можно и вручную.

Откройте ваш любимый текстовый редактор и создайте новый документ. Вставьте следующий код:

 
<?xml version="1.0" encoding="windows-1251"?>
<mosinstall type="template" version="1.0.0">
    <name>TEMPLATE_NAME</name>
    <creationDate>DATE</creationDate>
    <author>AUTHOR_NAME</author>
    <copyright>COPYRIGHT_INFO</copyright>
    <authorEmail>AUTHOR_EMAIL</authorEmail>
    <authorUrl>AUTHOR_URL</authorUrl>
    <version>TEMPLATE_VERSION</version>
    <description>TEMPLATE_DESCRIPTION</description>
    <files>
        <filename>index.php</filename>
        <filename>template_thumbnail.png</filename>
    </files>
    <images>
        <filename>images/IMAGE_FILENAME</filename>
        <filename>images/IMAGE_FILENAME</filename>
    </images>
    <css>
        <filename>css/template_css.css</filename>
    </css>
</mosinstall>
 

Теперь вы должны заменить следующие элементы:

• TEMPLATE_NAME — имя шаблона
• DATE — дата создания шаблона
• AUTHOR_NAME — ваше имя
• COPYRIGHT_INFO — некая информация о том, по какой же лицензии распространяется ваш шаблон, если он вообще распространяется
• AUTHOR_EMAIL — Email для контакта с вами
• AUTHOR_URL — URL вашего сайта
• TEMPLATE_VERSION — версия вашего шаблона (а вдруг вы захотите его модифицировать)
• TEMPLATE_DESCRIPTION — краткое описание вашего шаблона
• IMAGE_FILENAME — имена всех картинок, которые вы использовали в вашем шаблоне (не две, а столько, сколько надо). Вы должны перечислить все картинки, лежащие в папке images. Убедитесь, что вы переписали их имена правильно.

Теперь ваш XML-файл должен выглядеть примерно так:

Сохраните этот файл под именем templateDetails.xml и скопируйте в корневую директорию папки вашего нового шаблона.

11. Создайте превьюшку шаблона

Это уменьшенная копия снимка экрана, которая позволяет рассмотреть шаблон, не устанавливая его. Если вы хотите распространять ваш шаблон, настоятельно рекомендуется создать такое изображение.

Для того, что бы создать его сделайте скриншот шаблона, созданного ранее (html-макет). Сожмите его до размера в 200 на 200 пикселей и сохраните под именем template_thumbnail.png в директорию вашего шаблона.

Однако можно использовать и чистую белую картинку, пока вы еще только делаете шаблон. Скриншот можно создать и после создания шаблона.

Если вы не хотите использовать расширение PNG (например хотите сохранить его в формате GIF), убедитесь что вы так же поменяли это название и в файле templateDetails.xml.

12. Сделайте обзор структуры директорий

Пришло время сделать такой обзор. Убедитесь, что все файлы лежат в соответствующих директориях, дважды проверьте свой XML-файл.

13. Заархивируте его в ZIP

Все почти готово. Заархивируйте в ZIP-формат (НЕ RAR) всю директорию с шаблоном. Переименуйте архив, например в template_name.zip.

14. Установите

Пришло время протестировать наш шаблон:

• Войдите в админку
• Выберите в меню: Сайт (Site) — Шаблоны сайта (Template Manager) — Шаблоны (Templates)
• Нажмите Новый (New)
• Выберите файл с локального компьютера (ваш архив, созданный на предыдущем шаге)
• Нажмите Загрузить и установить (Upload File & Install)
• Если все прошло хорошо — вам об этом сообщат
• Далее выберите ваш новый шаблон в списке (радио-кнопка слева) и нажмите Присвоить (Assign)

Далее зайдите на ваш сайт и рассмотрите свой шаблон.

15. Последние штрихи

После установки шаблона вы возможно захотите внести небольшие правки в шаблон — в index.php или template_css.css. В менеджере шаблонов вы можете отредактировать оба файла.

Вы могли создать позиции модулей с именами, которых нет в Joomla. Например, вы создали позицию с именем my_module:

<?php mosLoadModules ( 'my_module' ); ?>

Если это случилось, то вам надо определить данную позицию в конфигурации Joomla:

• Войдите в админку и выберите в меню: Сайт (Site) — Шаблоны сайта (Template Manager) — Позиции модулей (Module Positions)
• Выберите любой пустой элемент ввода имени и введите туда «my_module»
• Нажмите Сохранить (Save)

Теперь вы можете заняться модулями и пунктами меню. Это моя самая любимая часть разработки шаблона.

16. Конец

Данное руководство заняло у меня достаточно много времени, но я буду рад, если хоть чем-то помог вам. Будьте свободны в ваших комментариях об этой статье. Если у вас есть поправки или предложения — выйдите на контакт со мной. Если вы разработате шаблон при помощи этого руководства, вы можете послать мне адрес вашего сайта, я буду рад насладиться своими трудами. Спасибо за терпение при чтении данного руководства.

Реклама. Информация о рекламодателе по ссылкам в статье.

Орлов Александр (Основатель блога)

Спасибо, что делитесь своим опытом в комментариях. Есть вопросы, напишите на почту info@resize-web.ru