Відзначимо: коли дизайн-макет не вписується в стандартну сітку Drupal, а клієнт наполягає на pixel-perfect верстці — кастомна тема стає єдиним виходом. Ми не натягуємо Bootstrap на Drupal, а перекладаємо макет у Twig-шаблони так, щоб кожен блок дихав саме так, як задумано. За час роботи на ринку та 30+ проєктів на Drupal ми навчилися вичавлювати максимум із продуктивності: на одному лендингу для конференції вдалося скоротити LCP з 3,2 до 1,1 сек, прибравши всі невикористовувані скрипти та замінивши jQuery на vanilla JS. Це привело до зниження TTFB на 200 мс і скорочення HTTP-запитів з 45 до 12. Додатково ми приділяємо увагу accessibility: додаємо ARIA-ролі та атрибути, що покращує UX і SEO.
Чому кастомна тема Drupal швидша за готову?
Різниця в підході: замість монолітної бібліотеки ми збираємо лише необхідні компоненти. Порівняйте: кастомна тема завантажується на 40% швидше за готову тему з купою зайвих модулів. Економія бюджету на переробку досягає 30%, а витрати на обслуговування знижуються на 20% завдяки відсутності невикористовуваного коду.
Як уникнути bundle bloat під час розробки теми?
Перше, що ми робимо — аналізуємо дизайн і ріжемо його на компоненти: шапка, підвал, сітка контенту, картки. Для кожного компонента створюємо окремий Twig-шаблон і підключаємо лише потрібні CSS/JS через бібліотеки. Це виключає bundle bloat — на відміну від готових тем, де суцільно тягнуться невикористовувані стилі.
Що дає правильна декомпозиція шаблонів?
Кожен компонент живе у своєму файлі: block--system-branding-block.html.twig, node--article--full.html.twig, field--field-image.html.twig. Це дозволяє перевизначати шаблони точково, не зачіпаючи інші сторінки. В результаті ми отримуємо чисту ієрархію, яку легко підтримувати, та уникаємо конфліктів при оновленні ядра Drupal. Правильне іменування шаблонів — запорука масштабованості, як рекомендовано в документації Drupal Twig.
Що входить у розробку кастомної теми
| Етап | Що робимо | Результат |
|---|---|---|
| 1. Аналітика | Вивчаємо дизайн-макет, ріжемо на компоненти, підбираємо шрифти та кольори | Декомпозиція макета із зазначенням усіх станів |
| 2. Прототипування | Створюємо info.yml, libraries.yml, базові Twig-шаблони сторінок | Структура теми готова до інтеграції |
| 3. Верстка компонентів | Верстаємо кожен компонент: шаблон + CSS + JS | Pixel-perfect компоненти для всіх типів контенту |
| 4. Інтеграція | Підключаємо реальні дані, налаштовуємо поля, зображення, блоки | Тема працює з реальним контентом |
| 5. Performance-оптимізація | Налаштовуємо image styles, lazy load, мініфікуємо ресурси | Core Web Vitals у зеленій зоні |
| 6. Тестування | Перевіряємо адаптивність, кросбраузерність, швидкість | Протокол тестів |
| 7. Деплой і документація | Вивантажуємо тему, описуємо структуру, передаємо доступи та навчання | Готова тема + інструкція для редакторів |
Приклад структури теми
web/themes/custom/my_theme/ ├── my_theme.info.yml ├── my_theme.libraries.yml ├── my_theme.theme ├── config/ │ └── install/ ├── css/ │ └── components/ ├── js/ ├── images/ ├── templates/ │ ├── layout/ │ │ ├── html.html.twig │ │ └── page.html.twig │ ├── content/ │ │ ├── node.html.twig │ │ └── node--article--full.html.twig │ └── field/ └── screenshot.png Бібліотеки CSS/JS
# my_theme.libraries.yml global: version: VERSION css: base: css/base.css: {} layout: css/layout.css: {} js: js/main.js: { defer: true } dependencies: - core/drupal - core/once slider: version: VERSION css: component: css/components/slider.css: {} js: js/slider.js: {} dependencies: - core/once Підключаємо бібліотеку лише там, де вона потрібна — через attach_library('my_theme/slider') у шаблоні. Це знижує обсяг завантажуваного JS на 30%. А для зображень використовуємо native lazy loading через атрибут loading="lazy" (докладніше на MDN).
Приклад Twig-шаблону статті
{# node--article--full.html.twig #} <article{{ attributes.addClass('article', 'article--full') }}> {% if label %} <h1{{ title_attributes.addClass('article__title') }}>{{ label }}</h1> {% endif %} <div class="article__meta"> {% if display_submitted %} <span class="article__author">{{ author_name }}</span> <time class="article__date" datetime="{{ date.attributes.datetime }}">{{ date }}</time> {% endif %} </div> {{ content|without('links') }} </article> Процес роботи та строки
Ми працюємо в кілька ітерацій: після кожного етапу показуємо проміжний результат. Строки залежать від складності:
| Рівень складності | Строк | Що входить |
|---|---|---|
| Базова тема | 5–8 днів | Шаблони статей і сторінок, адаптивна верстка, бібліотеки |
| З анімаціями та кастомними блоками | 10–15 днів | Slider, lightbox, responsive images, кастомні блоки |
| Комплексна тема | від 20 днів | Кастомна адмінка, кілька view modes, складна JS-логіка |
Оцінку даємо після аналізу макета. Залиште заявку — ми надішлемо комерційну пропозицію протягом дня.
Типові помилки під час розробки кастомних тем
- Ігнорування ієрархії шаблонів — якщо не використовувати специфічні імена, Drupal буде рендерити загальні шаблони, і кастомні блоки не відобразяться.
- Перевантаження глобальної бібліотеки — всі скрипти та стилі на всіх сторінках. Правильно: лише critical CSS глобально, решта — асинхронно або на вимогу.
- Забути про image styles — без них зображення завантажуються в оригінальному розмірі, вбиваючи LCP і CLS.
- Не використовувати Twig debug mode — без включення
development.services.ymlскладно знайти потрібний шаблон для перевизначення.
Ієрархія Twig-шаблонів Drupal
Drupal використовує угоду про іменування шаблонів: чим специфічніше ім'я файлу (наприклад, node--article--full.html.twig), тим вищий пріоритет. Це дозволяє перевизначати шаблони для окремих типів контенту або режимів відображення, не зачіпаючи інші.
Ми гарантуємо, що кастомна тема пройде перевірку Core Web Vitals на зелену зону. Досвід 30+ проєктів підтверджує: правильний Twig і мінімум залежностей дають швидкість на рівні статики. Отримайте консультацію — розкажемо, як реалізувати ваш проєкт.