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

Автор: Тимур Ершов | Опубликовано: 14.11.2025

В этой статье мы подробно разберем, как создать в WordPress удобное nestable меню с возможностью drag-and-drop, которое легко управлять с админки и выводить на сайте. Такая функциональность полезна для сайтов с большим количеством разделов, где важно удобно структурировать навигацию.

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

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

Пользовательские nestable меню позволяют администратору создавать сложные структуры без знаний кода, а разработчику — гибко управлять выводом и стилями. Такие меню часто используются в сайдбарах, мобильных версиях и в панели управления.

Далее разберем, как реализовать такое меню с помощью популярных плагинов и кастомного кода.

Использование плагина «WP Nestable Menu» для создания drag-and-drop меню

Среди бесплатных решений для WordPress есть плагин WP Nestable Menu, который обеспечивает визуальное создание многоуровневых меню с поддержкой drag-and-drop.

После установки и активации плагина в админке появится отдельный раздел для создания меню. Вы сможете добавлять, удалять и менять порядок пунктов, создавать вложенные уровни, просто перетаскивая элементы.

Преимущества плагина:

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

Чтобы начать работу, достаточно:

Установить и активировать плагин.
Перейти в раздел WP Nestable Menu в админке.
Добавить пункты меню и организовать их в нужной иерархии.
Вставить шорткод [wp_nestable_menu id="ваш_id"] в нужное место шаблона или страницу.

Пример вывода меню через шорткод

Если у вас ID меню 12, вставьте в страницу или шаблон:

<?php echo do_shortcode('[wp_nestable_menu id="12"]'); ?>

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

Создание собственного nestable меню в WordPress с помощью jQuery плагина Nestable

Если нужна более гибкая и кастомная реализация, можно создать собственное меню с использованием jQuery плагина Nestable. Он позволяет создавать дерево с drag-and-drop прямо в админке.

Основные шаги:

Подключить скрипты плагина и стили в админке WordPress.
Создать кастомную страницу в админке для редактирования меню.
Реализовать сохранение структуры в базу данных.
Организовать вывод сохраненного меню на сайте.

Пример подключения скриптов в админке

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

Создание страницы меню в админке

Создайте страницу через add_menu_page и добавьте на нее HTML контейнер для плагина Nestable:

function wptricks_add_menu_page() {
    add_menu_page('Nestable Menu', 'Nestable Menu', 'manage_options', 'wptricks-nestable-menu', 'wptricks_render_nestable_menu_page');
}
add_action('admin_menu', 'wptricks_add_menu_page');

function wptricks_render_nestable_menu_page() {
    ?>
    <div class="dd" id="nestable">
        <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>
    <button id="save-menu" class="button button-primary">Сохранить</button>
    <script>
    jQuery(document).ready(function($) {
        $('#nestable').nestable({ maxDepth: 5 });
        $('#save-menu').on('click', function() {
            var data = $('#nestable').nestable('serialize');
            $.post(ajaxurl, { action: 'wptricks_save_menu', menu: data }, function(response) {
                alert('Меню сохранено');
            });
        });
    });
    </script>
    <?php
}

Обработка сохранения меню через AJAX

function wptricks_save_menu_ajax() {
    if (!current_user_can('manage_options')) wp_die('Доступ запрещен');
    $menu = $_POST['menu'] ?? null;
    if ($menu) {
        update_option('wptricks_nestable_menu', wp_json_encode($menu));
        wp_send_json_success('Сохранено');
    } else {
        wp_send_json_error('Ошибка данных');
    }
}
add_action('wp_ajax_wptricks_save_menu', 'wptricks_save_menu_ajax');

Вывод меню на сайте

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

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

function wptricks_display_nestable_menu() {
    $menu_json = get_option('wptricks_nestable_menu');
    if ($menu_json) {
        $items = json_decode($menu_json, true);
        echo wptricks_render_menu_items($items);
    } else {
        echo '<p>Меню не настроено</p>';
    }
}

Вызовите wptricks_display_nestable_menu() в нужном месте темы для отображения меню.

Полезные советы для работы с nestable меню в WordPress

Чтобы обеспечить стабильную и удобную работу с nestable меню:

Ограничьте глубину вложенности (например, максимум 5 уровней) для удобства пользователей и избежания ошибок.
Добавьте валидацию данных при сохранении, чтобы не допустить некорректных структур.
Используйте nonce-поля и проверку прав в AJAX для безопасности.
Добавьте стили для визуального выделения активных пунктов и состояния drag-and-drop.
Если меню большое, подумайте о пагинации или поиске по пунктам.

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

Заключение: когда использовать плагины, а когда писать код самостоятельно

Плагины — быстрый способ добавить nestable меню без программирования. Они подходят для большинства задач и позволяют сэкономить время.

Собственный код — лучший выбор, если нужно интегрировать меню с уникальной логикой, API, или визуально адаптировать под узкий дизайн. Также это повышает безопасность и уменьшает зависимость от сторонних обновлений.

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