Как создать свой собственный шаблон для Joomla 2.5 и Joomla 3

Загрузка...

Здравствуйте, дорогие читатели! Из-за моего отъезда у нас с вами получился опять долгий промежуток между выходом новых статей. Не знаю как вы, а я соскучился и потому сегодня мы рассмотрим очень важную тему, без которой, как я считаю, создать качественный сайт на Joomla просто невозможно!

Да, сегодня мы научимся создавать свои собственные шаблоны для Joomla версии 2.5 и выше. Да не просто лишь бы какие, а чтобы их потом и продавать не стыдно было! Но чтобы так громко говорить, нужно сначало хорошо потрудиться, а потому я планирую написать цикл статей по этой теме, чтобы максимально погрузить вас в данную атмосферу.

Тезисно о том, почему свой шаблон всегда лучше скачанного:

Быстрее загружается;
Не содержит скрытых ссылок и вирусов;
Авторские права принадлежат вам;
Настраивайте его так, как душе угодно, никаких ограничений!

Но взамен от вас потребуются:

Минимальные знания PHP, советую заглянуть сюда;
Хотя бы средние знания HTML и CSS;
Дочитать данную статью, и подписаться, чтобы следить за продолжением.

Совсем не знаете PHP? Ничего страшного, дочитав статью, вы сможете делать всё по аналогии.

Итак, начнём!

Где находятся шаблоны Joomla?

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

Так вот все front-end шаблоны находятся в папке /templates/, в ней есть несколько папок, одна из которых system (её не трогаем), а все остальные папки – это и есть установленные нами (или по умолчанию) шаблоны.

С чего начать?

У себя на локальном компьютере, в любом месте, где вам удобно, создайте новую папку и назовите её так, как будет называться ваш шаблон.

Внимание:

в названиях файлов и папок лучше всегда избегать пробелов и прочих символов кроме цифр, латинского алфавита, дефиса и символа подчёркивания.

Я всё делаю вместе с вами и назову свою папку site-on. Далее в этой папке вы можете создавать сколько угодно любых других файлов и папок. Но есть 2 обязательных файла – это index.php и templateDetails.xml

Создайте их и пока что оставьте пустыми, далее (это уже не обязательно) я советую создать вам папку images, куда мы будем складывать всю графику (картинки), из которой будет состоять наш шаблон.

Внимание:

каждая папка вашего сайта должна содержать пустой файл index.html, это приём для защиты от парсинга директорий. Кстати, на хостинге "Украина" это реализовано на уровне сервера, но всегда нужно рассчитывать только на себя, тем более не на всех хостингах будет эта опция.

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

Но те, кто читал мою статью о создании правильного SEO макета сайта, знают, что каждый HTTP запрос для подключения файлов занимает достаточное количество времени, чтобы в итоге сильно замедлить загрузку страниц вашего сайта. Поэтому на практике все выигрывают, если CSS файл будет один на весь сайт.

Поэтому мы не будем создавать отдельную папку для CSS файлов, а создадим наш файл стилей прямо в корне шаблона, заодно и путь до него будет короче :)

Назвать его можно как угодно: в стиле Джумлы положено назвать его template.css, но слово template слишком длинное, поэтому я люблю называть свои файлы в стиле WordPress - style.css

И последний нюанс, давайте создадим папку html – это зарезервированное название папки в системе шаблонов Джумла. В папку html мы будем размещать файлы альтернативных макетов той или иной части сайта. Например, альтернативный макет для категории товаров VirtueMart, или альтернативный макет меню – неважно. Подробнее об этом в следующих статьях, а сейчас главное, что вы узнали об этой папке, и увидев её в чужих шаблонах, хоть немного представите о чём речь.

Не забудьте и в неё поместить пустой index.html !

Итак, мы создали полноценную структуру шаблона для Джумла, осталось лишь наполнить ~~бокалы~~файлы содержимым.

структура шаблона

Index.php – главный файл шаблона

Файл 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>

Первая строка – это защита от прямого обращения к файлам, более подробно об этом я писал в статье про константы в PHP. Эта строка обязательна, если не хотите, чтобы вас взломали.

2 и 3 строки – указываем тип документа для браузеров, можете изменить на свой, в данном примере тип документа XHTML 1.0, язык – русский, правописание: слева направо.

Далее идёт блок head, в 5 строке мы подключаем метод Джумлы, который выводит необходимую информацию в голове сайта (title страницы, мета-теги, css и js файлы модулей и компонентов). Эта строка обязательна!

В 6-8 строках мы подключаем стили нашего сайта, 6-7 строки – это стандартные стили Джумла (советую их подключить, хотя необязательно), а 8 строка, это созданный нами style.css

11 строка – это вывод системных сообщений Джумлы. Например, сообщения об ошибках при регистрации (неверный пароль, неподтверждённый адрес электронной почты), а также различные подсказки. Она не обязательна, но на самом деле я строго рекомендую её оставить, так как такие сообщения очень сильно помогают вашим пользователям, да и вам в том числе.

12 строка – это вывод основной информации страницы (текста статьи, карточки товара и тд.). Если говорить терминами джумлы, то вывод компонента для каждой страницы. Она обязательна.

Как добавить новую позицию для модуля?

Выше мы рассмотрели простейшую структуру файла index.php, вы уже можете использовать её как каркас для создания собственных шаблонов. Теперь разберёмся, как добавлять позиции для модулей, которыми так любят хвастаться производители шаблонов: "Наш шаблон содержит 69 продуманных позиций…"

Чтобы не копировать лишнего, вернёмся к блоку body:

<body>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>

Чего не хватает нашему макету? Я думаю шапки, пары колонок и подвала (футер, footer). Давайте создадим для них позиции модулей:

<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>

Мы создали 4 новых позиции для модулей Джумлы:

top-menu
left-column
right-column
footer

После установки шаблона все эти позиции станут доступны при выборе позиции модуля из административной панели Джумлы.

позиции шаблона

Но это был короткий вариант создания модуля. На самом деле в тех позициях, где вы собираетесь отображать несколько модулей один за другим, например, в правой и левой колонках сайта, будет удобно использовать «обрамление модуля» (оригинальное название: module chrome).

Обрамление (обёртка) модуля – это HTML структура, в которую будет обёрнут наш модуль при выводе в конкретной позиции. Обрамление служит для удобства стилизации при вёрстке и расширяет возможности вывода. Чтобы лучше понять, просто сравните 2 варианта вывода одного и того же модуля. Перед вами стандартный модуль меню (состоит из 2ух пунктов меню) без использования module chrome:

<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 с названием нужной обёртки (не путайте с атрибутом style в языке HTML, они не имеют ничего общего, в нашем случае - это чисто синтаксис Joomla):

<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. Но что делать, если вы хотите, например, иметь 3 колонки только на главной странице, а на всех остальных по две?

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

структура шаблона

И вот что мы получаем на всех остальных страницах:

структура шаблона

А именно: внутри правой колонки ничего нет, но сама колонка осталась, мы видим её границу и она продолжает занимать место.

Чтобы полностью убрать пустую колонку, мы можем использовать проверку на PHP. Как именно ей пользоваться, дело ваше, я покажу вам свой вариант:

<?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-hidden – это название класса, которое мы выводим в самой последней строчке описанного выше кода.

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

<body class="right-hidden">

А если, например, у нас везде будут модули (и справа и слева), то получим:

<body class="">

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 метод Джумлы, который возвращает число модулей в данной позиции.

Только что был представлен элементарный кусок PHP кода, поэтому если вы ничего не поняли – ничего страшного, просто зайдите в раздел PHP данного блога и внимательно прочитайте всё с первой статьи до статьи под названием: урок 3 (включительно). Не пугайтесь, там немного, но вам сразу станет гораздо понятней.

Настройки файла templateDetails.xml – установочный пролог

Шаблон мы создали, осталось установить.

Файл templateDetails.xml – это файл установки, без него невозможно установить созданный нами шаблон через установщик Джумлы.

В нашем случае он будет выглядеть так (и для версии 2.5 и для Joomla 3.x):

<?xml version="1.0" encoding="utf-8"?>
<extension version="2.5" type="template" client="site">
        <name>site-on</name>
        <creationDate>01.12.2013</creationDate>
        <author>Rud Sergey</author>
        <authorEmail>Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.<;/authorEmail>
        <authorUrl>http://site-on.net</authorUrl>
        <copyright>Rud Sergey 2013</copyright>
        <license>GNU/GPL</license>
        <version>1.0.0</version>
        <description><![CDATA[Профессиональный шаблон, созданный по инструкции блога о создании и продвижении сайтов: <a target="_blank" href="http://site-on.net/">Site on!</a>]]></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>site-on</name>
<creationDate>01.12.2013</creationDate>
<author>Rud Sergey</author>
<authorEmail>Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в вашем браузере должен быть включен Javascript.<;/authorEmail>
<authorUrl>http://site-on.net</authorUrl>
<copyright>Rud Sergey 2013</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description><![CDATA[Профессиональный шаблон, созданный по инструкции блога о создании и продвижении сайтов: <a target="_blank" href="http://site-on.net/">Site on!</a>]]></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>

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

Внимание:

папки не должны быть пустыми! В них должен быть хотя бы 1 файл, как минимум – пустой index.html

Далее мы перечисляем названия всех позиций:

<positions>
<position>top-menu</position>
<position>left-column</position>
<position>right-column</position>
<position>footer</position>
</positions>

Те позиции, которые мы забыли здесь перечислить, всё равно будут работать также хорошо, просто они не появятся в окошке выбора позиций (в настройках модуля), мы должны будем вписывать название вручную. На самом деле вручную бывает даже быстрее (чем кликать мышью), просто в таком случае вы должны знать названия позиций наизусть :)

Упаковка шаблона для инсталляции

Всё готово, осталось только создать архив с шаблоном. Поддерживаются архивы форматов: ZIP(.zip), TAR-gzip (.tar.gz) и TAR-bz2 (.tar.bz2). После создания архива, вам остаётся установить свой шаблон через стандартный установщик Джумла, так, как вы делаете с любым другим шаблоном или расширением. Прямая ссылка на скачивание шаблона из данной статьи:

Давайте подведём итоги. Сегодня мы получили все необходимые знания для создания шаблонов под Joomla 2.5 и Joomla 3. Создали трёх колоночный макет сайта и научились динамически менять количество колонок.

{

Ваше имя *

Телефон *

E-mail

Сообщение

}

Уроки по созданию сайтов