Настройка плагина WPBakery для WordPress
WPBakery Page Builder (бывший Visual Composer) — один из старейших конструкторов страниц для WordPress. Поставляется в комплекте со многими премиум-темами с Themeforest, поэтому встречается массово. Работает в двух режимах: Frontend Editor и Backend Editor.
Режимы редактирования
Backend Editor — классический интерфейс внутри стандартного WordPress-редактора. Элементы добавляются через кнопку «Add Element», отображаются как блоки с иконками. Компактен, работает быстро, не требует полной загрузки страницы сайта.
Frontend Editor — редактирование непосредственно на странице сайта с визуальным превью. Требует больше памяти браузера, но нагляднее для клиентов.
Переключение между режимами — кнопка в верхней панели поста.
Структура контента
WPBakery строит страницы из строк (row) → колонок → элементов:
[vc_row]
[vc_column width="1/2"]
[vc_column_text]Текст[/vc_column_text]
[/vc_column]
[vc_column width="1/2"]
[vc_single_image image="123"]
[/vc_column]
[/vc_row]
Под капотом WPBakery хранит контент как шорткоды в post_content. Это одновременно и достоинство (читается в БД), и проблема при миграции на другой конструктор.
Настройки плагина
В WPBakery → Settings:
- Role Manager — какие роли пользователей имеют доступ к редактору и каким элементам
- General Settings — разрешить ли Frontend Editor, ширина контента сайта
- Custom CSS — встроенный редактор CSS, применяющийся глобально
Кастомные элементы
// Регистрация кастомного элемента
add_action( 'vc_before_init', function() {
vc_map( [
'name' => 'Блок с иконкой',
'base' => 'icon_box',
'category' => 'My Elements',
'params' => [
[
'type' => 'textfield',
'heading' => 'Заголовок',
'param_name' => 'title',
],
[
'type' => 'iconpicker',
'heading' => 'Иконка',
'param_name' => 'icon',
],
[
'type' => 'textarea_html',
'heading' => 'Описание',
'param_name' => 'content',
],
],
] );
} );
// Шорткод для кастомного элемента
add_shortcode( 'icon_box', function( $atts, $content ) {
$atts = shortcode_atts( [ 'title' => '', 'icon' => '' ], $atts );
return '<div class="icon-box"><i class="' . esc_attr( $atts['icon'] ) . '"></i>'
. '<h3>' . esc_html( $atts['title'] ) . '</h3>'
. '<p>' . wp_kses_post( $content ) . '</p></div>';
} );
Расширение через аддоны
Экосистема WPBakery включает сотни сторонних аддонов (Ultimate Addons for WPBakery, Essential Grid, Layer Slider и др.). Они устанавливаются как обычные плагины и добавляют свои элементы в панель конструктора.
Ограничение доступа к элементам
// Скрыть стандартные элементы, оставив только нужные
add_filter( 'vc_after_mapping', function() {
vc_remove_element( 'vc_progress_bar' );
vc_remove_element( 'vc_pie' );
// Скрыть для конкретной роли
if ( ! current_user_can( 'manage_options' ) ) {
vc_remove_element( 'vc_raw_html' );
}
} );
Миграция с WPBakery на Gutenberg или Elementor
WPBakery хранит контент как шорткоды — при деактивации плагина страницы заполнятся нечитаемым текстом вида [vc_row][vc_column].... Для безопасной миграции:
- Перед деактивацией использовать инструмент конвертации (плагин «Classic Editor» + ручное преобразование)
- Или конвертировать шорткоды в HTML через
do_shortcode()и сохранить как чистый HTML
Автоматической конвертации WPBakery → Gutenberg без потерь не существует — только ручная переработка.
Производительность
WPBakery загружает CSS (~130 KB) и JS (~200 KB) на фронте независимо от того, используются ли виджеты на странице. Для оптимизации:
// Отключить фронтенд-ассеты WPBakery на страницах без шорткодов
add_action( 'wp_enqueue_scripts', function() {
if ( ! is_singular() || ! has_shortcode( get_post()->post_content, 'vc_row' ) ) {
wp_dequeue_style( 'js_composer_front' );
wp_dequeue_script( 'wpb_composer_front_js' );
}
}, 100 );
Сроки
Настройка, создание кастомных элементов, разработка 5–10 страниц — 2–3 рабочих дня.