Как добавить адаптивное меню в тему WordPress

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

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

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

Регистрация меню и вывод в теме: базовые шаги

Прежде всего, нужно зарегистрировать меню в файле functions.php вашей темы. Например, для темы wp-theme.ru добавим функцию wp_theme_ru_register_menus:

function wp_theme_ru_register_menus() {
    register_nav_menus([
        'primary' => 'Основное меню',
        'mobile' => 'Мобильное меню'
    ]);
}
add_action('after_setup_theme', 'wp_theme_ru_register_menus');

Далее в нужном месте шаблона (обычно header.php) выводим меню с помощью wp_nav_menu:

<nav class="main-navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Меню</button>
    <?php
    wp_nav_menu([
        'theme_location' => 'primary',
        'menu_id'        => 'primary-menu',
        'container'      => false
    ]);
    ?>
</nav>

Кнопка с классом menu-toggle будет служить переключателем меню на мобильных устройствах.

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

CSS для скрытия и показа меню

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

@media (max-width: 768px) {
  .main-navigation ul {
    display: none;
    flex-direction: column;
    background-color: #fff;
    position: absolute;
    width: 100%;
    left: 0;
    top: 60px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    z-index: 999;
  }
  .main-navigation ul.active {
    display: flex;
  }
  .menu-toggle {
    display: inline-block;
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
  }
}

@media (min-width: 769px) {
  .menu-toggle {
    display: none;
  }
  .main-navigation ul {
    display: flex !important;
    flex-direction: row;
  }
}

JavaScript для управления меню

Добавим скрипт, который будет переключать класс active у меню при клике на кнопку:

document.addEventListener('DOMContentLoaded', function() {
  var toggleButton = document.querySelector('.menu-toggle');
  var menu = document.getElementById('primary-menu');

  toggleButton.addEventListener('click', function() {
    var expanded = this.getAttribute('aria-expanded') === 'true' || false;
    this.setAttribute('aria-expanded', !expanded);
    menu.classList.toggle('active');
  });
});

Этот простой скрипт улучшает доступность меню и позволяет показывать/скрывать пункты меню на мобильных устройствах.

Дополнительные улучшения: поддержка вложенных пунктов и анимация

Вложенные меню и стрелки раскрытия

Для вложенных пунктов меню полезно добавить стрелки, которые будут открывать подменю. В WordPress при выводе меню вложенность создаётся автоматически с помощью <ul> внутри <li>.

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

.main-navigation li.menu-item-has-children > a::after {
  content: ' ▼';
  font-size: 12px;
  margin-left: 5px;
}

@media (max-width: 768px) {
  .main-navigation ul ul {
    display: none;
    flex-direction: column;
    padding-left: 15px;
  }
  .main-navigation ul ul.active {
    display: flex;
  }
}

Для управления раскрытием подменю добавим JavaScript:

document.querySelectorAll('.menu-item-has-children > a').forEach(function(anchor) {
  anchor.addEventListener('click', function(e) {
    if(window.innerWidth <= 768) {
      e.preventDefault();
      var submenu = this.nextElementSibling;
      if(submenu) {
        submenu.classList.toggle('active');
      }
    }
  });
});

Анимация раскрытия

Для плавного открытия меню и подменю можно использовать CSS-переходы по свойству max-height или JavaScript с анимацией, но это уже тема для отдельной статьи. Для простоты можно добавить transition на display не работает, но для max-height — да.

Использование плагинов для расширения функционала адаптивного меню

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

• Clearfy Pro — оптимизация и расширение возможностей меню, в том числе управление видимостью элементов;
• WPCommunity — если тема предполагает сообщество, этот плагин поможет гибко настраивать навигацию;
• ABC Pagination — для дополнения меню навигацией по страницам.

Но для большинства проектов достаточно описанного выше простого решения с регистрацией меню, CSS и JavaScript.

Советы по оптимизации и доступности адаптивного меню

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

• Используйте атрибуты aria-controls, aria-expanded и aria-haspopup для кнопок и элементов меню.
• Обеспечьте управление меню с клавиатуры — навигация с помощью Tab, Enter и Esc.
• Тестируйте меню на разных устройствах и браузерах.

Пример кнопки с атрибутами уже приведён выше. Для расширения доступности можно использовать готовые библиотеки или расширять свой JavaScript.

Заключение

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