Как создать визуальный редактор шорткодов в WordPress

Шорткоды в WordPress — мощный инструмент для вставки динамического контента в записи и страницы. Однако стандартный редактор шорткодов — это просто текстовое поле, где пользователю нужно вручную прописывать параметры. Визуальный редактор шорткодов значительно упрощает работу, делая настройку параметров удобной и наглядной. В этой статье мы подробно разберем, как создать визуальный редактор шорткодов в WordPress с использованием JavaScript и PHP, а также добавим примеры кода и рекомендации по интеграции с Gutenberg.

Почему важен визуальный редактор шорткодов в WordPress

Когда пользователи работают с шорткодами, они часто сталкиваются с ошибками из-за неправильного синтаксиса или незнания параметров. Визуальный редактор позволяет:

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

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

Создание базового визуального редактора для шорткодов на PHP и JavaScript

Начнем с создания простого шорткода и интерфейса для его визуального редактирования. Рассмотрим пример шорткода [wpblock_alert type="success" message="Текст сообщения"].

Регистрация шорткода в WordPress

function wpblock_register_alert_shortcode($atts) {
    $atts = shortcode_atts(array(
        'type' => 'info',
        'message' => 'Сообщение по умолчанию',
    ), $atts, 'wpblock_alert');

    $type_class = sanitize_html_class($atts['type']);
    $message = esc_html($atts['message']);

    return '<div class="wpblock-alert wpblock-alert-' . $type_class . '">' . $message . '</div>';
}
add_shortcode('wpblock_alert', 'wpblock_register_alert_shortcode');

Этот код создает простой блок с сообщением и разными типами (info, success, warning).

Создаем визуальный интерфейс для вставки шорткода

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

function wpblock_enqueue_admin_scripts() {
    wp_enqueue_script('wpblock-shortcode-editor', plugins_url('shortcode-editor.js', __FILE__), array('jquery'), '1.0', true);
    wp_localize_script('wpblock-shortcode-editor', 'wpblockData', array(
        'pluginUrl' => plugin_dir_url(__FILE__),
    ));
}
add_action('admin_enqueue_scripts', 'wpblock_enqueue_admin_scripts');

В файле shortcode-editor.js добавим код для открытия модального окна и формирования шорткода по параметрам:

jQuery(document).ready(function($) {
    $('#insert-wpblock-alert').on('click', function(e) {
        e.preventDefault();
        var type = $('#wpblock-alert-type').val();
        var message = $('#wpblock-alert-message').val();
        var shortcode = '[wpblock_alert type="' + type + '" message="' + message + '"]';
        window.send_to_editor(shortcode);
    });
});

Интеграция визуального редактора шорткодов в Gutenberg

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

Создаем Gutenberg блок для шорткода

Используем @wordpress/scripts и React для создания блока с двумя полями — выбор типа и ввод сообщения.

import { registerBlockType } from '@wordpress/blocks';
import { TextControl, SelectControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

registerBlockType('wpblock/alert', {
    title: 'WPBlock Alert',
    icon: 'warning',
    category: 'widgets',
    attributes: {
        type: {
            type: 'string',
            default: 'info',
        },
        message: {
            type: 'string',
            default: '',
        },
    },
    edit({ attributes, setAttributes }) {
        return (
            <div className={`wpblock-alert wpblock-alert-${attributes.type}`}>
                <SelectControl
                    label="Тип сообщения"
                    value={attributes.type}
                    options={[
                        { label: 'Информация', value: 'info' },
                        { label: 'Успех', value: 'success' },
                        { label: 'Предупреждение', value: 'warning' },
                    ]}
                    onChange={(type) => setAttributes({ type })}
                />
                <TextControl
                    label="Текст сообщения"
                    value={attributes.message}
                    onChange={(message) => setAttributes({ message })}
                />
            </div>
        );
    },
    save({ attributes }) {
        return `[wpblock_alert type="${attributes.type}" message="${attributes.message}"]`;
    },
});

Такой блок позволит вставлять и редактировать шорткод визуально, а в контент попадет именно шорткод.

Использование готовых плагинов для визуального редактирования шорткодов

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

• Shortcode UI — добавляет интерфейс для создания и редактирования шорткодов в админке.
• Clearfy Pro — оптимизирует и расширяет возможности шорткодов и визуальных элементов.

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

Советы и лучшие практики при создании визуальных редакторов шорткодов

Валидация и безопасность

Обязательно фильтруйте и экранируйте все вводимые пользователем данные, чтобы избежать XSS и других уязвимостей. Используйте функции esc_html(), sanitize_text_field() и подобные.

Удобство пользователя

Делайте формы максимально понятными, добавляйте подсказки и примеры. Чем проще интерфейс, тем меньше ошибок и вопросов от пользователей.

Поддержка и расширяемость

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

Заключение

Создание визуального редактора шорткодов в WordPress — задача, которая значительно повышает удобство работы с контентом. В статье мы рассмотрели как базовые подходы на PHP и JavaScript, так и интеграцию с Gutenberg, а также готовые решения. Используйте приведенные примеры и рекомендации для улучшения вашего сайта на WordPress.