将菜单的顶级链接和子菜单包装在div中

时间：2019-07-26 作者：Ray

我正在寻找一种将菜单的顶级链接和子菜单包装到自定义div中的方法。我发现这段代码几乎实现了以下目的：

class Sub_Wrapper extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\\t", $depth);
        $output .= "\\n$indent<div class=\\"sub-menu-wrapper\\"><ul class=\\"sub-menu\\">\\n";
    }
    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\\t", $depth);
        $output .= "$indent</ul></div>\\n";
    }
}
这将输出以下内容：

<ul>
    <li>
        <a href="#"></a>
        <div class="sub-menu-wrapper">
            <ul class="sub-menu"></ul>
        </div>
    </li>
</ul>
虽然我需要“a href..”也要放在包装内，如下所示：

<ul>
    <li>
        <div class="sub-menu-wrapper">
            <a href="#"></a>
            <ul class="sub-menu"></ul>
        </div>
    </li>
</ul>
有什么建议吗？尝试通过walker类来实现，并避免jQuery。包裹（）。

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

这可以做到：

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    private $_before = null;

    public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // Backup the original "before", if any.
        if ( null === $this->_before ) {
            $this->_before = $args->before;
        }
        // Now add the wrapper div, if applicable.
        if ( 0 == $depth ) {
            $args->before = \'<div class="sub-menu-wrapper">\' . $this->_before;
        } else {
            $args->before = $this->_before;
        }

        // Then let the parent walker does the output generation.
        parent::start_el( $output, $item, $depth, $args, $id );
    }

    public function end_el( &$output, $item, $depth = 0, $args = array() ) {
        // Close the wrapper div, if applicable.
        if ( 0 == $depth ) {
            $output .= \'</div><!-- .sub-menu-wrapper -->\';
        }
        $output .= "</li>\\n";
    }
}
一、 e.扩展start_el() 和end_el() 方法/函数，而不是start_lvl() 和end_lvl(). <此外，仅当菜单项有子菜单（或子菜单）时，才会添加包装

示例用法：

wp_nav_menu( [
    \'walker\' => new My_Walker_Nav_Menu(),
    // ... other args.
] );

标签： menus   walker   小码农  

相关推荐

使用自定义对象而不是WordPress数据库对象实现Walker

我正在尝试实现一个自定义的Walker，以便在对象的层次结构中导航。当我做var_dump 在$item 中的变量start_el 函数我看到的是wordpress数据库对象（博客、页面等），而不是我的自定义数据对象。如何设置Walker以接受菜单层次结构和导航的自定义对象？谢谢Dave