Разработка шаблона Joomla v5/6 (Часть 1)

Введение

Данное руководство представляет собой практическое пособие по созданию собственных уникальных шаблонов для системы управления контентом Joomla 5/6.

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

Руководство предназначено для:

  • Веб-разработчиков, желающих создавать кастомные шаблоны для Joomla
  • Администраторов сайтов с базовыми навыками вёрстки
  • Студентов и начинающих специалистов в области веб-разработки

⚙️ Предварительные требования

Базовые знания

Навык Уровень Примечание
HTML5 / CSS3 Базовый Обязательно
Основы Joomla Базовый Понимание структуры и компонентов
PHP Желательный Для продвинутой кастомизации
JavaScript Желательный Для интерактивных элементов
Bootstrap 5 Рекомендуемый Используется в ядре и расширениях

Техническое окружение

  1. Установленная Joomla 5 на тестовом сервере:

    • Локальный сервер (XAMPP, OpenServer)
    • Виртуальная машина или Docker-контейнер
    • Удалённый тестовый хостинг

  2. Редактор кода с поддержкой синтаксиса:

    • ✅ Visual Studio Code (рекомендуется многими)
    • ✅ JetBrains PhpStorm (используется командой автора);
    • ✅ Sublime Text / Atom
    • ✅ Любой другой с подсветкой HTML/CSS/PHP

  3. Препроцессор Sass для компиляции стилей:

    • Упрощает управление переменными, компонентами и вложенностью
    • Позволяет собирать несколько файлов стилей в один оптимизированный .min.css
    • Бесплатен и имеет низкий порог входа
    • Установка: npm install -g sass или через GUI-инструменты

Минимализм или «Keep it simple, stupid»

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

В папке своих проектов создаем папку tmpl_simple_1.0 Префикс tmpl будет означает, что проект является шаблоном.
Назовем наш элементарный шаблон simple, а суффиксом сделаем мажорную и минорную версии с нашего шаблона .

Внутри папке создадим файл: templateDetails.xml следующего содержания:


<?xml version="1.0" encoding="utf-8"?>
<extension type="template" client="site" method="upgrade">
    <name>Simple</name>
    <version>1.0.1</version>
    <creationDate>2025-12-01</creationDate>
    <author>Futurelab LLC by Mike J.K.</author>
    <authorEmail>Адрес электронной почты защищен от спам-ботов. Для просмотра адреса в браузере должен быть включен Javascript.</authorEmail>
    <authorUrl>https://futurelab.ru</authorUrl>
    <copyright>(C) FutureLab LLC. All rights reserved.</copyright>
    <description>Minimalist template for CMS Joomla 5</description>
    <license>GNU/GPL Version 2 or later - http://www.gnu.org/licenses/gpl-2.0.html</license>

    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
    </files>

    <positions>
        <!-- Шапка -->
        <position>header</position>      
        <!-- Контент -->
        <position>main</position>
        <!-- Футер -->
        <position>footer</position>
        <position>debug</position>
    </positions>
</extension>

templateDetails.xml — это манифест-файл (файл описания) шаблона, который играет ключевую роль в архитектуре шаблонов Joomla. Он служит «паспортом» вашего шаблона для системы.

templateDetails.xml определяет служебные данные шаблона.

Верхняя часть определяет имя шаблона, версию, автора и лицензию на распространение. Секция files определяет файлы и каталоги, которые будут перенесены в соответствующие каталоги CMS. Если какого-то файла или каталога не будет в описании, то он не будет скопирован в CMS при установке, если при установке система не найдет в архиве файл, описание которого есть в секции files, то установка шаблона будет прервана по ошибке: файл не найден.

Секция <positions> в файле templateDetails.xml определяет доступные позиции вашего шаблона в системе Joomla, для размещения элементов сайта.

В нашем элементарном шаблоне сделаем типовую схему позиций:

header
main
footer
debug

В header разместим логотип и меню сайта. В main будем выводить основной контент сайта. footer - для служебной информации Позиция debug - служебная и предназначена для вывода служебной информации, в режиме DEBUG(Отладки).

В дальнейшем, мы будем добавлять в наш templateDetails.xml другую информацию, но сейчас перейдем к следующему шагу и создадим файл: index.php

index.php - основной исполняемый файл шаблона.

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.Simple
 *
 * @Copyright   (C) ГОД Ваше Имя
 * @license     GNU General Public License версия 2 или позже; см. LICENSE.txt
 * Это сильно упрощённа, версия шаблона Joomla, предназначенная для объяснения 
 приципов построения новых шаблонов.
 **/

defined('_JEXEC') or die;

?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>">
<head>
    <jdoc:include type="metas" />
</head>
<body>

 <!-- Заголовок сайта -->
<header>
    <?php if ($this->countModules('header')) : ?>
    <div class="top-bar">
        <jdoc:include type="modules" name="header" style="raw" />
    </div>
    <?php endif; ?>
</header>

<!-- Основной контент -->
<main>
<!-- Область компонента -->
<jdoc:include type="component" />


<!-- Подвал (футер) сайта -->
<footer>     
<?php if ($this->countModules('footer')) : ?>
    <jdoc:include type="modules" name="footer" style="raw" />
<?php endif; ?>
</footer>

    <!-- Debug position -->
    <jdoc:include type="modules" name="debug" style="none" />

</body>
</html>

Первые строки файла содержат комментарии. Это общая информация о шаблоне. Вы можете заменить её своим именем, копирайтом и прочими деталями. Эти изменения никак не повлияют на функциональность шаблона.

Символ $php показывает начало блока PHP-кода. Это обязательный элемент. Символы звёздочки и косые черты (/**...**/) обозначают начало и конец комментария в PHP. Комментарии игнорируются программой.

Первая значимая строка, ниже комментариев \defined('_JEXEC') or die;.
Эта строка — важная часть системы безопасности Joomla. Её задача — защитить файлы системы от прямого (вне Joomla) доступа.. Она определяет, что только Joomla может исполнять этот файл. Пользователи не смогут напрямую, по прямой ссылке, открыть файл шаблона /templates/simple/index.php в браузере и увидеть его содержимое.

C помощью директив jdoc:include в файле будут определяться, выводимые в нужных местах страницы, позиции, заданные в манифесте шаблона . Информация, непосредственно отображаемая в позициях, задается в административной части сайта Joomla.

Шаблон в стиле "минимализм" готов и теперь нам нужно собрать его в дистрибутив и установить в CMS. Любым архиватором, который создает архивы в формате zip, свернем папку нашего шаблона: tmpl_simple_1.0 в zipархив: tmpl_simple_1.0.zip

Мы получили дистрибутив нашего шаблона готов. В административной панели нашего Joomla сайта устанавливаем его как, любое расширение: Система->Установка-Расширения. Перетаскиваем дистрибутив шаблона в поле загрузки файлов "Загрузить и установить" и если вы не сделали ошибок при копировании, то получите следующее сообщение:

Рисунок №1

Установка минимального шаблона успешно завершена. Переключимся на него: Система->Шаблоны->Стили сайта: и увидим абракадабру, если в CMS установлены какие-то данные (демо-данные) и пустой экран с текстом "# Home " если таких данных нет.

Настраивать компоновку в административной панели в минимальном шаблоне, без стилей и скриптов не имеет большого смысла, однако для понимания, работы шаблона в системе, выполним подключение пары модулей в секцию Header (Заголовок) . Создадим HTML модуль , который выведет логотип нашего шаблона в формате SVG.

Система->Модули->Создать->HTML код.

Задаем параметры модуля: Имя модуля: Logo В код модуля копируем, сделанный за пару минут в INCSCAPE, код логотипа нашего шаблона:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   height="60"
   width="180"
   version="1.1"
   id="svg1"
   sodipodi:docname="simple-logo.svg"
   inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1" />
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#ffffff"
     bordercolor="#111111"
     borderopacity="1"
     inkscape:showpageshadow="0"
     inkscape:pageopacity="0"
     inkscape:pagecheckerboard="1"
     inkscape:deskcolor="#d1d1d1"
     inkscape:zoom="8.0454545"
     inkscape:cx="98.502825"
     inkscape:cy="15.039548"
     inkscape:window-width="1920"
     inkscape:window-height="1009"
     inkscape:window-x="-9"
     inkscape:window-y="-9"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg1" />
  <text
     x="42.15062"
     y="38.978661"
     id="text1"
     style="font-size:39.4278px;fill:#0000ff;stroke-width:0.999999"
     transform="scale(0.93196593,1.0730006)"><tspan
       style="font-weight:bold;fill:#0000ff;stroke-width:0.779135"
       id="tspan1">Simple!</tspan></text>
  <ellipse
     style="fill:#0000ff;stroke:#f2f2f2;stroke-width:0.999999"
     id="path1"
     cx="23.627165"
     cy="27.791769"
     rx="12.988045"
     ry="14.131905" />
</svg>

Заголовок - скрыть Позиция - выбрать header шаблона (Simple) Состояние: опубликовано.

На второй закладке: Привязка к пунктам меню, установить "На каждой странице". Смотрим фронт сайта и наслаждаемся видом логотипа.

Добавим в Header главное меню сайта. Для пустого сайта оно состоит из одного пункта: Home.

Система->Модули->Создать->Меню

Задаем параметры модуля меню:

Имя модуля: Главное меню Заголовок - скрыть Позиция - выбрать header шаблона (Simple) Состояние: опубликовано.

Наблюдаем на сайте появление Главного меню сайта ниже логотипа.

На "пустом" сайте это выглядит как-то так:

Рисунок №2

Некрасиво. Добавим таблицу стилей непосредственно в index.php чтобы шапка сайта выглядела как шапка. Вставляем их в секцию страницы:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    /* Базовый сброс стилей */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* Стили для шапки */
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background-color: #f4f4f4;
        border-bottom: 1px solid #ddd;
    }


    /* Навигация (десктоп) */
    .mod-menu {
        display: flex;
        list-style: none;
        gap: 1ch; /* Интервал в 1 символ между пунктами */
    }

    .mod-menu a {
        color: #013cfa;
        text-decoration: none;
        font-size: 16px;
    }

</style>

В теле страницы зададим класс для header:

 <!-- Header -->
 <header class="header">
     <?php if ($this->countModules('header')) : ?>
        <jdoc:include type="modules" name="header" style="raw" />
    <?php endif; ?>
</header>

Рисунок №3

Теперь шапка нашего сайта похожа на шапку сайта.
Однако, такой способ подключения стилей требуется разве что, если вы решите делать конкурсную работу на «10K Apart». Для более сложных сайтов, которые требуют подключения множества стилей, шрифтов и скриптов в Joomla реализована технология WebAssets, которую мы научимся использовать в следующей части.

Примечания:

  • 1 «10K Apart» — это исторический конкурс веб-разработки (последний раз проводился в 2010 году), участникам которого предлагалось создать функциональное веб-приложение или игру, общий объем кода (HTML, CSS, JS) которой не превышал 10 240 байт (10 Кб).

  • 2 В нумерации версий Joomla три части (XX.YY.ZZZ) имеют чёткое смысловое разделение:

    • XX (мажорная версия) — это основной, фундаментальный уровень. Этот номер меняется редко, только когда в архитектуре или базовой функциональности системы происходят серьёзные, глубинные изменения. Например, переход с Joomla 3 на Joomla 4 — это смена мажорной версии, потому что поменялась сама основа. Важно: сторонние расширения (компоненты, шаблоны) обычно разрабатываются под конкретную мажорную версию и могут быть несовместимы с более новыми или старыми.
    • YY (минорная версия) — дополняет мажорную версию новым функционалом. Здесь речь о существенных, но не фундаментальных улучшениях. Версия с увеличенным YY обычно сохраняет совместимость с более ранними версиями (иногда с небольшой настройкой), в отличие от мажорной. Например, в Joomla 4.2 появилась поддержка горячих клавиш.
    • ZZZ (патч) — это номер сборки для исправления ошибок, устранения уязвимостей в безопасности или внедрения незначительных улучшений. Патч-версии полностью совместимы с предыдущими (с тем же XX и YY).