Создание шаблонов для Joomla
-
al-teen
- Шаблоны Joomla!
- 12.09.2012 14:21
Шаблоны практически всех CMS чем то похожи. Это обычные HTML шаблоны, интегрированные с системой. Чаще всего интеграция достигается путем вставки в нужные блоки программного кода, объявляющего те или иные элементы вывода: модулей, сайдбаров, материалов и т.д. Различия лишь в программировании, на уровне HTML никаких отличий нет и быть не может. Joomla в данном случае является классическим примером. Для того, чтобы создать в блоке шаблона позицию для модуля, нам требуется всего лишь вписать в него строчку
<jdoc:include type="modules" name="mymodule" />Где <jdoc:include /> — метод объявления вывода элемента на страницу.
type=«modules» — указания типа выводимого элемента.
name=«mymodule» — название модульной позиции.
Минимальная информация, необходимая для создания позиции в шаблоне. Используется для вывода на странице модулей, например: меню навигации, формы авторизации, «хлебных крошек» и т.д. Так же можно указывать title="" для обозначения подсказки, style="" для обозначения стиля вывода модуля. В случае отсутствия style модуль будет выводиться без заголовка. Обозначения стилей подробнее разберем в следующих статьях. А пока, в качестве наглядного примера создадим простой шаблон для Joomla.
Для этого необхомо создать пустую папку c произвольным названием, пусть будет mytemplate, в ней создадим папку css. Далее создадим файлы templateDetails.xml, index.php и пустой файл index.html для защиты от несанкционированного просмотра содержимого папки. В css/ файл стилей template.css.
Содержимое templateDetails.xml
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <!-- Общая для всех xml шапка, определяющая тип документа и его кодировку -->
<extension version="2.5" type="template" client="site"> <!-- Указание инсталлятору Joomla о версии и типе устанавливаемого расширения -->
<name>mytemplate</name> <!-- Имя шаблона в списке менеджера шаблонов -->
<files> <!-- Контейнер для списка файлов шаблона. -->
<folder>css</folder> <!-- Указание папок -->
<filename>index.html</filename> <!-- Указание файлов -->
<filename>index.php</filename>
</files> <!-- Обязательно требуется для стандартного установщика Joomla. Важно! Если информация о папках или файлах, указанная в данном блоке не соответствуют действительности, например не верно указано имя, или файл отсутствует, то получим ошибку установки -->
<positions> <!-- Контейнер для списка модульных позиций шаблона -->
<position>debug</position> <!-- Указание имени модульной позиции -->
<position>header</position>
<position>menu</position>
<position>footer</position>
</positions>
</extension>В файле index.php
<?php
// Защита от прямого обращения к сценарию.
defined('_JEXEC') or die;
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">
<meta charset="utf-8">
<head>
<jdoc:include type="head" /> // Требуется для вывода информации <title></title>, meta стилей и скриптов расширений.
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css">
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css">
// Подключаем системные стили
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/template.css">
// Подключаем файл стиля шаблона. Важно! Путь к файлу необходимо указывать в точности, как написано здесь, то есть абсолютный путь.
// В противном случае чревато неправильным отображением шаблона на внутренних страницах. То же касается и подключения js файлов.
</head>
<body>
<div id="page">
<header>
<jdoc:include type="modules" name="header" /> // Модульная позиция header
</header>
<nav>
<jdoc:include type="modules" name="menu" style="xhtml" /> // Модульная позиция menu
</nav>
<section>
<jdoc:include type="message" /> // Позиция вывода системных сообщений
<jdoc:include type="component" /> // Вывод информации компонентов
</section>
<footer>
<jdoc:include type="modules" name="footer" /> // Модульная позиция footer
</footer>
</div>
<jdoc:include type="modules" name="debug" /> // Вывод отладочной информации
</body>
</html>template.css
body{margin:0;padding:0;}
header,nav,section,footer{display:block;padding:5px;}
#page{border:1px #000 solid;width:960px;margin:0 auto;}
header{height:100px;}
nav{width:200px;float:left;margin:10px 0;}
section{width:730px;float:right;margin:10px 0;}
footer{height:100px;}Пример, наглядно демонстрирующий простоту работы с шаблонами Joomla. Алгоритм несложный, взять готовый шаблон HTML и вывести в нужных местах нужные элементы. Конечно же, в более сложных шаблонах приходится использовать условия отображения, скрипты, пользоваться другими возможностями Joomla, а так же вести разработку на различных шаблонных фрэймворках (Gantry, T3 и т.д.). Но если Вам не требуется ничего сверхординарного и сложного, то вполне можно обойтись даже описанным выше простейшим функционалом.
К тому-же к одним типам можно применять такие-то доп. свойства, а к другим нет. В общем в таком духе.