Создание меню WordPress | WordPress шаблон меню
Создание меню навигации в теме для WordPressДля создания меню необходимо воспользоваться функцией wp_nav_menu(), параметром которой является массив мета данных для настройки меню. Далее нужно это меню зарегистрировать в файле functions.php после чего в панеле WordPress, во вкладке Внешний вид появится новая вкладка с названием Меню, именно в ней мы сможем окончательно завершить создание и настройку меню для темы.
Шаг 1: Создание и определение параметров меню
Для начала нужно открыть файл header.php и в соответствующем блоке, в котором будет находится будущее меню, добавить функцию отображения меню wp_nav_menu() с набором аргументов определённых в массиве $args.
Помимо приведенных выше параметров, существуют также и другие параметры, которые при необходимости, можно добавить в массив.
Все доступные параметры меню приведены в таблице в конце статьи.
Шаг 2: Регистрация созданного меню
После того как мы вставили код с меню в нужное место, его необходимо зарегистрировать (активировать) с помощью функции register_nav_menus() в файле functions.php, параметром которой является массив всех имеющихся типов меню. После чего в панеле управления, во вкладке Внешний вид появится новая подвкладка Меню, где мы сможем управлять всеми зарегистрированными типами меню.
Шаг 3: Настраиваем меню в панеле управления
Переходим во вкладку Меню, где определяемся с именем нового меню и сохраняем его. Далее можно добавить в него необходимые страницы.
Создание меню для темы WordPressУказываем все те ссылки, которые хотим видеть в меню. В примере ниже указаны ссылки на страницы сайта и одна произвольная ссылка на главную страницу.
В завершении нам остаётся только перейти во вкладку Управление областями и соотнести названия только что созданных меню с теми именами, которые мы упомянули при регистрации в функции register_nav_menus(). На этом процесс создания меню завершен.
Для создания меню в других областях сайта, например в футере или сайдбаре, нужно всего лишь в соответствующих файлах (, sidebar.php), по аналогии с header.php, создать функцию wp_nav_menu() с определенными параметрами и зарегистрировать её.
В конечном итоге мы получим следующий результат.
Вывод готового меню в header.phpВы можете визуально выделить активную ссылку меню, для этого укажите css-стили для селектора .current-menu-item.
| Параметр | Описание |
|---|---|
| menu | название меню.![]() |
| menu_class | имя CSS класса, который будет назначен элементу оборачивающему меню (ul). По умолчанию — ‘menu’. |
| menu_id | имя идентификатора, который будет назначен элементу оборачивающему меню (ul). |
| container | название контейнера, в который будет обернуто меню. По умолчанию — ‘div’. |
| container_class | имя CSS класса для контейнера меню. По умолчанию — ‘menu-{menu slug}-container’. |
| container_id | имя идентификатора для контейнера меню.![]() |
| fallback_cb | если меню не существует будет вызвана обратная функция (callback). Если ее вызов не нужен, установите значение — ‘false’. По умолчанию — ‘wp_page_menu’. |
| before | текст, отображающийся перед ссылкой (перед тегом <a>). |
| after | текст, отображающийся после ссылки (после тега <a>). |
| link_before | текст, отображающийся перед значением ссылки (внутри тега <a>). |
| link_after | текст, отображающийся после значения ссылки (внутри тега <a>).![]() |
| echo | отвечает за вывод меню. Значение ‘true’ — вывести меню, значение ‘false’ — не выводить меню. По умолчанию — ‘true’. |
| depth | вывод определенного количества вложенных уровней меню. Значение 0 — вывод всех уровней. По умолчанию — 0. |
| walker | указывает объект, в котором описано построение меню. По умолчанию — Walker_Nav_Menu. |
| theme_location | выбор места, где нужно вывести меню. Значение должно быть зарегистрировано в функции register_nav_menu() |
| items_wrap | описывает способ обертки пунктов списка. По умолчанию — ‘<ul>%3$s</ul>’. |
Понравилась статья? Расскажите о ней друзьям!
Купить автору кофе
Создание меню для сайта на WordPress
adminWordPressДля создания меню необходимо воспользоваться функцией wp_nav_menu(), параметром которой является массив мета данных для настройки меню. Далее нужно это меню зарегистрировать в файле functions.php после чего в панели WordPress, во вкладке Внешний вид появится новая вкладка с названием Меню, именно в ней мы сможем окончательно завершить создание и настройку меню для темы.
Для начала нужно открыть файл header.php и в соответствующем блоке, в котором будет находится будущее меню, добавить функцию отображения меню wp_nav_menu() с набором аргументов определённых в массиве $args.
Все доступные параметры меню приведены в таблице в конце статьи.
После того как мы вставили код с меню в нужное место, его необходимо зарегистрировать (активировать) с помощью функции register_nav_menus() в файле functions.php, параметром которой является массив всех имеющихся типов меню. После чего в панели управления, во вкладке
Переходим во вкладку Меню, где определяемся с именем нового меню и сохраняем его. Далее можно добавить в него необходимые страницы.
Создание меню для темы WordPressУказываем все те ссылки, которые хотим видеть в меню. В примере ниже указаны ссылки на страницы сайта и одна произвольная ссылка на главную страницу.
Пример добавления ссылок на страницы в менюВ завершении нам остаётся только перейти во вкладку Управление областями и соотнести названия только что созданных меню с теми именами, которые мы упомянули при регистрации в функции .
На этом процесс создания меню завершен.
Для создания меню в других областях сайта, например в футере или сайдбаре, нужно всего лишь в соответствующих файлах (footer.php, sidebar.php), по аналогии с header.php, создать функцию wp_nav_menu() с определенными параметрами и зарегистрировать её.
В конечном итоге мы получим следующий результат.
Вывод готового меню в header.phpВы можете визуально выделить активную ссылку меню, для этого укажите css-стили для селектора .current-menu-item.
| Параметр | Описание |
|---|---|
| menu | название меню. Может содержать: id, slug или имя. |
| menu_class | имя CSS класса, который будет назначен элементу оборачивающему меню (ul). По умолчанию — ‘menu’. |
| menu_id | имя идентификатора, который будет назначен элементу оборачивающему меню (ul). |
| container | название контейнера, в который будет обернуто меню. По умолчанию — ‘div’. |
| container_class | имя CSS класса для контейнера меню. По умолчанию — ‘menu-{menu slug}-container’. |
| container_id | имя идентификатора для контейнера меню. |
| fallback_cb | если меню не существует будет вызвана обратная функция (callback). Если ее вызов не нужен, установите значение — ‘false’. По умолчанию — ‘wp_page_menu’. |
| before | текст, отображающийся перед ссылкой (перед тегом <a>). |
| after | текст, отображающийся после ссылки (после тега <a>). |
| link_before | текст, отображающийся перед значением ссылки (внутри тега <a>). |
| link_after | текст, отображающийся после значения ссылки (внутри тега <a>). |
| echo | отвечает за вывод меню. Значение ‘true’ — вывести меню, значение ‘false’ — не выводить меню. По умолчанию — ‘true’. |
| depth | вывод определенного количества вложенных уровней меню. Значение 0 — вывод всех уровней.По умолчанию — 0. |
| walker | указывает объект, в котором описано построение меню. По умолчанию — Walker_Nav_Menu. |
| theme_location | выбор места, где нужно вывести меню. Значение должно быть зарегистрировано в функции register_nav_menu() |
| items_wrap | описывает способ обертки пунктов списка. По умолчанию — ‘<ul id=»%1$s» class=»%2$s»>%3$s</ul>’. |
Как добавить меню навигации в WordPress (Руководство для начинающих)
Хотите добавить меню навигации на свой сайт WordPress?
WordPress поставляется с интерфейсом меню перетаскивания, который вы можете использовать для создания меню заголовков, меню с раскрывающимися параметрами и т. д.
В этом пошаговом руководстве мы покажем вам, как легко добавить меню навигации в WordPress.
Что такое меню навигации?
Меню навигации — это список ссылок, указывающих на важные разделы веб-сайта.
Обычно они представлены в виде горизонтальной полосы ссылок в верхней части каждой страницы на веб-сайте WordPress.
Меню навигации определяют структуру вашего сайта и помогают посетителям найти то, что они ищут. Вот как выглядит меню навигации на WPBeginner:
WordPress позволяет очень легко добавлять меню и подменю. Вы можете добавлять ссылки на свои самые важные страницы, категории или темы, сообщения в блогах WordPress и даже пользовательские ссылки, такие как ваш профиль в социальных сетях.
Точное расположение вашего меню будет зависеть от вашей темы WordPress. Большинство тем будут иметь несколько опций, поэтому вы можете создавать разные меню, которые будут отображаться в разных местах.
Например, большинство тем WordPress имеют основное меню, которое отображается вверху. Некоторые темы могут включать вторичное меню, меню нижнего колонтитула или мобильное меню навигации.
Тем не менее, давайте посмотрим, как вы можете создать пользовательское меню навигации в WordPress.
Видеоруководство
Подписаться на WPBeginner
Если вы предпочитаете письменные инструкции, просто продолжайте читать
Создание вашего первого пользовательского меню навигации
Чтобы создать меню навигации, вам нужно посетить страницу Внешний вид » Меню в панели администратора WordPress.
Примечание : Если вы не видите опцию «Внешний вид» Меню» на своем сайте, а видите только «Внешний вид» Редактор (бета-версия)», это означает, что в вашей теме включено полное редактирование сайта (FSE). Вы можете нажать здесь, чтобы перейти к разделу FSE ниже.
Сначала вам нужно указать имя для вашего меню, например «Верхнее меню навигации», а затем нажать кнопку «Создать меню».
Это расширит область меню, и оно будет выглядеть следующим образом:
Далее вы можете выбрать страницы, которые хотите добавить в меню. Вы можете либо автоматически добавить все новые страницы верхнего уровня, либо выбрать определенные страницы из левого столбца.
Сначала нажмите на вкладку «Просмотреть все», чтобы увидеть все страницы вашего сайта. После этого установите флажок рядом с каждой из страниц, которые вы хотите добавить в свое меню, а затем нажмите кнопку «Добавить в меню».
После добавления страниц их можно перемещать, перетаскивая.
Таким образом, вы можете изменить их порядок и переставить их.
Примечание: Элементы всех меню перечислены в вертикальном (сверху вниз) списке в редакторе меню. Когда вы размещаете меню на своем сайте, оно будет отображаться либо вертикально, либо горизонтально (слева направо), в зависимости от выбранного вами местоположения.
Большинство тем имеют несколько разных мест, куда можно поместить меню. В этом примере мы используем тему Astra, которая имеет 5 разных мест.
После добавления страниц в меню выберите место, где вы хотите отобразить меню, и нажмите кнопку «Сохранить меню».
Совет: Если вы не уверены, где находится каждое место, попробуйте сохранить меню в разных местах, а затем посетите свой сайт, чтобы посмотреть, как оно выглядит. Вероятно, вы не захотите использовать все местоположения, но вы можете использовать более одного.
Вот наше готовое меню на сайте:
Создание выпадающих меню в WordPress
Выпадающие меню, иногда называемые вложенными меню, представляют собой меню навигации с родительскими и дочерними пунктами меню.
Когда вы наводите курсор на родительский элемент, все дочерние элементы появляются под ним в подменю.
Чтобы создать подменю, перетащите элемент под родительский элемент, а затем слегка перетащите его вправо. Мы сделали это с тремя подпунктами в разделе «Услуги» в нашем меню:
Вы даже можете добавить несколько слоев раскрывающихся списков, чтобы ваше подменю могло иметь подменю. Это может выглядеть немного загроможденным, и многие темы не поддерживают многоуровневые раскрывающиеся меню.
Вот подменю на нашем демонстрационном сайте:
Добавление категорий в меню WordPress
Если вы используете WordPress для ведения блога, вы можете добавить категории блога в виде раскрывающегося списка в своем WordPress меню.
Мы делаем это на WPBeginner и имеем несколько категорий, таких как новости, темы, учебные пособия и многое другое.
Вы можете легко добавить категории в свое меню, щелкнув вкладку «Категории» в левой части экрана меню. Вам также может понадобиться щелкнуть вкладку «Просмотреть все», чтобы увидеть все свои категории.
Просто выберите категории, которые вы хотите добавить в меню, а затем нажмите кнопку «Добавить в меню».
Категории будут отображаться как обычные пункты меню внизу вашего меню.
Затем вы можете перетащить их на место. Например, мы поместим все эти категории в пункт меню «Блог».
Вы хотите, чтобы на вашем сайте была страница блога, отдельная от главной страницы? Если это так, ознакомьтесь с нашим руководством о том, как создать отдельную страницу для сообщений блога в WordPress.
Вот как различные категории отображаются в навигационном меню на нашем демонстрационном сайте:
Помимо категорий и страниц, WordPress также упрощает добавление пользовательских ссылок в ваше меню. Вы можете использовать его для ссылки на свои профили в социальных сетях, интернет-магазин и другие веб-сайты, которыми вы владеете.
Вам нужно будет использовать вкладку «Пользовательские ссылки» на экране меню. Просто добавьте ссылку вместе с текстом, который вы хотите использовать в своем меню, и нажмите кнопку «Добавить в меню».
Вы даже можете проявить творческий подход и добавить значки социальных сетей в свое меню или кнопки призыва к действию, чтобы получить больше конверсий.
Редактирование или удаление элемента меню в меню навигации WordPress
Когда вы добавляете страницы или категории в свое пользовательское меню навигации, WordPress использует заголовок страницы или название категории в качестве текста ссылки. Вы можете изменить это, если хотите.
Любой пункт меню можно редактировать, нажав на стрелку вниз рядом с ним.
Здесь вы можете изменить название пункта меню. Здесь вы также можете нажать «Удалить», чтобы полностью удалить ссылку из меню.
Если вам не нравится интерфейс перетаскивания, вы также можете перемещать пункт меню, щелкнув соответствующую ссылку «Переместить».
Новый полноценный редактор сайта позволяет настраивать темы WordPress с помощью редактора блоков. Он был выпущен в WordPress 5.9.и позволяет добавлять в шаблоны различные блоки для создания уникального дизайна.
Тем не менее, полный редактор сайта все еще находится в стадии бета-тестирования и ограничен определенными темами, которые его поддерживают. В этом уроке мы будем использовать тему Twenty Twenty-Two по умолчанию. Для получения более подробной информации вы можете прочитать нашу статью о лучших темах для полнофункционального редактирования сайта WordPress.
Чтобы добавить навигационное меню с помощью полнофункционального редактора сайта, вам сначала нужно перейти в Внешний вид » Редактор на панели инструментов WordPress. Вы также можете нажать кнопку «Настроить» в теме Twenty Twenty-Two, чтобы открыть полноценный редактор сайта.
Как только вы окажетесь в редакторе, нажмите на навигационное меню, которое появляется в верхней части заголовка веб-сайта.
Далее вы увидите различные варианты настройки блока навигационного меню на панели справа.
Например, вы можете изменить макет, отредактировать параметры отображения, показать подменю по щелчку, изменить цвет текста, фона и подменю, а также настроить размер шрифта.
Для получения дополнительных параметров, таких как изменение меню или создание нового, вы можете щелкнуть параметр «Выбрать меню», чтобы открыть раскрывающееся меню.
Например, вы можете выбрать любое ранее созданное меню в разделе «Классические меню».
Выбрав меню, вы можете добавить дополнительные страницы, сообщения в блогах, логотипы сайтов, значки социальных сетей или добавить в меню параметр поиска.
Просто нажмите знак «+», чтобы добавить блок в меню навигации, а затем выберите параметр, который появится в раскрывающемся меню.
Самое приятное в использовании полнофункционального редактора сайта — это то, что вы можете добавить блок навигационного меню в любом месте вашего сайта.
Когда вы закончите, вы можете просмотреть изменения, чтобы увидеть, как меню выглядит в режиме реального времени. Затем не забудьте нажать кнопку «Сохранить» вверху.
Добавление меню WordPress в боковые панели и нижние колонтитулы
Вам не нужно просто придерживаться мест отображения для вашей темы.
Вы можете добавить меню навигации в любую область, где используются виджеты, например на боковую панель или нижний колонтитул.
Просто перейдите в раздел Внешний вид » Виджеты , затем щелкните знак «+» вверху и добавьте блок виджета «Меню навигации» на боковую панель.
Затем добавьте название для виджета и выберите нужное меню из выпадающего списка «Выбор меню».
Когда вы закончите, просто нажмите кнопку «Обновить».
Вот пример пользовательского нижнего колонтитула WordPress, созданного на веб-сайте Сайеда Балхи.
Идем дальше с навигационными меню
Если вы хотите создать действительно эпическое меню с множеством ссылок, у нас есть руководство о том, как создать мегаменю в WordPress.
Позволяет создать раскрывающийся список с большим количеством элементов, включая изображения.
Мегаменю — отличный вариант, если у вас большой сайт, например интернет-магазин или новостной сайт. Этот тип меню используется такими сайтами, как Reuters, Buzzfeed, Starbucks и т.
д.
1. Как добавить ссылку на домашнюю страницу в меню WordPress?
Чтобы добавить свою домашнюю страницу в меню навигации, вам нужно щелкнуть вкладку «Просмотреть все» в разделе «Страницы». Оттуда вы должны увидеть свою домашнюю страницу.
Установите флажок рядом с «Домой» и нажмите «Добавить в меню». Не забудьте сохранить изменения.
2. Как добавить несколько навигационных меню в WordPress?
В WordPress вы можете создавать сколько угодно меню. Чтобы разместить меню на своем веб-сайте, вам нужно добавить его в одно из мест меню вашей темы или в область виджетов, как мы показали выше.
Чтобы добавить несколько меню навигации на свой сайт WordPress, сначала создайте меню, следуя нашему руководству выше.
Чтобы разместить их на своем сайте, нажмите на вкладку «Управление местоположениями».
Отсюда вы можете выбрать, какое меню вы хотите отображать в местах меню, доступных в вашей теме.
Если вы хотите добавить новое меню на свой сайт, ознакомьтесь с нашим руководством о том, как добавить настраиваемые меню навигации в темы WordPress.
Мы надеемся, что эта статья помогла вам научиться добавлять меню навигации в WordPress. Вы также можете ознакомиться с нашими руководствами о том, как стилизовать меню навигации в WordPress и как создать липкое плавающее меню навигации в WordPress.
Если вам понравилась эта статья, подпишитесь на наш YouTube канал для видеоуроков по WordPress. Вы также можете найти нас в Твиттере и Facebook.
Я по-разному видел register_nav_menus() вызываемый:
- на
after_setup_theme - на
инициализация - вставлен «свободно» в
functions.php
без видимых изменений в функциональности.
Какой хук следует использовать для вызова этой функции?
- меню
- хуки
- настройка
Во-первых, вы не должны регистрировать функции свободные в functions., потому что вы не можете удалить их (используя
php remove_action ). Это также может вызвать ошибки отладки, поскольку WP может быть еще нестабильным. Используя хук, вы гарантируете, что WP достаточно стабилен для запуска вашего кода, и то, что вам нужно использовать, было загружено.
Ознакомьтесь с ответом на форумах WordPress для получения дополнительной информации
Чтобы решить, какой хук использовать, сначала ознакомьтесь с этим ответом.
Основное различие между ними:
- Пользователь не аутентифицирован на
after_setup_theme - Пользователь аутентифицируется по адресу
init.
Таким образом, хук after_setup_theme явно запускается до init , вы можете увидеть это в Справочнике по действиям
Согласно странице Кодекса WordPress на after_setup_theme :
Этот хук вызывается при загрузке каждой страницы после того, как тема инициализирован.
Обычно он используется для выполнения базовой настройки, регистрация и инициализация действий для темы.
Поскольку вы регистрируете меню, я бы предложил использовать after_setup_theme . Кодекс WordPress для register_nav_menu() также использует after_setup_theme 9Крючок 0194 в одном из примеров.
2
Вы можете использовать их в тот момент, когда они станут доступны, т.е. как только будет загружен functions.php , поэтому вы видели так много разных вариантов.
Я бы порекомендовал придерживаться пути "де-факто" - используя хук after_setup_theme
В документации для register_nav_menu показан пример использования хука after_setup_theme , поэтому я бы использовал его.
after_setup_theme
Этот хук вызывается при загрузке каждой страницы после инициализации темы.




Значение 0 — вывод всех уровней.
Обычно он используется для выполнения базовой настройки, регистрация и инициализация действий для темы.