Визуальные композиторы в WordPress позволяют легко создавать сложные макеты страниц без знания кодирования. Если вы хотите создать собственный простой визуальный композитор, который будет адаптирован под ваши задачи и не перегружен лишним функционалом, эта статья для вас. Мы разберем основные принципы, примеры плагинов, а также покажем, как реализовать базовый конструктор с помощью кода.
Понимание визуальных композиторов: ключевые функции и задачи
В первую очередь, визуальный композитор — это интерфейс на базе WordPress, который позволяет пользователям создавать и редактировать страницы при помощи перетаскивания блоков (drag & drop). Основные функции, которые должен выполнять любой визуальный конструктор:
- Создание и управление блоками контента (текст, изображения, кнопки, галереи и т.д.)
- Поддержка drag & drop для удобства размещения элементов
- Настройка стилей и параметров блоков без редактирования кода
- Сохранение и вывод созданных макетов на фронтенде сайта
Популярные плагины — Elementor, WPBakery, Gutenberg (блоки) — реализуют эти функции, но часто с избыточным функционалом и весом. Создание собственного композитора позволяет сделать легкое и адаптированное решение.
Примеры плагинов с открытым кодом для изучения и вдохновения
Для начала стоит изучить, как работают уже существующие решения с открытым исходным кодом. Вот несколько полезных примеров:
- Gutenberg — встроенный в WordPress редактор блоков, основанный на React. Позволяет создавать собственные блоки и расширения. Отличный старт для понимания концепции.
- Carbon Fields — библиотека для создания пользовательских полей и UI в админке. Можно использовать для создания интерфейса композитора.
- WP Page Builder — бесплатный конструктор страниц с drag & drop, изучение его структуры поможет понять основные принципы.
Изучив эти проекты, вы поймете, как взаимодействовать с API WordPress, создавать собственные блоки и сохранять данные.
Создаем базовый визуальный композитор: структура и основные компоненты
Начнем с простейшей реализации, которая позволит создавать страницы из блоков с заголовками и текстом. Для примера используем мета-поля поста и AJAX для динамического добавления блоков.
1. Регистрация мета-поля для хранения данных
Для хранения макета страницы создадим мета-поле, которое будет содержать JSON с описанием блоков.
function wpstandart_register_page_builder_meta() {
register_post_meta('page', 'wpstandart_page_builder_data', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'sanitize_callback' => 'wpstandart_sanitize_json',
'auth_callback' => function() {
return current_user_can('edit_posts');
},
]);
}
add_action('init', 'wpstandart_register_page_builder_meta');
function wpstandart_sanitize_json($json) {
json_decode($json);
return (json_last_error() === JSON_ERROR_NONE) ? $json : '';
}Это позволит нам сохранять структуру блоков в формате JSON.
2. Создаем интерфейс для добавления и редактирования блоков
Добавим метабокс в редактор страниц с кнопками и полями для добавления блоков. Для упрощения используем jQuery и AJAX.
function wpstandart_add_page_builder_metabox() {
add_meta_box('wpstandart_page_builder', 'Визуальный композитор', 'wpstandart_render_page_builder_metabox', 'page', 'normal', 'high');
}
add_action('add_meta_boxes', 'wpstandart_add_page_builder_metabox');
function wpstandart_render_page_builder_metabox($post) {
$data = get_post_meta($post->ID, 'wpstandart_page_builder_data', true);
?>
<div id="wpstandart-builder">
<button id="wpstandart-add-block" type="button">Добавить блок</button>
<div id="wpstandart-blocks-container"></div>
<input type="hidden" name="wpstandart_page_builder_data" id="wpstandart_page_builder_data" value='<?php echo esc_attr($data); ?>'>
</div>
<script>
jQuery(document).ready(function($){
var blocks = [];
if($('#wpstandart_page_builder_data').val()) {
blocks = JSON.parse($('#wpstandart_page_builder_data').val());
renderBlocks();
}
$('#wpstandart-add-block').click(function(){
blocks.push({title:'',content:''});
renderBlocks();
});
function renderBlocks(){
var container = $('#wpstandart-blocks-container');
container.empty();
blocks.forEach(function(block,i){
var html = '<div class="wpstandart-block">'
+'<input type="text" placeholder="Заголовок" class="block-title" data-index="'+i+'" value="'+block.title+'">'
+'<textarea placeholder="Контент" class="block-content" data-index="'+i+'">'+block.content+'</textarea>'
+'<button type="button" class="remove-block" data-index="'+i+'">Удалить</button>'
+'</div>';
container.append(html);
});
saveData();
}
function saveData(){
$('#wpstandart_page_builder_data').val(JSON.stringify(blocks));
}
$(document).on('input', '.block-title, .block-content', function(){
var i = $(this).data('index');
var val = $(this).val();
if($(this).hasClass('block-title')) {
blocks[i].title = val;
} else {
blocks[i].content = val;
}
saveData();
});
$(document).on('click', '.remove-block', function(){
var i = $(this).data('index');
blocks.splice(i,1);
renderBlocks();
});
});
</script>
<style>
#wpstandart-builder {border:1px solid #ddd;padding:10px;}
.wpstandart-block {border:1px solid #ccc;padding:10px;margin-bottom:10px;}
.block-title {width:100%;margin-bottom:5px;}
.block-content {width:100%;height:80px;}
</style>
<?php
}
function wpstandart_save_page_builder_data($post_id) {
if (array_key_exists('wpstandart_page_builder_data', $_POST)) {
update_post_meta($post_id, 'wpstandart_page_builder_data', wp_kses_post($_POST['wpstandart_page_builder_data']));
}
}
add_action('save_post_page', 'wpstandart_save_page_builder_data');Этот код добавляет админский интерфейс для создания блоков с заголовком и текстом, которые сохраняются в мета-поле.
3. Вывод блоков на фронтенде
Чтобы отображать данные на сайте, добавим фильтр контента, который заменит стандартное содержимое страницы на разметку из блоков.
function wpstandart_render_page_builder_content($content) {
if (is_page()) {
global $post;
$data = get_post_meta($post->ID, 'wpstandart_page_builder_data', true);
if ($data) {
$blocks = json_decode($data, true);
if (json_last_error() === JSON_ERROR_NONE && is_array($blocks)) {
$output = '';
foreach($blocks as $block) {
$title = esc_html($block['title']);
$text = wpautop(esc_html($block['content']));
$output .= "<section class='wpstandart-block-frontend'><h2>{$title}</h2><div>{$text}</div></section>";
}
return $output;
}
}
}
return $content;
}
add_filter('the_content', 'wpstandart_render_page_builder_content');Так мы получим гибкий вывод блоков, созданных в админке, с базовой HTML-разметкой.
Расширение функционала: добавляем стили и новые типы блоков
Дальше можно добавить новые типы блоков — например, изображение, галерею, видео, кнопки. Для этого расширьте структуру JSON, добавьте новые поля в интерфейс и реализуйте соответствующий вывод.
Также можно подключить drag & drop с помощью библиотек, например, jQuery UI Sortable, чтобы менять порядок блоков напрямую.
jQuery('#wpstandart-blocks-container').sortable({
update: function(event, ui) {
var newOrder = [];
jQuery('#wpstandart-blocks-container .wpstandart-block').each(function(){
var i = jQuery(this).find('.block-title').data('index');
newOrder.push(blocks[i]);
});
blocks = newOrder;
renderBlocks();
}
});Это позволит пользователям просто менять расположение блоков мышкой.
Советы по безопасности и производительности
При работе с пользовательскими данными обязательно фильтруйте и экранируйте ввод, чтобы избежать XSS-уязвимостей.
Для производительности храните данные компактно и используйте кэширование на фронтенде, особенно если блоков много.
Также учитывайте совместимость с темой и другими плагинами, чтобы избежать конфликтов.
Итоги и рекомендации
Создание собственного визуального композитора — задача не из простых, но с базовыми знаниями PHP, JavaScript и WordPress API вы можете реализовать легкий и удобный конструктор под свои задачи.
Начинайте с простых блоков и постепенно расширяйте функционал, следя за качеством кода и удобством для пользователя.
Изучайте открытые проекты и не бойтесь экспериментировать — это лучший способ понять, как работают сложные плагины.