Все выпуски  

Шаблоны Joomla. Часть 3.


Шаблоны Joomla. Часть 3.
(Создание шаблона с табличной резиновой версткой)

Уровень: Пользователь - Веб-мастер

Чтобы быть "в теме", рекомендуем прочитать или вспомнить, если Вы их читали раньше, следующие выпуски нашей рассылки:

  • выпуск №4 Что скрыто в свободно распространяемых шаблонах Joomla
  • выпуск №5 Подгоняем шаблон под себя. Замена рисунков

Сразу к делу!

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

Что-то новое сказать по этому поводу сложно. О чем же этот выпуск? Просто перед нами встала задача разобраться с устройствм (внутренней структурой) шаблона для Джумлы. В результате практической работы и появился материал для этого выпуска. Как результат, мы продемонстрируем Вам резиновый шаблон для Джумлы с табличным дизайном. Сразу подчеркнем, что это учебный шаблон, содержащий минимум необходимых элементов, чтобы шаблон заработал. В этом шаблоне отсутсвует стилевое оформление, то есть css-файл, в нем присутствующий, пустой. Это не от того, что мы не хотим делиться важной информацией, о стилевом оформлении расскажем в следующих выпусках :)

Шаблон Джумла - с какой стороны зайти?!

С чего начали мы? Нашли информацию (см. ссылки выше), пробежались по ней, нашли несколько реальных шаблонов - сравнили их структуру и что из этого поняли, расскажем ниже. Html-страница состоит из заголовка и тела (все между тегами <body>...</body>). Как эти части формируются в шаблоне?

Заголовок html-страницы в шаблоне Джумлы

Рассмотрим по частям код заголовка из нашего учебного шаблона:

<?php
defined( "_VALID_MOS" ) or die( "Доступ к этой странице запрещен." );
// Выделить номер кодировки ISO из константы _ISO
$iso = explode( '=', _ISO );
// xml пролог
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
$templ = $GLOBALS[mosConfig_live_site]."/templates/".$GLOBALS[cur_template];
?>

Код любого шаблона для Джумла должен находиться в файле Index.php. Выше Вы видите начало этого файла. Мы не будем описывать каждую строку файла, исходя из принципа, не надо въезжать во все сразу, берегите свой мозг :) Вначале остановимся на самом необходимом.

Что интересно здесь!
Кодировка html-страницы (в Joomla-1.0.12-Re это "windows-1251") берется АВТОМАТИЧЕСКИ из ядра Джумлы (константа "_ISO"). То есть кодировка (UTF-8, западноевропейская и т.д.) не задана в шаблоне, поэтому данный шаблон в неизменом виде могут использовать даже китайцы :)
Переменная $tmpl. Ее заводим для удобства, где храним url к файлам шаблона (нам может понадобиться обращение к CSS или изображениям, если шаблон такие содержит).

Вторая часть заголовка:

<!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 mosShowHead(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<meta http-equiv="Content-Language" content="ru"/>
<link rel="stylesheet" href="<?php echo $templ; ?>/css/template_css.css" type="text/css" />
</head>

Важно, как формируется содержимое <head>...</head>.
В шаблоне могут вызываться функции ядра Джумлы. Вызов mosShowHead(); пример такого вызова. В его результате сформируется тег <title> и следующие метатеги заголовка страницы: description, keywords, generator, robots.
Далее указывается кодировка страницы и подключается css-файл шаблона.

Заголовок страницы сформирован!

Тело html-страницы в шаблоне Джумлы

Далее идет творчество дизайнера и верстальщика :) На сколько хватит у Вас фантазии и мастерства :) таким и будет шаблон. Верстка у нас табличная, шапку сайта видим такой:

Верхнее меню

Поиск...

Шапка сайта

Строка навигации по сайту ("крошка") Дата

Вверху и внизу функциональные элементы, а в середине подразумеваем украшательство в виде логотипа и т.п.
Верхнее меню и окошко поиска по сайту в этом шаблоне мы выводим, так как они требуют дополнительных настроек
А выводим строку навигации и дату. Вот код этой части шаблона:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="85%" bgcolor="#CCCCCC" align="center">
<h4>Верхнее меню</h4>
</td>
<td width="15%" bgcolor="#FF9933">
<h4>Поиск...</h4>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#FFCC99" align="center">
<h1>Шапка сайта</h1>
</td>
</tr>
<tr>
<td width="85%" bgcolor="#CCCCCC">
<?php mosPathWay(); ?>
</td>
<td width="15%" bgcolor="#FF9933">
<?= mosCurrentDate( '%A,&nbsp;%d&nbsp;%B&nbsp;%Yг.' ); ?>
</td>
</tr>
</table>

Для вывода строки навигации вызывается функция ядра mosPathWay(); а для даты - функция mosCurrentDate( '%A,&nbsp;%d&nbsp;%B&nbsp;%Yг.' ); Как видите, формат вывода даты можете сформировать любой :)

Теперь самое интересное - вывод основного контента и модулей в позициях left и right:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15%">
<?php mosLoadModules('left'); ?>
</td>
<td width="75%">
<?php mosMainBody();?>
</td>
<td width="15%">
<?php mosLoadModules('right'); ?>
</td>
</tr>
</table>

Модули выводим, вызывая функцию mosLoadModules('имя_позиции'); Основной контент - через вызов mosMainBody();

В принципе, шаблон готов к употреблению!

Вставка в шаблон произвольного содержимого

Шаблон Джумла - обычный php-файл. В него можно вставлять произвольный код: php, java-script или html. Это могут быть счетчики посещений, код рекламных сетей и т.д.

Покажем это на примере как в шаблоны дистриутива Joomla-1.0.12-Re вставлен код спонсорских ссылок:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td >
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
</td>
</tr>
</table>

В шаблон может включаться любой php-файл с любого места на Вашем сайте или произвольный внешний скрипт, а может быть и вирус :))) если ваш шаблон заразят. Поэтому лучше снимать право на модификацию для ВСЕХ на index.php Вашего рабочего шаблона.

Шаблон в работе и его дистрибутив

Посмотреть шаблон на демо-сайте (имя шаблона efft_table_karkas).

Скачать шаблон.

off topic или Отдых круглый год!

Для тех, кто старается делать все со смыслом, предлагаем ознакомиться со статьей о впечатлениях от поездки из Шарм-эль_шейха в Иерусалим на сайте нашего проекта Отдых круглый год! В марте-апреле разгар курортного сезона в Египте. И посещение Иерусалима весной - тоже подходящее время. Если хотите совместить, как говорится, приятное с полезным, то это - оптимальный способ. Читать: Мечты сбываются!

Автор данной статьи: Леонид Мальков

 


В избранное