Создание шаблона на Joomla (2.5, 3+) – простой мануал

Home > Руководства, статьи, инструкции >

От используемого шаблона на движке Joomla зависит многое, ведь фактически это «душа» вашего сайта. Людей притягивает все красивое и удобное – правило срабатывает и в Интернете. Проще всего, конечно, взять где-то чужой шаблон, изменить в нем некоторые детали и пользоваться. Однако это чревато, как минимум, неприятными «сюрпризами» в коде. Можно купить создание шаблона с нуля или заказать уникальный вариант, но тут вам придется расстаться с определенной суммой денег на это готовы пойти далеко не все.

Идеальный вариант – создание шаблона для Joomla собственными силами. Преимущества такого решения налицо:

Скорость работы сайта будет максимально оптимизирована;
В коде отсутствуют любые небезопасные элементы;
Все авторские права находятся только в ваших руках;
Вы можете реализовать самые смелые замыслы и сделать сайт уникальным как визуально, так и функционально.

Будет лучше, если вы имеете определенные знания в программировании (PHP, CSS, HTML), но даже при их полном отсутствии вы можете воспользоваться примерами из текущей статьи и сделать все самостоятельно.

Главная папка для шаблона

Joomla, как и многие другие CMS, условно разделяется на две части: front-end (пользовательская) и back-end (административная). Последняя из них является инструментом исключительно для администратора сайта, а вот front-end как раз и является тем, что видит обычный посетитель на экране. С ней и будет работать.

Папка /templates/ отвечает как раз таки за пользовательскую часть шаблонов Джумлы. Вложенные в нее директории – это отдельно взятые шаблоны, кроме директории /system/, в которую лучше не лезть вообще.

Первоначальная подготовка

Первым делом создаем папку в любом удобном месте у себя на компьютере. Например, на рабочем столе. Дайте ей красивое название, ведь это будет имя вашего будущего шаблона. Только вводите название на английском, русские символы не допускаются.

Заходим в эту директорию и создаем два пустых файла: index.php и templateDetails.xml. Сразу после них создаем еще одну папку (внутри нашей главной папки) под именем images – тут будут лежать все изображения.

Также советуем создать тут же файл index.html (пустой). Делается это для предотвращения парсинга, которым пользуются негодяи-злоумышленники.

Поговорим о CSS. При создании шаблона есть 2 варианта его использования. Первый – использования одного файла для всего сайта. Второй – отдельная папка для CSS, в котором будет несколько файлов. Такой подход чаще всего используют опытные программисты и это в какой-то мере лучше, однако не настолько, чтобы отказываться от простого варианта. Поэтому мы пойдем по пути простоты и удобства – создаем файл style.css в главной директории нашего шаблона.

Последний шаг на данном этапе – папочка под названием html. Она отвечает за альтернативные варианты макета, например, для определенных разделов сайта. Устанавливая себе, например, модуль интернет-магазина, его внешний вид для посетителей определяется именно тут. Папка пока будет полностью пустой.

Вы благополучно прошли первый этап, теперь нужно продвигаться дальше.

Index.php

«Индекс» является самым важным файлом вашего шаблона. Этот файл работает без перерывов каждый раз, когда кто-то заходит на ваш ресурс. Его структура может немного разниться, но для начала советуем использовать вот такую заготовку:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<jdoc:include type="head" />

</head>

<body>

<jdoc:include type="message" />

<jdoc:include type="component" />

</body>

</html>

Давайте разберемся с кодом.

Начальная строчка защищает вас от прямого обращения к файлу. Очередная палка в «хакерские колеса».

Строчки №2 и №3 помогают документу пройти типизацию в браузерах. В нашем примере мы указываем на русский язык в тексте и стандартный режим письма «слева направо».

Самый большой блок head начинается с пятой строчки, которая позволяет встроенному в Джумлу методу выводить определенную информацию: заголовки, мета-теги, так нужные для оптимизации, CSS, JS и т.д.

Строка «jdoc:include type="message"» активизирует типовые сообщения, вроде ошибок 404. При желании вы можете вообще удалить этот метод, однако мы рекомендуем все-таки не делать этого. Если вы планируете работать в интернете долго, то в будущем узнаете почему.

Строка №12 выводит абсолютно все компоненты на каждой страничке. Имеем в виду статьи, галереи, странички товара и тому подобное.

Index.php – это каркас вашего будущего шаблона. Можете взять готовый пример, можете немного модернизировать его по своему желанию. Теперь двигаемся дальше.

Позиционирование модулей

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

Чуть выше мы уже инициализировали блок body в файле index.php. Теперь изменим его таким образом, чтобы позиции футера, шапки и двух сайдбаров были определены. Так это будет выглядеть на деле:

<body>

<jdoc:include type="modules" name="top-menu" />

<jdoc:include type="modules" name="left-column" />

<jdoc:include type="message" />

<jdoc:include type="component" />

<jdoc:include type="modules" name="right-column" />

<jdoc:include type="modules" name="footer" />

</body>

Другими словами, модули под названием «top-menu», «footer», «left-column» и «right-column» уже имеют свое место в шалоне. Возможность их редактирования будет в админке Joomle при следующем запуске.

Однако стоит понимать, что мы показали самый простенький вариант. Давайте теперь попробуем поработать с оберткой модулей, которая в оригинале называется module chrome. Это более продвинутый, естественный и красивый вариант вывода различных модулей в одном блоке.

«Обрамление модуля» - это спецструктура кода, которая интегрируется в HTML файл и окружает сам модуль во время его задействования. Верстальщики любят этот прием, ведь он открывает нужную гибкость.

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

Вариант №1 (стандартный):

<a href="/">Главная</a>

</li>

<a href="/vasha-korzina">Ваша корзина</a>

</li>

</ul>

Вариант №2 (module chrome):

<h3>Верхнее меню</h3>

<a href="/">Главная</a>

</li>

<a href="/vasha-korzina">Ваша корзина</a>

</li>

</ul>

</div>

Ошибется тот, кто скажет, что отличие только в количестве строчек. Во втором варианте мы видим название «Верхнее меню», которое определено для модуля при помощи module chrome. Это удобно, ведь с ним будет проще работать через админку. Также обратите внимание на обертку в дивы с классом moduletable_menu.

Несмотря на название популярной обертки xhtml, ничего общего с настоящим XHTML она в принципе не имеет. Чтобы сделать обрамление для модуля нужно добавить к тегу атрибут style. Они и определяет включение той или иной обертки. Так это делается в коде:

<jdoc:include type="modules" name="left-column" style="xhtml" />

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

<body>

<jdoc:include type="modules" name="top-menu"/>

</div>

<jdoc:include type="modules" name="left-column" style="xhtml" />

</div>

<jdoc:include type="message" />

<jdoc:include type="component" />

</div>

<jdoc:include type="modules" name="right-column" style="xhtml" />

</div>

<jdoc:include type="modules" name="footer" style="xhtml" />

</div>

</body>

В файл стилей (style.css) нужно добавить вот это:

*{margin:0;padding:0;}

#layout{width:990px;margin:0 auto;}

#header{margin-bottom:20px;}

#header ul{text-align:center;}

#header ul li{list-style:none;display:inline-block;margin:0 5px;}

#left,#content,#right{float:left;}

#left{width:176px;}

#content{width:610px;margin:0 10px;}

#right{width:176px;}

#footer{margin-top:20px;}

#header,#left,#content,#right,#footer{border:1px solid grey;}

.clear{clear:both;}

Наш шаблон примет вот такую структуру:

Красивым он станет после добавления графики.

«Нет» пустым колонкам

На предыдущем изображении можно заметить что правая и левая колонки (модули right-column и left-column) отображаются и нормально вписываются в интерфейс главной страницы. Но так бывает не всегда, особенно когда внутренние страницы имеют иную концепцию дизайна.

Сделать это можно разными путями. Мы воспользуемся стандартным функционалом в Joomla. Заходим на нужный нам модуль и выбираем там «вывод только на главной», как показано на скриншоте:

Тогда остальные страницы сайта получат такой внешний вид:

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

<?php

if (($this->countModules('right-column')==0) and ($this->countModules('left-column')==0)){

$column = 'all-hidden';

}elseif ($this->countModules('right-column')==0){

$column = 'right-hidden';

}elseif ($this->countModules('left-column')==0){

$column = 'left-hidden';

}

Код выглядит симпатично, но чуточку непонятно. Понять его лучше поможет вот это:

if (($this->countModules('right-column')==false) and ($this->countModules('left-column')==false)){

$column = 'all-hidden';

}

Объясняем суть. Сначала занимаемся проверкой модулей right-column и left-column. Если их нет, в переменную под названием $column входит значение all-hidden. Если модули есть, то проверяем каждую колонку и вносим определенные символы в те места, где их нет. Посмотрите следующие примеры.

Пример №1 – если модулей справа нет:

Пример №2 – если модули есть и справа, и слева. В таком случае в body будет пустой класс:

Завершаем все редактированием CSS файла, который по завершении операции будет выглядеть так:

/* скрыли все колонки */

.all-hidden #right,.all-hidden #left{display:none;}

.all-hidden #content{width:100%;}

/* скрыли только правую колонку */

.right-hidden #right{display:none;}

.right-hidden #content{width:786px;}

/* скрыли только левую колонку */

.left-hidden #left{display:none;}

.left-hidden #content{width:786px;}

Вот что получаем в результате:

Отметим, что данный метод является только одним из возможных вариантов:

if ($this->countModules('название позиции')==0){

…

}

Кусочек кода $this->countModules() является методом PHP (стандартизированным), который доступен в CMS Joomla всем желающим. Отвечает он за возвращение количества модулей в определенном место.

templateDetails.xml – настройка

Представляете, мы уже почти создали наш собственный шаблон. Остались несколько последних шагов, который мы быстренько пройдем. Шаблон должен быть простым в первоначальной установке, этим и будет заниматься. Работать предстоит с файлом templateDetails.xml, играющим главную роль при инсталляции.

Такой вот код:

<?xml version="1.0" encoding="utf-8"?>

<name>shost-site</name>

<author>shneider</author>

<authorEmail>boss@shost.com.ua</authorEmail>

<authorUrl>http://shost.com.ua</authorUrl>

<files>

<filename>index.php</filename>

<filename>index.html</filename>

<filename>templateDetails.xml</filename>

<filename>style.css</filename>

<folder>images</folder>

</files>

<position>left-column</position>

<position>right-column</position>

<position>footer</position>

</positions>

</extension>

Первым делом мы тут инициализируем информацию о самом шаблоне: авторство, контакты, копирайт и т.д. После <files> начинается часть, в которой перечисляются папки и файлы, используемые в темплейте.

Этот кусок кода загружается всегда и «на автомате». Хотя если вы что-то случайно или специально упустили, его можно добавить вручную в любой момент.

Примечание: не оставляйте пустых папок в шаблонах. Достаточно просто добавить в них пустой файл index.html.

Блок <positions> расставляет все данные в нужные позиции:

<position>left-column</position>

<position>right-column</position>

<position>footer</position>

</positions>

Вы не ограничиваете себя только позициями, вписанными в этом куске кода. Однако они будут отображаться в админке, а это удобно и функционально. Дополнительные позиции можно прописывать самостоятельно, причем многие программисты так делают принципиально. Важно ориентироваться в их названиях.

Установка шаблона

После всех манипуляций папку с созданным шаблоном нужно заархивировать любым архиватором. Подходят форматы .ZIP, .TAR.GZ, .TAR.BZ2. Другими, например .RAR, пользоваться не советуем. Дальше вам нужно будет лишь выбрать свой шаблон в инсталляторе и пройти несколько шагов установки. Все!