Мануал по созданию шаблона для Joomla (2.5,3+)
Шаблон для Joomla – это структура внешнего вида сайта. Как показывает статистика, приятный и интуитивно понятный дизайн всегда притягивает посетителей, потому пренебрегать своим «лицом» не стоит. Конечно, можно взять готовый шаблон, купить его или заказать у профессионалов, однако создание оного своими руками намного приятнее и дешевле. Да и все нюансы можно учесть, сделав сайт реальным воплощением собственных идей.
Вот еще несколько аргументов самостоятельного создания шаблонов:
- Можно оптимизировать скорость загрузки;
- Нет опасности замаскированных вирусов или исходящих ссылок;
- Вы – автор, потому все авторские права находятся у вас;
- Настройка, кастомизация, реализация смелых идей. Все возможности у вас в руках.
В идеале нужно, чтобы вы имели хотя бы самые примитивные знания в PHP, а также чуть большие в HTML и CSS, однако если даже их нет, то можно просто сделать все по аналогии примеров, которые встречаются в данной статье.
Директория Joomla-шаблонов
Шаблоны в Джумле фактически разделяются на две части – административную (back-end) и пользовательскую (front-end). Первая из них доступна и видна только администратору ресурса, обычные посетители же видят и используют front-end. Следовательно, работать будем именно с ней.
Найти файлы пользовательской части шаблонов можно в папке /templates/ Каждая вложенная директория в ней является отдельно взятым шаблоном, кроме папки /system/, которую нам трогать попросту не нужно.
Первые шаги
Первоначальные манипуляции проводим у себя на компьютере. Для начала создаем новую папочку и называем ее гордым именем будущего шаблона. Советуем не употреблять экстраординарные знаки, русские буквы и пробелы.
Мы решили назвать наше детище shneider-site, вы же можете проявить большую креативность. Следующим шагом будет создание обязательных файлов под названием templateDetails.xml и index.php, которые пока не нужно как-либо редактировать внутри. Также к ним сразу добавляем папочку images, где будет храниться вся графика.
Важно: рекомендуем в любую папку своего шаблона добавлять полностью пустой файл index.html – такой простой прием защищает от парсинга, которым пользуются конкуренты и взломщики.
Переходим к CSS. Можно пойти либо по простому пути, либо по «хорошему тону» опытных программистов. В первом случае файл стилей будет лежать в корне, и он будет всего один. Во втором – нужно создавать отдельную директорию для CSS, где будет множество файликов. Логика программирования называет более логичным решением, когда используется определенная часть стиля, а не весь, однако простые посетители разницы не заметят, а пойти по пути одного файла намного проще и быстрее. Так и сделаем. В нашем примере мы назвали его style.css.
Последнее, что нужно сделать на подготовительном этапе, это создание папки html в корне нашего шаблона. Использовать эту директорию мы пока не будем, однако важно понимать цель ее существования. В данной папке находятся альтернативные макеты определенных частей ресурса. Например, если на Joomla установлено расширение интернет-магазина, то внешний вид его страничек будет определяться именно тут.
В итоге мы должны получить следующий вид нашей директории:
Ключевой файл – 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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" dir="ltr">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/<?php echo $this->template; ?>/style.css" type="text/css" />
</head>
<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
Пройдемся по строчкам с пояснением того, что тут вообще указано. Итак, в самой первой строке реализована защита от популярно хакерского приема – обращения к файлам напрямую.
Вторая и третья строки отвечают за типизацию документа, которая используется абсолютно всеми браузерами. К примеру, тут мы ясно показываем, что текстовый контент на сайте русский, а пишем мы в традиционной манере – слева направо.
Блок head является самым большим в этом примере. 5-я строчка активизирует джумловский метод вывода нужной информации в так называемой «голове». Речь о мета-тегах, заголовках, модулях и компонентах, css, JavaScript. Наличие данного кода обязательно! Следующие две строки отвечают за стили, стандартные для Joomla, а 8-я – этот как раз наш style.css (мы его создали чуть ранее).
«jdoc:include type="message"» выводит стандартные сообщения Джумлы во время типичных ситуациях, например, при ошибках. Некоторые пропускают данную строку, и это не вредит, однако ее наличие значительно помогает как пользователям, так и администраторам сайта, потому лучше все оставить так.
12-я строчка отвечает за видимые данные на сайте – текстовый контент, товарные карточки и т.п. Другими словами, выводятся компоненты конкретной страницы.
Все, у нас уже фактически есть каркас, на основе которого можно создать любой шаблон для Joomla.
Работа с позициями для модулей
Продавцы и разработчики макетов часто хвастаются количеством возможных позиций для модулей. Этой параметр действительно является важным, т.к. от него зависит «гибкость» и общая функциональность темплейта.
Работать предстоит с блоком 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. Вы сможете увидеть их после того, как установите свой шаблон, прямо в админке сайта на Joomla.
Это самый примитивный вариант, на практике нам нужно пойти чуть дальше и задействовать обертку модулей (module chrome). Она позволит, например, выводить разные модули в одном блоке, причем красиво и естественно.
Под самим понятием «обрамления модулей» понимают специальную структуру HTML-кода, которая окружает модуль во время его вывода на сайте. Это очень помогает верстальщикам, да и вообще развязывает руки в кастомизации вывода.
Возможно, на словах все звучит не слишком понятно, потому предлагаем парочку конкретных примеров. В обоих случаях выводится одинаковый модуль, отличается только сам метод вывода.
Стандартный вариант:
<ul class="menu">
<li class="item-104 current active">
<a href="/">Главная</a>
</li>
<li class="item-105">
<a href="/vasha-korzina">Ваша корзина</a>
</li>
</ul>
Альтернативный вариант (module chrome):
<div class="moduletable_menu">
<h3>Верхнее меню</h3>
<ul class="menu">
<li class="item-104 current active">
<a href="/">Главная</a>
</li>
<li class="item-105">
<a href="/vasha-korzina">Ваша корзина</a>
</li>
</ul>
</div>
Кроме размера кода тут видны более важные, хоть и незначительные отличия. Module chrome позволяет установить названия для модуля – «Верхнее меню» в нашем примере. Его будет видно в админке, делается это больше для личного удобства. Кроме того, сам модуль теперь обортуется div’ом, имеющий класс moduletable_menu.
Обертка xhtml является одной из самых популярных (в примере она есть), хотя ничего общего с языком XHTML она не имеет. Для обрамления модулей достаточно расширить тег позиции атрибутом style, который будет «включать» определенную обертку. На практике это выглядит так:
<jdoc:include type="modules" name="left-column" style="xhtml" />
Отметим, что кроме стандартизированных оберток существует приятная возможность самостоятельного создания оных. Но на этом мы останавливаться не будем. Давайте лучше взглянем на то, как будет выглядеть наш макет, если его немножечко «припудрить»:
<body>
<div id="layout">
<div id="header">
<jdoc:include type="modules" name="top-menu"/>
</div>
<div id="left">
<jdoc:include type="modules" name="left-column" style="xhtml" />
</div>
<div id="content">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div id="right">
<jdoc:include type="modules" name="right-column" style="xhtml" />
</div>
<div class="clear"></div>
<div id="footer">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>
</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) выводятся и выполняют свои функции. Однако это не панацея, очень часто возникают ситуации, когда позиционирование колонок на главной и на остальных страницах ресурса должно отличаться.
Откровенно говоря, есть масса способов реализации подобной задачи. К примеру, прямо в Джумле можно зайти в настройки конкретного модуля и там поставить «вывод только на главной»:
Все остальные странички в таком случае будут иметь следующий вид:
Как видите, на месте кривой красной линии ничего нет, хотя на главной странице там уже будут определенные блоки. С другой стороны, колонка-то все еще остается, хоть и пустая. Давайте ее вообще уберем:
<?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';
}
?>
<body class="<?php if (isset($column)) echo $column ?>">
Красивый код, не правда ли? Чтобы объяснить наши действия, вот вам еще один кусочек паззла:
if (($this->countModules('right-column')==false) and ($this->countModules('left-column')==false)){
$column = 'all-hidden';
}
Тут мы проверяем наличие модулей в right-column и left-column. Когда их нет, то в переменную $column заносится all-hidden. А вот если модули таки присутствуют, то делаем проверку каждой колонки и вносим произвольные символы только туда, где их нет. Под «текстом» могут подразумеваться переменные. В нашем случае это all-hiden.
Ситуация 1: модулей справа нет, тогда мы получаем:
<body class="right-hidden">
Ситуация 2: модули присутствуют везде (справа и слева), тогда мы получаем body с пустотой в классе:
<body class="">
Последним штрихом будет модификация 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, представленный в Джумле. Он используется для возвращения кол-ва модулей в конкретной позиции.
Настраиваем файл установки templateDetails.xml
Вот мы и подошли к практически самому последнему этапу работы, ведь наш шаблон уже фактически создан. Теперь остается подстроить некоторые моменты, влияющие на комфортную установку макета. А конкретно, речь о файле templateDetails.xml, который является «главным актером» при инсталле.
Его полный вид имеет вот такую форму:
<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
<name>shneider-site</name>
<creationDate>16.10.2014</creationDate>
<author>shneider</author>
<authorEmail>boss@shneider-host.ru</authorEmail>
<authorUrl>http://shneider-host.ru</authorUrl>
<copyright>shneider-host 2014</copyright>
<license>GNU/GPL</license>
<version>1.1.0</version>
<description><![CDATA[Профессиональный шаблон, созданный по инструкции shneider-host]]></description>
<files>
<filename>index.php</filename>
<filename>index.html</filename>
<filename>templateDetails.xml</filename>
<filename>style.css</filename>
<folder>images</folder>
<folder>html</folder>
</files>
<positions>
<position>top-menu</position>
<position>left-column</position>
<position>right-column</position>
<position>footer</position>
</positions>
</extension>
Первая часть кода отвечает за общие данные макета, авторство, дополнительную информацию:
<name>shneider-site</name>
<creationDate>16.10.2014</creationDate>
<author>shneider</author>
<authorEmail>boss@shneider-host.ru</authorEmail>
<authorUrl>http://shneider-host.ru</authorUrl>
<copyright>shneider-host 2014</copyright>
<license>GNU/GPL</license>
<version>1.1.0</version>
<description><![CDATA[Профессиональный шаблон, созданный по инструкции shneider-host]]></description>
Далее нужно указать перечень файлов и папок, которые задействованы в шаблоне:
<files>
<filename>index.php</filename>
<filename>index.html</filename>
<filename>templateDetails.xml</filename>
<filename>style.css</filename>
<folder>images</folder>
<folder>html</folder>
</files>
Все, что указано выше, будет загружаться автоматически. Однако если по ошибке или специально что-то было пропущено, это всегда можно компенсировать вручную.
Важно: не забывайте о том, что пустая папка – это грубая ошибка. Добавляйте в них как минимум файле index.html (можно даже пустой).
Напоследок нужно сделать перечень всех позиций:
<positions>
<position>top-menu</position>
<position>left-column</position>
<position>right-column</position>
<position>footer</position>
</positions>
Важно понимать, что вписанными позициями дело не ограничивается. Просто то, что будет указано, то будет высвечиваться в админке Joomla при выборе. Остальное же нужно будет прописывать вручную, причем некоторые люди привыкли все делать именно так. Главное, чтобы все названия были вам известны.
Инсталляция шаблона: для того, чтобы установить созданный вами макет, нужно, прежде всего, заархивировать его. Поддерживаются форматы: .ZIP, .TAR.GZ, .TAR.BZ2. Все остальные действия сделает за вас стандартный инсталлер!
Надеемся, что статья показалась Вам полезной!
