Wordpress自定义菜单沃克

时间:2014-01-20 15:09:03

标签: html wordpress class

我刚开始使用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>

我已经阅读了很多关于步行者课程的文章,但每篇文章都是我想要做的一小部分。我想把它们放在一起,以便更好地理解。我不确定如何开始/结束并设置具有下拉级别的菜单。请任何人可以帮忙吗?非常感谢提前。

我尝试过复制和修改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

1 个答案:

答案 0 :(得分:0)

尝试覆盖另一种方法。 (它在Walker类中实现,Walker_Nav_Menu扩展。)

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),但我相信你会知道该怎么做。