Как создать nestable меню в WordPress: плагины и пример кода

Автор: Андрей Ершов | Опубликовано: 11.11.2025

Что такое nestable меню и зачем оно нужно в WordPress

Nestable меню — это выпадающее многоуровневое меню с возможностью перетаскивания элементов (drag-and-drop) для удобного управления структурой. Для WordPress такие меню часто нужны в административной панели для организации сложных навигационных структур, в виджетах или в пользовательских интерфейсах, например, при создании каталогов или списков с вложенностью.

Создание собственного nestable меню дает гибкость и возможность адаптации под конкретные задачи, например, для кастомных постов, таксономий или сложных кастомных интерфейсов, где стандартные меню WordPress не справляются.

В этой статье мы рассмотрим, как реализовать подобное меню с помощью готовых плагинов, а также как написать собственный функционал с использованием JavaScript-библиотеки Nestable и PHP для сохранения структуры.

Использование плагинов для создания nestable меню в WordPress

Плагин Nested Pages

Один из популярных плагинов для организации страниц в виде drag-and-drop дерева — Nested Pages. Он расширяет стандартный список страниц, превращая его в удобный интерфейс с перетаскиванием и вложенностью.

Преимущества:

Простой интерфейс для админов
Поддержка массового редактирования
Возможность сортировки и организации страниц без открытия каждой из них

Установка и использование просты: достаточно активировать плагин и перейти в раздел «Nested Pages» в админке. Плагин не требует дополнительного кода.

Плагин Admin Menu Editor

Если нужна кастомизация именно админ-меню WordPress с drag-and-drop, подойдет Admin Menu Editor. Плагин позволяет создавать, редактировать и переупорядочивать пункты меню в админке через удобный интерфейс.

Особенности:

Поддержка вложенных меню
Изменение прав доступа для пунктов меню
Импорт и экспорт настроек

Это полезно для создания собственного навигационного дерева, которое можно адаптировать под роли пользователей.

Создание собственного nestable меню с помощью JavaScript и PHP

Подключение библиотеки Nestable

Для реализации drag-and-drop меню с вложенностью отлично подходит библиотека Nestable. Она легкая и простая, а главное — позволяет сохранить структуру в формате JSON.

Для начала подключим необходимые стили и скрипты в функции темы или плагина:

function wpaddons_enqueue_nestable_assets() {
    wp_enqueue_style('wpaddons-nestable-css', 'https://cdn.jsdelivr.net/npm/nestable2@1.6.0/jquery.nestable.min.css');
    wp_enqueue_script('wpaddons-nestable-js', 'https://cdn.jsdelivr.net/npm/nestable2@1.6.0/jquery.nestable.min.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'wpaddons_enqueue_nestable_assets');

Создание HTML-разметки меню

Далее создадим HTML-структуру меню. Nestable требует список <ol class="dd-list"> с элементами <li class="dd-item" data-id="...">. Пример:

<div class="dd" id="wpaddons-nestable-menu">
  <ol class="dd-list">
    <li class="dd-item" data-id="1"><div class="dd-handle">Пункт 1</div>
      <ol class="dd-list">
        <li class="dd-item" data-id="2"><div class="dd-handle">Подпункт 1.1</div></li>
      </ol>
    </li>
    <li class="dd-item" data-id="3"><div class="dd-handle">Пункт 2</div></li>
  </ol>
</div>

Эту структуру можно динамически генерировать из базы данных, например, из записей или опций.

Инициализация и сохранение структуры

Инициализируем Nestable и добавим кнопку для сохранения порядка. При сохранении мы отправим JSON-структуру на сервер через AJAX:

jQuery(document).ready(function($) {
    $('#wpaddons-nestable-menu').nestable({
        maxDepth: 5
    });

    $('#save-menu-order').on('click', function() {
        var order = $('#wpaddons-nestable-menu').nestable('serialize');
        $.post(ajaxurl, {
            action: 'wpaddons_save_menu_order',
            order: order
        }, function(response) {
            alert(response.data.message);
        });
    });
});

Добавим кнопку в HTML:

<button id="save-menu-order" class="button button-primary">Сохранить порядок</button>

Обработка AJAX-запроса на сервере

В PHP создадим функцию для обработки сохранения структуры меню:

function wpaddons_save_menu_order() {
    if (!current_user_can('manage_options')) {
        wp_send_json_error(array('message' => 'Нет прав для сохранения меню'));
    }

    if (empty($_POST['order'])) {
        wp_send_json_error(array('message' => 'Пустой порядок меню'));
    }

    $order = wp_unslash($_POST['order']);
    update_option('wpaddons_menu_order', $order);

    wp_send_json_success(array('message' => 'Порядок меню сохранен'));
}
add_action('wp_ajax_wpaddons_save_menu_order', 'wpaddons_save_menu_order');

Таким образом, структура меню сохраняется в опции WordPress в формате JSON.

Динамическое построение меню из сохраненных данных

Чтобы отобразить меню в админке с сохраненной структурой, нужно преобразовать JSON из опции в HTML-список. Для этого пишем рекурсивную функцию:

function wpaddons_build_nestable_menu($items) {
    $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 .= wpaddons_build_nestable_menu($item['children']);
        }
        $html .= '</li>';
    }
    $html .= '</ol>';
    return $html;
}

Вызовем ее так:

$saved_order = get_option('wpaddons_menu_order', '[]');
$items = json_decode($saved_order, true);
echo '<div class="dd" id="wpaddons-nestable-menu">';
echo wpaddons_build_nestable_menu($items);
echo '</div>';

Вывод и применение кастомного nestable меню на фронтенде

Если нужно вывести такое меню на сайте, можно использовать тот же подход, но с кастомной логикой генерации пунктов из таксономий или записей. Важно подключить CSS и JS библиотеки в публичной части и адаптировать стили под дизайн.

Пример вывода меню из категорий товаров с вложенностью:

function wpaddons_get_category_tree($parent = 0) {
    $terms = get_terms(array(
        'taxonomy' => 'product_cat',
        'parent' => $parent,
        'hide_empty' => false
    ));

    if (empty($terms) || is_wp_error($terms)) {
        return '';
    }

    $html = '<ol class="dd-list">';
    foreach ($terms as $term) {
        $html .= '<li class="dd-item" data-id="' . esc_attr($term->term_id) . '">';
        $html .= '<div class="dd-handle">' . esc_html($term->name) . '</div>';
        $html .= wpaddons_get_category_tree($term->term_id);
        $html .= '</li>';
    }
    $html .= '</ol>';
    return $html;
}

Это позволит создать полностью кастомное, удобное меню с drag-and-drop для управления содержимым.

Итоги и рекомендации по работе с nestable меню в WordPress

Создание nestable меню в WordPress — задача, которая решается как с помощью готовых плагинов, так и через собственные разработки. Если нужно быстро и без кода — используйте Nested Pages или Admin Menu Editor.

Для более гибких решений рекомендуем использовать библиотеку Nestable и собственный PHP-код для управления структурой, сохранением и выводом меню. Такой подход подойдет для разработки сложных административных интерфейсов или пользовательских функций.

При работе с AJAX обращайте внимание на безопасность — проверяйте права доступа и используйте nonce. Для фронтенда адаптируйте стили и структуру под дизайн сайта.