Функция wp_nav_menu() в WordPress: примеры использования и настройки SEO

# Функция WP_NAV_MENU() в WordPress

Функция wp_nav_menu() позволяет выводить пользовательское меню, которое создается в админ-панели WordPress: Внешний вид > Меню.

Какое именно навигационное меню будет отображаться, указывается с помощью параметра theme_location. 

Если параметр theme_location не задан, меню будет выводиться в следующем порядке:

1. Меню, которое соответствует ID, метке или описанию, переданному в параметре menu, если в этом меню есть хотя бы одна ссылка (элемент).
2. Если такого меню нет, будет выведено первое непустое меню.
3. Если все еще ничего не найдено, будет вызвана функция, указанная в параметре fallback_cb (по умолчанию используется функция wp_page_menu).
4. Если не подходит ничего, функция ничего не выведет.

Для того чтобы ваша тема поддерживала меню, необходимо активировать эту функцию с помощью:

```php
add_theme_support('menus');

Или вы можете зарегистрировать место для меню с помощью register_nav_menu(), после чего поддержка меню в теме будет включена автоматически.

Содержание

• Фильтры для изменения элементов меню
• Возврат значений
• Шаблон использования
• Использование
• $args (массив)
• Аргументы для параметра $args
• Примеры
• CSS классы для элементов меню
• И еще много примеров

Фильтры для изменения элементов меню

• nav_menu_item_args — фильтр параметров для отдельных элементов меню.
• nav_menu_css_class — фильтр CSS классов для отдельных элементов <li> меню.
• nav_menu_item_id — фильтр ID атрибута для отдельных элементов <li> меню.
• nav_menu_link_attributes — фильтр атрибутов <a> меню: title, target, rel, href.
• nav_menu_item_title — фильтр текста ссылки элемента меню.
• walker_nav_menu_start_el — фильтр HTML кода начала отдельного элемента меню.
• nav_menu_submenu_css_class — позволяет изменить CSS классы, добавляемые к вложенным элементам <ul> (подменю).

Возврат значений

Функция может вернуть null, строку или false. Она вернет null, если аргумент 'echo' равен true, а содержимое меню при echo равном false. Может вернуть false, если нет элементов или не было найдено меню.

Шаблон использования

wp_nav_menu( [
    'theme_location'  => '', // Местоположение меню
    'menu'            => '', // Идентификатор меню
    'container'       => 'div', // Тип контейнера
    'container_class' => '', // CSS класс для контейнера
    'container_id'    => '', // ID контейнера
    'menu_class'      => 'menu', // CSS класс для меню
    'menu_id'         => '', // ID для меню
    'echo'            => true, // Печать меню или возврат
    'fallback_cb'     => 'wp_page_menu', // Функция для отображения по умолчанию
    'before'          => '', // Текст перед тегом 
    'after'           => '', // Текст после тега 
    'link_before'     => '', // Текст перед ссылкой
    'link_after'      => '', // Текст после ссылки
    'items_wrap'      => '
%3$s
', // Обертка для элементов
    'depth'           => 0, // Уровень вложенности
    'walker'          => '', // Класс для построения меню
] );

Использование

Чтобы использовать функцию wp_nav_menu(), вызовите её следующим образом:

wp_nav_menu( $args );

$args (массив)

Это массив параметров меню.

• theme_location (строка) — Идентификатор местоположения меню в шаблонном файле.
• menu (строка|число) — Меню, которое вы хотите отобразить (может быть ID, слаг или название меню).
• container (строка/false) — Тип контейнера для обертки тега <ul>. Это может быть div, nav, или false, если обертка не нужна.
• container_class (строка) — Значение атрибута class для контейнера меню.
• items_wrap (строка) — Шаблон обертки для элементов меню, он должен содержать %3$s.
• depth (число) — Максимальный уровень отображаемых вложенных элементов (по умолчанию 0 - все уровни).
• echo (true/false) — Опция для отображения или возврата результата.

Примеры использования функции

Пример 1: Отобразим первое непустое меню

Пример 2: Добавление слова в начало меню

 'primary',
    'items_wrap' => '
Список: 
%3$s
'
] );
?>

Пример 3: Отображение меню с названием "Навигация сайта"

 'Навигация сайта'
] );
?>

Пример 4: Использование фильтров для всех меню

Чтобы изменить параметры всех меню сразу, используйте следующий код в файле functions.php вашей темы:

add_filter( 'wp_nav_menu_args', 'моё_меню_аргументы' );
function моё_меню_аргументы( $args = '' ){
    $args['container'] = false; // Убираем обертку
    return $args;
}

Пример 5: Управление отображением меню в зависимости от статуса пользователя

if ( is_user_logged_in() ) {
    wp_nav_menu( array( 'theme_location' => 'logged-in-menu' ) );
} else {
    wp_nav_menu( array( 'theme_location' => 'logged-out-menu' ) );
}

CSS классы для элементов меню

Ниже приведены CSS классы, применяемые к элементам меню в WordPress:

• .menu-item — для всех элементов меню.
• .current-menu-item — если ссылочный элемент совпадает с адресом текущей страницы.
• .menu-item-has-children — если у элемента есть подменю.

Также можно использовать дополнительные фильтры для кастомизации меню и его стилей в зависимости от контекста.

Изменение и стилизация меню

В примерах применения фильтров вы можете настроить классы и атрибуты меню:

add_filter( 'nav_menu_css_class', 'добавить_класс_к_меню', 10, 2 );
function добавить_класс_к_меню( $classes, $item ){
    $classes[] = 'my-special-class'; // Добавляем свой класс
    return $classes;
}

Эти примеры и объяснения помогут вам более эффективно использовать функцию wp_nav_menu() для создания навигационных меню в WordPress. Этот мощный инструмент предоставляет гибкие возможности для кастомизации меню, что позволяет сделать навигацию на вашем сайте более удобной и понятной.