Розробка кастомної теми 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 тижні. Терміни можуть варіюватися залежно від складності.
Зв'яжіться з нами для оцінки вашого проєкту. Отримайте консультацію, і ми підготуємо кошторис.