Как организовать правильную и удобную архитектуру темы WordPress

Создание темы для WordPress — это не просто набор шаблонов и CSS. Это возможность построить гибкую, масштабируемую систему, которую будет удобно развивать и поддерживать. В этой статье разберёмся, как правильно структурировать тему, чтобы она была понятной, модульной и современной.


🔧 1. Базовая структура темы

Вот рекомендуемая стартовая структура:

your-theme/
│
├── assets/          # Статические файлы (CSS, JS, изображения)
│   ├── css/
│   ├── js/
│   └── images/
│
├── components/      # Повторно используемые шаблоны (модули)
│   ├── header/
│   ├── footer/
│   └── card-post.php
│
├── templates/       # Шаблоны страниц (single, archive и т.д.)
│   ├── single.php
│   ├── page.php
│   └── archive.php
│
├── partials/        # Части шаблонов (sidebar, breadcrumbs и др.)
│
├── functions/       # Подключение функционала (scripts, menus и т.д.)
│   ├── enqueue.php
│   ├── theme-setup.php
│   ├── custom-post-types.php
│   └── helpers.php
│
├── languages/       # Файлы перевода
│
├── style.css        # Метаинформация о теме + импорты
├── functions.php    # Подключение всех функций
└── index.php        # Резервный шаблон

🧩 2. Разделение логики: functions/

Не пихаем всё в functions.php. Вместо этого — делим на модули:

  • enqueue.php — подключение стилей и скриптов
  • theme-setup.php — поддержка меню, миниатюр, кастомного логотипа и т.д.
  • custom-post-types.php — регистрация CPT и таксономий
  • helpers.php — вспомогательные функции (например, обрезка excerpt)

В functions.php просто делаем:

require_once get_template_directory() . '/functions/theme-setup.php';
require_once get_template_directory() . '/functions/enqueue.php';
require_once get_template_directory() . '/functions/custom-post-types.php';
require_once get_template_directory() . '/functions/helpers.php';

💅 3. Стилизация: assets/css

  • Используй SCSS или PostCSS.
  • Раздели стили по модулям: _header.scss, _footer.scss, _buttons.scss
  • Главный файл — style.css с импортами модулей.
@import 'partials/reset';
@import 'partials/variables';
@import 'components/header';
@import 'components/footer';

🧱 4. Компонентный подход: components/

  • Создавай переиспользуемые блоки как компоненты.
  • Например: card-post.php, button.php, hero-section.php
  • Подключение через get_template_part():
<?php get_template_part('components/card', 'post'); ?>

🧠 5. Используй кастомные хуки и фильтры

Добавляй свои хуки, чтобы расширение темы не превращалось в ад:

do_action('mytheme_before_main_content');

🧪 6. Тестовая среда и CI/CD

  • Используй WP-CLI для генерации данных.
  • Настрой PHPCS (WordPress Coding Standards)
  • Автоматизируй деплой через GitHub Actions или DeployBot

🗂 Пример организации SCSS

assets/
├── scss/
│   ├── base/
│   ├── components/
│   ├── layouts/
│   └── style.scss

✅ Чеклист

  • Разделение логики и шаблонов
  • Компоненты через get_template_part
  • Настроенный сборщик (например, Vite или Webpack)
  • Применение хуков
  • Возможность масштабирования (новые CPT, шаблоны, блоки)

🧠 Заключение

Хорошая архитектура темы — это инвестиция в будущее. Даже если проект небольшой, он может вырасти. И тогда правильная структура сэкономит тебе кучу времени и нервов.