Вы потратили недели на настройку готовой темы Concrete CMS, а она всё ещё грузится 8 секунд и не соответствует макету. Решение — кастомная тема, написанная под ваш дизайн. Мы создаём темы, которые дают 90+ баллов Lighthouse, легко поддерживаются и масштабируются. Более 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.