Разработка кастомного шаблона Joomla
Шаблон Joomla определяет внешний вид сайта: HTML-разметку, CSS, подключение JavaScript. Joomla 5 использует шаблон Cassiopeia как базовый — можно создать дочерний шаблон (child template) или разработать с нуля.
Структура шаблона
templates/my-template/
├── index.php # Главный файл шаблона
├── templateDetails.xml # Манифест (обязательно)
├── component.php # Шаблон для компонентов (print-версия)
├── error.php # Страница ошибок
├── offline.php # Страница обслуживания
├── css/
│ ├── template.css
│ └── custom.css
├── js/
│ └── template.js
├── images/
│ └── logo.svg
├── html/ # Переопределения layout компонентов
│ ├── com_content/
│ │ └── article/
│ │ └── default.php
│ └── layouts/
│ └── joomla/
└── language/
└── ru-RU/
templateDetails.xml
<?xml version="1.0" encoding="utf-8"?>
<extension version="3.1" type="template" client="site">
<name>my-template</name>
<author>Your Company</author>
<version>1.0.0</version>
<description>Кастомный шаблон</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<folder>css</folder>
<folder>js</folder>
<folder>images</folder>
<folder>html</folder>
</files>
<positions>
<position>header</position>
<position>banner</position>
<position>top-a</position>
<position>top-b</position>
<position>main-top</position>
<position>sidebar-left</position>
<position>sidebar-right</position>
<position>main-bottom</position>
<position>footer</position>
</positions>
<config>
<fields name="params">
<fieldset name="basic">
<field name="logo" type="media" label="Логотип" />
<field name="accent_color" type="color" label="Цвет акцента" default="#0066cc" />
<field name="show_backtotop" type="radio" label="Кнопка вверх"
default="1">
<option value="1">Да</option>
<option value="0">Нет</option>
</field>
</fieldset>
</fields>
</config>
</extension>
index.php: основной файл
<?php defined('_JEXEC') or die; ?>
<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
<jdoc:include type="metas" />
<jdoc:include type="styles" />
<?php
// Подключаем CSS шаблона
$wa = $this->getWebAssetManager();
$wa->registerAndUseStyle('template.my-template', 'css/template.css');
$wa->registerAndUseScript('template.my-template', 'js/template.js', [], ['defer' => true]);
?>
</head>
<body class="site <?php echo $this->params->get('pageclass_sfx', ''); ?>">
<header class="site-header">
<?php if ($this->params->get('logo')) : ?>
<a href="<?php echo $this->baseurl; ?>" class="site-logo">
<img src="<?php echo HTMLHelper::_('image', $this->params->get('logo'), '', [], true, 1); ?>"
alt="<?php echo $sitename; ?>" loading="eager">
</a>
<?php endif; ?>
<nav class="site-nav">
<jdoc:include type="modules" name="header" style="none" />
</nav>
</header>
<div class="site-wrapper">
<?php if ($this->countModules('sidebar-left')) : ?>
<aside class="sidebar sidebar--left">
<jdoc:include type="modules" name="sidebar-left" style="xhtml" />
</aside>
<?php endif; ?>
<main class="site-content" id="main-content">
<jdoc:include type="message" />
<jdoc:include type="component" />
</main>
<?php if ($this->countModules('sidebar-right')) : ?>
<aside class="sidebar sidebar--right">
<jdoc:include type="modules" name="sidebar-right" style="xhtml" />
</aside>
<?php endif; ?>
</div>
<footer class="site-footer">
<jdoc:include type="modules" name="footer" style="none" />
<p>© <?php echo date('Y'); ?> <?php echo $sitename; ?></p>
</footer>
<jdoc:include type="scripts" />
</body>
</html>
Переопределение layout компонента
Скопировать оригинальный layout в папку html/ шаблона:
components/com_content/tmpl/article/default.php
→
templates/my-template/html/com_content/article/default.php
Joomla автоматически использует версию из шаблона. Изменить разметку статьи, не трогая файлы ядра.
Дочерний шаблон (Child Template)
Joomla 4+ поддерживает child templates:
<!-- templateDetails.xml дочернего шаблона -->
<inheritable>0</inheritable>
<parent>cassiopeia</parent>
Дочерний шаблон наследует все файлы родителя, переопределяет только то, что нужно. Обновления родителя применяются автоматически.
Сборка с Vite
// vite.config.js
export default {
build: {
outDir: 'templates/my-template',
rollupOptions: {
input: { main: 'src/js/main.js' },
output: { assetFileNames: 'css/[name].[ext]', entryFileNames: 'js/[name].js' }
}
}
};
Сроки
Разработка кастомного шаблона по готовому дизайну с 8–12 позициями модулей — 5–10 дней.