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

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

Почему важно мобильное компактное меню для WordPress

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

Компактное меню — это обычно иконка «гамбургер», по нажатию на которую открывается список ссылок. Такой подход экономит место и улучшает UX.

Особенности реализации мобильного меню без плагинов

Использование плагинов добавляет нагрузку, может конфликтовать с другими элементами и не всегда даёт нужную гибкость. Реализация своими руками в WordPress позволяет:

• Контролировать структуру и стили;
• Оптимизировать загрузку кода;
• Легко кастомизировать под дизайн сайта;
• Минимизировать зависимость от сторонних разработчиков.

Создание HTML-разметки мобильного меню

Для начала создадим простую разметку меню в файле header.php вашей темы WordPress. Вставьте следующий код где-то в область навигации:

<nav class="wpmobile-menu">
  <button class="wpmobile-menu-toggle" aria-label="Открыть меню">
    ☰
  </button>
  <ul class="wpmobile-menu-list">
    <li><a href="/">Главная</a></li>
    <li><a href="/blog">Блог</a></li>
    <li><a href="/about">О нас</a></li>
    <li><a href="/contacts">Контакты</a></li>
  </ul>
</nav>

Здесь кнопка с классом wpmobile-menu-toggle — это иконка гамбургера для открытия меню. Список ul содержит пункты меню.

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

Добавим стили, чтобы скрыть меню по умолчанию и показать иконку. Вставьте следующий CSS в style.css вашей темы или в кастомный CSS:

@media (max-width: 768px) {
  .wpmobile-menu-list {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #333;
    position: absolute;
    top: 40px;
    right: 10px;
    width: 200px;
    border-radius: 4px;
  }
  .wpmobile-menu-list li a {
    display: block;
    padding: 10px 15px;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid #444;
  }
  .wpmobile-menu-list li a:hover {
    background-color: #555;
  }
  .wpmobile-menu-toggle {
    font-size: 28px;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
  }
  .wpmobile-menu.open .wpmobile-menu-list {
    display: block;
  }
}

Этот CSS делает меню скрытым по умолчанию на экранах меньше 768px и показывает его при добавлении класса open.

JavaScript для управления открытием и закрытием меню

Добавим JS, который будет переключать класс open у меню при нажатии на кнопку. Вставьте следующий код в footer.php перед закрывающим тегом </body> или подключите отдельным файлом JS, зарегистрированным в functions.php:

document.addEventListener('DOMContentLoaded', function() {
  const menu = document.querySelector('.wpmobile-menu');
  const toggle = document.querySelector('.wpmobile-menu-toggle');
  if (!menu || !toggle) return;
  toggle.addEventListener('click', function() {
    menu.classList.toggle('open');
  });
  // Закрываем меню при клике вне его области
  document.addEventListener('click', function(event) {
    if (!menu.contains(event.target) && menu.classList.contains('open')) {
      menu.classList.remove('open');
    }
  });
});

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

Интеграция мобильного меню с динамическим меню WordPress

Чтобы использовать стандартное меню WordPress, замените статический список <ul> на динамическую функцию wp_nav_menu() с кастомным выводом:

wp_nav_menu(array(
  'theme_location' => 'primary',
  'container' => false,
  'menu_class' => 'wpmobile-menu-list',
));

Обязательно зарегистрируйте меню в functions.php, если ещё не сделали:

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

Советы по улучшению мобильного меню

Добавьте плавную анимацию открытия

Для лучшего UX используйте CSS-переходы. Например, можно анимировать высоту или прозрачность меню при появлении:

@media (max-width: 768px) {
  .wpmobile-menu-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .wpmobile-menu.open .wpmobile-menu-list {
    max-height: 500px; /* достаточно для всех пунктов меню */
  }
}

Поддержка клавиатуры и доступности

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

<button aria-expanded="false" aria-controls="menu">…</button>

И менять aria-expanded через JS при открытии/закрытии меню.

Оптимизация под плагины и темы

Если вы используете темы с конструктором или плагины кеширования, убедитесь, что ваш JS корректно подключается и не конфликтует с другими скриптами. Для этого лучше регистрировать и подключать JS через functions.php:

function wpmobile_enqueue_scripts() {
  wp_enqueue_script('wpmobile-menu', get_template_directory_uri() . '/js/wpmobile-menu.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'wpmobile_enqueue_scripts');

Заключение

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

Если хотите расширить возможности меню и добавить продвинутые эффекты, рассмотрите плагины с поддержкой мобильных меню, например, Clearfy Pro, который помогает оптимизировать и настроить функционал без кода.