Шаблоны 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, %d %B %Yг.' ); ?>
</td>
</tr>
</table>
Для вывода строки навигации вызывается функция ядра mosPathWay(); а для даты - функция mosCurrentDate( '%A, %d %B %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 или Отдых круглый год!
Для тех, кто старается делать все со смыслом, предлагаем ознакомиться со статьей о впечатлениях от поездки из Шарм-эль_шейха в Иерусалим на сайте нашего проекта Отдых круглый год! В марте-апреле разгар курортного сезона в Египте. И посещение Иерусалима весной - тоже подходящее время. Если хотите совместить, как говорится, приятное с полезным, то это - оптимальный способ. Читать: Мечты сбываются!
Автор данной статьи: Леонид Мальков
где мои деньги
