Разработка кастомной темы WordPress: ACF, Vite, Core Web Vitals

Создание уникальной темы 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 *;',
      },
    },
  },
});

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.

Что входит в работу

• Исходный код темы на 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. Анализ дизайн-макетов и требований (1–2 дня)
2. Проектирование каркаса темы, регистрация кастомных типов (2–3 дня)
3. Вёрстка шаблонов и подключение сборщика (5–10 дней)
4. Интеграция ACF и кастомных полей (2–3 дня)
5. Тестирование на скорость и деплой (1–2 дня)

Почему кастомная тема выгоднее готового шаблона?

Готовый шаблон экономит время на старте, но через год вы теряете деньги на доработках и оптимизации. Кастомная тема не содержит мёртвого кода, легко расширяется и не требует постоянных патчей совместимости. Средняя экономия на хостинге — 30% за счёт снижения нагрузки на сервер. При одинаковых условиях хостинга кастомная тема загружается в 2 раза быстрее готового шаблона.

Сроки

Базовая тема с шаблонами (главная, блог, страница, 404) без дизайна — 2–3 дня. Тема по готовому дизайну с 10–15 типами страниц, ACF-полями и кастомными типами записей — 2–3 недели. Сроки могут варьироваться в зависимости от сложности.

Свяжитесь с нами для оценки вашего проекта. Получите консультацию и подготовим смету.