Настройка Walker_Nav_Menu

Question

Настройка Walker_Nav_Menu

4 окт. 2013 г., 05:01:18

Просмотры: 30.5K

Голосов: 2

Я ищу решение для изменения вывода wp_nav_menu только для определенного навигационного меню. У меня есть меню:

wp_nav_menu(
    array(
        "container"         => "nav",
        "container_class"   => "container",
        "container_id"      => "nav",
        "fallback_cb"       => false,
        "menu_class"        => "six columns omega main-nav sf-menu",
        "theme_location"    => "main-nav"
    )
);

Проблема

Мне нужно найти способ вставить <span>[number]</span> внутрь элемента anchor. [number] представляет собой номер пункта, начиная с 1. Вот визуальный пример: Пример нумерации пунктов меню

Структура меню должна быть следующей:

<li class="...">
    <a href="#"><span>01.</span>Home</a>
</li>
<li class="...">
    <a href="#"><span>02.</span>Services</a>
</li>
<li class="...">
    <a href="#"><span>03.</span>Portfolio</a>
</li>

В настоящее время я использую хак jQuery. Это работает, но нет гарантии, что пользователь просто не отключит JavaScript. Я изучил:

У меня есть идея, что необходимо расширить класс walker, но моя главная проблема заключается в создании ссылок вручную и вставке динамической информации перед выводом текста ссылки. Вопрос на Stack Overflow решает это, но не объясняет, как этого достичь.

Дополнение

Чтобы получить точный результат, который я хотел, смотрите pastebin. $item->title нужно было изменить, чтобы следовать HTML-структуре, как указано выше.

djthoms

123

навигация вокер

Все ответы на вопрос

Комментарии

Нужно ли include класс в том же файле, что и навигация, или это происходит автоматически через систему хуков?

djthoms

4 окт. 2013 г. 19:45:28

Создайте отдельный файл wpse8170-menu-walker.php в корне вашей темы. Скопируйте туда класс. Добавьте include 'wpse8170-menu-walker.php' в ваш шаблон.

Eugene Manuilov

4 окт. 2013 г. 20:17:05

Большое спасибо! Я понял, что допустил ошибку новичка, редактируя не тот файл, лол

djthoms

5 окт. 2013 г. 19:18:53

Eugene Manuilov 11.4K · Accepted Answer · 2013-10-04T09:28:08Z

Вам просто нужно создать собственный класс-обходчик (walker) и расширить метод start_el. Этот метод формирует ссылку a, и вы сможете добавить свой span перед ней:

class Wpse8170_Menu_Walker extends Walker_Nav_Menu {

    var $number = 1;

    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $value . $class_names .'>';

        // добавляем span с номером здесь
        if ( $depth == 0 ) { // уберите условие if, если проверка глубины не требуется
            $output .= sprintf( '<span>%02s.</span>', $this->number++ );
        }

        $atts = array();
        $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
        $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
        $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
        $atts['href']   = ! empty( $item->url )        ? $item->url        : '';

        $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

        $attributes = '';
        foreach ( $atts as $attr => $value ) {
            if ( ! empty( $value ) ) {
                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

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

}

После этого вы сможете использовать этот класс в вызове функции wp_nav_menu:

wp_nav_menu(
    array(
        "container"         => "nav",
        "container_class"   => "container",
        "container_id"      => "nav",
        "fallback_cb"       => false,
        "menu_class"        => "six columns omega main-nav sf-menu",
        "theme_location"    => "main-nav",
        "walker"            => 'Wpse8170_Menu_Walker',
    )
);