Кастомні поля WordPress через Meta Box: PHP API та оптимізація

«У нас проєкт на WordPress, потрібно додати складні поля — бюджет, галерею, команду. ACF Pro коштує $200 на рік, а хочеться залишитися в рамках безкоштовної версії». Цей біль ми чуємо постійно. Вихід є: Meta Box — повноцінна безкоштовна альтернатива ACF з code-first архітектурою. Як зазначається в офіційній документації Meta Box, такий підхід дозволяє уникнути Vendor Lock-In і повністю контролювати структуру даних. Наша команда використовує його більше 5 років, реалізувавши понад 100 проєктів — від лендінгів до корпоративних порталів з тисячами записів. Розповімо, як налаштувати кастомні поля, уникнути типових помилок та зекономити на ліцензіях.

Meta Box не прив'язує до GUI — всі налаштування через PHP. Завдяки цьому код легко версіонувати в Git, а зміни поширювати через деплой. Нижче — реальний приклад з проєкту портфоліо: метабокс з полями для клієнта, року, статусу, бюджету та опису.

Як ми реєструємо кастомні поля через PHP API

add_filter('rwmb_meta_boxes', function (array $meta_boxes): array {
    $meta_boxes[] = [
        'id'         => 'project_details',
        'title'      => 'Деталі проєкту',
        'post_types' => ['project'],
        'priority'   => 'high',
        'fields'     => [
            [
                'id'          => 'project_client',
                'name'        => 'Клієнт',
                'type'        => 'text',
                'required'    => true,
                'placeholder' => 'Назва компанії-клієнта',
                'size'        => 50,
                'columns'     => 6,
            ],
            [
                'id'      => 'project_year',
                'name'    => 'Рік',
                'type'    => 'number',
                'min'     => 2000,
                'max'     => 2030,
                'std'     => date('Y'),
                'columns' => 3,
            ],
            [
                'id'      => 'project_status',
                'name'    => 'Статус',
                'type'    => 'select',
                'options' => [
                    'active'    => 'Активний',
                    'completed' => 'Завершений',
                    'paused'    => 'На паузі',
                ],
                'std'     => 'completed',
                'columns' => 3,
            ],
            [
                'id'            => 'project_url',
                'name'          => 'URL проєкту',
                'type'          => 'url',
                'placeholder'   => 'https://',
            ],
            [
                'id'          => 'project_budget',
                'name'        => 'Бюджет (тис. руб.)',
                'type'        => 'number',
                'min'         => 0,
                'step'        => 10,
                'placeholder' => '0',
                'admin_only'  => true,
            ],
            [
                'id'   => 'project_description',
                'name' => 'Внутрішній опис',
                'type' => 'textarea',
                'rows' => 4,
                'desc' => 'Не відображається на сайті, тільки для внутрішнього використання',
            ],
        ],
    ];
    return $meta_boxes;
});

Які типи полів підтримує Meta Box?

Meta Box пропонує понад 30 типів полів. Ось основні, які ми використовуємо в проєктах:

Кожен тип має свої параметри: required, placeholder, columns, admin_only та інші. Це дозволяє гнучко налаштовувати інтерфейс під задачу.

Як Meta Box впливає на продуктивність?

Плагін додає поля як мета-записи, що при великій кількості може викликати N+1 запитів. Ми вирішуємо це за допомогою кешування запитів та правильного вибору image_size. Для груп полів рекомендуємо використовувати get_post_meta в циклі, уникаючи зайвих викликів rwmb_meta. На практиці більше 50 полів на одній сторінці редагування сповільнюють завантаження на 20-30% — привід задуматися про нормалізацію.

Також допомагає обмеження: не більше 10-15 полів на метабокс, а якщо потрібно більше — розбивати на групи. Ці заходи дозволяють тримати завантаження адмін-панелі в межах 1-2 секунд навіть на проєктах з 10 000+ записів.

Поля для медіа та файлів

Для завантаження зображень і файлів використовуємо типи image_advanced і file_advanced. Ось як налаштувати обкладинку, галерею та PDF-бриф:

[
    'id'             => 'project_cover',
    'name'           => 'Обкладинка проєкту',
    'type'           => 'image_advanced',
    'max_file_uploads' => 1,
    'force_delete'   => false,
    'image_size'     => 'large',
    'columns'        => 6,
],
[
    'id'             => 'project_gallery',
    'name'           => 'Галерея',
    'type'           => 'image_advanced',
    'max_file_uploads' => 15,
    'image_size'     => 'medium',
    'add_to'         => 'end',
],
[
    'id'   => 'project_brief',
    'name' => 'Бриф (PDF)',
    'type' => 'file_advanced',
    'mime_type' => 'application/pdf',
    'max_file_uploads' => 1,
],

На фронтенді дані отримуємо через rwmb_meta($field_id, $args, $post_id). Для зображень передаємо розмір: 'size' => 'large' або 'size' => 'medium'. Наприклад, обкладинка: $cover = rwmb_meta('project_cover', ['size' => 'large'], $post_id);.

Коли використовувати групи полів?

Якщо потрібні повторювані блоки (наприклад, члени команди), використовуємо платний додаток Group. Приклад — команда проєкту:

[
    'id'     => 'project_team',
    'name'   => 'Команда',
    'type'   => 'group',
    'clone'  => true,
    'sort_clone' => true,
    'add_button' => 'Додати учасника',
    'fields' => [
        ['id' => 'member_name', 'name' => 'Ім\'я',       'type' => 'text',  'columns' => 4],
        ['id' => 'member_role', 'name' => 'Роль',       'type' => 'text',  'columns' => 4],
        ['id' => 'member_photo','name' => 'Фото',       'type' => 'image', 'columns' => 4],
        ['id' => 'member_hours','name' => 'Годин/тижд',  'type' => 'number','columns' => 3],
    ],
],

Виведення на фронтенді: $team = rwmb_meta('project_team', [], $post_id); — перебираємо масив учасників.

Умовне відображення полів

Параметр visible дозволяє показувати поля залежно від значень інших полів. Наприклад, відгук клієнта:

[
    'id'   => 'show_testimonial',
    'name' => 'Додати відгук клієнта',
    'type' => 'switch',
    'style'=> 'rounded',
],
[
    'id'      => 'testimonial_text',
    'name'    => 'Текст відгуку',
    'type'    => 'textarea',
    'visible' => ['show_testimonial', '=', true],
],
[
    'id'      => 'testimonial_author',
    'name'    => 'Автор',
    'type'    => 'text',
    'visible' => ['show_testimonial', '=', true],
    'columns' => 6,
],

Meta Box vs ACF: порівняння

Meta Box налаштовується в 2 рази швидше ACF, завдяки code-first підходу. Базова версія безкоштовна, а платні додатки коштують на порядок дешевше. Підтримує 30+ типів полів, групи, умовну логіку та вкладеність.

Як уникнути N+1 запитів з Meta Box?

При вибірці великої кількості полів у циклі виникають N+1 запити до БД. Рішення — кешувати результат rwmb_meta в змінну та використовувати get_post_meta для простих полів. Наші інженери оптимізують структуру запитів, знижуючи навантаження на сервер.

Процес роботи над кастомними полями

1. Аналіз — визначаємо, які метадані потрібні, виявляємо можливі N+1 запити. Часто достатньо 3-5 полів на сторінку.
2. Проектування — створюємо структуру полів, враховуємо індекси БД. Для великих проєктів використовуємо групи та умовну логіку.
3. Розробка — реалізуємо поля через PHP API, перевіряємо типи та обмеження.
4. Тестування — перевіряємо на навантаження, коригуємо max_file_uploads та image_size.
5. Документація — передаємо клієнту опис всіх полів та приклади виведення.

Типові помилки при роботі з Meta Box

• Не задають size для текстових полів — ламається адаптив в адмінці.
• Забувають про admin_only для внутрішніх полів — вони відображаються на фронтенді.
• Використовують забагато полів на сторінці (>50) — падає швидкість завантаження.
• Не кешують запити rwmb_meta в циклі — виникають N+1 запити.

Що входить в результат

Ви отримаєте вихідний код на PHP з документацією, інструкцію з додавання/зміни полів та приклади виведення на фронтенді. Гарантуємо працездатність в актуальній версії WordPress.

Отримайте консультацію з налаштування Meta Box та замовте розробку кастомних полів WordPress — ми спроектуємо архітектуру, оптимізуємо запити та підготуємо документацію, яка зекономить до 50% часу вашої команди.

Розробка WordPress: кастомні теми, плагіни та WooCommerce

Клієнт приходить з готовим сайтом — і перше, що бачу в DevTools: 47 активних плагінів, сторінка важить 6.8 MB, TTFB 2.4 с, у консолі п'ять конфліктуючих версій jQuery. Це не рідкість — стандарт «доробленого» сайту, що виріс із шаблону в щось живе, але некероване. Ми вирішуємо такі завдання під ключ: від аудиту до деплою. Оцініть ваш проект за один робочий день — зв'яжіться з нами.

WordPress займає 43% ринку CMS (дані Wikipedia) — не тому що ідеальний, а тому що передбачуваний і має екосистему під будь-яке завдання. Завдання інженера — використовувати цю екосистему акуратно, не перетворюючи сайт на смітник залежностей. Ми допомагаємо знайти баланс між функціональністю та продуктивністю, спираючись на 10-річний досвід і 80+ виконаних проектів.

Чому кастомна тема швидша за page builder?

Page builders (Elementor, Divi) генерують роздутий HTML і прив'язують клієнта до візуального редактора назавжди. Кастомна тема на базі _s (underscores) завантажується в 4 рази швидше, ніж тема на Elementor, і не накопичує CSS/JS, які не використовуються. Критичний CSS витягується автоматично, а некритичні скрипти — в defer. На 30+ проектах ми переконалися: кастомна тема дає LCP на 60% нижче при однаковій кількості контенту.

Архітектурні рішення та часті проблеми

Блокування рендерингу через плагіни

Plugin A завантажує jQuery 3.6, Plugin B — jQuery 1.12, тема — свій jQuery Migrate. В результаті wp_enqueue_scripts віддає три різні версії бібліотеки, рендеринг сторінки блокується на 800 мс. Вирішується через wp_dequeue_script, централізований контроль залежностей та переведення некритичних скриптів у defer/async.

N+1 запити та їх вирішення

Розробник написав WP_Query в циклі — кожен пост генерує окремий SQL-запит. На сторінці з 20 постами це 21+ запит до бази. MySQL починає тупити, сервер гріється. Фіксується через post__in з prefetch або перехід на wpdb->get_results() з JOIN. Query Monitor — перший інструмент для діагностики.

WooCommerce під навантаженням

Магазин з 15 000 SKU без object caching і Redis — при 200 одночасних користувачах wc_get_product() вбиває базу. Транзиент-кеш WordPress не рятує: він пише в базу, збільшуючи навантаження. Реальне рішення — Redis через wp-redis або Memcached, плюс wp_cache_set()/wp_cache_get() в кастомному коді.

Як вибрати архітектуру: headless чи моноліт?

Вибір залежить від вимог до продуктивності та складності інтерфейсів. Headless (REST API / WPGraphQL + Next.js) дає приріст TTFB до 50% та ізоляцію фронтенду, але вимагає більш складної інфраструктури. Монолітна тема простіша в підтримці для контентних проектів, де SEO критичне і потрібен прямий доступ до WP Rewrite. Ми допомагаємо визначити оптимальний варіант на етапі аудиту. Перехід на headless покращує LCP у 2.5 рази порівняно з монолітом при правильному налаштуванні кешування — це підтверджено на 30+ проектах.

Стек та підходи в розробці WordPress

Розробка тем. Не використовуємо page builders для продуктових сайтів — вони генерують роздутий HTML. Кастомна тема на базі _s (underscores) завантажується в 4 рази швидше, ніж тема на Elementor. Замість цього: кастомна тема або блочна тема для Full Site Editing, Tailwind CSS через Vite, TypeScript для складного JS.

Gutenberg та блочна розробка. Розробляємо кастомні блоки через @wordpress/scripts, реєструємо через register_block_type() з block.json. Серверний рендеринг через PHP для SEO-критичних блоків, клієнтський — для інтерактивних. Inner Blocks для складених компонентів.

REST API та headless. WordPress як headless CMS через WP REST API v2 або WPGraphQL. Типова схема: WordPress на піддомені cms.example.com, Next.js фронтенд на основному домені. ISR (Incremental Static Regeneration) для сторінок блогу — сторінка регенерується у фоні при зверненні після закінчення revalidate. Для аутентифікованих запитів — JWT через jwt-authentication-for-wp-rest-api або Application Passwords (вбудовано з WP 5.6). Детальніше про REST API — Wikipedia.

WooCommerce. Розширюємо через хуки та фільтри — ніколи не правимо core-файли. Кастомні типи продуктів через WC_Product extension. Для складної логіки цін — woocommerce_get_price_html та woocommerce_product_get_price. Payment gateways пишемо з нуля, успадковуючи від WC_Payment_Gateway. Інтеграція з 1С — через CommerceML або кастомний REST endpoint.

Продуктивність. Обов'язковий стек: Redis Object Cache + Full Page Cache (LiteSpeed Cache або WP Rocket) + CDN для статики + WebP через add_image_size() з конвертацією. Lazy load нативний (loading="lazy") плюс кастомний для критичних зображень вище згину — preload через <link rel="preload">.

Кейс з нашої практики: WooCommerce‑магазин, LCP 9:00 с → 1.8 с

Наш клієнт — магазин електроніки з 40 000 SKU, WooCommerce + кастомна тема. PageSpeed Insights: LCP 9.2 с, CLS 0.41, INP 680 мс.

Діагноз:

• Hero-зображення 3.8 MB JPEG, не оптимізоване, без srcset.
• 23 плагіни завантажували JS/CSS на кожній сторінці, включаючи сторінки продуктів.
• wc_get_product() викликався 60 разів на сторінці категорії без кешування.
• Шрифти завантажувалися через Google Fonts (додатковий DNS lookup).

Що зробили:

• Hero — WebP 180 KB, <img fetchpriority="high" decoding="async">, srcset для 3 breakpoints.
• Умовне завантаження плагінів через is_product(), is_cart(), is_checkout() — прибрали 80% зайвого JS.
• Redis Object Cache, WC_Product prefetch через wc_get_products() з include.
• Шрифти — self-hosted через @font-face, font-display: swap.
• CLS перемогли через aspect-ratio на всіх product card images.

Результат: LCP 1.8 с, CLS 0.04, INP 140 мс. Core Web Vitals — зелені. Клієнт скоротив витрати на хостинг на 40% — це дозволило перейти на дешевший тариф. Додатково заміна десяти плагінів на один кастомний заощадила 12 000 грн на рік на ліцензіях.

Процес роботи

1. Аудит та аналітика. Аналіз існуючої кодової бази, конкурентів, технічних вимог. Для нового сайту — семантичне ядро, UX-прототипування.
2. Архітектура. Вирішуємо: моноліт чи headless. Визначаємо Custom Post Types, Custom Fields (ACF або нативні register_meta()), таксономії.
3. Розробка. Локальне середовище: Docker (nginx + php-fpm + MariaDB). Git з pre-commit хуками для PHP CS Fixer та ESLint. Деплой через WP-CLI + SSH або Buddy.works CI/CD.
4. Тестування. PHPUnit для кастомних плагінів. Playwright для E2E критичних сценаріїв (додати в кошик → оформити замовлення → підтвердження). Lighthouse CI в пайплайні — падаємо, якщо Performance Score < 85.
5. Деплой та підтримка. Staging через WP Stagecoach або ручний клон. Моніторинг — UptimeRobot + Sentry для PHP помилок. Оновлення плагінів — через WP-CLI в тестовому середовищі спочатку.

Що входить в роботу

• Повністю кастомна тема або доопрацювання існуючої.
• Налаштоване об'єктне кешування (Redis/Memcached) та Full Page Cache.
• Оптимізовані медіафайли: WebP, srcset, lazy load, preload критичних зображень.
• Видалення дублюючих плагінів та централізація функціоналу.
• Документація по структурі коду та інструкції по оновленню.
• Навчання контент-менеджерів роботі з блоками Gutenberg.
• Гарантія безперебійної роботи протягом 30 днів після деплою.
• Доступ до репозиторію з повною історією змін.

Як провести аудит WordPress сайту за 5 кроків?

1. Перевірте wp-config.php — чи увімкнено WP_DEBUG та WP_DEBUG_LOG. В продакшені вони мають бути вимкнені.
2. Відкрийте Query Monitor і подивіться кількість запитів на головній. Норма — менше 30.
3. Запустіть Lighthouse — зверніть увагу на LCP, CLS, INP. Якщо LCP > 2.5 с, шукайте блокуючі ресурси.
4. Перевірте плагіни на дублювання функціоналу (наприклад, два плагіни кешування).
5. Зробіть навантажувальний тест за допомогою Locust або k6 — 200 одночасних візитів не повинні викликати помилки тайм-ауту.

Типові помилки при розробці на WordPress

• Пряме редагування файлів теми — при оновленні теми всі зміни втрачаються. Завжди використовуйте дочірню тему або повністю кастомну.
• update_post_meta() в циклі — кожен виклик окремий UPDATE. Для масових операцій застосовуйте $wpdb->update() або update_metadata_by_mid().
• Вимкнений WP_DEBUG в розробці — приховані PHP Notice засмічують error log і часто вказують на реальні проблеми.
• Зберігання медіа в Git — wp-content/uploads в .gitignore, синхронізація через WP-CLI media import або rsync.
• Немає ліміту на WP_Query — posts_per_page => -1 на сторінці з тисячами записів гарантує таймаут.

Орієнтири по термінах

Вартість розраховується індивідуально після аудиту вимог. Отримайте консультацію для попередньої оцінки.

Чому варто довірити розробку WordPress професіоналам?

Ми на ринку більше 10 років, виконали 80+ проектів, маємо сертифікати Automattic та досвід роботи з WooCommerce на високонавантажених майданчиках. Наші рішення враховують усі нюанси: від сумісності плагінів до вимог Core Web Vitals (рекомендації Google). Після завершення проекту ви отримуєте не просто сайт, а документовану, протестовану та готову до масштабування платформу.

Для консультації та оцінки вашого проекту — пишіть або телефонуйте. Ми відповідаємо протягом години в робочий час. Замовте аудит вже сьогодні.