自定义导航/菜单输出(Walker?)

时间:2013-08-21 作者:lotech

我正在尝试实现响应性jQuery导航,但我需要扩展WP菜单的默认输出。我相信我需要使用定制助行器,但老实说,我不知道如何让它为我工作;我只是不知道如何从中获得所需的输出。

我需要包装任何有跨度的子页面并删除链接(以下示例中的朋友和家人)。例如:

<nav id="menu-right">
            <ul>
                <li>
                    <span>Friends</span>
                    <ul>
                        <li><a href="#">Alexa</a></li>
                        <li><a href="#">Alexander</a></li>
                        <li><a href="#">Fred</a></li>
                        <li><a href="#">James</a></li>
                        <li><a href="#">Jefferson</a></li>
                        <li><a href="#">Jordan</a></li>
                        <li><a href="#">Kim</a></li>
                        <li><a href="#">Meagan</a></li>
                        <li><a href="#">Melissa</a></li>
                        <li><a href="#">Nicole</a></li>
                        <li><a href="#">Samantha</a></li>
                        <li><a href="#">Scott</a></li>
                    </ul>
                </li>

                <li>
                    <span>Family</span>
                    <ul>
                        <li><a href="#">Adam</a></li>
                        <li><a href="#">Ben</a></li>
                        <li><a href="#">Bruce</a></li>
                        <li><a href="#">Eddie</a></li>
                        <li><a href="#">Jack</a></li>
                        <li><a href="#">John</a></li>
                        <li><a href="#">Martina</a></li>
                        <li><a href="#">Matthew</a></li>
                        <li><a href="#">Olivia</a></li>
                        <li><a href="#">Owen</a></li>
                    </ul>
                </li>

                <li>
                    <span>Work colleagues</span>
                    <ul>
                        <li><a href="#">David</a></li>
                        <li><a href="#">Dennis</a></li>
                        <li><a href="#">Eliza</a></li>
                        <li><a href="#">Larry</a></li>
                        <li><a href="#">Lisa</a></li>
                        <li><a href="#">Michael</a></li>
                        <li><a href="#">Rachelle</a></li>
                        <li><a href="#">Rick</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

1 个回复
最合适的回答,由SO网友:Nathan Fitzgerald - Fitzgenius 整理而成

这应该可以帮你。。(UNTESTED)

在主题文件夹中创建一个名为nav menu walker的文件。并将此文件包含在主题函数中。php文件。

nav-menu-walker.php

class My_Nav_Menu_Walker extends Walker_Nav_Menu {

    function start_el( &$output, $item, $depth = 0, $args, $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 ) . \'"\' : \'\';

        $item_output = $args->before;

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

        $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        ) .\'"\' : \'\';

        if ( $args->has_children ) {

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

        } else {

            $item_output .= \'<span>\';
            $item_output .= apply_filters( \'the_title\', $item->title, $item->ID );
            $item_output .= \'</span>\';         

        }

        $item_output .= $args->after;

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

    }

    function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) {
        $id_field = $this->db_fields[\'id\'];
        if ( is_object( $args[0] ) ) {
            $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
        }
        return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }    

}
然后打电话给你的wp_nav_menu() 与助行器一起工作。。e、 g。

        <?php 
            wp_nav_menu(
                array(
                    \'theme_location\'    =>  \'primary-menu\',
                    \'walker\'            =>  new My_Nav_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(