Как использовать Shortcode UI в WordPress для создания удобных форм

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

Что такое Shortcode UI и зачем он нужен

Shortcode UI — это JavaScript-библиотека, которая помогает разработчикам создавать визуальные элементы управления для шорткодов. Благодаря ей пользователи сайта могут настраивать параметры шорткодов через удобные формы, выпадающие списки, переключатели и другие элементы, не редактируя вручную атрибуты в коде.

Основные преимущества использования Shortcode UI:

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

Для интеграции Shortcode UI в свой плагин или тему можно использовать готовые решения или реализовать собственный интерфейс на базе React.

Установка и подключение Shortcode UI в WordPress

Для начала необходимо подключить библиотеку Shortcode UI и её зависимости. Обычно это делается через функцию wp_enqueue_script. Вот пример подключения в вашем плагине или functions.php темы:

function wpplugin_enqueue_shortcode_ui_assets() {
    // Подключаем сам Shortcode UI
    wp_enqueue_script('shortcode-ui', 'https://cdn.jsdelivr.net/npm/shortcode-ui@2.0.0/dist/shortcode-ui.min.js', ['wp-element', 'wp-components'], '2.0.0', true);
    
    // Подключаем стили
    wp_enqueue_style('shortcode-ui-style', 'https://cdn.jsdelivr.net/npm/shortcode-ui@2.0.0/dist/shortcode-ui.min.css', [], '2.0.0');
}
add_action('admin_enqueue_scripts', 'wpplugin_enqueue_shortcode_ui_assets');

Обратите внимание, что для работы Shortcode UI требуется React и WordPress компоненты, которые уже есть в админке WordPress. Это упрощает интеграцию.

Пример регистрации шорткода с UI

Далее создадим пример шорткода с визуальной формой настройки. В этом примере мы сделаем шорткод [wpplugin_button] с параметрами текста и цвета кнопки.

function wpplugin_register_button_shortcode() {
    // Регистрируем шорткод
    add_shortcode('wpplugin_button', 'wpplugin_render_button_shortcode');

    // Регистрируем UI для шорткода
    if (function_exists('shortcode_ui_register_for_shortcode')) {
        shortcode_ui_register_for_shortcode('wpplugin_button', [
            'label' => 'Кнопка WPPlugin',
            'listItemImage' => 'dashicons-admin-links',
            'attrs' => [
                [
                    'label' => 'Текст кнопки',
                    'attr' => 'text',
                    'type' => 'text',
                    'default' => 'Нажми меня',
                ],
                [
                    'label' => 'Цвет кнопки',
                    'attr' => 'color',
                    'type' => 'select',
                    'options' => [
                        'red' => 'Красный',
                        'green' => 'Зеленый',
                        'blue' => 'Синий',
                    ],
                    'default' => 'green',
                ],
            ],
        ]);
    }
}
add_action('init', 'wpplugin_register_button_shortcode');

function wpplugin_render_button_shortcode($atts) {
    $atts = shortcode_atts([
        'text' => 'Нажми меня',
        'color' => 'green',
    ], $atts, 'wpplugin_button');

    $color_styles = [
        'red' => 'background-color:#e74c3c;color:#fff;',
        'green' => 'background-color:#2ecc71;color:#fff;',
        'blue' => 'background-color:#3498db;color:#fff;',
    ];

    $style = isset($color_styles[$atts['color']]) ? $color_styles[$atts['color']] : '';

    return '<button style="padding:10px 20px;border:none;border-radius:4px;cursor:pointer;' . esc_attr($style) . '">' . esc_html($atts['text']) . '</button>';
}

Этот код создаст шорткод [wpplugin_button text="Текст" color="red|green|blue"], а в редакторе вы увидите удобную форму выбора параметров.

Как использовать Shortcode UI с Gutenberg блоками

Хотя Gutenberg предлагает собственный интерфейс для блоков, иногда удобно добавить шорткод с UI в классический редактор или в блок "Шорткод". Для интеграции Shortcode UI в блок Gutenberg можно обернуть UI в React компонент. Это позволяет обеспечить единый пользовательский опыт при создании контента.

Для этого нужно создать React компонент, который рендерит интерфейс Shortcode UI и при изменении параметров обновляет атрибуты блока. Пример такого подхода выходит за рамки данной статьи, но вы можете изучить примеры на GitHub репозитории проекта Shortcake UI.

Полезные плагины с поддержкой Shortcode UI

Если вы не хотите писать собственный код, обратите внимание на плагины, которые уже используют Shortcode UI и расширяют функционал:

Clearfy Pro — оптимизация и расширение возможностей, включая удобные шорткоды и UI;
WPRemark — плагин для отзывов с удобным визуальным редактированием;
WPGPT — интеграция ИИ с удобными шорткодами и интерфейсами.

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

При внедрении Shortcode UI учитывайте несколько важных моментов:

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

Также рекомендуем регулярно обновлять зависимости и следить за совместимостью с новой версией WordPress.

Пример расширения шорткода с валидацией

Добавим проверку допустимых цветов и выводим сообщение при ошибке:

function wpplugin_render_button_shortcode_validated($atts) {
    $atts = shortcode_atts([
        'text' => 'Нажми меня',
        'color' => 'green',
    ], $atts, 'wpplugin_button');

    $allowed_colors = ['red', 'green', 'blue'];
    if (!in_array($atts['color'], $allowed_colors, true)) {
        return '<div style="color:red;">Ошибка: неверный цвет кнопки</div>';
    }

    $color_styles = [
        'red' => 'background-color:#e74c3c;color:#fff;',
        'green' => 'background-color:#2ecc71;color:#fff;',
        'blue' => 'background-color:#3498db;color:#fff;',
    ];

    $style = $color_styles[$atts['color']];

    return '<button style="padding:10px 20px;border:none;border-radius:4px;cursor:pointer;' . esc_attr($style) . '">' . esc_html($atts['text']) . '</button>';
}

Используйте эту функцию вместо предыдущей для повышения надежности.

Заключение

Shortcode UI — мощный инструмент для создания удобных и понятных форм настройки шорткодов в WordPress. Он улучшает UX для контент-менеджеров и снижает количество ошибок при вводе параметров. В сочетании с примерами кода и проверенными плагинами вы сможете быстро реализовать гибкие решения под свои задачи.

Использование Shortcode UI в WordPress для создания удобных форм