Создание сайтов в Челябинске. Продвижение. Оптимизация
Разработка сайтов, поисковая оптимизация, продвижение, техническая поддержка и обслуживание вебсайтов любой сложности. Быстро, качественно и по разумной цене.
Создание шаблона для Joomla 3.0 (часть 2)
- Опубликовано 05 Октябрь 2012
И так в прошлой статье (создание шаблона для 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)
Понравилась статья? Возник вопрос? Вступайте в нашу группу и смело задавайте