Налаштування кастомних полів 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 під ваш проект. Отримати консультацію можна через форму на сайті або в месенджері.