Создание шаблона для Joomla 1.0

  • Понедельник, 21 ноября 2005

Для начала хочу предупредить, что данная статья не поможет вам в изучении HTML и CSS и написана для людей, имеющих понятие об этих языках. Я не буду подробно описывать верстку страниц, а только отмечу особенности создания шаблона для Joomla.

Теория и практика

Шаблон для Joomla состоит следующих файлов:
- index.php
- templateDetails.xml
- директория images, куда вы будете складывать все графические файлы для использования в шаблоне
- директория css с файлом template_css.css внутри

Все файлы складываются в директорию с названием вашего шаблона, и все вместе – в директорию templates.

{mospagebreak title=Индекс&heading=Теория и практика}

Индекс

Попробуем сделать шаблон на основе образца, взятого мною на templatemonster.

Основу шаблона составляет файл index.php
В его начало просто копируем следующий код:

<?php 
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
$iso = split( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php if ($my->id) initeditor(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead();
echo "<link rel="stylesheet"
href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css"
type="text/css" />";
echo "<link rel="shortcut icon" href="/$GLOBALS[mosConfig_live_site]/images/favicon.ico" />";
?>
</head>

Основная информация страницы выводится в блоке mainbody. Вся остальная информация выводится в модулях (module). Модули, в свою очередь, располагаются в областях (position) вертикально друг под другом (возможно и горизонтальное расположение, но это редкий и порой сложный в исполнении вариант – см. часть 2 данной статьи). Посмотрим на наш эскиз и постараемся понять, сколько модулей будет на нашем сайте, какие области для них нужны и как их назвать.

Модули могут быть программированные и созданные админом из контрольной панели. С готовыми программированными модулями все понятно – скачиваем и устанавливаем. Собственные модули – это по сути куски статического HTML кода, введенные вами. Рекомендую информацию, постоянную на каждой странице и не требующую изменений, прописывать прямо в коде шаблона (например, логотип, копирайт и т.п.). Информацию же, которая будет присутствовать только на некоторых страницах или часто меняться, лучше занести в модули. Названия областей лучше всего связывать с местонахождением, а не с планируемыми внутри модулями. Обратите внимание, что длина названия области может быть не более 10 букв.

Приблизительная схема наших модулей

Области, определенные под модули

План шаблона

Теперь нам нужно пойти в контрольную панель и объявить все области. В оригинальной версии: Site –> Template Manager –> Module Positions. Возможно там уже будут какие-то области, заявленные разработчиками – их можно смело удалить (только не удалите области, предназначенные для шаблона самой контрольной панели). Порядок, в котором вы занесете все области, будет использоваться в выпадающем списке при выборе области в настройках модулей.

Область вставляется в шаблон следующим кодом

<?php mosLoadModules ( 'название_вашей_области' ); ?>

Например, область с названием left вставляется так

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

Исключение составляют дата, строка навигации (pathway) и область mainbody, (где выводится информация компонентов Joomla, например, тексты статей, новости главной страницы и тому подобное).

Код для даты:

<?php echo (strftime (_DATE_FORMAT_LC)); ?>

Код для mainbody:

<?php include ("mainbody.php"); ?>

Код для строки навигации

<span class="pathway"><?php mosPathWay(); ?></span>

Также в шаблон необходимо вставить информацию о разработчиках Joomla и, по вашему желанию, информацию о скорости загрузки страницы

<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
<?php mosLoadModules( 'debug', -1 );?>

Естественно все области вставляются в пределах тэга <body></body>

Путь к изображениям в шаблоне должен выглядеть следующим образом (пример для файла logo.jpg)

<?php echo $mosConfig_live_site;?>/templates/название_шаблона/images/logo.jpg

Все, скелет нашего шаблона готов

{mospagebreak title=Стили и оформление}

Стили и оформление

После создания скелета необходимо "окультурить" наш шаблон с помощью CSS. Остановлюсь немного подробнее на оформлении модулей. Приятным нововведением в мамбо 4.5.1 стала возможность прописывать индивидуальные классы для каждого шаблона (см. в настройках каждого модуля в контрольной панели).

Стандартный вывод модуля в Joomla – таблица:

<table cellpadding="0" cellspacing="0" class="moduletable"> 
<tr><th valign="top">
Заголовок модуля
</th></tr>
<tr><td>
Содержание модуля
</td></tr>
</table>

Возможны также другие варианты:

<?php mosLoadModules ( 'left', -2 ); ?>

Выводит модули области left не в таблицах, а блоками DIV.

<div class="moduletable">
<h3> Заголовок модуля</h3>
Содержание модуля
</div>

<?php mosLoadModules ( 'left', -3 ); ?>

Выводит модули области четырьмя блоками DIV, вложенными друг в друга (обычно используют для создания закругленных углов).

<div class="module"> <div><div><div>
<h3> Заголовок модуля</h3>
Содержание модуля
</div></div></div></div>

<?php mosLoadModules ( 'left', -1 ); ?>

Выводит модули области left без таблиц и блоков. В этом случае у модулей отсутствуют заголовки. Удобно использовать для горизонтального выведения модулей, например, несколько баннеров в ряд.

Если вы прописываете свой класс модулю (параметр ModuleClassSuffix), то его название прибавляется к уже существующему. Лично я начинаю названия своих модулей со знака подчеркивания, чтобы легче читалось. Например, модулю баннеров я задаю класс _banners. В результате в HTML получаю: class="moduletable_banners"

При большом количестве разнообразных модулей длина вашего CSS увеличивается до бесконечности :)

{pagebreak title=XML}

XML

Файл templateDetails.xml используется для опознания шаблона контрольной панелью Joomla – для установки, редактирования, использования и удаления.

Привожу весь код файла XML с пояснениями:

<?xml version="1.0" encoding="windows-1251"?>
<mosinstall type="template">
<name>название шаблона</name>
/* должно совпадать везде – в названии директории, в прописанных путях к изображениям и т.п. */
<creationDate> дата создания </creationDate>
<author> ваше имя </author>
<copyright> копирайт </copyright>
<authorEmail> ваш Email </authorEmail>
<authorUrl> www.ваш_сайт.ru </authorUrl>
<version> номер версии шаблона </version>
<description> описание шаблона </description>
<files>
<filename>index.php</filename>
<filename>template_thumbnail.png</filename>
/* скриншот шаблона – не обязателен, если только вы не используете модуль смены шаблона юзером */
</files>
/* файлы входящие в ваш шаблон, кроме CSS и изображений */
<images>
<filename>images/icon_search.gif</filename>
<filename>images/icon_sitemap.gif</filename>
<filename>images/logo.jpg</filename>
</images>
/* все изображения, входящие в ваш шаблон */
<css>
<filename>css/template_css.css</filename>
</css>
/* указание на файл стилей */
</mosinstall>

{mospagebreak title=Фишки}

Фишки

Для большей гибкости шаблона можно "поиграть" с областями в файле index.php. Приведу несколько готовых вариантов для тех, кто программированием не занимается
----------------------------------------

<?php 
if ( mosCountModules( 'left' ) ) {
?>
любой код HTML – начало оформления области
<?php mosLoadModules ( ' left ' ); ?>
любой код HTML – конец оформления области
<?php
}
?>

Скрывает область left, если на данной странице в ней нет ни одного модуля
----------------------------------------

<?php 
if ( mosCountModules( 'left' ) || mosCountModules( 'right' )) {
?>
любой код HTML – начало оформления области
<?php mosLoadModules ( ' left ' ); ?>
любой код HTML по необходимости
<?php mosLoadModules ( ' right ' ); ?>
любой код HTML – конец оформления области
<?php
}
?>

Скрывает области left и right, если на данной странице ни в одной из них нет модулей. Если есть модуль хотя бы в одной из этих областей, то появятся обе области.
----------------------------------------

<?php 
if ($_REQUEST['option'] != 'com_frontpage' ||  $_REQUEST['option'] != '') {
?>
любой код HTML – начало оформления области
<?php mosMainBody();?>
любой код HTML – конец оформления области
<?php
}
?>

Скрывает область mainbody на главной странице (при условии, что вы используете компонент frontpage, а не какой-то другой, то есть не меняли главную страницу, назначенную при установке Joomla)

Joomla!® CMS — пожалуй, лучшая система управления контентом с открытым исходным кодом

Логотип Joomla

Joomla! — это больше, чем просто программное обеспечение, это люди, включающие разработчиков, дизайнеров, системных администраторов, переводчиков, копирайтеров, и, что самое главное — простых пользователей.

Мы рады пригласить вас в ряды нашего сообщества!

Свернуть

Коротко о главном в Joomla

Новости портала

Новое в блогах

Видео

Форум о Joomla