Особенности создания шаблонов Joomla
Написал Яна Пазына   

ImageПредлагаемый материал покажет новичкам, что создавать шаблоны под Mambo/Joomla не сложно. Я не стал делать свой материал на эту тему, так как на  http://joomlaportal.ru/ это уже прекрасно сделала Яна Пазына.

 

Даже совсем не зная HTML и CSS можно сделать свой шаблон в любом удобном HTML редакторе. Многие "мамберы" часто используют в качестве "болванки" какой-нибудь подходящий для них шаблон и переделывают его до неузнаваемости.

 

В данном материале шаблон создается как бы с нуля. Сначала ставится задача. Потом под задачу строится шаблон. Новичкам этот материал будет полезен.

 

Шаблон для Joomla состоит следующих файлов:


  • index.php
  • templateDetails.xml
  • директория images, куда вы будете складывать все графические файлы для использования в шаблоне
  • директория css с файлом template_css.css внутри

 

Все файлы складываются в директорию с названием вашего шаблона, и все вместе – в директорию templates.

Главный файл index.php

Попробуем сделать шаблон на основе образца, взятого мною на templatemonster.

 

 

 

Основу шаблона составляет файл index.php


В его начало просто копируем следующий код (формируем стандартный заголовок шаблона):

 

<?php
 
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
 
$iso = split( '=', _ISO );
 
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
 
?>
 
<!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">
 
<head>
 
<?php if ($my->id) initeditor(); ?>
 
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
 
<?php mosShowHead();
 
echo "<link rel="stylesheet"
 
href="
$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css"
 
type="
text/css" />";
 
echo "<link rel="shortcut icon" href="$GLOBALS[mosConfig_live_site]/images/favicon.ico" />";
 
?>
 
</head>

 

Тело шаблона 

 Основная информация страницы выводится в блоке mainbody. Вся остальная информация выводится в модулях (module).

Модули, в свою очередь, располагаются в областях (position) вертикально друг под другом (возможно и горизонтальное расположение, но это редкий и порой сложный в исполнении вариант – см. часть 2 данной статьи).

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

Модули могут быть программированные и созданные админом из контрольной панели. С готовыми программированными модулями все понятно – скачиваем и устанавливаем.

Собственные модули – это по сути куски статического HTML кода, введенные вами. Рекомендую информацию, постоянную на каждой странице и не требующую изменений, прописывать прямо в коде шаблона (например, логотип, копирайт и т.п.).

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

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

 

Приблизительная схема наших модулей

 

Области, определенные под модули

 

 

План шаблона

 

 

Теперь нам нужно пойти в контрольную панель и объявить все области. В оригинальной версии: Site –> Template Manager –> Module Positions. Возможно там уже будут какие-то области, заявленные разработчиками – их можно смело удалить (только не удалите области, предназначенные для шаблона самой контрольной панели). Порядок, в котором вы занесете все области, будет использоваться в выпадающем списке при выборе области в настройках модулей.

Область вставляется в шаблон следующим кодом

<?php mosLoadModules ( 'название_вашей_области' ); ?>

Например, область с названием left вставляется так

<?php mosLoadModules ( 'left' ); ?>

Исключение составляют дата, строка навигации (pathway) и область mainbody, (где выводится информация компонентов Joomla, например, тексты статей, новости главной страницы и тому подобное).

Код для даты:

<?php echo (strftime (_DATE_FORMAT_LC)); ?>

Код для mainbody:

<?php include ("mainbody.php"); ?>

Код для строки навигации

<span class="pathway"><?php mosPathWay(); ?></span>

Также в шаблон необходимо вставить информацию о разработчиках Joomla и, по вашему желанию, информацию о скорости загрузки страницы

<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/includes/footer.php' ); ?>
 
 <?php mosLoadModules( 'debug', -1 );?>

Естественно все области вставляются в пределах тэга <body></body>

Путь к изображениям в шаблоне должен выглядеть следующим образом (пример для файла logo.jpg)

<?php echo $mosConfig_live_site;?>/templates/название_шаблона/images/logo.jpg

Все, скелет нашего шаблона готов

Стили CSS и оформление

После создания скелета необходимо "окультурить" наш шаблон с помощью CSS. Поскольку структура CSS практически не изменилась с версии Мамбо 4.5 (ее расшифровку мы уже давали – ткните здесь и здесь), я не буду повторяться.

Остановлюсь немного подробнее на оформлении модулей. Приятным нововведением в мамбо 4.5.1 стала возможность прописывать индивидуальные классы для каждого шаблона (см. в настройках каждого модуля в контрольной панели).

 

Стандартный вывод модуля в Joomla – таблица:

<table cellpadding="0" cellspacing="0" class="moduletable"> 
 
 <tr><th valign="top">
 
 Заголовок модуля
 
 </th></tr>
 
 <tr><td>
 
 Содержание модуля
 
 </td></tr>
 
 </table>

Возможны также другие варианты:

<?php mosLoadModules ( 'left', -2 ); ?>

Выводит модули области left не в таблицах, а блоками DIV.

<div class="moduletable">
<h3> Заголовок модуля</h3>
Содержание модуля
</div>

<?php mosLoadModules ( 'left', -3 ); ?>

Выводит модули области четырьмя блоками DIV, вложенными друг в друга (обычно используют для создания закругленных углов).

<div class="module"> <div><div><div>
<h3> Заголовок модуля</h3>
Содержание модуля
</div></div></div></div>

<?php mosLoadModules ( 'left', -1 ); ?>

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


 

Если вы прописываете свой класс модулю (параметр ModuleClassSuffix), то его название прибавляется к уже существующему. Лично я начинаю названия своих модулей со знака подчеркивания, чтобы легче читалось. Например, модулю баннеров я задаю класс _banners.

В результате в HTML получаю: class="moduletable_banners"


При большом количестве разнообразных модулей длина вашего CSS увеличивается до бесконечности :)

Структура XML файла

Файл templateDetails.xml используется для опознания шаблона контрольной панелью Joomla – для установки, редактирования, использования и удаления.

 

Привожу весь код файла XML с пояснениями:

 

<?xml version="1.0" encoding="windows-1251"?>
 
<mosinstall type="template">
 
<name>название шаблона</name>
 
/* должно совпадать везде – в названии директории, в прописанных путях к изображениям и т.п. */
 
<creationDate> дата создания </creationDate>
 
<author> ваше имя </author>
 
<copyright> копирайт </copyright>
 
<authorEmail> ваш Email </authorEmail>
 
<authorUrl> www.ваш_сайт.ru </authorUrl>
 
<version> номер версии шаблона </version>
 
<description> описание шаблона </description>
 
<files>
 
<filename>index.php</filename>
 
<filename>template_thumbnail.png</filename>
 
/* скриншот шаблона – не обязателен, если только вы не используете модуль смены шаблона юзером */
 
</files>
 
/* файлы входящие в ваш шаблон, кроме CSS и изображений */
 
<images>
 
<filename>images/icon_search.gif</filename>
 
<filename>images/icon_sitemap.gif</filename>
 
<filename>images/logo.jpg</filename>
 
</images>
 
/* все изображения, входящие в ваш шаблон */
 
<css>
 
<filename>css/template_css.css</filename>
 
</css>
 
/* указание на файл стилей */
 
</mosinstall>

 

Тонкие настройки 

Для большей гибкости шаблона можно "поиграть" с областями в файле index.php. Приведу несколько готовых вариантов для тех, кто программированием не занимается
----------------------------------------

<?php 
 
 if ( mosCountModules( 'left' ) ) {
 
 ?>
 
 любой код HTML – начало оформления области
 
 <?php mosLoadModules ( ' left ' ); ?>
 
 любой код HTML – конец оформления области
 
 <?php 
 
 }
 
 ?>

Скрывает область left, если на данной странице в ней нет ни одного модуля
----------------------------------------

<?php 
 
 if ( mosCountModules( 'left' ) || mosCountModules( 'right' )) {
 
 ?>
 
 любой код HTML – начало оформления области
 
 <?php mosLoadModules ( ' left ' ); ?>
 
любой код HTML по необходимости
 
 <?php mosLoadModules ( ' right ' ); ?>
 
 любой код HTML – конец оформления области
 
 <?php 
 
 }
 
 ?>

Скрывает области left и right, если на данной странице ни в одной из них нет модулей. Если есть модуль хотя бы в одной из этих областей, то появятся обе области.

 

<?php
 
if ($_REQUEST['option'] != 'com_frontpage' ||  $_REQUEST['option'] != '') {
 
?>
 
любой код HTML – начало оформления области
 
<?php mosMainBody();?>
 
любой код HTML – конец оформления области
 
<?php
 
}
 
?>

 

Скрывает область mainbody на главной странице (при условии, что вы используете компонент frontpage, а не какой-то другой, то есть не меняли главную страницу, назначенную при установке Joomla)

Спасибо за материал: http://joomlaportal.ru/


В избранное (48) | Ссылка на статью | Просмотров: 82244 | Версия для печати | Отправить на e-mail

Добавить комментарий
RSS комментарии

Только зарегистрированные пользователи могут оставлять комментарии.
Авторизуйтесь или зарегистрируйтесь.