05 Ноя
WPBakery Page Builder — один из самых популярных визуальных конструкторов страниц для WordPress. В отличие от Elementor, он работает не через систему виджетов, а через шорткоды, что делает его подход немного другим, но не менее гибким. В этой статье разберём, как создать собственный элемент (виджет) на WPBakery для WordPress, который будет интегрирован в ваш плагин и позволит выводить динамический контент.
Как работает WPBakery Page Builder
WPBakery строит страницы на основе шорткодов — каждый элемент, который вы добавляете на страницу, в реальности превращается в PHP-функцию, возвращающую HTML. Пользователь в визуальном редакторе видит интерфейс редактирования, а движок WPBakery генерирует шорткод с набором параметров.
Для того чтобы добавить свой элемент, необходимо зарегистрировать новый шорткод и описать его параметры с помощью функции vc_map().
Шаг 1: Создание класса для нового элемента
В папке плагина создаём новый файл, например:
class-ali-property-vc.php
В этом файле определяем класс, который будет отвечать за регистрацию элемента и вывод его контента:
class GPD_VC_Ali_Property {
public function __construct() {
add_action('init', [$this, 'register_shortcode']);
}
public function register_shortcode() {
vc_map([
'name' => __('Ali Property List', 'text-domain'),
'base' => 'ali_property_list',
'description' => __('Выводит список объектов недвижимости', 'text-domain'),
'category' => 'Ali Property',
'params' => [
[
'type' => 'textfield',
'heading' => __('Заголовок', 'text-domain'),
'param_name' => 'title',
'value' => '',
'description' => __('Введите заголовок блока', 'text-domain'),
],
[
'type' => 'textfield',
'heading' => __('Количество', 'text-domain'),
'param_name' => 'count',
'value' => '3',
'description' => __('Количество выводимых элементов', 'text-domain'),
],
],
]);
add_shortcode('ali_property_list', [$this, 'render']);
}
public function render($atts) {
$atts = shortcode_atts([
'title' => '',
'count' => 3,
], $atts, 'ali_property_list');
ob_start();
?>
<div class="ali-property-widget">
<h3><?php echo esc_html($atts['title']); ?></h3>
<?php
$query = new WP_Query([
'post_type' => 'property',
'posts_per_page' => intval($atts['count']),
]);
if ($query->have_posts()) :
echo '<ul>';
while ($query->have_posts()) : $query->the_post();
echo '<li>' . get_the_title() . '</li>';
endwhile;
echo '</ul>';
wp_reset_postdata();
endif;
?>
</div>
<?php
return ob_get_clean();
}
}
new GPD_VC_Ali_Property();
Шаг 2: Регистрация элемента в WPBakery
Ключевая функция — vc_map().
Она описывает, как ваш элемент будет выглядеть в визуальном редакторе:
name— название элемента, которое увидит пользователь.base— уникальный идентификатор (имя шорткода).category— группа, в которой будет отображаться элемент.params— список полей, которые пользователь сможет редактировать.
Каждое поле (param) представляет собой массив с типом, заголовком, именем параметра и описанием. Поддерживаются типы: textfield, dropdown, checkbox, textarea, colorpicker, attach_image и другие.
Шаг 3: Подключение класса в плагин
Чтобы WordPress знал о вашем новом элементе, необходимо подключить файл с классом в основном файле плагина:
require_once plugin_dir_path(__FILE__) . 'includes/class-ali-property-vc.php';
После этого ваш элемент появится в списке доступных в WPBakery в категории “Ali Property”.
Шаг 4: Проверка и вывод контента
Создайте новую страницу и откройте её в WPBakery.
В списке элементов появится Ali Property List.
Добавьте его в макет, задайте заголовок и количество выводимых элементов — и вы увидите на фронтенде список постов вашего типа property.
Расширение функционала
Если элемент уже существует в виде шорткода в плагине, вы можете не писать логику заново.
Достаточно просто создать для него оболочку через vc_map(), чтобы добавить визуальный интерфейс в WPBakery.
Также можно комбинировать несколько элементов — например, один для фильтрации (Filter), другой для списка (List). Это удобно, если у вас есть сложная структура с динамическими параметрами.
Полезные советы
- Если при выводе контента WPBakery не отображает результат, убедитесь, что функция возвращает контент через
return, а неecho. - Для удобства создавайте отдельную категорию (
category) для всех элементов вашего плагина. - При работе с шорткодами используйте буферизацию (
ob_start()/ob_get_clean()), чтобы не нарушать структуру вывода. - Все параметры шорткода можно передавать из визуального интерфейса — это делает интеграцию максимально гибкой.
Заключение
Создание собственного элемента для WPBakery Page Builder — мощный способ интегрировать функционал вашего плагина в визуальный интерфейс WordPress.
Используя vc_map(), вы можете не только регистрировать шорткоды, но и предоставлять пользователям удобные настройки для редактирования контента без кода.
Такой подход позволит вашему плагину выглядеть профессионально, а пользователям — строить страницы быстрее и нагляднее.
