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

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

Что такое мета-блоки и зачем создавать собственные

Мета-блоки — это пользовательские интерфейсные элементы в админ-панели WordPress, которые позволяют добавлять и редактировать метаданные записи (custom fields). Стандартные мета-боксы ограничены по дизайну и функционалу, поэтому кастомные решения позволяют:

Создавать удобный, интуитивный интерфейс для ввода данных;
Внедрять сложные структуры с валидацией и динамическим поведением;
Интегрировать свои бизнес-процессы и улучшать UX редактора;
Улучшать производительность за счёт загрузки только нужных скриптов и стилей.

На практике кастомные мета-блоки востребованы в проектах с большим количеством нестандартных полей, например, в каталогах, портфолио, интернет-магазинах.

Создание мета-блока с помощью Gutenberg Block API

Современный способ — создать блок для Gutenberg, который будет работать как мета-блок. Это позволяет использовать React, JSX и современные стандарты.

Регистрация мета-поля и блока

Для начала зарегистрируем мета-поле через PHP и объявим его доступным для REST API:

function wpaction_register_meta() {
    register_post_meta('post', 'wpaction_custom_meta', [
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
        'auth_callback' => function() {
            return current_user_can('edit_posts');
        },
    ]);
}
add_action('init', 'wpaction_register_meta');

Далее создадим JavaScript файл для блока, который подключим в редакторе:

const { registerBlockType } = wp.blocks;
const { TextControl } = wp.components;
const { useEntityProp } = wp.coreData;

registerBlockType('wpaction/custom-meta-block', {
    title: 'Custom Meta Block',
    icon: 'admin-post',
    category: 'widgets',

    edit() {
        const [ meta, setMeta ] = useEntityProp('postType', 'post', 'wpaction_custom_meta');

        return (
            <TextControl
                label="Custom Meta"
                value={meta}
                onChange={(value) => setMeta(value)}
            />
        );
    },

    save() {
        return null; // Данные сохраняются через REST API
    },
});

Этот блок будет отображать поле ввода, связанное с мета-полем записи.

Подключение скриптов и стилей

В functions.php добавляем регистрацию и подключение скрипта блока:

function wpaction_enqueue_block() {
    wp_enqueue_script(
        'wpaction-custom-meta-block',
        get_template_directory_uri() . '/js/custom-meta-block.js',
        ['wp-blocks', 'wp-element', 'wp-editor', 'wp-components', 'wp-data'],
        filemtime(get_template_directory() . '/js/custom-meta-block.js')
    );
}
add_action('enqueue_block_editor_assets', 'wpaction_enqueue_block');

Создание классического мета-бокса с кастомным HTML и JS

Если проект использует классический редактор или нужно быстро добавить мета-бокс без Gutenberg, используем add_meta_box.

Регистрация и вывод мета-бокса

function wpaction_add_custom_meta_box() {
    add_meta_box(
        'wpaction_meta_box',
        'Custom Meta Box',
        'wpaction_render_meta_box',
        'post',
        'normal',
        'default'
    );
}
add_action('add_meta_boxes', 'wpaction_add_custom_meta_box');

function wpaction_render_meta_box($post) {
    wp_nonce_field('wpaction_save_meta_box', 'wpaction_meta_box_nonce');
    $value = get_post_meta($post->ID, '_wpaction_custom_meta', true);
    echo '<label for="wpaction_custom_field">Custom Field:</label>';
    echo '<input type="text" id="wpaction_custom_field" name="wpaction_custom_field" value="' . esc_attr($value) . '" size="25" />';
}

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

function wpaction_save_meta_box_data($post_id) {
    if (!isset($_POST['wpaction_meta_box_nonce']) || !wp_verify_nonce($_POST['wpaction_meta_box_nonce'], 'wpaction_save_meta_box')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (!current_user_can('edit_post', $post_id)) {
        return;
    }
    if (isset($_POST['wpaction_custom_field'])) {
        $data = sanitize_text_field($_POST['wpaction_custom_field']);
        update_post_meta($post_id, '_wpaction_custom_meta', $data);
    }
}
add_action('save_post', 'wpaction_save_meta_box_data');

Расширение мета-блока: добавление валидации и динамики

Для повышения качества UX стоит добавить валидацию вводимых данных и динамическое поведение мета-блока.

Пример валидации в Gutenberg-блоке

В блоке можно добавить проверку длины строки и выводить предупреждение:

edit() {
    const [ meta, setMeta ] = useEntityProp('postType', 'post', 'wpaction_custom_meta');
    const [ error, setError ] = React.useState('');

    function onChange(value) {
        if (value.length > 100) {
            setError('Максимальная длина 100 символов');
        } else {
            setError('');
            setMeta(value);
        }
    }

    return (
        <>
            <TextControl
                label="Custom Meta"
                value={meta}
                onChange={onChange}
                help={error}
                className={error ? 'error' : ''}
            />
        </>
    );
}

Динамическое обновление полей в классическом мета-боксе с помощью JS

Можно подключить скрипты для динамической проверки или изменения значений на лету:

function wpaction_admin_scripts($hook) {
    if ('post.php' !== $hook && 'post-new.php' !== $hook) {
        return;
    }
    wp_enqueue_script('wpaction-meta-box-js', get_template_directory_uri() . '/js/meta-box.js', ['jquery'], null, true);
}
add_action('admin_enqueue_scripts', 'wpaction_admin_scripts');

В файле meta-box.js пример простой проверки:

jQuery(document).ready(function($) {
    $('#wpaction_custom_field').on('input', function() {
        var val = $(this).val();
        if (val.length > 100) {
            alert('Максимальная длина 100 символов');
            $(this).val(val.substring(0, 100));
        }
    });
});

Выводы и лучшие практики

Создание собственного вида мета-блока в WordPress позволяет улучшить интерфейс и повысить удобство работы с метаданными. Используйте Gutenberg Block API для современных проектов с блоковым редактором, а для классики — мета-боксы с кастомным HTML и JS. Обязательно реализуйте валидацию и динамическое поведение для лучшего UX. При необходимости — подключайте проверенные плагины для ускорения разработки.