Обзор
Это руководство покажет, как добавить пользовательские поля в меню WordPress, а затем изменить HTML меню.
Меню используются для организации группы ссылок (элементов меню), которые ваша тема отображает как навигацию. Если вы не знакомы с созданием или редактированием меню, прочитайте Руководство пользователя меню WordPress и Навигационные меню.
Меню используются для группировки элементов меню. Узнайте, как добавлять поля к элементам меню.
Журнал изменений
- Добавлена поддержка Menu в версии 5.6.0
Добавление полей
Плагин Advanced Custom Fields позволяет очень легко добавлять пользовательские поля в меню — выполните шаги ниже.
- На экране администрирования Пользовательские поля нажмите кнопку Добавить новый, чтобы создать новую группу полей.
- Добавьте поля, которые вы хотите видеть при редактировании меню
- В разделе Локации выберите правило Menu и укажите либо «Все» (чтобы показывать эту группу полей во всех меню), либо конкретное меню/локацию (чтобы показывать эту группу полей только для конкретного меню)
Измените настройку Style на «Seamless», если хотите, чтобы группа полей отображалась как единое целое с основными настройками (без заголовка и рамки), как показано на скриншотах в этом руководстве.
Редактирование полей
После того как вы создали группу полей и назначили её для экрана редактирования меню, значения полей редактируются на странице админки Внешний вид > Меню.
WordPress хранит каждое меню как объект term в таблице
wp_terms. ACF будет хранить все значения пользовательских полей в таблицеwp_termmeta.
Вывод полей
Настроить HTML для меню WordPress можно легко с помощью фильтра wp_nav_menu_items. Этот фильтр срабатывает каждый раз, когда меню выводится (через функцию wp_nav_menu()) и позволяет изменить HTML элементов <li> меню.
В этом примере показано, как изменить главное меню темы twentyseventeen (в этой теме расположение меню называется «top»). Обратите внимание, что для функций ACF нужен второй аргумент, чтобы указать, откуда загружать значение. Поскольку каждое меню — это объект term, мы можем просто передать этот объект во втором параметре. Объект term меню находится через данные $args->menu.
functions.php
add_filter('wp_nav_menu_items', 'my_wp_nav_menu_items', 10, 2);
function my_wp_nav_menu_items( $items, $args ) {
// получаем меню
$menu = wp_get_nav_menu_object($args->menu);
// изменяем только основное
if( $args->theme_location == 'top' ) {
// переменные
$logo = get_field('logo', $menu);
$color = get_field('color', $menu);
// добавляем логотип в начало
$html_logo = '<li class="menu-item-logo"><a href="'.home_url().'"><img src="'.$logo['url'].'" alt="'.$logo['alt'].'" /></a></li>';
// добавляем стили
$html_color = '<style type="text/css">.navigation-top{ background: '.$color.';}</style>';
// добавляем HTML
$items = $html_logo . $items . $html_color;
}
// возвращаем
return $items;
}Итоги
Вот как это может выглядеть в браузере. Обратите внимание на новые элементы логотипа <img> и цвета <style>!
Обновлено: 01.06.2026