Авторизация

Регистрация

А. Куртеев. Рекомендую!

Курсы Александра Куртеева - профессионала в области построения сайтов на joomla.

Новости

Последние комментарии

Ваш рекламный блок Гугл Адсенс
1 1 1 1 1 1 1 1 1 1 Rating 5.00 (1 Vote)

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

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

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

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

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


Индекс

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


Ваш рекламный код от Гугл Адсенс

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


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

Голосования

Какая система управления контентом вам наиболее проста в освоении?

Joomla - 100%
Wordpress - 0%
Drupal - 0%
Instantcms - 0%
Data Life Engine - 0%

Всего голосов:: 1
Голосование по этому опросу закончилось в: 11.02.2014

Последние отзывы

Максим
Хороший сайт!
20.01.2014
Заур
Отличный сайт! Круто!!!
20.01.2014

Вертикальный блок Гугл Адсенс

ваш код Гугл Адсенс

Статистика материалов

Посетители
3590
Материалы
21
Cсылки
8
Количество просмотров материалов
516471

Кто на сайте?

Сейчас 12 гостей и ни одного зарегистрированного пользователя на сайте