В современных проектах на WordPress часто возникает необходимость создавать сложные иерархические структуры контента, которые удобно управлять и визуально отображать на страницах. В частности, динамические блоки — это отличный способ структурировать информацию гибко и удобно для пользователей и администраторов.
Что такое иерархия динамических блоков в WordPress и зачем она нужна
Иерархия динамических блоков — это вложенная структура контентных элементов, которые можно добавлять, удалять и менять местами прямо на странице, без необходимости править код. Например, блоки могут представлять разделы, подразделы, карточки товаров, отзывы с вложенными комментариями и многое другое. Такая иерархия позволяет создавать страницы с продуманной навигацией и логикой.
Обычные редакторы WordPress (например, Gutenberg) поддерживают блоки, но не всегда удобна работа с глубоко вложенными структурами и динамическим управлением вложенностью. Решение — написать свой функционал с помощью кастомных типов блоков, мета-полей и JavaScript.
Плагины для создания иерархии динамических блоков
Для реализации иерархии динамических блоков в WordPress существуют готовые плагины, которые облегчают задачу:
- Advanced Custom Fields (ACF) Pro — позволяет создавать повторяющиеся группы полей (Repeater) и вложенные структуры. С помощью ACF можно сделать блоки с вложенностью и динамическим содержимым.
- Block Lab / Lazy Blocks — плагины для создания кастомных блоков Gutenberg с настройкой вложенных полей.
- WP Hierarchy Pro (возможно, в будущем на wpshop.ru) — специализированный плагин для управления иерархическими структурами блоков с удобным интерфейсом.
Для динамического управления отображением блоков полезно использовать JavaScript и REST API WordPress.
Как создать иерархию динамических блоков своими руками через код
Рассмотрим пример создания кастомного мета-поля с вложенными блоками и их иерархией на странице редактирования записи.
1. Регистрируем мета-поле с помощью функции wphierarchy_register_meta_blocks():
function wphierarchy_register_meta_blocks() {
register_post_meta('page', 'wphierarchy_dynamic_blocks', [
'show_in_rest' => true,
'single' => true,
'type' => 'array',
'default' => []
]);
}
add_action('init', 'wphierarchy_register_meta_blocks');
2. Создаем React-компонент для Gutenberg, который позволит добавлять, удалять, изменять вложенные блоки с поддержкой иерархии. Для простоты — используем NestedSortable List.
3. В PHP выводим иерархию на фронтенде с помощью рекурсивной функции wphierarchy_render_blocks():
function wphierarchy_render_blocks($blocks) {
if (empty($blocks)) return '';
$html = '<ul>';
foreach ($blocks as $block) {
$html .= '<li>' . esc_html($block['title']);
if (!empty($block['children'])) {
$html .= wphierarchy_render_blocks($block['children']);
}
$html .= '</li>';
}
$html .= '</ul>';
return $html;
}
4. Добавьте вызов этой функции в шаблон страницы:
$blocks = get_post_meta(get_the_ID(), 'wphierarchy_dynamic_blocks', true);
echo wphierarchy_render_blocks($blocks);
Пример структуры данных для иерархии блоков
Иерархия хранится в мета-поле как массив с вложенными элементами:
[
[
'id' => 1,
'title' => 'Раздел 1',
'children' => [
['id' => 2, 'title' => 'Подраздел 1.1', 'children' => []],
['id' => 3, 'title' => 'Подраздел 1.2', 'children' => []],
]
],
[
'id' => 4,
'title' => 'Раздел 2',
'children' => []
]
]
Такую структуру легко сериализовать в JSON и сохранить в мета-поле.
Управление иерархией через интерфейс администратора
Для удобства пользователей можно интегрировать React-библиотеки, например, react-sortable-tree, чтобы на странице редактирования записи была визуальная иерархическая структура с drag-and-drop.
Передача и сохранение данных сделаны через REST API WordPress, что позволяет работать с вложенными блоками без перезагрузки страницы.
Советы по оптимизации и безопасности
При работе с иерархическими данными важно:
- Проверять и валидировать входящие данные на сервере.
- Кэшировать часто используемые структуры, чтобы снизить нагрузку.
- Использовать nonce для защиты AJAX-запросов.
- Оптимизировать вывод рекурсивных функций, чтобы избежать переполнения стека.
Вывод
Создание иерархии динамических блоков на странице WordPress — задача технически не самая простая, но вполне решаемая с помощью комбинации кастомных мета-полей, REST API и React-компонентов. Такой подход дает гибкость в управлении контентом и улучшает UX сайта.
Для удобства можно использовать плагины вроде Clearfy Pro, которые расширяют возможности управления контентом и оптимизации.