Розробка користувацького шаблону 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/
└── uk-UA/
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 днів.