Новый сайт без меню, как супермаркет без указателей. Где касса? В каком ряду хлеб? Посетитель уходит, потому что не может найти то, за чем пришёл.

Та же история с WordPress. Стандартная установка не создаёт меню автоматически, его нужно собрать руками. Благо разработчики сделали эту задачу визуальной: никакого кода, только drag-and-drop и несколько кликов. Меню навигации собирается из страниц, категорий и произвольных ссылок в простом интерфейсе Внешний вид → Меню.

if у вас уже есть контент, но нет навигации, вы теряете и посетителей, и позиции в поиске. Чёткая структура меню помогает Google понять архитектуру сайта. Ниже, пошаговая инструкция от первого клика до готового меню с подпунктами и размещением в виджетах.

💡 Быстрый обзор:

• Открываете редактор меню: Внешний вид → Меню, даёте имя и жмёте «Создать меню»
• Добавляете элементы: страницы, категории, произвольные ссылки, через левую панель редактора
• Выстраиваете порядок перетаскиванием и создаёте подменю сдвигом вправо
• Настраиваете расположение отображения и сохраняете результат
• При необходимости выводите меню в сайдбар через виджет «Произвольное меню»

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

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

Шаг 1: Создаём первое меню

Зайдите в админку и перейдите по пути Внешний вид → Меню. На свежей установке WordPress страница будет почти пустой, слева панель доступных элементов, справа область для формирования списка.

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

• Впишите понятное название в поле Название меню, например, «Основное меню» или «Главная навигация»

• Нажмите кнопку Создать меню

Правая часть экрана сразу изменится: появятся блоки «Структура меню» и «Настройки меню». Пока структура пуста, переходим к наполнению.

Штук пять-шесть меню одновременно вам вряд ли понадобятся. Но возможность создать отдельную навигацию для футера или мобильной версии есть, ограничений по количеству WordPress не ставит.

Шаг 2: Добавляем элементы в меню

Теперь основной фокус, на левой панели редактора. Там собраны вкладки с тем, что можно отправить в навигацию:

• Страницы, список всех опубликованных страниц сайта
• Записи, посты блога
• Категории, рубрики, по которым сгруппированы записи
• Произвольные ссылки, любые URL, включая внешние сайты

Для типового блога ядро меню, это страницы («О проекте», «Контакты», «Услуги») плюс категории («Новости», «Гайды», «Обзоры»). Порядок действий:

• Откройте нужную вкладку
• Отметьте галочками страницы/категории, которые должны попасть в меню
• Нажмите Добавить в меню
• Повторите для остальных вкладок

Страницы и категории подтягиваются автоматически, достаточно проставить галочки. С произвольной ссылкой чуть иначе: вам нужен полный URL (например, https://developer.wordpress.org) и текстовая метка, то, что увидит посетитель в меню вместо голого адреса.

Обратите внимание: категории работают как группировка записей. Когда посетитель кликает пункт «Гайды» в меню, он попадает на страницу со всеми постами этой рубрики. Подробнее о логике категорий, в материале SitePoint.

Шаг 3: Расставляем порядок и создаём подменю

Как только в правой колонке появилось хотя бы два элемента, можно менять их очерёдность. WordPress даёт два способа.

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

Через стрелку. Кликните по маленькой стрелке справа от названия пункта, раскроется карточка с опциями:

• Переместить вверх / вниз, сдвиг на одну позицию
• Наверх / В начало, перенос в первую строку
• Под <родитель>, превращение в подпункт (см. ниже)
• Из <родителя>, возврат на верхний уровень
• Удалить, красная ссылка внизу карточки, убирает элемент ТОЛЬКО из меню, не трогая саму страницу или запись

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

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

Тот же результат можно получить через карточку элемента: раскройте стрелкой, нажмите Под <название родительского пункта>. Для возврата используйте Из <родителя> или просто перетащите влево.

Удаление элемента из меню не удаляет страницу с сайта. Произвольная ссылка при удалении теряется безвозвратно, если планируете вернуть её позже, запишите URL отдельно.

Шаг 4: Настройки меню перед сохранением

Перед тем как нажать «Сохранить меню», проверьте два параметра в нижней части правой колонки.

Автоматическое добавление страниц верхнего уровня. Если включено, каждая новая страница без родителя будет автоматически попадать в это меню. В небольших сайтах опция экономит время. На сайтах с десятками страниц, скорее создаёт хаос, держите выключенной.

Расположение отображения. Здесь перечислены места, которые тема зарезервировала под меню: основная навигация, футер, мобильное меню и так далее. Отметьте нужные галочками, одно меню можно вывести сразу в несколько мест.

Когда структура и настройки устраивают, жмите Сохранить меню. Кнопка есть и вверху, и внизу редактора, работают одинаково.

Шаг 5: Расширенные возможности через «Параметры экрана»

В самом верху страницы редактора меню есть вкладка Параметры экрана. Раскройте её, появится список дополнительных опций, скрытых по умолчанию.

Что можно включить:

• Метки и форматы записей, если в теме используется механизм форматов (aside, gallery, video), их можно добавить в меню отдельными пунктами
• Целевой атрибут ссылки, открывать пункт в новой вкладке (target="_blank")
• CSS-классы, кастомные классы для стилизации конкретного пункта через CSS
• Отношения ссылок (XFN), микроформат для указания связи между страницами (редко нужен, оставьте пустым)
• Описание, текст, который появляется при наведении на пункт (зависит от темы)

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

Шаг 6: Выводим меню в сайдбар через виджеты

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

Алгоритм:

• Перейдите в Внешний вид → Виджеты
• Найдите в списке доступных виджет Произвольное меню
• Перетащите его в нужную область, например, «Боковая панель» или «Footer Widgets»
• В выпадающем списке выберите ранее созданное меню
• Дайте заголовок (отобразится над меню в сайдбаре) и нажмите Сохранить

Этот же механизм работает и для старых тем на «Классических виджетах», и для блочных тем на основе редактора сайта, логика та же, меняется только интерфейс.

⁉️🤔 Частые вопросы

Можно ли создать два разных меню и показывать их в разных местах?

Да, без ограничений. Создайте несколько меню через Внешний вид → Меню и назначьте каждому своё расположение отображения. Одно меню, в шапку, другое, в футер, третье, в боковую панель через виджеты. Количество мест привязки зависит от темы: в среднем 2-4 позиции.

Что делать, если в теме только одно место под меню?

Задействуйте виджеты. Через Внешний вид → Виджеты можно разместить дополнительные меню в сайдбаре или футере, даже если тема не регистрирует там специальных позиций. Либо используйте плагин для расширенной навигации, например, Max Mega Menu добавляет мега-меню и дополнительные места размещения без правки кода.

Как добавить меню в мобильную версию сайта?

В большинстве современных тем мобильное меню автоматически строится из того же основного меню. Вы просто отмечаете его в списке расположений, а тема сама адаптирует отображение под мобильные экраны (гамбургер-иконка, выпадающий список). Если тема этого не делает, ищите в настройках кастомайзера (Внешний вид → Настроить) раздел Menus / Mobile Menu.

Можно ли добавить в меню корзину WooCommerce или кнопку поиска?

Стандартными средствами, нет. По умолчанию в меню добавляются только страницы, категории и произвольные ссылки. Для иконок корзины, поиска или кнопки входа нужен либо специализированный плагин (например, Menu Icons by ThemeIsle), либо тема с поддержкой таких элементов в настройках кастомайзера.

Слетает ли меню при смене темы?

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

Что в итоге: собрали навигацию за шесть шагов

На создание первого меню уходит три минуты, если знаешь куда нажимать. На практике схема такая: дали имя → добавили 4-5 ключевых страниц и пару категорий → расставили порядок → сохранили. Всё. Дальше можно докручивать: подменю для структурирования, дополнительные места через виджеты, CSS-классы для тонкой стилизации.

Главное правило: делайте меню для посетителя, а не для красоты. Три-четыре понятных пункта лучше десяти мелких, в которых никто не разбирается. Если страницу сложно найти за два клика из меню, скорее всего, с навигацией что-то не так.

Проверьте, как меню выглядит на телефоне, треть трафика WordPress-сайтов приходит с мобильных устройств. Криво свёрстанное подменю на смартфоне сводит всю пользу навигации к нулю.