WordPress 自定义菜单助行器

Question

我刚开始使用 WP 主题，但我坚持使用 walker 类。我正在尝试输出以下代码：

<ul>
<li><a href="#" title="">Menu 1</a></li>
<li><a href="#" title="">Menu 2</a></li>
<li class="hasDropdown">
    <a href="#" title="">Menu 3 - Level 1</a>
    <div>
        <div>
            <h5>Description 1</h5>
            <ul>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
            </ul>
        </div>

        <div>
            <h5>Description 2</h5>
            <ul>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
            </ul>
        </div>

        <div>
            <h5>Description 3</h5>
            <ul>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
            </ul>
        </div>

        <div>
            <h5>Description 4</h5>
            <ul>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
                <li><a href="#" title="">Menu 3 - Level 2</a></li>
            </ul>
        </div>
    </div>
</li>
<li><a href="#" title="">Menu 4</a></li>
<li><a href="#" title="">Menu 5</a></li>

我已经阅读了很多关于 walker 类的文章，但每篇文章都只做了我想做的一小部分。我想把它们放在一起并得到更好的理解。我不确定如何开始/结束和设置具有下拉级别的菜单。请问有人可以帮忙吗？非常感谢。

我已尝试复制和修改在 nav-menu-template 中找到的 walker 类，如下所示：

function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<div>\n";
    $output .= "\n$indent<h5></h5>\n";
    $output .= "\n$indent<ul class=\"sub-menu\">\n";
}


function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</ul>\n";
    $output .= "\n$indent</div>\n";
}

这给了我：

<div><h5><ul> 

我很难理解如何实现包装 div 和 .hasDropdown

Answer 1

尝试覆盖另外一种方法。 （它在Walker_Nav_Menu 扩展的Walker 类中实现）。

function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
    $id_field = $this->db_fields['id'];

     if (! empty( $children_elements[$element->$id_field] )) {
         $element->classes[] = "hasDropdown";
     }

     parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
}

对于使用 div 元素进行包装，您必须深入挖掘 display_element 方法（位于wp-includes/class-wp-walker.php），但我相信您会知道该怎么做。