Класс Walker_Nav_Menu в WordPress: хуки, методы, примеры

# Класс Walker_Nav_Menu в WordPress

Класс Walker_Nav_Menu используется для реализации HTML-списка элементов навигационного меню в WordPress. Этот класс позволяет создавать и настраивать структуру меню на вашем сайте.

## Используемые хуки

Класс содержит несколько хуков, которые позволяют модифицировать меню:

- nav_menu_submenu_css_class - для изменения CSS-класса подменю.
- nav_menu_submenu_attributes - для добавления атрибутов к подменю.
- nav_menu_item_args - для изменения аргументов элемента меню.
- nav_menu_css_class - для изменения CSS-классов элементов меню.
- nav_menu_item_id - для изменения ID элемента меню.
- nav_menu_item_attributes - для изменения атрибутов элемента меню.
- the_title - для изменения заголовка элемента меню.
- nav_menu_item_title - для изменения заголовка элемента меню.
- nav_menu_link_attributes - для изменения атрибутов ссылок в меню.
- walker_nav_menu_start_el - для изменения начального вывода элемента меню.

## Применение

Чтобы использовать класс Walker_Nav_Menu, создайте его экземпляр:

```php
$walker_nav_menu = new Walker_Nav_Menu();

И используйте методы класса для работы с меню.

Методы

1. protected build_atts( $atts = array() )

Этот метод создает строку HTML-атрибутов из массива ключ/значение.

2. public end_el( &$output, $data_object, $depth = 0, $args = null )

Завершает вывод элемента меню.

3. public end_lvl( &$output, $depth = 0, $args = null )

Завершает вывод уровня меню.

4. public start_el( &$output, $data_object, $depth = 0, $args = null, $current_object_id = 0 )

Начинает вывод элемента меню.

5. public start_lvl( &$output, $depth = 0, $args = null )

Начинает вывод уровня меню.

Пример

Создание собственного HTML-кода для wp_nav_menu()

Можно расширить класс Walker_Nav_Menu для создания собственного HTML-кода, который будет выводиться функцией wp_nav_menu(). Ниже приведен пример класса, который добавляет глубину меню и парные/непарные CSS-классы к элементам меню:

/**
 * Класс для кастомизации навигационного меню.
 */
class My_Walker_Nav_Menu extends Walker_Nav_Menu {

    /**
     * Добавляет классы к подменю.
     */
    function start_lvl( &$output, $depth = 0, $args = null ) {
        $indent = ($depth > 0 ? str_repeat("t", $depth) : '');
        $display_depth = ($depth + 1);
        $classes = [
            'sub-menu',
            ($display_depth % 2 ? 'menu-odd' : 'menu-even'),
            ($display_depth >= 2 ? 'sub-sub-menu' : ''),
            'menu-depth-' . $display_depth,
        ];
        $class_names = implode(' ', $classes);
        $output .= "n" . $indent . '
' . "n";
    }

    /**
     * Добавляет классы к элементам меню и ссылкам.
     */
    function start_el( &$output, $data_object, $depth, $args, $current_object_id = 0 ) {
        $item = $data_object;

        $indent = ($depth > 0 ? str_repeat("t", $depth) : '');

        $depth_classes = [
            ($depth == 0 ? 'main-menu-item' : 'sub-menu-item'),
            ($depth >= 2 ? 'sub-sub-menu-item' : ''),
            ($depth % 2 ? 'menu-item-odd' : 'menu-item-even'),
            'menu-item-depth-' . $depth,
        ];
        $depth_class_names = esc_attr(implode(' ', $depth_classes));
        $classes = empty($item->classes) ? [] : (array)$item->classes;
        $class_names = esc_attr(implode(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item)));

        $output .= $indent . '
';

        $attributes = !empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) . '"' : '';
        $attributes .= !empty($item->target) ? ' target="' . esc_attr($item->target) . '"' : '';
        $attributes .= !empty($item->xfn) ? ' rel="' . esc_attr($item->xfn) . '"' : '';
        $attributes .= !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
        $attributes .= ' class="menu-link ' . ($depth > 0 ? 'sub-menu-link' : 'main-menu-link') . '"';

        $item_output = strtr('{BEFORE}{LINK_BEFORE}{TITLE}{LINK_AFTER}{AFTER}', [
            '{BEFORE}' => $args->before,
            '{ATTRIBUTES}' => $attributes,
            '{LINK_BEFORE}' => $args->link_before,
            '{TITLE}' => apply_filters('the_title', $item->title, $item->ID),
            '{LINK_AFTER}' => $args->link_after,
            '{AFTER}' => $args->after,
        ]);

        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }

}

Использование кастомизированного класса

Теперь, чтобы использовать этот класс в функции wp_nav_menu(), нужно указать его в параметре walker:

function my_nav_menu($args) {
    $args = array_merge([
        'container'       => 'div',
        'container_id'    => 'top-navigation-primary',
        'container_class' => 'top-navigation',
        'menu_class'      => 'menu main-menu menu-depth-0 menu-even',
        'echo'            => false,
        'items_wrap'      => '
%3$s
',
        'depth'           => 10,
        'walker'          => new My_Walker_Nav_Menu()
    ], $args);

    echo wp_nav_menu($args);
}

И теперь ваш кастомизированный menu можно выводить следующим образом:

my_nav_menu([
    'theme_location' => 'navigation_menu_primary'
]);

Примечания

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

• register_nav_menu - для регистрации меню.
• wp_nav_menu - для вывода меню на сайте.

Изменения

Класс Walker_Nav_Menu был введен в WordPress с версии 3.0.0.