Меню является одним из ключевых элементов любого сайта на WordPress. С его помощью посетители быстро находят нужные страницы, категории, товары и разделы. Грамотно организованная навигация улучшает пользовательский опыт, снижает показатель отказов и положительно влияет на SEO-продвижение. В этой подробной инструкции рассмотрим несколько способов создания меню WordPress: через административную панель, с помощью функций темы и путем программного вывода меню в шаблонах. Все примеры сопровождаются готовым кодом.

Что такое меню в WordPress

Меню WordPress представляет собой набор ссылок, которые отображаются в определенной области темы оформления. Обычно меню располагается:
  • в шапке сайта;
  • в боковой колонке;
  • в подвале;
  • в мобильной навигации.
В меню можно добавлять страницы, записи, категории, пользовательские ссылки и даже элементы WooCommerce.

Создание меню через админ-панель WordPress

Самый простой способ создать меню — воспользоваться встроенным редактором.
  1. Откройте раздел Внешний вид → Меню.
  2. Нажмите «Создать новое меню».
  3. Введите название меню.
  4. Нажмите кнопку «Создать меню».
После создания можно добавить в него необходимые элементы.

Добавление страниц

  1. Выберите страницы в блоке слева.
  2. Нажмите «Добавить в меню».
  3. Перетащите элементы в нужном порядке.
  4. Сохраните изменения.

Создание выпадающего меню

Для создания подменю достаточно перетащить пункт немного вправо относительно родительского элемента. Пример структуры:
  • Услуги
  • Создание сайтов
  • SEO продвижение
  • Техническая поддержка
После сохранения появится выпадающий список.

Регистрация меню в теме WordPress

Чтобы WordPress мог выводить меню в определенных местах шаблона, необходимо зарегистрировать области меню. Добавьте следующий код в файл functions.php: 
 function mytheme_register_menus() { register_nav_menus( array( 'header-menu' => 'Главное меню', 'footer-menu' => 'Меню подвала' ) ); } add_action('after_setup_theme', 'mytheme_register_menus');
После этого в настройках меню появятся новые области размещения.

Регистрация одного меню

Если требуется только одна область навигации, можно использовать функцию register_nav_menu(). 
 function mytheme_menu() { register_nav_menu( 'primary', 'Основное меню' ); } add_action('after_setup_theme', 'mytheme_menu');

Вывод меню в шаблоне WordPress

После регистрации меню его необходимо вывести в нужном месте темы. Например, в файле header.php: 
 <nav class="main-menu"> <?php wp_nav_menu( array( 'theme_location' => 'header-menu', 'container' => false ) ); ?> </nav>
WordPress автоматически сформирует HTML-разметку меню.

Полный пример вывода меню

 <?php wp_nav_menu(array( 'theme_location' => 'header-menu', 'menu_class' => 'navigation', 'container' => 'nav', 'container_class' => 'navbar', 'fallback_cb' => false )); ?>
Параметры позволяют гибко управлять HTML-структурой навигации.

Стилизация меню через CSS

После вывода меню его можно оформить с помощью CSS. 
 .navigation { display: flex; list-style: none; margin: 0; padding: 0; } .navigation li { margin-right: 25px; } .navigation a { text-decoration: none; color: #333; font-weight: 600; } .navigation a:hover { color: #0073aa; }
Такой код создаст горизонтальное меню с эффектом наведения.

Создание выпадающего меню через CSS

 .navigation li { position: relative; } .navigation ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; } .navigation li:hover ul { display: block; }
Теперь дочерние элементы будут отображаться при наведении курсора.

Вывод меню вручную без конструктора

Иногда требуется полностью контролировать структуру навигации. В таком случае можно использовать обычный HTML: 
 <nav> <ul> <li><a href="/">Главная</a></li> <li><a href="/about/">О компании</a></li> <li><a href="/blog/">Блог</a></li> <li><a href="/contacts/">Контакты</a></li> </ul> </nav>
Однако такой вариант менее удобен, поскольку требует ручного обновления ссылок.

Как вывести определенное меню по ID

Если на сайте используется несколько меню, можно вывести конкретное меню по идентификатору. 
 wp_nav_menu(array( 'menu' => 15 ));
Где 15 — ID меню в базе данных.

Вывод меню по названию

 wp_nav_menu(array( 'menu' => 'Главное меню' ));
Этот вариант удобен при разработке пользовательских тем.

Добавление иконок в меню

Для отображения иконок можно использовать Font Awesome. 
 <li> <a href="/contacts/"> <i class="fas fa-phone"></i> Контакты </a> </li>
Также можно установить специальные плагины для работы с иконками меню.

Полезные плагины для меню WordPress

  • Max Mega Menu;
  • QuadMenu;
  • WP Mega Menu;
  • Menu Icons;
  • Conditional Menus.
Эти расширения позволяют создавать мегаменю, добавлять изображения, иконки и настраивать адаптивную навигацию.

Типичные ошибки при настройке меню

  • не зарегистрирована область меню в теме;
  • не назначено меню нужной позиции;
  • отсутствуют CSS-стили;
  • слишком большое количество пунктов;
  • нарушена логика вложенности разделов.
Рекомендуется ограничивать количество пунктов верхнего уровня и использовать выпадающие подменю для сложной структуры сайта. Создать меню в WordPress можно буквально за несколько минут через административную панель. Для разработчиков предусмотрены функции регистрации областей навигации и программного вывода меню через wp_nav_menu(). Используя приведенные примеры кода, вы сможете реализовать как простое горизонтальное меню, так и сложную многоуровневую навигацию для корпоративного сайта, интернет-магазина или блога.

Метки: