Как использовать Metabox в WordPress для создания настроек

Автор: Людмила Лебедева | Опубликовано: 11.12.2025

Metabox — это мощный инструмент для добавления дополнительных полей и настроек в админ-панель WordPress. Часто возникает задача создать удобный интерфейс для редактирования метаданных записи, страницы или пользовательских типов записей. В этой статье мы подробно разберем, как создавать и настраивать metabox в WordPress с помощью собственного кода, а также приведем примеры использования популярных плагинов для упрощения задачи.

Что такое Metabox и зачем он нужен в WordPress

Metabox — это блок с дополнительными полями, который отображается в редакторе записи или страницы в админке WordPress. С их помощью можно добавлять кастомные настройки, хранить дополнительную информацию и расширять функционал сайта, не затрагивая основной контент.

Например, можно создать metabox для выбора цвета фона конкретной записи, загрузки дополнительного изображения, ввода короткой заметки или SEO-настроек. Это удобно, так как позволяет структурировать данные и легко управлять ими.

Metabox используют для:

создания дополнительных полей — текстовых, чекбоксов, селекторов и т. д.;
хранения пользовательских данных, не влияющих на содержимое статьи;
управления настройками для кастомных типов записей;
создания интерфейса для сложных настроек плагинов и тем.

Как создать собственный Metabox в WordPress через код

Для создания metabox вручную нужно использовать хуки add_meta_boxes и функцию add_meta_box(). Ниже приведен пример, как добавить простой metabox с текстовым полем:

function wpcoder_add_custom_metabox() {
    add_meta_box(
        'wpcoder_custom_metabox', // ID метабокса
        'Дополнительные настройки', // Заголовок
        'wpcoder_render_custom_metabox', // Функция отображения
        'post', // Тип записи (post, page, custom_post_type)
        'normal', // Контекст (normal, side, advanced)
        'default' // Приоритет
    );
}
add_action('add_meta_boxes', 'wpcoder_add_custom_metabox');

function wpcoder_render_custom_metabox($post) {
    // Получаем сохраненное значение метаполя
    $value = get_post_meta($post->ID, '_wpcoder_custom_field', true);
    
    // Безопасный вывод поля
    echo '<label for="wpcoder_custom_field">Введите дополнительную информацию:</label><br>';
    echo '<input type="text" id="wpcoder_custom_field" name="wpcoder_custom_field" value="' . esc_attr($value) . '" style="width:100%;" />';
}

// Сохраняем данные при сохранении записи
function wpcoder_save_custom_metabox_data($post_id) {
    // Проверяем nonce, права и автосохранение
    if (!isset($_POST['wpcoder_custom_field'])) {
        return;
    }
    
    $new_value = sanitize_text_field($_POST['wpcoder_custom_field']);
    update_post_meta($post_id, '_wpcoder_custom_field', $new_value);
}
add_action('save_post', 'wpcoder_save_custom_metabox_data');

В этом коде мы регистрируем новый metabox с текстовым полем для записей типа post. При сохранении записи значение поля сохраняется в метаполе с ключом _wpcoder_custom_field. Этот простой пример можно расширить для любых типов полей и логики.

Расширяем функционал: добавление нескольких полей разных типов

Одного текстового поля часто недостаточно. Рассмотрим, как добавить несколько полей: текст, textarea и чекбокс.

function wpcoder_render_extended_metabox($post) {
    $text = get_post_meta($post->ID, '_wpcoder_text', true);
    $textarea = get_post_meta($post->ID, '_wpcoder_textarea', true);
    $checkbox = get_post_meta($post->ID, '_wpcoder_checkbox', true);
    
    echo '<label for="wpcoder_text">Текстовое поле:</label><br>';
    echo '<input type="text" id="wpcoder_text" name="wpcoder_text" value="' . esc_attr($text) . '" style="width:100%;" /><br><br>';

    echo '<label for="wpcoder_textarea">Текстовая область:</label><br>';
    echo '<textarea id="wpcoder_textarea" name="wpcoder_textarea" rows="4" style="width:100%;">' . esc_textarea($textarea) . '</textarea><br><br>';

    echo '<label for="wpcoder_checkbox"><input type="checkbox" id="wpcoder_checkbox" name="wpcoder_checkbox" value="yes" ' . checked($checkbox, 'yes', false) . ' /> Включить опцию</label>';
}

function wpcoder_save_extended_metabox_data($post_id) {
    if (isset($_POST['wpcoder_text'])) {
        update_post_meta($post_id, '_wpcoder_text', sanitize_text_field($_POST['wpcoder_text']));
    }
    if (isset($_POST['wpcoder_textarea'])) {
        update_post_meta($post_id, '_wpcoder_textarea', sanitize_textarea_field($_POST['wpcoder_textarea']));
    }
    $checkbox_value = (isset($_POST['wpcoder_checkbox']) && $_POST['wpcoder_checkbox'] === 'yes') ? 'yes' : 'no';
    update_post_meta($post_id, '_wpcoder_checkbox', $checkbox_value);
}
add_action('save_post', 'wpcoder_save_extended_metabox_data');

Такой подход позволяет гибко настраивать метабоксы с разными типами полей и удобным интерфейсом.

Использование плагина Meta Box для упрощения работы с Metabox

Если хочется быстро и без лишнего кода создавать сложные метабоксы, стоит обратить внимание на популярный плагин Meta Box. Он поддерживает множество типов полей, условия отображения, интеграцию с WPML и Gutenberg.

Пример создания метабокса с текстовым полем через Meta Box API:

add_filter('rwmb_meta_boxes', 'wpcoder_register_mb');
function wpcoder_register_mb($meta_boxes) {
    $meta_boxes[] = [
        'title'      => 'Дополнительные настройки',
        'post_types' => ['post'],
        'fields'     => [
            [
                'id'   => 'wpcoder_text',
                'name' => 'Текстовое поле',
                'type' => 'text',
            ],
            [
                'id'   => 'wpcoder_checkbox',
                'name' => 'Опция',
                'type' => 'checkbox',
            ],
        ],
    ];
    return $meta_boxes;
}

Плагин Meta Box позволяет сосредоточиться на логике и дизайне, а не на технических деталях сохранения и отображения полей.

Пример использования Metabox для настройки темы Root

Для темы Root можно добавить metabox для выбора цветовой схемы конкретной записи или страницы. Это даст возможность гибко управлять внешним видом без глобальных настроек.

Пример простого metabox для выбора цвета:

function wpcoder_root_color_metabox() {
    add_meta_box('root_color_scheme', 'Цветовая схема', 'wpcoder_root_color_render', ['post', 'page'], 'side');
}
add_action('add_meta_boxes', 'wpcoder_root_color_metabox');

function wpcoder_root_color_render($post) {
    $color = get_post_meta($post->ID, '_root_color_scheme', true);
    $options = ['default' => 'По умолчанию', 'dark' => 'Темная', 'light' => 'Светлая'];

    echo '<select name="root_color_scheme" id="root_color_scheme">';
    foreach ($options as $key => $label) {
        printf('<option value="%s" %s>%s</option>', esc_attr($key), selected($color, $key, false), esc_html($label));
    }
    echo '</select>';
}

function wpcoder_root_color_save($post_id) {
    if (isset($_POST['root_color_scheme'])) {
        update_post_meta($post_id, '_root_color_scheme', sanitize_text_field($_POST['root_color_scheme']));
    }
}
add_action('save_post', 'wpcoder_root_color_save');

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

Советы по безопасности и производительности при работе с Metabox

При создании metabox важно помнить следующие моменты:

Всегда проверяйте права пользователя перед сохранением данных (например, current_user_can( 'edit_post', $post_id )).
Используйте nonce-поля для защиты от CSRF-атак.
Сохраняйте данные только при необходимости, избегайте избыточных обновлений метаданных.
Оптимизируйте код, чтобы не нагружать админку лишними запросами и скриптами.
Для сложных интерфейсов используйте проверенные библиотеки и плагины, например, Meta Box, Advanced Custom Fields (ACF), чтобы ускорить разработку и повысить качество.