Как создать настройку в админ-панели WordPress с применением Metabox

Работа с пользовательскими настройками в админ-панели WordPress часто требует создания удобных и безопасных интерфейсов для ввода данных. В этой статье мы подробно разберём, как создать собственный метабокс (Metabox) для настроек, который будет хранить информацию в базе данных и обеспечит удобный интерфейс для администратора.

Что такое Metabox и зачем он нужен для настроек

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

Преимущества использования Metabox для настроек:

• Интуитивно понятный интерфейс.
• Гибкость в добавлении любых типов полей (текст, чекбоксы, селекты и т.д.).
• Возможность легко сохранять и валидировать данные.

Обзор необходимых хуков для создания метабокса

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

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

Пример создания метабокса с настройками

Рассмотрим пример создания метабокса с двумя полями: текстовым и чекбоксом. Для начала регистрируем метабокс и выводим поля:

function wpcoder_add_custom_metabox() {
    add_meta_box(
        'wpcoder_settings_metabox',
        'Настройки WPCoder',
        'wpcoder_render_metabox',
        'post', // можно заменить на свой тип записи
        'normal',
        'default'
    );
}
add_action('add_meta_boxes', 'wpcoder_add_custom_metabox');

function wpcoder_render_metabox($post) {
    // Безопасность
    wp_nonce_field('wpcoder_save_metabox_nonce', 'wpcoder_metabox_nonce');

    $text_value = get_post_meta($post->ID, '_wpcoder_text_field', true);
    $checkbox_value = get_post_meta($post->ID, '_wpcoder_checkbox_field', true);

    echo '<label for="wpcoder_text_field">Текстовое поле:</label><br>';
    echo '<input type="text" id="wpcoder_text_field" name="wpcoder_text_field" value="' . esc_attr($text_value) . '" style="width:100%;"><br><br>';

    $checked = $checkbox_value ? 'checked' : '';
    echo '<label><input type="checkbox" name="wpcoder_checkbox_field" ' . $checked . '> Включить опцию</label>';
}

Объяснение кода

Мы создаём метабокс с ID wpcoder_settings_metabox, который выводится на странице редактирования поста. В функции вывода метабокса мы используем wp_nonce_field для безопасности и выводим два поля: текстовое и чекбокс.

Сохранение данных метабокса с проверками

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

function wpcoder_save_metabox_data($post_id) {
    // Проверка nonce
    if (!isset($_POST['wpcoder_metabox_nonce']) || !wp_verify_nonce($_POST['wpcoder_metabox_nonce'], 'wpcoder_save_metabox_nonce')) {
        return;
    }

    // Проверка автосохранения
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }

    // Проверка прав пользователя
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }

    // Сохранение текстового поля
    if (isset($_POST['wpcoder_text_field'])) {
        $text = sanitize_text_field($_POST['wpcoder_text_field']);
        update_post_meta($post_id, '_wpcoder_text_field', $text);
    }

    // Сохранение чекбокса
    $checkbox = isset($_POST['wpcoder_checkbox_field']) ? 1 : 0;
    update_post_meta($post_id, '_wpcoder_checkbox_field', $checkbox);
}
add_action('save_post', 'wpcoder_save_metabox_data');

Здесь мы тщательно проверяем nonce, права пользователя и избегаем сохранения при автосохранении. Затем очищаем входные данные и сохраняем их в метаполя.

Как использовать настройки из метабокса в теме или плагине

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

$text = get_post_meta(get_the_ID(), '_wpcoder_text_field', true);
echo esc_html($text);

Для чекбокса аналогично:

$enabled = get_post_meta(get_the_ID(), '_wpcoder_checkbox_field', true);
if ($enabled) {
    echo 'Опция включена';
}

Практические советы

• Для более сложных форм рассмотрите использование библиотеки Clearfy Pro — она облегчает создание и управление настройками.
• Если нужно создавать настройки, не привязанные к постам, лучше сделать отдельную страницу в админке через add_menu_page и сохранять данные в options.
• Всегда фильтруйте и валидируйте данные, чтобы избежать проблем с безопасностью.

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

Вы можете расширять метабокс, добавляя разные типы полей, такие как селекты, радиокнопки, upload-файлы. Для удобства работы с формами рекомендую смотреть на плагины и библиотеки, которые упрощают работу с настройками.

Пример добавления селекта:

function wpcoder_render_metabox($post) {
    wp_nonce_field('wpcoder_save_metabox_nonce', 'wpcoder_metabox_nonce');

    $select_value = get_post_meta($post->ID, '_wpcoder_select_field', true);

    echo '<label for="wpcoder_select_field">Выберите опцию:</label><br>';
    echo '<select id="wpcoder_select_field" name="wpcoder_select_field">';
    $options = ['option1' => 'Опция 1', 'option2' => 'Опция 2', 'option3' => 'Опция 3'];
    foreach ($options as $key => $label) {
        $selected = ($select_value === $key) ? 'selected' : '';
        echo '<option value="' . esc_attr($key) . '" ' . $selected . '>' . esc_html($label) . '</option>';
    }
    echo '</select>';
}

И не забудьте добавить обработку сохранения аналогично предыдущим полям.