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

  • 21.11.2005

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

Теория и практика

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

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

{mospagebreak title=Индекс&heading=Теория и практика}

Индекс

Попробуем сделать шаблон на основе образца, взятого мною на 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 >

 <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

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

{mospagebreak title=Стили и оформление}

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

После создания скелета необходимо "окультурить" наш шаблон с помощью CSS. Остановлюсь немного подробнее на оформлении модулей. Приятным нововведением в мамбо 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 увеличивается до бесконечности :)

{pagebreak title=XML}

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>

{mospagebreak title=Фишки}

Фишки

Для большей гибкости шаблона можно "поиграть" с областями в файле 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)

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

Обновить
Защитный код

Joomla!® CMS — пожалуй, лучшая система управления контентом с открытым исходным кодом

Joomla! — это больше, чем просто программное обеспечение, это люди, включающие разработчиков, дизайнеров, системных администраторов, переводчиков, копирайтеров, и, что самое главное — простых пользователей.

Мы рады пригласить вас в ряды нашего сообщества!

Скачать Joomla! 3.6.2 Документация Joomla! CMS Свернуть

Шаблоны Joomla

Новости портала

Новое в блогах

Видео