Створення шаблону для Joomla! 1.5
30.01.2008, 19:30 | Прочитано: 26694 раз | Шаблони та дизайн | Автор Дмитро Смірнов (адаптація та переклад Dutch) Друк | E-mail
Пропонуємо Вашій увазі невеликий мануал-введення по створенню шаблонів для Joomla! 1.5. Стаття описує базовий функціонал розділення логіки та дизайну для тих, хто займається створенням шаблонів.
Шаблон
Структура шаблону практично не змінилася. Шаблони лежать у папці /templates. У папці Вашого шаблону обов'язково повинні бути наступні файли: index.php і templateDetails.xml (саме так з D у верхньому регістрі).
Папки для CSS і опис своїх типів відображення модулів (див. нижче) називаються css і html відповідно.
Структура:
-
templates
-
my_template
- css
- html
- index.php
- templateDetails.xml
-
my_template
Файл templateDetails.xml містить опис шаблону (ім'я автора, дату створення та ін.) і список файлів, які містяться в шаблоні (необхідно для встановлення шаблона через Менеджер Встановлення). Файл index.php - це власне і є шаблон.
Код порожнього index.php:
<?php echo '<?xml version="1.0" encoding="utf-8"?' .'>'; ?>
<!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: dir="{LANG_DIR}" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/{TEMPLATE}/css/template.css" type="text/css" />
</head>
<body>
</body>
</html>
Всередині теґів <body>...</body> міститься html-зміст шаблона (можливі включення PHP-коду).
Модулі
В Joomla! 1.0.x модулі виводилися так:
<?php mosLoadModules ( 'left',-1); ?>
де:
- left - позиція модуля,
- -1 - тип відображення модуля.
В Joomla! 1.5 відображення модулів здійснюється наступним чином:
<jdoc:include type="modules" name="right" style="-1" />
де:
- type="modules" - говорить про те, що виводиться модуль;
- name="right" - вказує на позицію модуля;
- style="-1" - вказує тип висновку модуля.
Для style="..." з'явилася можливість вказування типу виводу не тільки цифрами, але й ключовими словами.
style="table" - стандартний вивід модуля в таблиці:
<table cellpadding="0" cellspacing="0" class="moduletable">
<tr>
<th valign="top">Заголовок Модуля</th>
</tr>
<tr>
<td>Зміст Модуля</td>
</tr>
</table>
де:
- style="horz" - горизонтальний відображення.
Не побачив різниці з style="table", хоча в офіційному мануалі сказано, що формується горизонтальне відображення модуля.
style="xhtml" - вивід модуля в одному DIV із заголовком H3:
<div class="moduletable"> <h3>Заголовок Модуля</h3> Зміст Модуля </div>
style="rounded" - відображення модуля в чотирьох вкладених DIV (використовується для створення закруглених кутів у модулях):
<div class="module">
<div>
<div>
<div>
<h3>Заголовок Модуля</h3>
Зміст Модуля
</div>
</div>
</div>
</div>
style="raw" - буде виведений зміст модуля без заголовка, таблиць і DIV'ів:
Зміст Модуля
В Joomla 1.5 додана можливість створювати свої типи відображення модулів.
Опис типу відображення модуля знаходиться у файлі /templates/template_folder/html/modules.php. Ім'я функції обов'язково повинне починатися з modChrome_.
Приклад відображення модулів
Створимо тип відображення style="example", у якому модулі будуть виводитися в таблиці шириною 180px, заголовок модуля має червоне тло, текст заголовка виводиться в тегах <H3>…</H3>, тіло модуля має сіре тло. Весь текст у верхньому регістрі.
Код найпростішого файлу modules.php буде таким:
<?php
defined('_JEXEC') or die('Restricted access');
function modChrome_example($module, & $params)
{
?>
<table width="180px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="background-color:red;"><h3><?php echo $module->title ?></h3></td>
</tr>
<tr>
<td style="background-color:gray; text-transform:uppercase;"><?php echo $module->content ?></td>
</tr>
</table>
<?php
}
?>
Контент
Відображення контента здійснюється таким чином:
В Joomla! 1.0.x
<?php mosMainBody(); ?>
В Joomla! 1.5
<jdoc:include type="component" />
Код найпростішого index.php трьохколоночного шаблону
<?php echo '<?xml version="1.0" encoding="utf-8"?' .'>'; ?>
<!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: dir="{LANG_DIR}" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/{TEMPLATE}/css/template.css" type="text/css" />
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left"><jdoc:include type="modules" name="left" style="raw"/></td>
<td class="center"><jdoc:include type="component" /></td>
<td class="right"><jdoc:include type="modules" name="right" style="raw"/></td>
</tr>
</table>
</body>
</html>
Трюки з відображенням модулів
Завдання:
Для зареєстрованих користувачів виводимо модулі в right для всіх інші модулі в user1.
Вирішення:
Після тегу <body> пишемо
<?php $user =& JFactory::getUser(); ?>
у тілі шаблона
<?php if($user->_id) {?>
<jdoc:include type="modules" name="right" style="raw"/>
<?php } else {?>
<jdoc:include type="modules" name="user1" style="raw"/>
<?php }?>
Завдання:
Для користувачів групи author виводимо модулі в right для всіх інші модулі в user1.
Вирішення:
Після тегу <body> пишемо
<?php $user =& JFactory::getUser(); ?>
у тілі шаблона
<?php if($user->get('usertype') == 'Author') {?>
<jdoc:include type="modules" name="right" style="raw"/>
<?php } else {?>
<jdoc:include type="modules" name="user1" style="raw"/>
<?php }?>
Завдання:
Разом з компонентом weblinks виводимо модулі в user2.
Вирішення:
Після тегу <body> пишемо
<?php $option = JRequest::getVar( 'option' );?>
у тілі шаблона
<?php if($option == 'com_weblinks') {?>
<jdoc:include type="modules" name="user2" style="raw"/>
<?php } ?>
Деякі змінні використовувані в шаблонах
- $mainframe->getCfg('sitename') - назва сайту;
- $mainframe->getCfg('mailfrom') - електронна адреса Адміністратора;
- $mainframe->getCfg('live_site') - URL сайту;
- $this->template - ім'я папки шаблона.