Customizing Walker_Nav_Menu

时间:2013-10-04 作者:djthoms

我正在寻找一种解决方案来调整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> 锚元素内部。[number] 表示开始于的项目编号1. 这是一个视觉效果:enter image description here

菜单的结构将是:

<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。我已经看过:

1 个回复
最合适的回答,由SO网友:Eugene Manuilov 整理而成

您只需要创建自己的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 .\'>\';

        // add span with number here
        if ( $depth == 0 ) { // remove if statement if depth check is not required
            $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\',
    )
);

结束

相关推荐

WP_PAGE_MENU_ARGS过滤器中的Walker_Nav_Menu不起作用

我需要从菜单中隐藏某些导航项目(基于密码保护功能),而我的自定义助行器无法正常工作。事实上,当我通过过滤器添加标准Walker\\u Nav\\u菜单时,我甚至无法让它工作。我创建了一个插件,如下所示:<?php function myplugin_page_menu_args( $args ) { $args[\'walker\'] = new Walker_Nav_Menu; return $args; } add_filter(