Шаблон сайта

Шаблон — расширение, которое задаёт общую разметку страницы: где шапка, где основное содержимое, где колонка с модулями. Компонент и модули выводят только свои фрагменты, а шаблон собирает из них целую страницу HTML.

Где лежит

Шаблоны сайта хранятся в папке templates, шаблоны панели — в administrator/templates. Создайте вручную минимальный шаблон:

templates/mytheme/
├── templateDetails.xml          манифест
├── index.php                    разметка страницы
└── html/                        переопределения макетов
 
media/templates/site/mytheme/
└── css/
    └── template.css             стили

Манифест

<?xml version="1.0" encoding="UTF-8"?>
<!-- templates/mytheme/templateDetails.xml -->
<extension type="template" client="site" method="upgrade">
    <name>mytheme</name>
    <version>1.0.0</version>
    <description>Учебный шаблон</description>
 
    <files>
        <filename>index.php</filename>
        <filename>templateDetails.xml</filename>
        <folder>html</folder>
    </files>
 
    <media destination="templates/site/mytheme" folder="media">
        <folder>css</folder>
    </media>
 
    <positions>
        <position>menu</position>
        <position>sidebar</position>
        <position>footer</position>
    </positions>
</extension>

Раздел positions перечисляет позиции: именно эти имена администратор увидит в списке «Позиция» при настройке модуля.

Файл index.php

<?php
// templates/mytheme/index.php
 
defined('_JEXEC') or die;
 
$this->getWebAssetManager()->registerAndUseStyle('template.mytheme', 'template.css');
?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <jdoc:include type="metas" />
    <jdoc:include type="styles" />
    <jdoc:include type="scripts" />
</head>
<body>
    <header>
        <jdoc:include type="modules" name="menu" style="none" />
    </header>
 
    <main>
        <jdoc:include type="message" />
        <jdoc:include type="component" />
    </main>
 
    <?php if ($this->countModules('sidebar')) : ?>
        <aside>
            <jdoc:include type="modules" name="sidebar" style="html5" />
        </aside>
    <?php endif; ?>
 
    <footer>
        <jdoc:include type="modules" name="footer" style="none" />
    </footer>
</body>
</html>

В шаблоне $this — объект документа. Теги jdoc:include — места, куда Joomla вставит готовые части страницы.

Теги jdoc:include

Атрибут style выбирает обёртку модуля: none выводит модуль как есть, html5 добавляет блок с заголовком модуля. Метод countModules() возвращает число модулей в позиции — так пустую колонку не выводят совсем.

Стили

/* media/templates/site/mytheme/css/template.css */
body {
    max-width: 960px;
    margin: 0 auto;
    font-family: sans-serif;
}

Имя template.css без пути Joomla ищет в папке css активного шаблона внутри media/templates/site.

Установка и результат

1. «Система → Установка → Поиск» → установите mytheme.
2. «Система → Стили шаблонов сайта» → отметьте mytheme и нажмите «По умолчанию».
3. Назначьте модулю mod_hello позицию sidebar, а модулю главного меню — позицию menu.

Откройте сайт: оформление Cassiopeia исчезло, страница собрана вашей разметкой — меню сверху, содержимое, блок приветствия в колонке.

Дочерний шаблон

Писать шаблон с нуля нужно редко. Чаще берут готовый и меняют в нём несколько файлов. Для этого есть дочерние шаблоны: «Система → Шаблоны сайта → Cassiopeia», кнопка «Создать дочерний шаблон». Joomla создаст папку вроде templates/cassiopeia_mychild, в манифесте которой указан родитель — тег parent. Дочерний шаблон берёт у родителя все файлы, кроме тех, что лежат в нём самом: туда кладут свои стили и переопределения макетов из папки html. Обновление Cassiopeia их не затронет.

Частая ошибка

В index.php забывают тег jdoc:include type="message". Сайт работает, но сообщения — «Неверный пароль», «Форма отправлена» — нигде не появляются, и посетитель не понимает, что произошло. Этот тег обязателен в любом шаблоне.