Розробка кастомної теми 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, щоб ваш сайт виділявся.