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

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

Что такое визуальный композитор и зачем создавать свой

Визуальный композитор — это интерфейс drag-and-drop для создания макетов страниц. Он позволяет добавлять, перемещать и настраивать блоки контента, видеть результат сразу и без знаний программирования. Популярные плагины, такие как WPBakery Page Builder или Elementor, предлагают массу возможностей, но могут быть избыточными, тяжёлыми или не всегда гибкими для нестандартных проектов.

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

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

Основные компоненты собственного визуального композитаора

Любой визуальный композитор состоит из нескольких частей:

• Интерфейс администратора — панель для добавления/удаления/редактирования блоков (обычно в редакторе записи).
• JS-логика drag-and-drop — для перемещения блоков и изменения порядка.
• Сохранение данных — хранение макета в базе (метаполе или в кастомном типе записи).
• Отображение на фронтенде — рендеринг созданного макета с учётом настроек блоков.

Пример ниже демонстрирует минимальную реализацию интерфейса и сохранения данных.

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

Для хранения макета создадим метаполе в записи. Добавим мета-бокс с полем textarea, где будем хранить JSON с описанием блоков.

function wpgenerate_add_custom_metabox() {
    add_meta_box(
        'wpgenerate_page_builder',
        'Визуальный композитор',
        'wpgenerate_render_metabox',
        'post',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'wpgenerate_add_custom_metabox');

function wpgenerate_render_metabox($post) {
    wp_nonce_field('wpgenerate_save_metabox', 'wpgenerate_nonce');
    $content = get_post_meta($post->ID, '_wpgenerate_page_builder_data', true);
    echo '<textarea id="wpgenerate_page_builder_data" name="wpgenerate_page_builder_data" rows="10" style="width:100%;">' . esc_textarea($content) . '</textarea>';
}

Сохранение данных

Обработаем сохранение JSON макета при сохранении записи.

function wpgenerate_save_metabox_data($post_id) {
    if (!isset($_POST['wpgenerate_nonce']) || !wp_verify_nonce($_POST['wpgenerate_nonce'], 'wpgenerate_save_metabox')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (isset($_POST['wpgenerate_page_builder_data'])) {
        $data = wp_unslash($_POST['wpgenerate_page_builder_data']);
        update_post_meta($post_id, '_wpgenerate_page_builder_data', $data);
    }
}
add_action('save_post', 'wpgenerate_save_metabox_data');

Создание простого интерфейса drag-and-drop

Для простоты мы используем библиотеку SortableJS. Она позволяет легко сделать списки с перетаскиванием элементов.

В реальном проекте интерфейс стоит делать в React/Vue или использовать блоки Gutenberg, но для наглядности покажем простой пример с jQuery и SortableJS.

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

Добавим в админку подключение нужных библиотек и наш скрипт.

function wpgenerate_enqueue_admin_scripts($hook) {
    if ('post.php' !== $hook && 'post-new.php' !== $hook) {
        return;
    }
    wp_enqueue_script('sortablejs', 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js', [], '1.15.0', true);
    wp_enqueue_script('wpgenerate-admin-js', plugin_dir_url(__FILE__) . 'admin.js', ['jquery', 'sortablejs'], '1.0', true);
    wp_enqueue_style('wpgenerate-admin-css', plugin_dir_url(__FILE__) . 'admin.css');
}
add_action('admin_enqueue_scripts', 'wpgenerate_enqueue_admin_scripts');

HTML интерфейс

В мета-боксе заменим textarea на более удобный интерфейс:

function wpgenerate_render_metabox($post) {
    wp_nonce_field('wpgenerate_save_metabox', 'wpgenerate_nonce');
    $content = get_post_meta($post->ID, '_wpgenerate_page_builder_data', true);
    $blocks = $content ? json_decode($content, true) : [];
    echo '<div id="wpgenerate_blocks">';
    if ($blocks) {
        foreach ($blocks as $index => $block) {
            echo '<div class="wpgenerate-block" data-index="' . esc_attr($index) . '">';
            echo '<input type="text" class="block-title" value="' . esc_attr($block['title']) . '" placeholder="Заголовок блока" />';
            echo '<textarea class="block-content" placeholder="Содержимое блока">' . esc_textarea($block['content']) . '</textarea>';
            echo '<button class="remove-block">Удалить</button>';
            echo '</div>';
        }
    }
    echo '</div>';
    echo '<button id="wpgenerate_add_block" type="button">Добавить блок</button>';
    echo '<input type="hidden" id="wpgenerate_page_builder_data" name="wpgenerate_page_builder_data" value="' . esc_attr($content) . '" />';
}

JavaScript логика (admin.js)

Ниже пример простого скрипта для добавления, удаления и сортировки блоков, а также сохранения в скрытое поле JSON.

jQuery(document).ready(function($) {
    var container = $('#wpgenerate_blocks');

    function updateData() {
        var blocks = [];
        container.find('.wpgenerate-block').each(function() {
            var title = $(this).find('.block-title').val();
            var content = $(this).find('.block-content').val();
            blocks.push({ title: title, content: content });
        });
        $('#wpgenerate_page_builder_data').val(JSON.stringify(blocks));
    }

    $('#wpgenerate_add_block').on('click', function() {
        var index = container.find('.wpgenerate-block').length;
        var blockHtml = '
            <div class="wpgenerate-block" data-index="' + index + '">
                <input type="text" class="block-title" placeholder="Заголовок блока" />
                <textarea class="block-content" placeholder="Содержимое блока"></textarea>
                <button class="remove-block" type="button">Удалить</button>
            </div>'
        ;
        container.append(blockHtml);
        updateData();
    });

    container.on('click', '.remove-block', function() {
        $(this).closest('.wpgenerate-block').remove();
        updateData();
    });

    container.on('input', '.block-title, .block-content', function() {
        updateData();
    });

    // Инициализация SortableJS
    new Sortable(container[0], {
        animation: 150,
        onEnd: function() {
            updateData();
        }
    });

    // Инициализация данных при загрузке
    updateData();
});

Вывод макета на фронтенде

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

function wpgenerate_render_page_builder_content($post_id) {
    $data = get_post_meta($post_id, '_wpgenerate_page_builder_data', true);
    if (!$data) {
        return;
    }
    $blocks = json_decode($data, true);
    if (!$blocks) {
        return;
    }
    echo '<div class="wpgenerate-page-builder">';
    foreach ($blocks as $block) {
        echo '<section class="wpgenerate-block-section">';
        if (!empty($block['title'])) {
            echo '<h2>' . esc_html($block['title']) . '</h2>';
        }
        echo wp_kses_post(wpautop($block['content']));
        echo '</section>';
    }
    echo '</div>';
}

Вызовите эту функцию в нужном шаблоне (например, в single.php) после the_content() или вместо него.

Расширение функционала визуального композитаора

Добавление разных типов блоков

Вместо простого текста можно добавить блоки с разными типами контента: изображения, галереи, видео, слайдеры и т.д. Для этого расширьте структуру блока, добавьте выбор типа блока и соответствующие поля настройки. Например, блок с картинкой может иметь поле для загрузки изображения через wp.media.

Использование Gutenberg как визуального композитаора

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

Оптимизация и безопасность

При работе с пользовательскими данными важно фильтровать и валидировать контент, чтобы избежать XSS-уязвимостей. Для вывода используйте wp_kses_post() или собственные правила фильтрации. Также стоит добавить проверку прав пользователя при сохранении и выводе данных.

Альтернативные плагины для кастомизации визуального редактирования

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

• Advanced Custom Fields (ACF) Pro с Flexible Content — позволяет создавать настраиваемые блоки и макеты.
• Carbon Fields — лёгкий и удобный инструмент для создания кастомных полей и метабоксов.
• Toolset — мощный набор инструментов для создания сложных сайтов без программирования.

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

Выводы по созданию собственного визуального композитаора WordPress

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

В данной статье мы рассмотрели базовый пример реализации: хранение макета в JSON, простой drag-and-drop интерфейс на базе SortableJS и вывод на фронтенде. Для продвинутых решений стоит изучить создание Gutenberg-блоков или расширение популярных плагинов.