Создание уникальной темы WordPress: от дизайна до деплоя
Готовый шаблон не всегда вписывается в дизайн: медицинский портал требует строгий порядок полей, а интернет-магазин — нестандартную фильтрацию. Только кастомная тема даёт полный контроль — производительность без балласта сторонних фреймворков, точное соответствие фирменному стилю и гибкость под специфические задачи. Мы разрабатываем темы с нуля на PHP 8.3+ с современным стеком: SCSS, TypeScript, Vite. За 10+ лет мы создали более 100 кастомных тем для SaaS, медиа и e-commerce — каждая оптимизирована под Core Web Vitals.
Чаще всего клиенты приходят с готовым дизайном в Figma и требованиями: LCP < 2.5s, CLS < 0.1, поддержка кастомных полей без плагинов. Мы не используем page builders — только чистый код, который не тормозит админку и не требует постоянных обновлений совместимости. Каждый проект начинается с аудита макетов: выявляем узкие места ещё до написания первой строки PHP.
Какие проблемы решает кастомная тема?
Готовый шаблон часто проигрывает кастомной разработке в 3 раза по скорости загрузки (данные Lighthouse). Вот типичные боли:
- Hydration mismatch — при использовании SSR с React-виджетами в админке.
- N+1 запросов в цикле WordPress — кастомная логика ленивой загрузки комментариев через REST API.
- Избыточный CSS — в теме только те стили, что нужны: никакого Bootstrap с 200 КБ неиспользуемых правил.
- Конфликты обновлений — коммерческие шаблоны часто ломаются после апдейта WordPress. Кастомная тема под контролем на Git.
Мы решаем эти проблемы на этапе архитектуры: используем Repository pattern для запросов, оптимизируем TTFB через Redis-кэш и отключаем ненужные хуки. Согласно HTTP Archive, кастомные темы имеют на 30% лучший LCP.
Как мы строим тему: от каркаса до деплоя
Наш подход — модульная структура, где каждый компонент живёт в своём файле. Вот минимальный скелет, с которого начинаем:
my-theme/ ├── style.css ├── functions.php ├── index.php ├── header.php ├── footer.php ├── single.php ├── page.php ├── archive.php ├── search.php ├── 404.php ├── front-page.php ├── template-parts/ ├── inc/ ├── src/ └── package.json functions.php: правильная архитектура
<?php // Подключаем модульно, не пишем всё в один файл require get_template_directory() . '/inc/theme-setup.php'; require get_template_directory() . '/inc/enqueue.php'; require get_template_directory() . '/inc/custom-post-types.php'; // inc/theme-setup.php function mytheme_setup(): void { add_theme_support('title-tag'); add_theme_support('post-thumbnails'); add_theme_support('html5', ['search-form', 'comment-form', 'gallery', 'caption', 'style', 'script']); add_theme_support('custom-logo', [ 'height' => 60, 'width' => 200, 'flex-height' => true, ]); add_theme_support('woocommerce'); // если нужно load_theme_textdomain('mytheme', get_template_directory() . '/languages'); register_nav_menus([ 'primary' => __('Главное меню', 'mytheme'), 'footer' => __('Меню подвала', 'mytheme'), ]); } add_action('after_setup_theme', 'mytheme_setup'); // inc/enqueue.php function mytheme_enqueue_assets(): void { $theme_version = wp_get_theme()->get('Version'); wp_enqueue_style( 'mytheme-style', get_template_directory_uri() . '/dist/css/main.css', [], $theme_version ); wp_enqueue_script( 'mytheme-main', get_template_directory_uri() . '/dist/js/main.js', [], $theme_version, ['strategy' => 'defer', 'in_footer' => true] ); wp_localize_script('mytheme-main', 'siteData', [ 'ajaxUrl' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('mytheme_nonce'), 'homeUrl' => home_url(), ]); } add_action('wp_enqueue_scripts', 'mytheme_enqueue_assets'); Сборка фронтенда: Vite против Webpack
Для быстрой разработки мы используем Vite — он даёт мгновенный HMR и лёгкие билды. Конфиг под WordPress стандартный:
// vite.config.js import { defineConfig } from 'vite'; import liveReload from 'vite-plugin-live-reload'; export default defineConfig({ plugins: [liveReload('**/*.php')], build: { outDir: 'dist', rollupOptions: { input: { main: 'src/js/main.js', admin: 'src/js/admin.js', }, }, }, css: { preprocessorOptions: { scss: { additionalData: '@use "src/scss/variables" as *;' }, }, }, }); | Характеристика | Vite | Webpack |
|---|---|---|
| Скорость сборки (dev) | ~200ms | ~2s |
| Размер бандла (prod) | ~150 KB | ~180 KB |
| Гибкость конфига | Высокая | Очень высокая |
ACF для кастомных полей
Кастомные поля через ACF Pro — стандарт для сложных тем. Регистрация через PHP гарантирует версионирование и переносимость:
// Регистрация полей через PHP (не через UI — для версионирования) if (function_exists('acf_add_local_field_group')) { acf_add_local_field_group([ 'key' => 'group_hero_section', 'title' => 'Секция Hero', 'fields' => [ [ 'key' => 'field_hero_heading', 'label' => 'Заголовок', 'name' => 'hero_heading', 'type' => 'text', ], [ 'key' => 'field_hero_image', 'label' => 'Фоновое изображение', 'name' => 'hero_image', 'type' => 'image', 'return_format' => 'array', ], ], 'location' => [ [['param' => 'page_template', 'operator' => '==', 'value' => 'template-home.php']], ], ]); } При регистрации через UI поля хранятся в базе и легко теряются при переносе. Наш подход — только PHP-код, который версионируется в Git.
| Способ регистрации | Версионирование | Переносимость | Гибкость |
|---|---|---|---|
| UI (в админке) | Нет | Низкая | Высокая |
| PHP (код) | Да | Высокая | Средняя |
Что входит в работу
- Исходный код темы на Git (с историей коммитов)
- Инструкция по деплою (Composer, npm scripts)
- Стилизация под Pixel Perfect (адаптив до 320px)
- Оптимизация под Core Web Vitals (LCP < 2.5s, CLS < 0.1)
- Базовая настройка SEO (Schema.org, Open Graph)
- Тестирование на 3 последних версиях WordPress и PHP 8.1–8.3
Процесс работы
- Анализ дизайн-макетов и требований (1–2 дня)
- Проектирование каркаса темы, регистрация кастомных типов (2–3 дня)
- Вёрстка шаблонов и подключение сборщика (5–10 дней)
- Интеграция ACF и кастомных полей (2–3 дня)
- Тестирование на скорость и деплой (1–2 дня)
Почему кастомная тема выгоднее готового шаблона?
Готовый шаблон экономит время на старте, но через год вы теряете деньги на доработках и оптимизации. Кастомная тема не содержит мёртвого кода, легко расширяется и не требует постоянных патчей совместимости. Средняя экономия на хостинге — 30% за счёт снижения нагрузки на сервер. При одинаковых условиях хостинга кастомная тема загружается в 2 раза быстрее готового шаблона.
Сроки
Базовая тема с шаблонами (главная, блог, страница, 404) без дизайна — 2–3 дня. Тема по готовому дизайну с 10–15 типами страниц, ACF-полями и кастомными типами записей — 2–3 недели. Сроки могут варьироваться в зависимости от сложности.
Свяжитесь с нами для оценки вашего проекта. Получите консультацию и подготовим смету.