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

Первое, что нам потребуется для начала — это comp (аббревиатура от «композиции» — перев.). Комп — набросок, который будет служить основанием шаблона. Мы будем использовать один такой комп, любезно пожертвованный Кейси Ли, ведущим дизайнером из Joomlashack в наших целях. Этот шаблон называется «Bold» и мы можем видеть его на рис 9.8.

Нарезка (slice and dice)

Следующий шаг в процессе — процесс, известный как «нарезка». Мы должны использовать графический редактор для создания маленьких нарезанных изображений для использования в шаблоне. Обратите при этом внимание на то, что, при необходимости, размер элементов может меняться. (Мой выбор в данном случае — Fireworks. Мне кажется, что он более удобен для веб-дизайна в отличие от Photoshop, ориентированного прежде всего на полиграфию).

Настройка позиций модулей

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

Не планируйте ничего другого для этих позиций.

Заголовок

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

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

#header {
color:#fff;
background:#212121 url(../images/header.png) no-repeat;
position:relative;
}

#header h1 {
font-family:Arial, Helvetica, sans-serif small-caps;
font-variant:small-caps;
font-stretch:expanded;
padding-left:20px;
}

#header input {
background:url(../images/search.png) no-repeat;
border:0;
height:22px;
width:168px;
font:1em Arial, Helvetica, sans-serif;
padding:2px;
}

#header .search {
position:absolute;
top:20px;
right:20px;
}

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

Наш заголовок теперь похож на то, что показано на рис 9.9.

Затем, мы должны применить технику, используемую для отображения фона в плавающей колонке: «sliding doors».

Фон колонки

Вспомните, когда мы устанавливали цвет фона в колонке, он не доставал до нижнего колонтитула. Это происходило потому, что вертикальный размер элемента <DIV> в позициях sidebar и sidebar-2 устанавливался в зависимости от контента а не страницы.

Мы используем технику Sliding Faux Columns (раздвижные ложные колонки), для чего создадим две широкие картинки, которые будут «скользить» друг по другу. Мы должны создать два новых контейнера для хранения фоновых картинок. Можно, конечно, привязать одну к #wrap, но я использую дополнительный (что есть некоторое рассточительство) контейнер для хранения иллюстраций.

Подробное описание этой техники можно найти в этих двух руководствах:

В нашем случае, максимальная ширина окна — 960px, так что мы начнем с картинки такой ширины. В картинках шаблона это slidingcolumns.png. Когда мы берем два рисунка из нарезки (я использовал один и тот же фрагмент нарезки, скрыв/показав нужный слой), один — 960px шириной с фоновым цветом слева и второй — 960px шириной с фоновым цветом справа.

Откуда взялось 192px? Это 20% от 960, так как мы задали колонку в 20% ширины. Мы используем параметр background-position для того, чтобы поместить фон в нужное место. Теперь мы можем внести соответствующие изменения в CSS чтобы части нашего фона правильно отображались:

В нашем index.php мы просто добавляем внутренний контейнер во wrap:

Мы также должны добавить условия в закрывающие <DIV>:

Кроме этого, надо добавить фон в нижний колонтитул и нижние модули/элементы; в противном случае там отобразится фон колонок:

Мы должны сбросить сдвиг так чтобы контейнер (ложные колонки) достигал низа страницы. Традиционный метод — использование параметра :after. Но в IE версии 7 этот метод работает не совсем корректно. Нам нужно, чтобы сброс сдвига сработал в Internet Explorer 6 и 7 версии, так что нам это не подходит.

Таким образом, мы добавляем обычный clear:both в #footer и сдвиг в контейнеры fauxcol. Эти строки мы вносим в таблицу стилей, вызываемую для IE6:

Кроме этого, нам надо внести некоторые условные операторы в index.php:

«Резиновые» модули

В дизайне у нас предусмотрен большой первоначальный блок под модуль. Мы не можем сказать заранее, какой высоты будет текст в этом блоке. Чтобы решить ту проблему, мы помещаем строку объявления модуля jdoc:include в обрамляющий элемент и указываем ему фон одного цвета с фоновой картинкой. То есть — задействуем тот же самый прием, который мы использовали при создании заголовка:

Обратите внимание, что наш условный оператор, при отсутствии контента в главном модуле, не выводит оранжевую фоновую картинку. Там будет только пустой контейнер с фрагментом фонового изображения в 20px исключительно из эстетических соображений.

Файл CSS должен задействовать CSS-специфику, для переопределения стилей moduletable, которые были определены ранее:

#top {
background:#ea6800 url(../images/teaser.png) no-repeat;
padding:10px;
}

#top .moduletable h3 {
color:#fff;
background:none;
text-align:left;
font:2.5em Arial, Helvetica, sans-serif normal;
font-stretch:expanded;
margin:0;
padding:0;
}

#top .moduletable {
font:bold 1em/1.2 Tahoma,Arial, Helvetica, sans-serif;
color:#fff;
border:0;
margin:0;
padding:0;
}

Теперь мы должны сосредоточиться на оформлении.

Оформление

Многие ссылки должны быть белым, поэтому мы определим их такими глобально а затем изменим их цвет для центральной колонки:

a:link,a:visited {
text-decoration:underline;
color:#fff;
}

a:hover {
text-decoration:none;
}

#content60 a:link,#content60 a:visited,#content80 a:link,#content80 a:visited,#content100 a:link,#content100 a:visited {
color:#000;
}

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

Для таблиц, таких как «Часто задаваемые вопросы» (FAQ), мы можем добавить легкий фон, используя в нем то же изображение, что и на фоне страницы. Многократное повторение картинки поддержит целостность дизайна и сэкономит время на загрузку изображений, благотворно влияя на скорость загрузки всей страницы.

Для модулей нужно несложное переопределение и настройка отступов и интервалов:

.moduletable {
margin-bottom:1em;
color:#fff;
font-size:1.1em;
}

.moduletable h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

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

.moduletablemenu {
margin-bottom:1em;
}

.moduletablemenu h3 {
font:1.3em Tahoma,Arial,Helvetica,sans-serif;
background:#000;
color:#ccc;
text-align:left;
margin:0 -10px;
padding:5px 10px;
}

.moduletablemenu ul {
list-style:none;
margin:5px 0;
}

.moduletablemenu li {
background:url(../images/leftmenu.png) bottom left no-repeat;
height:24px;
font:14px Tahoma,Arial, Helvetica, sans-serif;
margin:10px 0;
padding:0 0 0 10px;
}

.moduletablemenu a:link,.moduletablemenu a:visited {
color:#fff;
display:block;
text-decoration:none;
padding-left:5px;
}

.moduletablemenu a:hover {
text-decoration:none;
color:#fff;
background:#ADADAD;
}

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

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

CSS не всемогущ; нам придется повозиться с вертикальным позиционированием фонового изображения для активного пункта:

.moduletabletabs {
font:bold 1em Georgia, Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.moduletabletabs ul {
list-style:none;
float:right;
background:#212121;
width:100%;
margin:0;
padding:0;
}

.moduletabletabs li {
float:right;
background:url(../images/tabs.png) no-repeat 0 -4px;
margin:0;
padding:0 0 0 12px;
}

.moduletabletabs a:link,.moduletabletabs a:visited {
float:left;
display:block;
color:#000;
background:url(../images/tabs.png) no-repeat 100% -4px;
text-decoration:none;
margin:0;
padding:7px 18px 5px 9px;
}

.moduletabletabs #current {
background:url(../images/tabs.png) no-repeat 0 -84px;
}

.moduletabletabs #current a {
color:#fff;
background:url(../images/tabs.png) no-repeat 100% -84px;
}

Мы также должны будем добавить суффикс tabs для модуля меню, который мы используем.

Если вы взглянете на исходный эскиз, то заметите, что на закладках верхнего меню были пиктограммы. Поскольку мы уже используем два фоновых изображения, одно для LI и одно для ссылки, нам нужен третий элемент для размещения фонового изображения. Вы можете сделать это с использованием span, но это уже продвинутое CSS кунг-фу. Я оставлю это вам в качестве домашней работы.

Последнее, что нам надо проверить — наш файл templateDetails.xml. В нем должны быть описаны все файлы и изображения, используемые в шаблоне, и только тогда шаблон корректно установится из ZIP-файла. Есть много инструментов, которые сделают это за вас автоматически для версии Joomla 1.0.x, но, на момент написания этой главы, для версии 1.5 таких инструментов нет.

Окончательный шаблон должен быть похож на рис 9.10.

Стоит заметить… Процесс создавая шаблона Joomla — это в большей степени вопрос навыков работы с графикой и манипулирования CSS, чем некое специальное «знание Joomla».

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

Мы закончили с основными понятиями. Давайте теперь покопаемся в некоторых расширенных возможностях шаблонов версии 1.5.

Расширенные возможности шаблонов

Joomla 1.5 предоставляет некоторое количество расширенных возможностей для шаблонов, значительно расширяющих возможности манипуляций с ними. В этой главе мы уже познакомились с возможностью задавать разные варианты вывода контента (chrome) для модулей. Давайте теперь подробно рассмотрим:

Параметры шаблона

В версии 1.5 введена возможность передачи шаблону параметров. Это позволит вам передавать шаблону переменные, определенные в административной панели.

Мы можем добавить относительно простую функцию параметра нашему шаблону. В файле templateDetails.xml добавьте следующее:

<params>
<param name="template_width" type="list" default="fluid" label="Template Width" description="Width style of the template">
<option value="fluid">Fluid with maximum and minimum</option>
<option value="medium">Medium</option>
<option value="small">Small</option>
</param>
</params>

Также потребуется создать файл с именем params.ini в папке вашего шаблона. Это может быть пустой файл, но для Joomla он нужен для записи параметров, которые вы определили. Например, для указанного выше параметра, INI-файл может быть таким:

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

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

рис. 9.11. Параметры шаблона в административной панели

Как мы можем видеть, это простой селектор с тремя вариантами выбора.

<param name="template_width" type="radio" default="0" label="Template Width" description="Change width setting of template">
<option value="0">800x600</option>
<option value="1">1024x756</option>
<option value="2">fluid (min/max with FF and IE7, 80% with IE6)</option>
</param>

Меняем тег <BODY> нашего файла index.php следующим образом:

body.width_0 div#wrap {
width:760px;
}

body.width_1 div#wrap {
width:960px;
}

body.width_2 div#wrap {
min-width:760px;
max-width:960px;
width:auto !important;
}

#wrap {
text-align:left;
margin:0 auto;
}

Это дает нам три варианта представления страницы: фиксированная узкая страница, фиксированная широкая страница, и «резиновый» дизайн. Используя эту технологию, можно позволить администратору сайта настраивать самые разные параметры страницы — ширину, цвет, размер символов и так далее, всё, чем можно управлять условными операторами PHP, подключающими соответствующие стили CSS.

Переопределения шаблонов

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

Все представления разметки и шаблоны вывода ядра находятся в папке /tmpl/ корневой директории Joomla. Расположение их может немного отличаться для компонентов и для модулей, потому что у модулей, по сути, есть только одно представление. Например:

Базовая структура вывода для всех компонентов и модулей такова: Вид > Разметка > Шаблон. Таблица 9.3 показывает несколько примеров; помните, что у модулей только одно представление.

Вид	Разметка	Шаблон
Категория	Blog.php	blog_item.php blog_links.php
Категория	default.php	default_items.php
Модуль новостной ленты	default.php horz.php vert.php	_item.php

Обычно есть несколько файлов шаблона, связанных с конкретной разметкой. Их имена подчиняются общему правилу (см. табл. 9.4).

Таблица 9.4 Правило для имен переопределений

Согласованное имя	Описание	Пример
layoutname.php	Главный шаблон разметки	blog.php
layoutname_templatename.php	Дочерний шаблон разметки, вызываемый из главного	blog_item.php blog_links.php
_templatename.php	Общий шаблон разметки, используемый разными разметками	_item.php

Для каждого модуля есть папка tmpl, в которой содержатся его шаблоны. В ней находятся PHP файлы, создающие вывод. Например:

Первые три это три разные разметки ленты новостей, выбираемые в зависимости от параметров модуля, а _item.php — общий шаблон вывода, используемый всеми тремя. Открыв его, увидим:

<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>

<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<tr>
<td class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>" width="100%"><?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
<a href="<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <?php echo $item->title;?> </a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</td>
</tr>
</table>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : echo $item->afterDisplayTitle; endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<table class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<tr>
<td valign="top" colspan="2"><?php echo $item->text; ?></td>
</tr>
</table>
<?php if (isset($item->linkOn) && $item->readmore) : echo '<a href="'.$item->linkOn.'">'.JText::_('Read more').'</a>'; endif; ?>

Мы можем изменить его, чтобы, удалив таблицы, сделать немного более доступным:

<?php // no direct access defined('_JEXEC') or die('Restricted access'); ?>
<?php if ($params->get('item_title')) : ?>

<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<div class="contentheading<?php echo $params->get( 'moduleclass_sfx' ); ?>">
<?php if ($params->get('link_titles') && $item->linkOn != '') : ?>
<a href="<?php echo $item->linkOn;?>" class="contentpagetitle<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <?php echo $item->title;?> </a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<?php if (!$params->get('intro_only')) : echo $item->afterDisplayTitle; endif; ?>
<?php echo $item->beforeDisplayContent; ?>
<div class="contentpaneopen<?php echo $params->get( 'moduleclass_sfx' ); ?>"> <?php echo $item->text; ?>
</div>
<?php if (isset($item->linkOn) && $item->readmore) : echo '<a href="'.$item->linkOn.'">'.JText::_('Read more').'</a>'; endif; ?>

Этот новый файл должен быть помещен в специальную папку шаблона, названную html, следующим образом:

Мы только что легко и непринужденно убрали таблицы из вывода ленты новостей!

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

Если мы заглянем в папку com_content папке, увидим в ней папку views:

Эта папка содержит три подкаталога для четырех (ныне — пяти, добавился вид «первая страница» — пер.) возможных видов представления контента: архив, статья, категория и раздел. Внутри каждой из них есть папка tmpl, где, собственно, и содержатся файлы возможных вариантов разметки.

Помните, что в случае com_content, раскладка default.php ссылается на раскладку standard, которая представляет статьи как список ссылок.

Открыв blog_item.php мы увидим таблицы, которые используются в данный момент. Если мы хотим переопределить вывод, нам надо выложить отредактированный шаблон вывода в папку template/html/, например:

В общем не так сложно скопировать и вставить все необходимые шаблоны видов из папок /components/ и /modules/ в папку templates/yourtemplate/html.

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

Стоит заметить… новые возможности Joomla 1.5 предоставляют дизайнеру полный контроль над кодом и представлением сайта на Joomla.

Joomla без таблиц

Установочный комплект Joomla содержит предустановленный шаблон Beez, который представляет хороший пример переопределения вывода в действии. Команда разработчиков создала полный набор примеров переопределения, содержащийся в папке html шаблона. Наш последний пример — шаблон, который использует переопределение для исключения из вывода Joomla всех таблиц.

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

Создание полноценного шаблона Joomla 1.5