Розробка кастомних полів через Meta Box для WordPress

Розробка користувацьких полів через Meta Box для WordPress

Meta Box — альтернатива ACF для створення користувацьких полів у WordPress. Основна перевага перед ACF: безплатна версія повнофункціональна для більшості завдань, усі розширення (Relationships, Group, Frontend Submission) купуються окремо і дешевше, а API побудований через PHP без залежності від GUI — зручно для code-first підходу. Настройка групи полів займає від кількох годин до 1 дня.

Реєстрація поля через 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, // 6/12 = половина ширини
            ],
            [
                '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, // видно лише в /wp-admin
            ],
            [
                'id'   => 'project_description',
                'name' => 'Внутрішній опис',
                'type' => 'textarea',
                'rows' => 4,
                'desc' => 'Не відображається на сайті, лише для внутрішнього використання',
            ],
        ],
    ];

    return $meta_boxes;
});

Поля зображень і файлів

[
    '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,
],

Отримання на фронтенді:

// Одне зображення
$cover = rwmb_meta('project_cover', ['size' => 'large'], $post_id);
if ($cover) {
    echo '<img src="' . esc_url($cover[0]['url']) . '" alt="' . esc_attr($cover[0]['alt']) . '">';
}

// Галерея
$gallery = rwmb_meta('project_gallery', ['size' => 'medium'], $post_id);
foreach ($gallery as $image) {
    echo '<img src="' . esc_url($image['url']) . '" loading="lazy">';
}

Group — вложені поля

Meta Box 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);
foreach ($team as $member) {
    echo '<div class="team-member">';
    if (!empty($member['member_photo'])) {
        $photos = array_values($member['member_photo']);
        echo '<img src="' . esc_url($photos[0]['url']) . '">';
    }
    echo '<strong>' . esc_html($member['member_name']) . '</strong>';
    echo '<span>' . esc_html($member['member_role']) . '</span>';
    echo '</div>';
}

Умовне відображення через 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 підтримує метабокси не лише для записів:

// Поле для терміну таксономії
$meta_boxes[] = [
    'id'         => 'category_color',
    'title'      => 'Дополнітельно',
    'taxonomies' => ['project_category'],
    'fields'     => [
        ['id' => 'color', 'name' => 'Колір', 'type' => 'color'],
        ['id' => 'icon',  'name' => 'Іконка SVG', 'type' => 'textarea', 'rows' => 3],
    ],
];

// Сторінка налаштувань
$meta_boxes[] = [
    'id'             => 'site_settings',
    'title'          => 'Налаштування сайту',
    'settings_pages' => ['site-settings'],
    'fields'         => [
        ['id' => 'company_phone', 'name' => 'Телефон', 'type' => 'text'],
        ['id' => 'company_email', 'name' => 'Email',   'type' => 'email'],
        ['id' => 'company_logo',  'name' => 'Логотип', 'type' => 'image'],
    ],
];

Meta Box vs ACF: коли що вибирати

Meta Box переважніший, коли проект будується code-first і потребує мінімальної залежності від платного ядра. ACF PRO доцільний, якщо команда звикла до його GUI-конструктора і Flexible Content. Продуктивність обох плагінів порівняна: обидва використовують wp_postmeta, обидва деградують при тисячах записів з десятками полів.

Для високонавантажених проектів з великими обсягами даних обидві бібліотеки варто замінювати користувацькими таблицями з оптимізованими індексами.