Налаштування кастомних полів ACF: від прототипу до продакшену
Уявіть: редактору потрібно заповнити картку товару з 50 параметрами. Стандартні метабокси змушують його скролити нескінченний список текстових полів. Помилки неминучі: криві дати, биті посилання, переплутані числа. Ми впровадили Advanced Custom Fields з групами полів та вкладеними repeater — швидкість введення зросла в 3 рази, кількість помилок впала до нуля. Редактор отримує зрозумілі форми, а код залишається чистим і підтримуваним. Типовий проект з 10 групами полів потребує 4-6 годин роботи замість 10-15 при ручній реалізації — різниця в 2-3 рази. Замовте налаштування ACF під ключ і прискорте введення контенту.
Проблеми, які вирішуємо за допомогою ACF
- Незручне введення даних. ACF замінює текстові поля на календар, повзунки, випадні списки. Редактор не помиляється у форматах.
- Складність підтримки. Групування полів, умовне відображення та JSON-синхронізація спрощують підтримку коду.
- Гнучкість без програмування. Flexible Content дає редактору можливість збирати сторінку з визначених блоків без знань PHP.
| Критерій | ACF | Ручні мета-бокси |
|---|---|---|
| Час налаштування 10 полів | 2–4 години | 6–8 годин |
| Зручність редактора | Висока (UI типів полів) | Низька (тільки текст) |
| Швидкість виконання запитів | Середня (100+ полів — гальмує) | Залежить від реалізації |
| Швидкість розробки | У 2-3 рази швидше | Повільніше |
Як 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_*функції.
| Тип поля | Середній час завантаження на сторінці (10 полів) | Рекомендації |
|---|---|---|
| Text | 2ms | Без обмежень |
| Image | 50ms (з 5 картинками) | Використовуйте return_format => 'id' та ліниве завантаження |
| Gallery | 100ms (10 картинок) | Кешуйте або виводьте через AJAX |
| Repeater (10 рядків) | 20ms | Використовуйте get_field() замість have_rows() для великих наборів |
| Flexible Content (5 блоків) | 40ms | Групуйте layout та кешуйте результати |
Що входить у роботу під ключ
- Аудит поточних мета-полів та типів записів.
- Проектування структури ACF-полів під ваші завдання.
- Програмна реєстрація всіх груп полів у functions.php або окремому плагіні.
- Налаштування repeater, flexible content, умовної логіки, опцій-сторінок.
- Створення шаблонів виведення для фронтенду.
- Експорт конфігурації в JSON та налаштування синхронізації.
- Документація по полях та їх використанню.
- Тестування продуктивності та оптимізація запитів при необхідності.
- Навчання редакторів (базове).
Процес роботи
- Аналіз. Вивчаємо типи контенту, поточні мета-поля та потреби редактора.
- Проектування. Створюємо макет груп полів: типи, зв'язки, умовні відображення.
- Реалізація. Кодуємо реєстрацію полів та виведення. Використовуємо PHP 8.x, Composer, сучасні практики.
- Тестування. Перевіряємо всі сценарії: створення, редагування, виведення, кешування.
- Деплой. Синхронізуємо через JSON, передаємо документацію.
Строки: від 3 до 10 робочих днів залежно від складності (кількість полів, вкладеність, кількість типів записів). Вартість розраховується індивідуально. Готові вирішити ваше завдання? Зв'яжіться з нами для розрахунку.
Чому обирають нас
Понад 5 років на ринку веб-розробки. Реалізували понад 50 проектів на WordPress з ACF. Гарантуємо стабільну роботу полів та своєчасне виправлення багів після здачі. Підтримуємо код у порядку — жодних зайвих плагінів. Готові навести лад в адмінці? Зв'яжіться з нами — підберемо оптимальну структуру ACF під ваш проект. Отримати консультацію можна через форму на сайті або в месенджері.