В современном WordPress создание уникального дизайна и структуры страниц часто требует использования визуальных конструкторов (page builders) или создания кастомных шаблонов. Однако многие разработчики хотят реализовать собственные решения, которые будут легковесными, удобными и максимально адаптированными под задачи сайта. В этой статье мы подробно разберём, как создать собственный вид построения страниц в WordPress с нуля, используя PHP, JavaScript и API WordPress, а также рассмотрим готовые плагины, которые помогут ускорить разработку.
Почему стоит создавать собственный page builder в WordPress
Визуальные конструкторы страниц, такие как Elementor, WPBakery, Divi, несомненно, удобны, но имеют ряд недостатков: большой вес, сложность кастомизации, зависимость от сторонних разработчиков и обновлений. Создавая собственный вид построения страниц, вы получаете полный контроль над функционалом, интерфейсом и производительностью.
Кроме того, кастомные решения позволяют сделать интерфейс максимально простым и интуитивным именно для вашего проекта, а также интегрировать нестандартные блоки и функционал, который отсутствует в популярных конструкторах.
Но с чего начать? Важно понимать, что собственный page builder — это комбинация нескольких технологий: шаблоны WordPress, пользовательские поля (custom fields), JavaScript для интерактивности и, возможно, REST API для асинхронной работы.
Использование Advanced Custom Fields (ACF) для создания блоков контента
Одним из самых простых и мощных способов начать создавать свой page builder — использовать плагин Advanced Custom Fields (ACF) с модулем Flexible Content. Он позволяет создать набор блоков, которые пользователь сможет добавлять и настраивать в редакторе страниц.
ACF Flexible Content — это аналог блоков конструктора, когда вы заранее создаёте шаблоны блоков, а затем собираете страницу из этих блоков.
Пример создания блока с помощью ACF:
if( function_exists('wptricks_register_acf_flexible_content') ) {
wptricks_register_acf_flexible_content();
}
function wptricks_register_acf_flexible_content() {
if( function_exists('acf_add_local_field_group') ) {
acf_add_local_field_group(array(
'key' => 'group_wptricks_flexible_content',
'title' => 'Гибкий контент',
'fields' => array(
array(
'key' => 'field_wptricks_flexible_blocks',
'label' => 'Блоки страницы',
'name' => 'wptricks_flexible_blocks',
'type' => 'flexible_content',
'layouts' => array(
'layout_text_block' => array(
'label' => 'Текстовый блок',
'sub_fields' => array(
array(
'key' => 'field_wptricks_text',
'label' => 'Текст',
'name' => 'text',
'type' => 'wysiwyg',
),
),
),
'layout_image_block' => array(
'label' => 'Изображение',
'sub_fields' => array(
array(
'key' => 'field_wptricks_image',
'label' => 'Изображение',
'name' => 'image',
'type' => 'image',
'return_format' => 'url',
),
),
),
),
),
),
'location' => array(
array(
array(
'param' => 'post_type',
'operator' => '==',
'value' => 'page',
),
),
),
));
}
}В этом примере мы регистрируем два типа блоков: текстовый и с изображением. В редакторе страницы появится возможность добавлять эти блоки в любом порядке, что уже даёт гибкость построения страниц.
Вывод кастомных блоков в шаблоне страницы
Чтобы вывести все блоки на фронтенде, нужно использовать цикл по полю flexible content:
if( have_rows('wptricks_flexible_blocks') ) {
while( have_rows('wptricks_flexible_blocks') ) {
the_row();
if( get_row_layout() == 'layout_text_block' ) {
echo '<div class="wptricks-text-block">';
the_sub_field('text');
echo '</div>';
}
if( get_row_layout() == 'layout_image_block' ) {
$img_url = get_sub_field('image');
echo '<div class="wptricks-image-block"><img src="'.esc_url($img_url).'" alt=""/></div>';
}
}
}Такой подход позволяет создавать страницы, состоящие из разных блоков, и выводить их без лишнего кода.
Создание собственного простого конструктора с использованием Gutenberg API
Если вы хотите уйти от ACF и сделать настоящий визуальный блок для Gutenberg, можно использовать JavaScript и React, которые лежат в основе редактора.
WordPress Gutenberg позволяет создавать свои собственные блоки с помощью @wordpress/create-block или вручную. Это немного сложнее, но даёт полный контроль над интерфейсом и поведением.
Пример минимального блока:
/*
Plugin Name: WPTricks Custom Block
*/
function wptricks_register_custom_block() {
wp_register_script(
'wptricks-block-script',
plugins_url('block.js', __FILE__),
array('wp-blocks', 'wp-element', 'wp-editor'),
filemtime(plugin_dir_path(__FILE__) . 'block.js')
);
register_block_type('wptricks/custom-block', array(
'editor_script' => 'wptricks-block-script',
));
}
add_action('init', 'wptricks_register_custom_block');В файле block.js вы описываете структуру блока на React, указываете поля, визуальный редактор и сохранение.
Этот подход требует знаний JavaScript (React) и сборщиков (webpack, babel), но даёт максимум свободы.
Плагины для упрощения создания своих page builder
Если хочется ускорить разработку, можно использовать плагины, которые уже делают часть работы:
- Carbon Fields — библиотека для создания пользовательских полей с поддержкой сложных структур и групп.
- Meta Box — мощный плагин с расширениями для создания сложных блоков и интеграции с Gutenberg.
- Lazy Blocks — позволяет создавать свои блоки для Gutenberg через удобный интерфейс без программирования.
Использование этих инструментов позволяет быстро создавать кастомные блоки и гибкие шаблоны, которые можно комбинировать в собственный page builder.
Рекомендации по архитектуре и производительности
Создавая свой вид построения страниц, важно помнить о производительности и поддерживаемости кода. Рекомендуется:
- Минимизировать количество запросов к базе, грузить только необходимые данные.
- Кэшировать результаты сложных вычислений и готовый HTML, если это возможно.
- Использовать стандарты WordPress и REST API для взаимодействия между фронтендом и бекендом.
- Разбивать страницы на независимые блоки, чтобы проще было тестировать и поддерживать.
Также рекомендуется использовать wp_enqueue_script и wp_enqueue_style для подключения скриптов и стилей, чтобы избежать конфликтов с другими плагинами.
Заключение
Создание собственного вида построения страниц — отличная возможность сделать сайт уникальным и оптимизированным именно под ваши задачи. Использование ACF Flexible Content подойдёт для быстрого старта без глубокой JavaScript-разработки, а создание блоков для Gutenberg — для более сложных и гибких решений.
Если вы планируете масштабировать проект, рекомендуем комбинировать эти подходы и использовать современные инструменты, такие как Carbon Fields или Meta Box, для упрощения работы с кастомными полями и блоками.
Надеемся, этот материал поможет вам создать свой собственный page builder и вывести ваши проекты на новый уровень!