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

Главная

Статьи

Joomla

Создание шаблона для Joomla 1.5 — часть 4

01.06.2011 21:12

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

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

Давайте теперь рассмотрим следующие функции:

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

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

В Joomla 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-файл для примера, приведенного выше, мог бы выглядеть следующим образом:

template_width=2

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

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

Мы видим, что это простой список с тремя вариантами выбора:

<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 class="width_<?php echo $this->params->get('template_width'); ?>">   

И добавляем следующие строки в CSS-файл:

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-стили.

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

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

Структура переопределения

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

modules/mod_newsflash/tmpl/
modules/mod_poll/tmpl/
components/com_login/views/login/tmpl/
components/com_content/views/section/tmpl/

Базовая структура для всех компонентов и модулей — это Отображение>Макет>Шаблон

Ниже в таблице показаны некоторые примеры. Обратите внимание, что модули имеют только одно отображение.

Отображение	Макет	Шаблоны
Category	Blog.php	blog_item.php blog_links.php
Category	default.php	default_items.php
(Newsflash module)	default.php horz.php vert.php	_item.php

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

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

Переопределение модулей

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

/modules/mod_newsflash/tmpl/default.php
/modules/mod_newsflash/tmpl/horiz.php
/modules/mod_newsflash/tmpl/vert.php
/modules/mod_newsflash/tmpl/_item.php

Первые три файла — это три макета модуля Newsflash, которые используются в зависимости от того, какие выбраны опции у модуля, а файл _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') &amp;&amp; $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) &amp;&amp; $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') &amp;&amp; $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) &amp;&amp; $item->readmore) : echo '<a href="'.$item->linkOn.'">'.JText::_('Read more').'</a>'; endif; ?>

Новый файл должен быть помещен в папку шаблона, в подпапку html:

templates/templatetutorial15bold/html/mod_newsflash/_item.php

Мы убрали таблицы из модуля Newsflash, это было просто, не правда ли?

Переопределение компонентов

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

Если мы посмотрим в папку com_content, то мы увидим подпапку views:

/components/com_content/views/
/components/com_content/views/archive
/components/com_content/views/article
/components/com_content/views/category
/components/com_content/views/section

Эти папки соответсвуют четырем возможным отображениям контента: archive, article, category и section. Внутри каждого отображения мы найдем папку tmpl, в которой могут находиться несколько макетов.

Если мы посмотрим в папку category, мы увидим:

/components/com_content/views/category/blog.php
/components/com_content/views/category/blog_item.php
/components/com_content/views/category/blog_links.php
/components/com_content/views/category/default.php
/components/com_content/views/category/default_items.php

Обратите внимание, что в случае компонента com_content, макет default.php отвечает за стандартный вариант, в котором статьи отображаются в виде ссылок.

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

templates/templatetutorial15bold/html/com_content/category/blog_item.php

Это относительно простой процесс — копирование и вставка отображений из папок /components/ и /modules/ в папку templates/yourtemplate/html.

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

Что необходимо знать

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

Бестабличная Joomla

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

CSSTemplateTutorialStep4

Итак, у нас есть шаблон, сделанный на основе дизайна. В нем добавлено оформление шрифтов, но более важно то, что мы создали чистый CSS-шаблон с динамически убирающимися колонками и приятным меню из ярлыков. Затем мы переопределили вывод Joomla таким образом, чтобы в нем больше не использовались таблицы. Я сделал инсталлируемый шаблон, который вы можете найти в нашей библиотеке [примечание переводчика: все шаблоны из данного руководства доступны для скачивания по ссылке: www.compassdesigns.net/downloads/file/21-csstemplatetutorials1-4.html].

Резюме

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

Современные веб-сайты отделяют контент от отображения с помощью технологии, называемой «Каскадные Таблицы Стилей» (CSS). В Joomla отображением контента управляет шаблон.
При создании шаблона вам нужно проинсталлировать Joomla на сервер, чтобы вносить изменения и обновлять отображение страниц.
Создание валидного шаблона — это способ, а не цель. Идея заключается в том, чтобы сделать ваш шаблон настолько доступным, насколько это возможно, для людей и поисковых систем, а не просто для того, чтобы получить значок валидности.
Самый базовый шаблон просто загружает модули Joomla и компонент mainbody. За расположение элементов и дизайн отвечает CSS, а не Joomla.
Современный веб-дизайн использует CSS вместо таблиц для позиционирования элементов. Это непросто изучить, но это хорошая инвестиция. Существует множество ресурсов (кроме Joomla), которые могут помочь вам в этом.
Joomla отображает конкретные элементы, объекты и классы в коде веб-страницы. Это можно предвидеть и использовать для изменения оформления с помощью CSS.
В версии 1.5 вывод модулей можно полностью кастомизировать, либо вы можете использовать предопределенный вывод. Все эти опции называются «module chrome».
Лучше всегда использовать вывод меню в виде списка или в плоском виде. В результате вы можете использовать массу доступных на Web ресурсов с уже готовыми стилями CSS для меню.
Такие элементы, как колонки или места для модулей, могут быть спрятаны (или свернуты), когда для них нет контента. Это делается с помощью условных выражений PHP, которые связаны с определенным CSS-стилями.
Создание рабочего шаблона Joomla — это в большей степени вопрос графического дизайна и манипуляций с CSS, нежели какое-то специально «знание Joomla».
Joomla 1.5 предоставляет новые возможности для шаблонов, которые позволяют разработчикам полностью управлять кодом и отображением веб-сайта на Joomla.