Ви витратили тижні на налаштування готової теми Concrete CMS, а вона все ще завантажується 8 секунд і не відповідає макету. Рішення — кастомна тема, написана під ваш дизайн. Ми створюємо теми, які дають 90+ балів Lighthouse, легко підтримуються і масштабуються. Наші спеціалісти мають понад 10 років досвіду у веб-розробці, і більше 50 успішних проєктів підтверджують: індивідуальна розробка окупається швидкістю та гнучкістю. Типові проблеми готових тем — перевантажений CSS (до 70% невикористовуваних стилів), зайві JavaScript-бібліотеки, відсутність адаптивності під складні макети. Все це напряму б'є по Core Web Vitals і конверсії.
Чому кастомна тема вигідніша за готову?
Готові теми часто містять багато мертвого коду. Наприклад, у популярному шаблоні може бути 5 різних стилів для галерей, з яких використовується лише один. Це збільшує LCP до 4+ секунд, а CLS — до 0,15. Кастомна тема, написана під конкретний дизайн, позбавлена цих проблем. Ми застосовуємо tree-shake CSS, мініфікуємо JS, впроваджуємо критичний CSS. Після впровадження кастомної теми ми фіксуємо покращення LCP в середньому на 40%, CLS знижується до 0.05, INP — до 150 мс. Для порівняння: у готової теми LCP часто перевищує 4 секунди.
За даними офіційної документації Concrete CMS, кастомна тема дозволяє скоротити об'єм переданого CSS на 60-80% за рахунок видалення невикористовуваних стилів.
Технічна реалізація кастомної теми
Структура пакетної теми
Пакет містить все необхідне: свою файлову структуру, контролер, ассети. При оновленні Concrete CMS тема залишається сумісною — достатньо перевстановити пакет. Упаковка дозволяє легко додавати кастомні блоки та атрибути, не зачіпаючи ядро.
Приклад структури пакетної теми
packages/my-theme/ controller.php # контролер пакета themes/ my-theme/ page_types/ # шаблони типів сторінок home.php default.php service-detail.php elements/ # частини шаблону (header, footer, nav) header.php footer.php navigation.php blocks/ # перевизначення шаблонів блоків content/ templates/ two-column.php css/ main.css js/ app.js thumbnail.png # прев'ю теми (360×270) description.txt page.php # базовий шаблон (fallback) view.php # головний layout (deprecated, але підтримується) Базовий шаблон page.php
page.php — головний layout, в який вставляється вміст типу сторінки. Він підключає CSS/JS та загальні елементи.
<?php // packages/my-theme/themes/my-theme/page.php defined('C5_EXECUTE') or die('Access Denied.'); ?> <!DOCTYPE html> <html lang="<?= Localization::activeLocale() ?>"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><?= $c->getCollectionName() ?> | <?= $site->getName() ?></title> <?php $html = Loader::helper('html'); echo $html->css('main.css', 'my-theme'); ?> <?php View::element('header_required', ['disableTrackingCode' => false]) ?> </head> <body class="<?= $c->getPageWrapperClass() ?>"> <?php View::element('header', [], 'my-theme') ?> <main id="main-content"> <?php echo $innerContent ?> </main> <?php View::element('footer', [], 'my-theme') ?> <?php echo $html->javascript('app.js', 'my-theme') ?> <?php View::element('footer_required') ?> </body> </html> Змінна $innerContent вставляє вміст шаблону типу сторінки. Це дозволяє розділити структуру та контент.
Шаблон типу сторінки
Для кожного типу сторінки (наприклад, «Послуга», «Головна») створюється окремий файл. У ньому можна оголосити власні області (Area) та виводити атрибути сторінки.
<?php // page_types/service-detail.php defined('C5_EXECUTE') or die('Access Denied.'); $a_hero = new Area('Hero'); $a_content = new Area('Main Content'); $a_related = new Area('Related Services'); $heroImage = $c->getAttribute('hero_image'); $intro = $c->getAttribute('intro_text'); ?> <section class="hero <?= $heroImage ? 'hero--has-image' : '' ?>"> <?php if ($heroImage): ?> <img src="<?= $heroImage->getURL() ?>" alt="<?= h($c->getCollectionName()) ?>"> <?php endif; ?> <div class="hero__content"> <h1><?= h($c->getCollectionName()) ?></h1> <?php if ($intro): ?><p><?= h($intro) ?></p><?php endif; ?> </div> </section> <div class="container layout-sidebar"> <article class="content"> <?php $a_content->display($c) ?> </article> <aside class="sidebar"> <?php $a_related->display($c) ?> </aside> </div> Елемент навігації з активним станом
Навігація — один з найважливіших елементів. Ми реалізуємо визначення активного пункту на основі ID поточної сторінки та її батьківських сторінок.
<?php // elements/navigation.php defined('C5_EXECUTE') or die('Access Denied.'); $navHelper = Loader::helper('navigation'); $pages = Page::getByPath('/')->getCollectionChildren(); ?> <nav class="main-nav"> <ul> <?php foreach ($pages as $navPage): ?> <?php $isActive = ($c->getCollectionID() == $navPage->getCollectionID() || $navHelper->isParentPage($c, $navPage)); ?> <li class="<?= $isActive ? 'active' : '' ?>"> <a href="<?= $navPage->getCollectionLink() ?>"> <?= h($navPage->getCollectionName()) ?> </a> </li> <?php endforeach; ?> </ul> </nav> Перевизначення шаблону блоку
Concrete CMS дозволяє створити альтернативний шаблон для будь-якого вбудованого блоку. Редактор побачить його у випадному списку при виборі блоку.
<?php // packages/my-theme/themes/my-theme/blocks/content/templates/two-column.php defined('C5_EXECUTE') or die('Access Denied.'); ?> <div class="content-block two-col"> <div class="col"><?= $content ?></div> </div> Порівняння кастомної та готової теми
| Параметр | Кастомна тема | Готова тема |
|---|---|---|
| Продуктивність | 90+ балів Lighthouse | Часто <70 балів через зайвий код |
| Гнучкість | Будь-які типи сторінок і блоки | Обмежена шаблоном |
| Підтримка | Повний контроль, легко оновлювати | Залежність від розробника теми |
| Вартість у довгостроковій перспективі | Окупається за рахунок швидкості та низьких витрат на підтримку | Може вимагати заміни при зростанні проєкту |
Що входить у розробку
- Аналіз макету та прототипів
- Розробка структури теми (пакетна або звичайна)
- Створення типів сторінок та областей
- Написання кастомних шаблонів блоків (якщо потрібно)
- Адаптивна верстка (Mobile First)
- Налаштування Asset Pipeline (Vite/Webpack)
- Інтеграція з атрибутами сторінки
- Документація та навчання редакторів
- Технічна підтримка протягом 2 тижнів після здачі
Як оптимізувати Core Web Vitals у темі?
Для збірки CSS/JS ми використовуємо Vite або Webpack. Зібрані файли кладуться в themes/my-theme/css/ та js/. У page.php підключаємо через $html->css() та $html->javascript() — Concrete CMS автоматично додає версійний хеш. Це гарантує, що зміни асетів одразу застосовуються без кешування старої версії. Додатково впроваджуємо критичний CSS для швидкого першого рендерингу. Результат — LCP < 2 секунд, CLS < 0.05, INP < 150 мс.
Кастомна тема забезпечує LCP у 2 рази швидше, ніж готова тема. Кроки:
- Аналіз макету: виявляємо критичний шлях рендерингу, визначаємо блокуючі ресурси.
- Збірка через Vite: tree-shake CSS, мініфікація JS, автооновлення при розробці.
- Впровадження критичного CSS: вбудовуємо стилі для першого екрану в
<head>. - Оптимізація зображень: WEBP, lazy loading, адаптивні srcset.
- Тестування: Lighthouse, WebPageTest, реальні пристрої.
Терміни та гарантії
| Робота | Термін |
|---|---|
| Базова тема з макету (5–7 типів сторінок) | 2–4 тижні |
| Адаптивна тема з кастомними елементами | 3–6 тижнів |
| Повна тема з пакетом, блоками, атрибутами | 5–10 тижнів |
Ми гарантуємо повну відповідність макету (Pixel Perfect), коректну адаптивність та відсутність помилок. Після здачі надаємо 2 тижні безкоштовної підтримки. Зв'яжіться з нами для оцінки вашого проєкту — ми проаналізуємо макет і запропонуємо оптимальне рішення. Замовте розробку кастомної теми Concrete CMS та отримайте консультацію з архітектури.
Більше інформації про можливості CMS — в офіційній документації Concrete CMS.