Как добавить многоуровневую навигацию в курсах LearnPress

LearnPress — один из самых популярных плагинов для создания обучающих платформ на WordPress. Однако базовый функционал навигации по урокам и разделам курсов часто оказывается недостаточным для курсов с большой и сложной структурой. В этой статье разберём, как добавить многоуровневую навигацию в курсах LearnPress, чтобы повысить удобство пользователей и улучшить общий опыт обучения.

Почему нужна многоуровневая навигация для курсов LearnPress

Стандартная навигация LearnPress позволяет переходить между уроками и темами в пределах одного курса, но часто она ограничена линейным переходом вперед и назад. При большом количестве уроков и разделов пользователю сложно быстро ориентироваться и возвращаться к нужным темам.

Многоуровневая навигация даёт возможность:

• Отображать структуру курса с разделами и вложенными уроками;
• Быстро переходить к нужным разделам и урокам из любого места курса;
• Улучшить UX, особенно для продвинутых и комплексных обучающих программ;
• Добавлять дополнительные ссылки, например, к тестам, материалам или внешним ресурсам.

Реализовать такую навигацию можно с помощью кастомного кода и плагинов, а также с использованием стандартных хуков LearnPress.

Создание кастомного виджета многоуровневой навигации

Самый гибкий способ — создать собственный виджет, который будет выводить дерево курса с разделами и уроками. Для этого воспользуемся REST API LearnPress и стандартными функциями WordPress для работы с виджетами.

Шаг 1. Получение структуры курса

LearnPress хранит структуру курса в метаданных, и получить список разделов и уроков можно через функцию learnpress_get_course_sections(). Ниже пример функции для получения и форматирования структуры:

function learnpress_ru_get_course_structure($course_id) {
    $sections = learnpress_get_course_sections($course_id);
    $structure = [];
    foreach ($sections as $section) {
        $items = [];
        foreach ($section['items'] as $item) {
            $items[] = [
                'id' => $item->ID,
                'title' => get_the_title($item->ID),
                'permalink' => get_permalink($item->ID),
                'type' => $item->post_type
            ];
        }
        $structure[] = [
            'section_title' => $section['title'],
            'items' => $items
        ];
    }
    return $structure;
}

Эта функция возвращает массив с разделами и вложенными уроками, что удобно для вывода в меню.

Шаг 2. Создание виджета

Создайте новый класс виджета, который будет использовать полученную структуру и выводить её в виде многоуровневого списка:

class LearnPress_RU_Multilevel_Nav_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'learnpress_ru_multilevel_nav',
            'LearnPress RU: Многоуровневая навигация',
            ['description' => 'Навигация по разделам и урокам курса LearnPress']
        );
    }

    public function widget($args, $instance) {
        if (!is_singular('lp_course')) {
            return; // Показываем только на странице курса
        }

        global $post;
        $course_id = $post->ID;
        $structure = learnpress_ru_get_course_structure($course_id);

        echo $args['before_widget'];
        echo $args['before_title'] . 'Навигация по курсу' . $args['after_title'];
        echo '<ul class="lp-ru-multilevel-nav">';
        foreach ($structure as $section) {
            echo '<li><strong>' . esc_html($section['section_title']) . '</strong>';
            if (!empty($section['items'])) {
                echo '<ul>';
                foreach ($section['items'] as $item) {
                    echo '<li><a href="' . esc_url($item['permalink']) . '">' . esc_html($item['title']) . '</a></li>';
                }
                echo '</ul>';
            }
            echo '</li>';
        }
        echo '</ul>';
        echo $args['after_widget'];
    }

    public function form($instance) {
        echo '<p>Этот виджет автоматически показывает структуру текущего курса.</p>';
    }
}

function learnpress_ru_register_multilevel_nav_widget() {
    register_widget('LearnPress_RU_Multilevel_Nav_Widget');
}
add_action('widgets_init', 'learnpress_ru_register_multilevel_nav_widget');

Добавьте этот код в файл functions.php вашей темы или в отдельный плагин. После этого в админке WordPress в разделе «Виджеты» появится новый виджет для вывода многоуровневой навигации.

Дополнительные улучшения и кастомизация

Для улучшения пользовательского опыта можно добавить следующие функции:

• Подсветка текущего урока. Используйте условие is_singular() и сравнивайте ID текущего урока с выводимыми ссылками, чтобы добавить CSS-класс для активного пункта меню.
• Коллапсируемые разделы. Добавьте JavaScript для сворачивания и разворачивания разделов, что удобно при большом количестве уроков.
• Интеграция с плагинами. Например, если вы используете Expert Review, можно добавить ссылки на отзывы и рейтинги прямо в навигацию.

Пример подсветки текущего урока в меню

foreach ($section['items'] as $item) {
    $active_class = (get_the_ID() === $item['id']) ? 'class="active"' : '';
    echo '<li ' . $active_class . '><a href="' . esc_url($item['permalink']) . '">' . esc_html($item['title']) . '</a></li>';
}

Пример JavaScript для сворачивания разделов

Добавьте в футер темы или через enqueue скрипт:

document.addEventListener('DOMContentLoaded', function() {
    const sections = document.querySelectorAll('.lp-ru-multilevel-nav > li > strong');
    sections.forEach(function(section) {
        section.style.cursor = 'pointer';
        section.addEventListener('click', function() {
            const sublist = this.nextElementSibling;
            if (sublist) {
                sublist.style.display = sublist.style.display === 'none' ? 'block' : 'none';
            }
        });
    });
    // По умолчанию скрываем все подсписки
    document.querySelectorAll('.lp-ru-multilevel-nav ul').forEach(function(ul) {
        ul.style.display = 'none';
    });
});

Использование плагинов для расширения навигации LearnPress

Если вы не хотите писать код, можно использовать готовые решения:

• LearnPress Course Grid Add-on — добавляет удобный визуальный выбор уроков и разделов в виде сетки;
• WP Page Builder с интеграцией LearnPress — позволяет создавать кастомные страницы курса с удобной навигацией;
• Плагины из WPShop.ru могут помочь автоматизировать создание меню и улучшить UX.

Итоги

Добавление многоуровневой навигации существенно улучшает удобство использования курсов на LearnPress, особенно если у вас сложная структура с большим количеством уроков и разделов. Используя предложенный код и идеи, вы сможете создать удобный и понятный интерфейс для ваших студентов, что повысит вовлечённость и качество обучения.