Хотите чтобы ваш сайт выглядел уникально? Не можете найти подходящей готовой темы? Возможно пришло время создать собственную тему для Drupal. Для этого вам придётся изучить HTML и CSS - это базовые знания. Однако для написания более функциональной темы оформления потребуется изучить PHP, систему шаблонов Twig и JavaScript.
Что нужно знать для создания своей темы для Drupal
1. HTML и CSS:
- Эти технологии необходимы для создания базовой структуры и внешнего вида вашей новой темы. HTML определяет структуру страницы, а CSS отвечает за её оформление.
2. PHP:
- Это язык программирования, на котором написана большая часть ядра Drupal. Для создания собственной темы потребуется базовое понимание PHP, чтобы настроить шаблоны и динамическое содержимое.
3. Twig:
- Система шаблонов, используемая в Drupal для генерации HTML. Хотя Twig сам по себе не является языком программирования, знание его синтаксиса облегчит написание тем.
4. JavaScript:
- Этот язык программирования необходим для добавления динамических элементов на страницы сайта.
Рекомендации:
- Если вы новичок в разработке тем на Drupal, начните с изучения HTML и CSS. Эти знания позволят вам написать подтему на основе существующей, изменив внешний вид и стуктуру. Вы также сможете создавать простейшие темы для Drupal.
- Осваив PHP и Twig, вы расширите свои возможности, сможете писать более сложные и функциональные темы.
- Изучив JavaScript сможете "оживить" свой сайт, добавив на страницы интерактивные элементы.

Пошаговая инструкция
1. Подготовка окружения:
- Убедитесь, что у вас установлен Drupal 11 (PHP 8.2+).
- Используйте локальный сервер (например, DDEV, Lando или XAMPP).
- Установите инструменты: Composer, Node.js (для сборки CSS/JS), Twig-плагины для IDE.
2. Создание структуры темы
Тема должна находиться в папке `/themes/custom/ваша_тема`.
Базовая структура папок:
```
ваша_тема/
├── ваша_тема.info.yml → Основной файл темы
├── ваша_тема.libraries.yml → Подключение CSS/JS
├── templates/ → Twig-шаблоны
│ ├── node/
│ └── block/...
├── css/
│ └── style.css → Стили
├── js/
│ └── scripts.js → Скрипты
├── images/ → Изображения
└── config/ → Конфигурации (опционально)
```
3. Настройка .info.yml
Создайте файл `ваша_тема.info.yml` с базовыми параметрами:
```
yaml
name: Ваша тема
description: Описание темы
type: theme
core_version_requirement: ^11
base theme: stable9 # Или другая базовая тема (например, olivero)
libraries:
- ваша_тема/global-styles
regions:
header: Header
content: Content
sidebar: Sidebar
footer: Footer
```
4. Подключение CSS/JS через .libraries.yml
В файле `ваша_тема.libraries.yml` укажите стили и скрипты:
```
yaml
global-styles:
css:
theme:
css/style.css: {}
js:
js/scripts.js: {}
dependencies:
- core/drupal
- core/jquery
```
5. Работа с Twig-шаблонами
- Шаблоны размещайте в папке `templates/`.
- Чтобы переопределить шаблон, скопируйте его из ядра Drupal или базовой темы.
Например, для переопределения шаблона ноды:
`templates/node/node--article.html.twig`.
- Используйте отладку с помощью модуля Twig Debug (включите в `services.yml`).
6. Добавление CSS/JS
- Для современных проектов используйте Sass/SCSS или PostCSS (настройте сборку через Webpack/Gulp).
- Подключите библиотеки через `hook_page_attachments` или `*.libraries.yml`.
7. Создание подтемы (sub-theme)
Если вы хотите наследоваться от существующей темы (например, Olivero):
```
yaml
# ваша_тема.info.yml
base theme: olivero
```
Скопируйте необходимые файлы из базовой темы и модифицируйте их.
8. Регистрация новых регионов или блоков
- Добавьте регионы в `ваша_тема.info.yml`.
- Для кастомных блоков используйте модуль Block UI или создайте свои плагины блоков.
9. Адаптивность и доступность
- Используйте CSS-фреймворки (например, Bootstrap 5) или пишите свои медиа-запросы.
- Соблюдайте стандарты WCAG 2.1 (контрастность, ARIA-роли).
10. Тестирование темы
Проверьте тему на разных устройствах и браузерах. Используйте инструменты:
- Lighthouse (для производительности и доступности).
- PHPSta / Drupal Check (для анализа кода).
- Theme Developer (модуль для отладки).
11. Активация темы
- Зайдите в Админ-панель → Appearance.
- Найдите вашу тему и нажмите Install and set as default.
Полезные советы
1. Используйте Drupal Console для генерации кода:
```
drupal generate:theme
```
2. Подключите библиотеки только там, где они нужны (для оптимизации).
3. Документируйте код — это упростит поддержку.
Пример переопределения шаблона страницы
1. Скопируйте `core/themes/stable9/templates/layout/page.html.twig` в `ваша_тема/templates/layout/page.html.twig`.
2. Модифицируйте HTML:
```
twig
<header>
{{ page.header }}
</header>
<main>
{{ page.content }}
</main>
```
---
Ресурсы
- Официальная документация Drupal 11 (https://www.drupal.org/docs/11)
- Drupal Theming Guide (https://www.drupal.org/docs/theming-drupal)
- Twig для Drupal (https://twig.symfony.com/doc/3.x/templates.html)
Комментарии