Разработка кастомного шаблона 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.