В этой статье мы подробно разберём, как создать и внедрить nestable menu в WordPress — удобное многоуровневое меню с возможностью перетаскивания элементов. Такая функциональность востребована для административных панелей, каталогов, списков задач и прочих пользовательских интерфейсов, где требуется простое управление иерархией элементов.
Что такое nestable menu и зачем он нужен в WordPress
Nestable menu — это интерактивный список с поддержкой вложенных элементов, которые можно менять местами с помощью drag-and-drop. В WordPress подобные меню могут использоваться в админке для кастомных типов записей, таксономий, настроек или даже в публичной части сайта для отображения сложной структуры ссылок.
Гибкость и удобство такого меню особенно полезны, когда нужно предоставить пользователю возможность легко управлять вложенной структурой — например, изменять порядок пунктов или их уровень вложенности без перезагрузки страницы и сложных настроек.
Подключение и использование плагина Nestable для WordPress
Самый простой способ реализовать nestable menu — использовать готовые решения. Один из популярных jQuery-плагинов — Nestable. В WordPress его можно подключить самостоятельно или через плагины, предоставляющие аналогичный функционал.
Для начала подключим скрипт и стили плагина в административной части WordPress. В functions.php вашей темы или в отдельном плагине добавьте:
function wp5_enqueue_nestable_scripts() {
wp_enqueue_style('wp5-nestable-css', get_template_directory_uri() . '/assets/css/jquery.nestable.css');
wp_enqueue_script('wp5-nestable-js', get_template_directory_uri() . '/assets/js/jquery.nestable.js', array('jquery'), '1.0', true);
}
add_action('admin_enqueue_scripts', 'wp5_enqueue_nestable_scripts');Обратите внимание, что файлы jquery.nestable.css и jquery.nestable.js нужно заранее загрузить в соответствующую папку вашего шаблона или плагина.
Создание HTML-разметки для nestable menu
Далее создаём HTML-структуру меню. Вот пример базового списка с вложенностью:
<div class="dd" id="wp5-nestable-menu">
<ol class="dd-list">
<li class="dd-item" data-id="1">
<div class="dd-handle">Пункт 1</div>
</li>
<li class="dd-item" data-id="2">
<div class="dd-handle">Пункт 2</div>
<ol class="dd-list">
<li class="dd-item" data-id="3">
<div class="dd-handle">Подпункт 2.1</div>
</li>
</ol>
</li>
</ol>
</div>Каждый элемент списка должен иметь уникальный атрибут data-id, который позволяет оперировать элементами в JavaScript и сохранять структуру.
Инициализация плагина и получение данных
После загрузки страницы активируем nestable и добавим обработчик сохранения текущей структуры:
jQuery(document).ready(function($) {
$('#wp5-nestable-menu').nestable({
maxDepth: 5
});
$('#save-menu').on('click', function() {
var jsonData = $('#wp5-nestable-menu').nestable('serialize');
console.log(jsonData); // здесь можно отправить данные на сервер
});
});Обратите внимание, что метод serialize() возвращает массив с вложенной структурой, отражающей текущее состояние меню.
Сохранение и загрузка структуры меню в базе данных WordPress
Для сохранения изменений меню в базе данных используем AJAX-запрос к серверу. В WordPress это удобно реализовать через action-хук wp_ajax_.
Обработка AJAX-запроса
add_action('wp_ajax_wp5_save_nestable_menu', 'wp5_save_nestable_menu_callback');
function wp5_save_nestable_menu_callback() {
if (!current_user_can('manage_options')) {
wp_send_json_error('Недостаточно прав');
wp_die();
}
$menu_data = isset($_POST['menu']) ? wp_unslash($_POST['menu']) : '';
if (empty($menu_data)) {
wp_send_json_error('Данные меню пусты');
wp_die();
}
// Сохраняем данные меню в опции
update_option('wp5_nestable_menu', $menu_data);
wp_send_json_success('Меню сохранено');
wp_die();
}Отправка данных с клиента на сервер
Обновим JS, чтобы отправлять структуру меню на сервер:
$('#save-menu').on('click', function() {
var jsonData = $('#wp5-nestable-menu').nestable('serialize');
$.post(ajaxurl, {
action: 'wp5_save_nestable_menu',
menu: JSON.stringify(jsonData)
}, function(response) {
if(response.success) {
alert('Меню успешно сохранено');
} else {
alert('Ошибка: ' + response.data);
}
});
});Загрузка сохранённого меню и вывод на сайте
Чтобы вывести сохранённое меню на сайте, нужно получить данные из опции и рекурсивно сгенерировать HTML:
function wp5_render_nestable_menu($items) {
if (empty($items)) return '';
$html = '<ol class="dd-list">';
foreach ($items as $item) {
$html .= '<li class="dd-item" data-id="' . esc_attr($item['id']) . '">';
$html .= '<div class="dd-handle">' . esc_html('Пункт ' . $item['id']) . '</div>';
if (!empty($item['children'])) {
$html .= wp5_render_nestable_menu($item['children']);
}
$html .= '</li>';
}
$html .= '</ol>';
return $html;
}
$menu_json = get_option('wp5_nestable_menu');
$menu_array = json_decode($menu_json, true);
echo '<div class="dd" id="wp5-nestable-menu-front">';
echo wp5_render_nestable_menu($menu_array);
echo '</div>';Рекомендации по улучшению и безопасности
При работе с nestable menu важно учитывать несколько моментов:
- Валидация данных на сервере — проверяйте структуру, чтобы избежать ошибок и внедрения вредоносного кода.
- Ограничение глубины вложенности — задавайте
maxDepthв настройках плагина, чтобы избежать слишком глубоких иерархий, которые сложно обрабатывать. - Используйте nonce-поля WordPress для защиты AJAX-запросов от CSRF-атак.
- Кэшируйте полученную структуру меню для ускорения вывода на публичной части сайта.
Также можно расширить функционал, добавив редактирование названий пунктов, иконок и ссылок прямо в интерфейсе меню.
Альтернативные плагины и инструменты для nestable menu в WordPress
Если вы не хотите реализовывать все с нуля, рассмотрите следующие плагины и библиотеки:
- WP Nestable — плагин для создания drag-and-drop списков с сохранением структуры.
- Advanced Custom Fields (ACF) Repeater с поддержкой сортировки — для создания вложенных списков с удобным интерфейсом.
- jQuery UI Sortable — можно использовать как альтернативу плагину Nestable для drag-and-drop, но потребуется дополнительная работа по вложенности.
Каждый из этих вариантов имеет свои особенности и подходит для разных задач.
Выводы по теме nestable menu в WordPress
Создание кастомного nestable menu в WordPress — задача вполне решаемая с помощью jQuery-плагина Nestable и стандартных средств CMS. При правильной организации кода и учёте безопасности можно получить удобный и гибкий инструмент для управления вложенными списками как в админке, так и на фронте.
Используйте приведённые примеры кода как основу для своих решений, адаптируя их под конкретные задачи и расширяя функционал по необходимости.