Розробка кастомного шаблону 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 у видачі за цільовими запитами. Кастомний шаблон завантажується в 2–3 рази швидше, ніж готові аналоги, а також на 70% швидше за готові шаблони за метрикою LCP.
Структура кастомного шаблону
Приклад структури директорій шаблону
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 днів. Вартість починається від 800$ і може сягати 3000$ залежно від складності. Зазвичай проект обходиться в рази дешевше, ніж у великих студій — завдяки прямому контакту з розробником та відсутності націнок менеджерів. Наприклад, економія порівняно зі студією може сягати 40–60%.
Чек-лист типових помилок
- Не всі позиції модулів вказані в
templateDetails.xml. - Відсутній файл
error.php— при помилці 500 користувач бачить порожню сторінку. - Не додано підтримку атрибута
loading="lazy"для зображень у контенті. - JavaScript не відкладено (
deferабоasync) — блокує рендеринг. - Маніфест не містить параметрів для налаштування логотипу або колірної схеми.
Про нас
Наша компанія має 8+ років досвіду роботи з Joomla та реалізувала понад 50 проектів. Ми гарантуємо сумісність з Joomla 5 та індивідуальний підхід до кожного клієнта.
Оцінка проекту
Зв'яжіться з нами — ми проаналізуємо ваш макет, запропонуємо оптимальну архітектуру шаблону та розрахуємо точну вартість. Ви отримаєте консультацію інженера з 8-річним досвідом роботи з Joomla та більш ніж 50 реалізованими проектами. Включимо налаштування всіх позицій модулів, перевизначення layout та підтримку після запуску. Замовте розробку під ключ — гарантуємо сумісність з Joomla 5.