Налаштування плагіна 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 робочі дні.