Создание сайтов в Челябинске. Продвижение. Оптимизация

Разработка сайтов, поисковая оптимизация, продвижение, техническая поддержка и обслуживание вебсайтов любой сложности. Быстро, качественно и по разумной цене.

Создание шаблона для Joomla 3.0 (часть 2)

Разработка шаблона для Joomla 3 с нуляИ так в прошлой статье (создание шаблона для Joomla 3.0) мы остановились на локализации шаблона, разобрались с позициями и научились писать установщик шаблона для Joomla. В этой статье обсудим как заставить систему управления вставлять модули в позиции, сделаем простой набросок шаблона, рассмотрим некоторые прелести BootStrap, который входит в Joomla 3.0 по умолчанию.

Шаг 4. Подготовка макета.

Для начала определимся где и какие позиции будут в нашем шаблоне, для этого в Photoshop подготовим не большой макет.

Позиции в шаблоне

Теперь необходимо сделать верстку данного макета на HTML. Слишком подробно углубляться в изучение верстки сейчас не будем - это отдельная тема и в рамках этой статьи она не уместится, поэтому сразу перейдем к позициям Joomla и некоторым тонкостям работы с ними.

Позиция модуля в Joomla - это основная составляющая шаблона. Чтобы дать понять шаблонизатору, что в данном месте нужно загрузить модуль, используется конструкция вида:

<jdoc:include type="modules" name="right" style="default"/>

Из кода видно что "тэг" jdoc:include имеет несколько параметров:

  • type - тип позиции (у Joomla их несколько, head, component, message...);
  • name - имя позиции обычно используется совместно с type;
  • style - стиль позиции, с помощью этого параметра можно управлять оформлением позиции.

Создадим HTML шаблон в файле index.php, который до этого времени был пуст.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<jdoc:include type="head" />
</head>
<body>
<div class="container">
<div class="header">
<div class="top">
<jdoc:include type="modules" name="top" style="default" />
</div>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<jdoc:include type="modules" name="mainmenu" style="default"/>
</div>
</div>
</div>
<div>
<jdoc:include type="modules" name="breadcrumb" style="default"/>
</div>
</div>
<div class="row">
<!-- Begin Content -->
<div class="span3">
<jdoc:include type="modules" name="left" style="default"/>
</div>
<div class="span6">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div class="span3">
<jdoc:include type="modules" name="right" style="default"/>
</div>
<!-- End Content -->
</div>
</div>
</body>
</html>

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

head Позиция для формирования элемента <head> сюда Joomla подключит необходимые библиотеки, стили, мета-описания страницы, заголовок страницы и т.д.
message Сюда Joomla вставляет уведомления для пользователя об ошибках или сообщает о результатах каких-либо операций, например отправка сообщений и т.д.
component Основная позиция шаблона, предназначена для отображения компонетов, обычно статей или любых других привязанных к пункту меню.

Далее обратимся к стилям для позиций атрибут style тега jdoc:include. Их мы определяем сами с помощью файла modules.php, обычно он имеют следующую структуру:

<?php
defined('_JEXEC') or die;

function modChrome_well($module, &$params, &$attribs)
{
  if ($module->content) {
    echo "<div class=\"well ". htmlspecialchars($params->get('moduleclass_sfx')) ."\">";
    echo "<div class=\"page-header\"><strong>".$module->title."</strong></div>";
    echo $module->content;
    echo "</div>";
  }
}

function modChrome_default($module, &$params, &$attribs)
{
  if ($module->content) {
    echo "<div class=\"module ". htmlspecialchars($params->get('moduleclass_sfx')) ."\">";
    echo "<div class=\"page-header\"><strong>".$module->title."</strong></div>";
    echo $module->content;
    echo "</div>";
  }
}
?>

Этот файл нужно добавить в структуру нашего шаблона, чтобы Joomla его нашла он должен находиться в папке html, эта папка служит для переопределения стандартных шаблонов вывода заданных в системе. Также не забываем о файле templateDetails.xml

Сейчас структура шаблона выглядит так:

Структура шаблона

Как вы уже успели заметить он состоит из функций типа modChrome_none, modChrome_default и т.д. суффиксы none и default это и есть указанный стиль в атрибуте style! Эти функции содержат три параметра:

  • $module - контент модуля;
  • $params - параметры модуля (настраиваются в CMS);
  • $attribs - тут содержатся атрибуты указанные в jdoc:include (name, style и т.д.)

Таким образом мы можем настраивать отображение отдельных модулей из index.php дописывая различные стили, но возможно изменить стиль и из панели администрирования. Зайдем в систему администрирования и создадим модуль "HTML-код" это самый простой модуль. Перейдем на вкладку "Дополнительные параметры" на ней можной управлять настройками отображения модуля, в самом низу есть поле "Стиль модуля" это и есть шаблон, который храниться в modules.php.

Изменение стиля модуля

Благодаря такому подходу можно создавать различные шаблоны на основе одной и тойже структуры, например можно одному и тому же модулю присваивать различные стили и таким образом изменять дизайн сайта. А самое главное это не сложное и очень гибкое решение. Далее мы познакомимся с новыми вещами, которые свойственны только для Joomla последней версии. В этот шаблон мы добавим CSS стили, JS библиотеки Mootools и JQuery и поработаем с BootStrap.

Продолжение следует! создание шаблона для Joomla 3.0 (часть 3)

Понравилась статья? Возник вопрос? Вступайте в нашу группу и смело задавайте vk.com/saity74