Как создать адаптивное меню в WordPress с помощью JavaScript и CSS

Автор: София Романова | Опубликовано: 15.12.2025

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

Почему стоит создавать адаптивное меню самостоятельно

Часто начинающие разработчики используют готовые решения, например, плагины или встроенные функции тем. Однако они могут быть избыточными по функционалу и влиять на производительность сайта. Написав простое адаптивное меню своими силами, вы получите:

Оптимизированный код под ваши нужды.
Отсутствие лишних скриптов и стилей.
Возможность гибко менять логику работы меню.

Кроме того, знание того, как работает адаптивное меню на практике, пригодится для отладки и расширения функционала в будущем.

Создание базовой структуры меню в WordPress

Для начала нужно вывести меню в теме. Предположим, что вы зарегистрировали меню в functions.php так:

function wplearn_register_menus() {
    register_nav_menus([
        'primary' => 'Основное меню'
    ]);
}
add_action('after_setup_theme', 'wplearn_register_menus');

В нужном месте темы, например, в header.php, выводим меню:

<nav class="wplearn-menu">
    <button class="wplearn-menu-toggle" aria-expanded="false" aria-label="Открыть меню">☰</button>
    <?php
    wp_nav_menu([
        'theme_location' => 'primary',
        'menu_class' => 'wplearn-menu-list',
        'container' => false
    ]);
    ?>
</nav>

Здесь кнопка с классом wplearn-menu-toggle — это иконка для открытия меню на мобильных устройствах. Список меню выводится с классом wplearn-menu-list.

Стилизация адаптивного меню на CSS

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

/* Стили базового меню */
.wplearn-menu {
    position: relative;
}
.wplearn-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.wplearn-menu-list li {
    margin-right: 20px;
}
.wplearn-menu-list li a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
}

/* Кнопка для мобильных */
.wplearn-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
}

/* Мобильная версия */
@media (max-width: 768px) {
    .wplearn-menu-list {
        display: none;
        flex-direction: column;
        background: #f9f9f9;
        position: absolute;
        top: 40px;
        right: 0;
        width: 200px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        border-radius: 4px;
        z-index: 9999;
    }
    .wplearn-menu-list li {
        margin: 0;
        border-bottom: 1px solid #ddd;
    }
    .wplearn-menu-list li a {
        padding: 10px 15px;
        display: block;
        color: #222;
    }
    .wplearn-menu-toggle {
        display: block;
    }
    .wplearn-menu-list.active {
        display: flex;
    }
}

В этой CSS-части мы скрываем меню на мобильных устройствах и показываем кнопку. При добавлении класса active к списку меню оно отображается вертикально.

Добавляем логику открытия меню на JavaScript

Теперь нужно, чтобы при клике на кнопку меню показывалось и скрывалось. Для этого используем простой скрипт:

document.addEventListener('DOMContentLoaded', function() {
    var menuToggle = document.querySelector('.wplearn-menu-toggle');
    var menuList = document.querySelector('.wplearn-menu-list');
    
    menuToggle.addEventListener('click', function() {
        var expanded = this.getAttribute('aria-expanded') === 'true' || false;
        this.setAttribute('aria-expanded', !expanded);
        menuList.classList.toggle('active');
    });
});

Этот код переключает класс active у меню и обновляет атрибут aria-expanded для доступности.

Улучшаем доступность и UX

Для лучшего UX полезно закрывать меню при клике вне его и при выборе пункта:

document.addEventListener('click', function(e) {
    var menu = document.querySelector('.wplearn-menu');
    var toggle = document.querySelector('.wplearn-menu-toggle');
    var menuList = document.querySelector('.wplearn-menu-list');

    if (!menu.contains(e.target)) {
        menuList.classList.remove('active');
        toggle.setAttribute('aria-expanded', false);
    }
});

// Закрываем меню при выборе пункта
var menuLinks = document.querySelectorAll('.wplearn-menu-list a');
menuLinks.forEach(function(link) {
    link.addEventListener('click', function() {
        menuList.classList.remove('active');
        toggle.setAttribute('aria-expanded', false);
    });
});

Таким образом, меню не останется открытым после выбора пункта и автоматически закроется при клике вне меню.

Пример интеграции с плагином Clearfy Pro для оптимизации меню

Если вы используете плагин Clearfy Pro, он позволяет оптимизировать вывод меню и убрать лишние скрипты, что дополнительно ускорит работу навигации. Например, можно отключить ненужные стили Gutenberg и скрипты, влияющие на загрузку меню.

Рекомендация: всегда профилируйте скорость загрузки страницы с помощью инструментов, таких как Google PageSpeed Insights, чтобы удостовериться, что ваши кастомные решения не замедляют сайт.

Выводы и рекомендации по адаптивному меню в WordPress

Создание адаптивного меню своими руками — это отличный способ получить лёгкую и быструю навигацию, полностью подстроенную под дизайн вашего сайта. Главное — уделить внимание доступности, чтобы меню было удобно использовать всем посетителям.

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