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

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

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

Ниже представлен пример создания собственного класса, который формирует меню, добавляя стили для четных и нечетных элементов меню. Мы будем использовать класс Walker_Nav_Menu, который уже есть в WordPress, и просто изменим его под свои нужды.

### Пример создания пользовательского класса меню

Чтобы не изобретать велосипед, скопируем код класса Walker_Nav_Menu и изменим его по своему усмотрению.

```php
/**
 * Пользовательский класс для обработки навигационных меню.
 */
class My_Walker_Nav_Menu extends Walker_Nav_Menu {

    /**
     * Добавляет классы к подменю.
     *
     * @return void
     */
    function start_lvl( &$output, $depth = 0, $args = null ) {
        // Определение отступа и классов меню
        $indent = ( $depth > 0 ? str_repeat( "t", $depth ) : '' ); // Отступ для кода
        $display_depth = ( $depth + 1 ); // Учитываем, что первый уровень подменю считается 0
        $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";
    }

    /**
     * Добавляет классы к элементам меню и ссылкам.
     *
     * @return void
     */
    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 ) ) );

        // Формирование HTML
        $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()

Теперь, когда наш класс готов, можно использовать его в функции 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 );
}

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

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

Заключение

Создание собственного класса для обработки навигационного меню позволяет вам настраивать HTML-код, который генерирует WordPress для вашего меню. С помощью простого изменения кода и добавления стилей, вы можете сделать ваше меню уникальным и более информативным для посетителей.