Создание шаблона для Joomla 1.5. Стр. 9 | Веб-дизайн | Личная страничка Дмитрия Доброзракова

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

В процессе разработки движка шаблонов Joomla 1.5 в него было внесено множество изменений и дополнений. Цитата непосредственно из блога разработчиков Joomla:

Изменения в системе шаблонов в Joomla 1.5 могут быть разделены на две категории. Во-первых это изменение способа реализации некоторых функций по сравнению с Joomla 1.0, например новый способ загрузки модулей, и во-вторых некоторое количество дополнительных возможностей, таких как параметры шаблона. Краткий обзор:

mosCountMoules
Функция mosCountModules была заменена на функцию $this->countModules, и в ней появилась поддержка условий. Это позволяет разработчикам легко подсчитать общее число модулей в разных позициях шаблона с помощью только одной строки кода, например $this->countModules ('user1 + user2'); которая возвратит общее число модулей в позициях user1 и user2.

Внимание! На эту тему также стоит заглянуть на Joomla forum.

Есть четыре возможных условия. В качестве примера давайте подсчитаем число модулей в рис. 9.7. Для этого куда-нибудь в index.php надо вставить код:

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

Задача может быть решена несколькими способами. Мы можем поместить в код условное выражение, выясняющее наличие контента, и описать несколько вариантов разметки, в зависимости от того, сколько колонок нам понадобится. Идя по самому простому варианту, я поместил в тег head несколько условных выражений, которые переопределяют некоторые стили CSS:

Далее в код <DIV> контента в index.php нужно внести:

Условные выражения PHP в head должны ставиться после ссылки на template.css. Напомню, если есть два идентичных правила стиля CSS; то последнее правило перепишет все предыдущие. Подобным же образом это может быть сделано с помощью выражения IF, импортирующего нужный вспомогательный файл CSS.

Совет: На время отладки условных выражений можно добавить в index.php следующий код, который будет показывать текущую ширину колонки контента:

Таким образом мы являемся лежащими на полпути там, но теперь у нас есть пустые контейнеры отделения, где колонки.

Скрытие кода модуля

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

Для того, чтобы скрыть пустой <DIV>, используем следующий код:

При использовании этого кода, если в левой колонке ничего нет, то <div id="sidebar"> публиковаться не будет.

Используем эту технологию для левой и правой колонки. Теперь наш index.php будет выглядеть как показано ниже. Мы также внесем оператор include для модуля breadcrumbs, который выводит текущую страницу и путь. Помните, что он не только должен быть указан в index.php, но и опубликован как модуль.

<?php
// no direct access defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!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"
xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<?php
if($this->countModules('left and right') == 0) $contentwidth = "100";
if($this->countModules('left or right') == 1) $contentwidth = "80";
if($this->countModules('left and right') == 1) $contentwidth = "60";
?>
</head>
<body>
<div id="wrap">
<div id="header">     <div class="inside">
<h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
</div>
</div>
<?php if($this->countModules('left')) : ?>
<div id="sidebar">     <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />     </div>
</div>
<?php endif; ?>
<div id="content<?php echo $contentwidth; ?>">     <div class="inside">
      <jdoc:include type="module" name="breadcrumbs" style="none" />
      <jdoc:include type="component" />     </div>
</div>
<?php if($this->countModules('right')) : ?>
<div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
</div>
<?php endif; ?>
<?php if($this->countModules('footer')) : ?>
<div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="xhtml" />
    </div>
</div>
<?php endif; ?>

</body>
</html>

Стоит заметить… Элементы, такие как колонки или места расположения модулей, могут быть скрыты (или удалены), если для них нет контента. Для этого используются условные выражения PHP, которые подключают различные стили CSS.

Я рекомендовал бы несколько иной способ формирования нижнего колонтитула. В показанном здесь варианте его код внесен в index.php, в результате чего его трудно менять. Сейчас модуль «footer», подключаемый через административную панель, выводит копирайт и ссылки на Joomla а отредактировать его не так просто. Гораздо лучше иметь некий произвольный (X)HTML модуль на месте нижнего колонтитула, чтобы дать возможность администратору сайта легко его изменить. Если вы хотите создать свой собственный колонтитул, просто не публикуйте стандартный footer и создайте собственный HTML-модуль на любом языке.

Также мы должны не забыть указать эту позицию в файле templateDetails.xml.

Совет: Есть несколько названий, связанных в Joomla с модулями: banner, left, right, user1, footer и т.д. Для начала надо запомнить одну вещь — эти названия никак не определяют положение модулей на странице. Как мы могли видеть, положение модуля полностью задается проектировщиком шаблона. Просто есть некий стандарт в размещении модулей, отраженный в их названии, но не надо воспринимать это как правило.

Этот учебный шаблон демонстрирует некоторые из основных принципов создания шаблонов Joomla.

Итак у нас есть простой, но вполне функциональный шаблон. В него включены некоторые элементы оформления, но что гораздо важнее, мы создали разметку на чистом CSS с динамически формируемыми колонками. Я написал установочный шаблон, который можно скачать в библиотеке Compass:

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

Как скрыть колонки

Скрытие кода модуля