07.04.2025
Как организовать правильную и удобную архитектуру темы 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, шаблоны, блоки)
🧠 Заключение
Хорошая архитектура темы — это инвестиция в будущее. Даже если проект небольшой, он может вырасти. И тогда правильная структура сэкономит тебе кучу времени и нервов.