Меню в WordPress: как создать и вывести на сайте за 15 минут

Меню для шапки сайта на WordPress 6.x собирается за 10-15 минут: вы создаёте список пунктов, делаете один выпадающий подпункт и привязываете меню к области темы. Последний шаг пропускают чаще всего. В итоге меню есть в админке, а на сайте его нет. Ниже порядок, при котором так не случится.

Что нужно до начала

• WordPress 6.x с классической темой. Проверка простая: в админке есть пункт «Внешний вид → Меню». Если его нет, у вас блочная тема, см. раздел «Если не получилось».
• Роль администратора. Редактору этот раздел обычно недоступен.
• Две-три опубликованные страницы, которые станут пунктами.
• Для шагов 7 и 8 (нужны, только если тема не объявляет области под меню): доступ к файлам по FTP или через файловый менеджер хостинга и свежая резервная копия сайта.

Шаги 1-6: собираем меню в админке

1. Откройте «Внешний вид → Меню». Проверка: на странице есть поле «Название меню» и кнопка «Создать меню». Если меню уже есть, сверху будет список для выбора редактируемого меню.
2. Введите название и нажмите «Создать меню». Название видите только вы, например «Главное». Проверка: вверху появится уведомление о создании, а слева останутся панели «Страницы», «Записи», «Произвольные ссылки» и «Рубрики».
3. Добавьте страницы. В панели «Страницы» отметьте нужные и нажмите «Добавить в меню». Проверка: пункты появятся справа в блоке «Структура меню» в порядке добавления.
4. Добавьте произвольную ссылку. В панели «Произвольные ссылки» впишите адрес с https:// и текст, затем нажмите «Добавить в меню». Проверка: новый пункт встал в конец списка. Подойдёт для внешних адресов и якорей вроде отдельного раздела на главной.
5. Сделайте подпункт. Перетащите пункт под родительский и сдвиньте чуть правее. Проверка: пункт отображается с отступом относительно родителя. Будет ли он выпадать на сайте, решает CSS темы: большинство классических тем это умеют.
6. Привяжите меню к области и сохраните. В блоке «Параметры меню» отметьте область, например шапку, и нажмите «Сохранить меню». Названия областей задаёт тема. Проверка: откройте сайт в новой вкладке и обновите страницу. Меню должно появиться на месте шапки.

Если в шаге 6 вы не увидели ни одной области, переходите к шагам 7 и 8. Если меню появилось, они вам не нужны.

Область отображения (theme location) — слот, который тема объявляет в коде под меню: шапка, подвал и так далее. Меню без привязки к слоту хранится в базе, но нигде не выводится.

Меню в WordPress живёт отдельно от страниц и от темы. Создать его мало: пока оно не привязано к области, это просто запись в базе данных.

Что куда вписать

Чтобы внешние ссылки открывались в новой вкладке, включите нужные поля в «Параметрах экрана» вверху страницы. После этого в каждом пункте появится соответствующая отметка.

Если тема не объявляет области

Когда в «Параметрах меню» нет ни одной области, тема не умеет выводить меню. Правьте не саму тему, а дочернюю: обновление родительской затрёт изменения. Встроенный «Редактор файлов темы» на рабочем сайте лучше не использовать: опечатка даёт белый экран, а откатить её через админку уже не получится. Работайте по FTP с резервной копией.

Шаг 7. Объявляем области

Добавьте код в functions.php дочерней темы. Если файла нет, создайте его с первой строкой <?php. Если он есть, вставьте блок в конец. Функция register_nav_menus работает с WordPress 3.0.

<?php
// functions.php дочерней темы
// Объявляем две области для меню: шапка и подвал
function mytheme_register_menus() {
    register_nav_menus( array(
        'primary' => esc_html__( 'Главное меню', 'mytheme' ),
        'footer'  => esc_html__( 'Меню в подвале', 'mytheme' ),
    ) );
}
// Хук after_setup_theme срабатывает при загрузке темы
add_action( 'after_setup_theme', 'mytheme_register_menus' );

Проверка: в «Внешний вид → Меню» в «Параметрах меню» появятся «Главное меню» и «Меню в подвале». Отметьте первую, сохраните меню.

Шаг 8. Выводим меню в шаблоне

Скопируйте header.php из родительской темы в дочернюю и вставьте фрагмент внутрь тега header, там, где нужно меню. Параметр container_aria_label доступен с WordPress 5.5: он подписывает навигацию для экранных читалок.

<?php
// Выводим меню, только если ему назначена область
if ( has_nav_menu( 'primary' ) ) {
    wp_nav_menu( array(
        'theme_location'       => 'primary',
        'menu_id'              => 'primary-menu',
        'container'            => 'nav',
        'container_class'      => 'site-nav',
        'container_aria_label' => 'Главное меню',
        'fallback_cb'          => false,
    ) );
}
?>

Проверка: в исходном коде страницы появится список с id primary-menu внутри тега nav. Подробности о параметрах смотрите в документации функции wp_nav_menu (ссылка в источниках).

Если не получилось

• В разделе «Внешний вид» нет пункта «Меню». Скорее всего, у вас блочная тема. Меню там делается блоком «Навигация» в редакторе сайта, это другая инструкция.
• Меню сохранено, на сайте его нет. Проверьте три вещи: отмечена ли область, выводит ли шаблон эту область и не отдаёт ли страницу кеш. Сбросьте кеш плагина и браузера.
• В «Параметрах меню» нет областей. Тема их не объявляет. Нужны шаги 7 и 8.
• Пункт есть в админке, на сайте его нет. Он обычно ведёт на неопубликованную страницу или на черновик. Опубликуйте страницу.
• Большое меню не сохраняется, пункты пропадают. Каждый пункт отправляет несколько полей формы, и страница упирается в лимит PHP max_input_vars. Попросите хостинг поднять его.
• После правки functions.php сайт показывает «На сайте возникли технические трудности» или белый экран. В коде синтаксическая ошибка. Верните прежнюю версию файла по FTP.

Меню в блочных темах и мобильное «бургер»-меню — отдельные темы, здесь они не разбираются.

Что делать дальше

• Откройте сайт на телефоне и проверьте, раскрываются ли подпункты. Если нет, это вопрос к CSS и JavaScript темы.
• Назначьте вторую область, «Меню в подвале», и соберите для неё отдельное меню.
• Проверьте произвольные ссылки после смены домена или перехода на https. Пункты-страницы обновят адрес сами, а произвольные хранят его как есть.