Налаштування ACF для WordPress: професійні кастомні поля

Налаштування кастомних полів ACF: від прототипу до продакшену

Уявіть: редактору потрібно заповнити картку товару з 50 параметрами. Стандартні метабокси змушують його скролити нескінченний список текстових полів. Помилки неминучі: криві дати, биті посилання, переплутані числа. Ми впровадили Advanced Custom Fields з групами полів та вкладеними repeater — швидкість введення зросла в 3 рази, кількість помилок впала до нуля. Редактор отримує зрозумілі форми, а код залишається чистим і підтримуваним. Типовий проект з 10 групами полів потребує 4-6 годин роботи замість 10-15 при ручній реалізації — різниця в 2-3 рази. Замовте налаштування ACF під ключ і прискорте введення контенту.

Проблеми, які вирішуємо за допомогою ACF

• Незручне введення даних. ACF замінює текстові поля на календар, повзунки, випадні списки. Редактор не помиляється у форматах.
• Складність підтримки. Групування полів, умовне відображення та JSON-синхронізація спрощують підтримку коду.
• Гнучкість без програмування. Flexible Content дає редактору можливість збирати сторінку з визначених блоків без знань PHP.

Як ACF спрощує роботу редактора?

Ми реєструємо групи полів програмно — це стандарт для production. Код зберігається в темі та версіонується в Git. Приклад групи «Деталі проекту»:

add_action('acf/init', function () {
    acf_add_local_field_group([
        'key' => 'group_project_details',
        'title' => 'Деталі проекту',
        'fields' => [
            [
                'key' => 'field_project_client',
                'label' => 'Клієнт',
                'name' => 'project_client',
                'type' => 'text',
                'required' => 1,
                'placeholder' => 'Назва компанії',
            ],
            [
                'key' => 'field_project_year',
                'label' => 'Рік реалізації',
                'name' => 'project_year',
                'type' => 'number',
                'min' => 2000,
                'max' => 2030,
                'default_value' => date('Y'),
            ],
            [
                'key' => 'field_project_url',
                'label' => 'URL проекту',
                'name' => 'project_url',
                'type' => 'url',
            ],
            [
                'key' => 'field_project_tech_stack',
                'label' => 'Технології',
                'name' => 'project_tech_stack',
                'type' => 'checkbox',
                'choices' => [
                    'react' => 'React',
                    'vue' => 'Vue.js',
                    'laravel' => 'Laravel',
                    'wordpress' => 'WordPress',
                    'nextjs' => 'Next.js',
                ],
                'layout' => 'horizontal',
            ],
            [
                'key' => 'field_project_gallery',
                'label' => 'Галерея скріншотів',
                'name' => 'project_gallery',
                'type' => 'gallery',
                'min' => 0,
                'max' => 20,
                'mime_types' => 'jpg,jpeg,png,webp',
                'return_format' => 'array',
            ],
        ],
        'location' => [
            [
                ['param' => 'post_type', 'operator' => '==', 'value' => 'project']
            ],
        ],
        'menu_order' => 0,
        'position' => 'normal',
        'style' => 'seamless',
        'label_placement' => 'top',
    ]);
});

Чому варто реєструвати поля через код, а не через адмінку?

Адмінка ACF зручна для швидких прототипів, але в експлуатації веде до проблем: конфігурація зберігається в БД, її складно версіонувати, при перенесенні на новий сервер поля зникають. Код — єдиний надійний спосіб. Документація ACF рекомендує саме цей підхід для production.

Repeater — повторювані блоки даних

[
    'key' => 'field_project_results',
    'label' => 'Результати проекту',
    'name' => 'project_results',
    'type' => 'repeater',
    'min' => 1,
    'max' => 10,
    'layout' => 'table',
    'button_label' => 'Додати результат',
    'sub_fields' => [
        [
            'key' => 'field_result_metric',
            'label' => 'Метрика',
            'name' => 'metric',
            'type' => 'text',
            'placeholder' => 'Конверсія'
        ],
        [
            'key' => 'field_result_before',
            'label' => 'До',
            'name' => 'before',
            'type' => 'text',
            'placeholder' => '1.2%'
        ],
        [
            'key' => 'field_result_after',
            'label' => 'Після',
            'name' => 'after',
            'type' => 'text',
            'placeholder' => '3.8%'
        ],
    ],
]

Виводимо дані на фронті: get_sub_field в циклі have_rows. Код нижче використовуємо в шаблонах проекту.

if (have_rows('project_results')) {
    echo '<table class="results-table">';
    echo '<thead><tr><th>Метрика</th><th>До</th><th>Після</th></tr></thead><tbody>';
    while (have_rows('project_results')) {
        the_row();
        printf('<tr><td>%s</td><td>%s</td><td>%s</td></tr>', esc_html(get_sub_field('metric')), esc_html(get_sub_field('before')), esc_html(get_sub_field('after')) );
    }
    echo '</tbody></table>';
}

Flexible Content — конструктор сторінок

Дозволяє редактору збирати сторінку з блоків різного типу: hero, текст, колонки. Ми підготували layout, а редактор наповнює їх контентом.

[ 'key' => 'field_page_sections', 'label' => 'Секції сторінки', 'name' => 'page_sections', 'type' => 'flexible_content', 'button_label' => 'Додати секцію', 'layouts' => [
  'hero' => [
    'key' => 'layout_hero',
    'name' => 'hero',
    'label' => 'Hero-банер',
    'sub_fields' => [
      ['key' => 'field_hero_title', 'label' => 'Заголовок', 'name' => 'title', 'type' => 'text'],
      ['key' => 'field_hero_bg', 'label' => 'Фон', 'name' => 'bg', 'type' => 'image', 'return_format' => 'array'],
      ['key' => 'field_hero_button', 'label' => 'Кнопка', 'name' => 'button', 'type' => 'link'],
    ],
  ],
  'text_columns' => [
    'key' => 'layout_text_columns',
    'name' => 'text_columns',
    'label' => 'Текст в колонках',
    'sub_fields' => [
      ['key' => 'field_tc_cols', 'label' => 'Колонки', 'name' => 'columns', 'type' => 'repeater', 'sub_fields' => [
        ['key' => 'field_tc_text', 'name' => 'text', 'label' => 'Текст', 'type' => 'wysiwyg'],
      ],
      ],
    ],
  ],
],
]

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

ACF дозволяє показувати поле лише за певного значення іншого. Наприклад, показувати текст кнопки CTA лише якщо перемикач увімкнено.

[
    'key' => 'field_show_cta',
    'label' => 'Показати CTA',
    'name' => 'show_cta',
    'type' => 'true_false',
    'ui' => 1,
],
[
    'key' => 'field_cta_text',
    'label' => 'Текст кнопки',
    'name' => 'cta_text',
    'type' => 'text',
    'conditional_logic' => [
        [
            [
                'field' => 'field_show_cta',
                'operator' => '==',
                'value' => '1',
            ],
        ],
    ],
],

Синхронізація через JSON

ACF PRO автоматично зберігає групи полів у файли /acf-json/*.json при зміні через адмінку. Ми комітимо ці файли в Git, а на іншому оточенні натискаємо Sync. Для автоматизації використовуємо acf_sync_field_groups() у муст-плагіні.

Типові помилки та як їх уникнути

• Порожні поля після збереження — часто через відсутність перевірки get_field(): завжди використовуйте get_field('name', $post_id) ?: 'default'.
• Забуті поля в шаблоні — перевіряйте через have_rows() або get_field() з fallback.
• Некоректний тип даних — ACF не валідує автоматично, використовуйте esc_* функції.

Що входить у роботу під ключ

• Аудит поточних мета-полів та типів записів.
• Проектування структури ACF-полів під ваші завдання.
• Програмна реєстрація всіх груп полів у functions.php або окремому плагіні.
• Налаштування repeater, flexible content, умовної логіки, опцій-сторінок.
• Створення шаблонів виведення для фронтенду.
• Експорт конфігурації в JSON та налаштування синхронізації.
• Документація по полях та їх використанню.
• Тестування продуктивності та оптимізація запитів при необхідності.
• Навчання редакторів (базове).

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

1. Аналіз. Вивчаємо типи контенту, поточні мета-поля та потреби редактора.
2. Проектування. Створюємо макет груп полів: типи, зв'язки, умовні відображення.
3. Реалізація. Кодуємо реєстрацію полів та виведення. Використовуємо PHP 8.x, Composer, сучасні практики.
4. Тестування. Перевіряємо всі сценарії: створення, редагування, виведення, кешування.
5. Деплой. Синхронізуємо через JSON, передаємо документацію.

Строки: від 3 до 10 робочих днів залежно від складності (кількість полів, вкладеність, кількість типів записів). Вартість розраховується індивідуально. Готові вирішити ваше завдання? Зв'яжіться з нами для розрахунку.

Чому обирають нас

Понад 5 років на ринку веб-розробки. Реалізували понад 50 проектів на WordPress з ACF. Гарантуємо стабільну роботу полів та своєчасне виправлення багів після здачі. Підтримуємо код у порядку — жодних зайвих плагінів. Готові навести лад в адмінці? Зв'яжіться з нами — підберемо оптимальну структуру ACF під ваш проект. Отримати консультацію можна через форму на сайті або в месенджері.