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

Шаблоны практически всех 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 и т.д.). Но если Вам не требуется ничего сверхординарного и сложного, то вполне можно обойтись даже описанным выше простейшим функционалом.

 

3 comments
Хорошая статья, только один недочет — я бы расписал все возможные варианты переменных блока <jdoc:include/> т.е. если есть type="" то он может принимать значение modules — для вывода модулей, component для вывода компонентов и т.п.
К тому-же к одним типам можно применять такие-то доп. свойства, а к другим нет. В общем в таком духе.
Это вопрос на отдельную статью. Планирую описать в следующем материале. Будет серия публикаций, посвещенная работе с шаблонами. В т.ч. базовые условия, создание различных параметров, нюансы и заготовки. Разобрать основные ошибки и т.д. Объемно в общем.
Думаю что так будет еще лучше.
Only registered users can comment.