Разработка кастомного шаблона Joomla
Отметим: когда стандартный шаблон Joomla не соответствует дизайну макета или требованиям производительности, наша команда создаёт уникальное решение. Мы разрабатываем кастомные шаблоны под ключ: от анализа макета до финального деплоя. В работе используем Joomla 5, современные сборщики Vite и оптимизируем метрики Core Web Vitals. Типовая ситуация: клиент приносит макет в Figma с нестандартной сеткой, а готовый шаблон не поддерживает нужное расположение блоков. В результате — избыточный CSS, медленная загрузка и потеря позиций в выдаче. Мы решаем эту задачу с нуля, проектируя шаблон под конкретный дизайн. Через правильные кэши и асинхронную загрузку модулей добиваемся TTFB менее 200 мс. При разработке применяем TypeScript для сборки скриптов и SCSS для стилей — это даёт полный контроль над итоговым кодом.
С какими проблемами сталкиваются владельцы сайтов на Joomla?
- Готовые шаблоны часто имеют избыточный CSS, который замедляет загрузку. Типичный случай: LCP превышает 2.5 секунды из-за неоптимизированных стилей.
- Несоответствие дизайну — стандартные модульные сетки не позволяют реализовать сложные макеты. Клиент приносит макет в Figma, а шаблон не поддерживает нужное расположение блоков.
- Проблемы с обновлениями — многие доработанные шаблоны ломаются при обновлении Joomla. Мы используем дочерние шаблоны и переопределения layout, чтобы обновления проходили безболезненно.
Как мы создаём кастомный шаблон Joomla: разбор кейса
Недавно к нам обратился клиент из сферы услуг: нужен был сайт на Joomla 5 с уникальным дизайном и быстрой загрузкой. Дизайн включал нестандартную сетку с двумя боковыми панелями и анимацией при скролле. Мы спроектировали шаблон с нуля, использовали CSS Grid для позиционирования и Vite для сборки. В результате LCP снизился с 3.2 до 1.4 секунды, а сайт занял топ-3 в выдаче по целевым запросам.
Структура кастомного шаблона
Пример структуры директорий шаблона
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>
Дочерний шаблон (Child Template)
Joomla 4+ поддерживает child templates. Согласно документации Joomla, достаточно создать минимальный манифест:
<!-- templateDetails.xml дочернего шаблона -->
<inheritable>0</inheritable>
<parent>cassiopeia</parent>
Child template наследует все файлы родителя, переопределяет только то, что нужно. Обновления родителя применяются автоматически.
Почему кастомный шаблон лучше готового?
Кастомный шаблон загружается в 2–3 раза быстрее типовых решений, потому что мы включаем только нужные стили и скрипты. Вы получаете уникальный дизайн, полный контроль над HTML-структурой и возможность оптимизировать SEO-метрики.
Состав работ
- Манифест шаблона со всеми необходимыми файлами и позициями модулей.
- Адаптивная верстка под мобильные устройства, планшеты и десктоп.
- Переопределения layout компонентов (статьи, категории, контакты) по необходимости.
- Интеграция с вашим контентом — настройка модулей, главного меню, виджетов.
- Тестирование на разных браузерах и устройствах.
- Документация по структуре и настройке шаблона.
- Обучение администратора работе с шаблоном.
- Поддержка в течение 30 дней после сдачи проекта.
Сравнение кастомного и готового шаблона
| Характеристика | Кастомный шаблон | Готовый шаблон |
|---|---|---|
| Скорость загрузки (LCP) | < 1.5 с | > 2.5 с |
| Уникальность дизайна | 100% | Ограничен настройками |
| SEO-оптимизация | Полный контроль | Часто избыточный код |
| Адаптивность | Под любой макет | Фиксированные сетки |
| Обновления | Безопасные через child theme | Могут сломать кастомизацию |
Процесс работы
| Этап | Длительность |
|---|---|
| Аналитика | 1–2 дня |
| Проектирование | 2–3 дня |
| Верстка | 3–5 дней |
| Интеграция | 1–2 дня |
| Тестирование | 1–2 дня |
| Деплой | 0.5 дня |
- Аналитика — изучаем ваш дизайн-макет, требования к функционалу, целевые метрики.
- Проектирование — создаем прототип шаблона, определяем позиции модулей, разрабатываем структуру файлов.
- Верстка — пишем HTML/CSS/JS с использованием современного стека (Vite, SCSS, TypeScript).
- Интеграция — переносим верстку в Joomla, подключаем модули, настраиваем параметры.
- Тестирование — проверяем на соответствие дизайну, производительность (Core Web Vitals), кроссбраузерность.
- Деплой — размещаем на хостинге, передаем документацию, проводим обучение.
Ориентировочные сроки и стоимость
Разработка кастомного шаблона по готовому дизайну с 8–12 позициями модулей занимает от 5 до 15 дней. Стоимость рассчитывается индивидуально, но обычно проект обходится в разы дешевле, чем в крупных студиях — за счет прямого контакта с разработчиком и отсутствия наценок менеджеров.
Чек-лист типичных ошибок
- Не все позиции модулей указаны в
templateDetails.xml. - Отсутствует файл
error.php— при ошибке 500 пользователь видит пустую страницу. - Не добавлена поддержка атрибута
loading="lazy"для изображений в контенте. - JavaScript не отложен (
deferилиasync) — блокирует рендеринг. - Манифест не содержит параметров для настройки логотипа или цветовой схемы.
Оценка проекта
Свяжитесь с нами — мы проанализируем ваш макет, предложим оптимальную архитектуру шаблона и рассчитаем точную стоимость. Вы получите консультацию инженера с 8-летним опытом работы с Joomla и более 50 реализованными проектами. Включим настройку всех позиций модулей, переопределения layout и поддержку после запуска. Закажите разработку под ключ — гарантируем совместимость с Joomla 5.