В этой статье мы рассмотрим, как разработать собственный визуальный композитор (page builder) для WordPress — инструмент, позволяющий пользователю создавать сложные макеты страниц без знания кода. Несмотря на множество готовых решений, собственный визуальный композитор дает гибкость и позволяет идеально вписаться в уникальные задачи сайта.
Почему стоит создавать собственный визуальный композитор для WordPress
Готовые конструкторы страниц, такие как Elementor, WPBakery или Gutenberg, имеют свои ограничения. Иногда нужно создать что-то более легковесное, с минимальным функционалом, или интегрированное с вашим кастомным темплейтом и плагинами.
Создавая свой визуальный композитор, вы полностью контролируете логику, интерфейс и структуру данных. Это особенно полезно для агентств и фрилансеров, которые хотят предоставить клиентам удобный, но уникальный инструмент.
Кроме того, собственный page builder легче оптимизировать под скорость загрузки и SEO, так как вы создаете только нужный функционал.
Основные компоненты визуального композитора
Любой визуальный конструктор страниц включает несколько ключевых элементов:
- Интерфейс перетаскивания: drag-and-drop для блоков и секций.
- Редактирование контента: возможность изменять текст, изображения, ссылки прямо в визуальном режиме.
- Сохранение данных: хранение структуры страницы в базе данных.
- Отрисовка на фронтенде: вывод готового HTML с нужными стилями.
Мы будем создавать упрощенную версию, демонстрирующую основы реализации.
Создание кастомного типа записи для секций композитора
Первым шагом создадим кастомный тип записи, где будут храниться блоки и секции для композитора. Это позволит использовать стандартный интерфейс WordPress для управления контентом.
<?php
function wplancer_register_composer_section_cpt() {
$labels = array(
'name' => 'Секции композитора',
'singular_name' => 'Секция композитора',
'add_new' => 'Добавить секцию',
'add_new_item' => 'Добавить новую секцию',
'edit_item' => 'Редактировать секцию',
'new_item' => 'Новая секция',
'view_item' => 'Просмотр секции',
'search_items' => 'Поиск секций',
'not_found' => 'Секции не найдены',
'menu_name' => 'Секции композитора'
);
$args = array(
'labels' => $labels,
'public' => false,
'show_ui' => true,
'supports' => array('title', 'editor'),
'capability_type' => 'post',
'hierarchical' => false
);
register_post_type('wplancer_composer_section', $args);
}
add_action('init', 'wplancer_register_composer_section_cpt');
?>Такой тип записи позволит создавать и редактировать отдельные блоки визуального композитора через админ-панель.
Реализация интерфейса перетаскивания с помощью jQuery UI
Для drag-and-drop используем библиотеку jQuery UI, которая уже присутствует в WordPress. Создадим панель с доступными блоками и область для сборки страницы.
Пример HTML для панели и области сборки:
<div id="wplancer-composer-palette">
<div class="wplancer-block" data-type="text">Текстовый блок</div>
<div class="wplancer-block" data-type="image">Изображение</div>
</div>
<div id="wplancer-composer-canvas">
<p>Перетащите сюда блоки для создания страницы</p>
</div>JavaScript для реализации drag-and-drop:
jQuery(document).ready(function($) {
$('.wplancer-block').draggable({
helper: 'clone'
});
$('#wplancer-composer-canvas').droppable({
drop: function(event, ui) {
var type = ui.draggable.data('type');
var blockHtml = '';
if(type === 'text') {
blockHtml = '<div class="wplancer-canvas-block" contenteditable="true">Введите текст...</div>';
} else if(type === 'image') {
blockHtml = '<div class="wplancer-canvas-block"><img src="" alt="" class="wplancer-image-block"/></div>';
}
$(this).append(blockHtml);
}
});
});Так мы даем пользователю возможность собирать страницу из блоков. Для каждого типа блока реализуем свои элементы редактирования.
Сохранение структуры страницы в метаданных поста
Для хранения созданного макета используем мета-поля поста (например, страницы WordPress). Мы сериализуем структуру блоков в JSON и сохраняем в метадате.
Пример кода для сохранения данных при сохранении поста:
function wplancer_save_composer_layout($post_id) {
if(defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
if(!current_user_can('edit_post', $post_id)) return;
if(isset($_POST['wplancer_composer_layout'])) {
$layout = wp_kses_post($_POST['wplancer_composer_layout']);
update_post_meta($post_id, '_wplancer_composer_layout', $layout);
}
}
add_action('save_post', 'wplancer_save_composer_layout');При этом в интерфейсе нужно добавить скрытое поле input или textarea с JSON данных, который генерируется из DOM выбранных блоков. Это можно сделать через JavaScript перед отправкой формы.
Отрисовка страницы на фронтенде по сохраненным данным
При выводе страницы мы считываем JSON из метаданных и формируем HTML. Вот пример функции, которая парсит и выводит блоки:
function wplancer_render_composer_layout($post_id) {
$layout_json = get_post_meta($post_id, '_wplancer_composer_layout', true);
if(!$layout_json) return;
$layout = json_decode($layout_json, true);
if(!$layout) return;
foreach($layout as $block) {
switch($block['type']) {
case 'text':
echo '<div class="wplancer-text-block">' . wp_kses_post($block['content']) . '</div>';
break;
case 'image':
$src = esc_url($block['src']);
echo '<div class="wplancer-image-block"><img src="' . $src . '" alt=""/></div>';
break;
}
}
}Таким образом, мы можем динамически выводить сложные макеты, созданные пользователем.
Дополнительные улучшения и рекомендации
Валидация и безопасность
Обязательно проверяйте и фильтруйте все входящие данные, чтобы предотвратить XSS и другие уязвимости. Используйте функции WordPress для очистки данных, такие как wp_kses_post и esc_url.
Расширение функционала
Добавьте больше типов блоков: кнопки, галереи, видео, формы. Для каждого реализуйте уникальные настройки.
Можно добавить сохранение шаблонов и импорт/экспорт макетов.
Оптимизация пользовательского интерфейса
Реализуйте inline-редактирование, предпросмотр, undo/redo. Используйте современные JS-фреймворки (React, Vue) для улучшения UX.