Разработка кастомной темы Grav (Twig)
Переход на Grav часто осложняется тем, что готовая тема не поддерживает кастомные поля или модульные страницы. Типичная готовка загружает 150 КБ неиспользуемого CSS, увеличивая LCP на 40%. Мы разрабатываем кастомные темы Grav на Twig, полностью соответствующие дизайну и требованиям производительности. Наш опыт — более 5 лет в разработке на Grav, 50+ реализованных проектов. Оптимизация Core Web Vitals — обязательное условие: мы строим темы так, чтобы LCP был < 1.5 с, CLS < 0.1, INP < 200 мс. Это подтверждено замерами на реальных проектах.
Проблемы, которые решаем
Готовые темы Grav часто не подходят под нестандартные макеты: сложно вывести кастомные поля через админку, навигация не поддерживает многоуровневость, а модульные страницы приходится допиливать вручную. Мы решаем эти проблемы с помощью blueprints и модульной архитектуры. Например, для одного клиента мы разработали тему с 12 модульными секциями — hero, features, testimonials, cta — каждая со своими полями в админке. Без blueprints такое было бы невозможно. Blueprints — это YAML-конфиги, которые определяют поля в админке; они дают клиенту возможность менять контент без участия разработчика. Также часто встречается проблема с производительностью: готовые темы не оптимизированы под современные метрики, что приводит к низким показателям PageSpeed.
Как настроить blueprints для сложных полей?
Blueprints — это YAML-конфиги, которые определяют поля в админке. Пример для секции с изображением и текстом:
# blueprints/modules/hero.yaml title: Hero fields: header.hero_image: type: filepicker folder: @self label: Hero Image header.hero_title: type: text label: Title header.hero_subtitle: type: text label: Subtitle Такой подход позволяет клиенту менять контент без участия разработчика. Для сложных полей (галерея, таблица) используем repeatable-поля и union-типы.
Сравнение готовой и кастомной темы
| Параметр | Готовая тема | Кастомная тема |
|---|---|---|
| Скорость загрузки | LCP до 3 с | LCP < 1.5 с |
| Гибкость дизайна | Ограничена | Полная свобода |
| Blueprints | Стандартные | Свои под каждую секцию |
| Модульные страницы | Нет | Да, любой набор модулей |
| SEO-оптимизация | Средняя | Core Web Vitals, структурированные данные |
Кастомная тема загружается на 30–50% быстрее готовых аналогов за счёт оптимизированных шаблонов и отсутствия лишнего CSS. Вы получаете уникальный дизайн без компромиссов, гибкую настройку через blueprints, поддержку модульных страниц для лендингов и оптимизацию под Core Web Vitals. Это окупает вложения за счёт снижения затрат на последующие доработки — меньше времени на правки, выше конверсия.
Как мы это делаем: стек и кейс
Стек: Grav последней стабильной версии, Twig 3, PHP 8.x, PostgreSQL или MySQL, адаптивная вёрстка на Flexbox и Grid. Для одного проекта потребовалось создать тему для многоязычного корпоративного сайта. Использовали modular-архитектуру: четыре модуля (hero, features, steps, cta) и кастомные blueprints для каждого. Все шаблоны наследуются от базового layout.
Пример базового layout:
{# templates/partials/base.html.twig #} <!DOCTYPE html> <html lang="{{ grav.language.getLanguage() }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title> {% if page.header.metadata.description is defined %} <meta name="description" content="{{ page.header.metadata.description }}"> {% elseif page.summary %} <meta name="description" content="{{ page.summary|striptags|trim }}"> {% endif %} {% block stylesheets %} {% do assets.addCss('theme://css/theme.css', 100) %} {% endblock %} {{ assets.css()|raw }} </head> <body class="{{ page.template }}{% if page.header.body_class %} {{ page.header.body_class }}{% endif %}"> {% include 'partials/navigation.html.twig' %} {% block content %}{% endblock %} {% include 'partials/footer.html.twig' %} {% block javascripts %} {% do assets.addJs('theme://js/theme.js', 100) %} {% endblock %} {{ assets.js()|raw }} </body> </html> Шаблон страницы с модульными секциями:
{# templates/service-detail.html.twig #} {% extends 'partials/base.html.twig' %} {% block content %} <section class="hero {% if page.header.hero_image %}hero--image{% endif %}"> {% if page.media[page.header.hero_image] is defined %} {% set hero = page.media[page.header.hero_image] %} <img src="{{ hero.url }}" srcset="{{ hero.resize(800,400).url }} 800w, {{ hero.resize(1600,800).url }} 1600w" alt="Разработка кастомной темы Grav — hero изображение"> {% endif %} <div class="hero__inner"> <h1>{{ page.title }}</h1> {% if page.header.intro %}<p>{{ page.header.intro }}</p>{% endif %} </div> </section> <div class="container layout-main"> <article class="content">{{ page.content|raw }}</article> </div> {% endblock %} Модульная навигация с активным состоянием:
{% set tree = pages.find('/').children.visible %} <nav class="main-nav"><ul>{% for item in tree %}{% set is_active = item.active or item.activeChild %}<li class="{{ is_active ? 'active' : '' }} {{ item.children.visible|length ? 'has-children' : '' }}"><a href="{{ item.url }}">{{ item.title }}</a>{% if item.children.visible|length %}<ul class="submenu">{% for child in item.children.visible %}<li class="{{ child.active ? 'active' : '' }}"><a href="{{ child.url }}">{{ child.title }}</a>{% endfor %}</ul>{% endif %}</li>{% endfor %}</ul></nav> Совет: используйте готовые modular-блоки из нашей библиотеки
Это сокращает время разработки на 30%. Мы подключаем Gulp-сборку для автоматизации препроцессоров и оптимизации изображений.
Процесс работы
- Аналитика — изучаем макеты, структуру контента, требования к SEO.
- Проектирование — создаём wireframe шаблонов и blueprint-схему.
- Реализация — пишем Twig-шаблоны, YAML-конфиги, CSS, JS.
- Тестирование — проверяем на всех устройствах, скорость загрузки, индексацию. На этапе тестирования проверяем Core Web Vitals с помощью Lighthouse и проводим кроссбраузерное тестирование.
- Деплой — устанавливаем тему на ваш хостинг, передаём доступы и документацию. После завершения мы передаём исходники, документацию и оказываем поддержку в течение месяца.
Сроки ориентировочно
| Тип темы | Количество шаблонов | Срок |
|---|---|---|
| Базовая | 5–8, без модульных | 1–2 недели |
| Полная | 8–15, с blueprints | 3–5 недель |
| Многоязычная | + переводы | +3–5 дней |
Что входит в разработку кастомной темы?
- Исходники темы (Twig, YAML, CSS, JS)
- Документация по структуре шаблонов
- Инструкция по установке и настройке
- Поддержка 1 месяц после сдачи
- Гарантия на код — исправляем баги бесплатно
Разработка кастомной темы — это инвестиция, которая снижает бюджет поддержки и ускоряет вывод новых страниц. Получите консультацию инженера — свяжитесь с нами. Закажите разработку кастомной темы Grav, чтобы ваш сайт выделялся.