9/25/2008

Створення шаблону для Joomla! 1.5

Пропонуємо Вашій увазі невеликий мануал-введення по створенню шаблонів для Joomla! 1.5. Стаття описує базовий функціонал розділення логіки та дизайну для тих, хто займається створенням шаблонів.­

­ ­­­

Шаблон

Структура шаблону практично не змінилася. Шаблони лежать у папці /templates. У папці Вашого шаблону обов'язково повинні бути наступні файли: index.php і templateDetails.xml (саме так з D у верхньому регістрі).

Папки для CSS і опис своїх типів відображення модулів (див. нижче) називаються css і html відповідно.

Структура:

  • templates
    • my_template
      • css
      • html
      • index.php
      • templateDetails.xml

Файл 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 - ім'я папки шаблона.



 



http://www.joomla-ua.org/content/view/113/24/

No comments: