Add extra markup to WP menus

时间：2015-05-11 作者：Adrian

我被要求将一个HTML网站重新开发为一个WP主题，它有一个非常高级的菜单结构，我不太确定如何复制它。第二个菜单项有一个子菜单，但它不仅仅是“li”中的“ul”，还有额外的div等。。因为下拉列表有3列布局，其中2列包含子链接，第3列包含内容。

这是一个示例：

<ul class="nav navbar-nav three">
    <li class="dropdown yamm-fw"> <a href="#" class="dropdown-toggle">Parent Link</a>
                <ul class="dropdown-menu">
                  <li> 
                    <div class="yamm-content">
                      <div class="row">

                        <ul class="col-sm-6 col-md-3 list-unstyled two">
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 1</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 2</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 3</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 4</a></li>
                        </ul>

                        <ul class="col-sm-6 col-md-3 list-unstyled two">
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 5</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 6</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 7</a></li>
                            <li><a href="#"><i class="fa fa-map-marker"></i> Child Link 8</a></li>
                        </ul>

                          <ul class="col-sm-6 col-md-6 list-unstyled two">
                            <li>
                                <h5>A title here</h5>
                            </li>
                            <li class="dart">
                                Some text here
                            </li>
                        </ul>
                      </div>
                    </div>
                  </li>
                </ul>
            </li>
        </ul>
到目前为止，我已经使用wp\\u nav\\u menu$args和一个助行器计算出了类和额外的div，以下是我目前的情况：

    class Child_Wrap extends Walker_Nav_Menu
    {
        function start_lvl(&$output, $depth = 0, $args = array())
        {
            $indent = str_repeat("\\t", $depth);
            $output .= "\\n$indent<ul class=\\"dropdown-menu\\"><li><div class=\\"yamm-content\\"><div class=\\"row\\">\\n";
        }
        function end_lvl(&$output, $depth = 0, $args = array())
        {
            $indent = str_repeat("\\t", $depth);
            $output .= "$indent</div></div></li></ul>\\n";
        }
    } 

<?php wp_nav_menu(array( \'menu\' => \'Header Nav\', \'container\' => false, \'menu_class\' => \'nav navbar-nav three\', \'walker\' => new Child_Wrap())); ?>
但是，除了在菜单面板中有子链接之外，是否有一种方法可以插入一个二级菜单作为子菜单，从而创建列？

<?php wp_nav_menu(array( \'menu\' => \'Submenu 1\', \'container\' => false, \'menu_class\' => \'col-sm-6 col-md-3 list-unstyled two\', \'link_before\' => \'<i class="fa fa-map-marker"></i> \')); ?>
谢谢

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

在基于引导的主题上开发菜单时，我现在使用以下Walker：

\'walker\' => new Custom_Walker_Nav_Menu

class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {

// add classes to ul sub-menus
function start_lvl( &$output, $depth ) {
    // depth dependent classes
    $indent = ( $depth > 0  ? str_repeat( "\\t", $depth ) : \'\' ); // code indent
    $display_depth = ( $depth + 1); // because it counts the first submenu as 0
    $classes = array(
        \'sub-menu\',
        ( $display_depth % 2  ? \'menu-odd\' : \'menu-even\' ),
        ( $display_depth >=2 ? \'sub-sub-menu\' : \'\' ),
        \'menu-depth-\' . $display_depth
        );
    $class_names = implode( \' \', $classes );

    // build html
    $output .= "\\n" . $indent . \'<ul class="dropdown-menu">\' . "\\n";
}

  function start_el ( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    // Most of this code is copied from original Walker_Nav_Menu
    global $wp_query, $wpdb;
    $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="\' . esc_attr( $class_names ) . \'"\';

    $id = apply_filters( \'nav_menu_item_id\', \'menu-item-\'. $item->ID, $item, $args );
    $id = strlen( $id ) ? \' id="\' . esc_attr( $id ) . \'"\' : \'\';

    $has_children = $wpdb->get_var("SELECT COUNT(meta_id)
                            FROM wp_postmeta
                            WHERE meta_key=\'_menu_item_menu_item_parent\'
                            AND meta_value=\'".$item->ID."\'");

    if ( $depth == 0 && $has_children > 0  ) {

    $output .= $indent . \'<li class="dropdown">\';

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

    $item_output = $args->before;
    $item_output .= \'<a\'. $attributes .\' data-hover="dropdown" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">\';
    $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;
    $item_output .= \'<span class="caret"></span></a>\';
    $item_output .= $args->after;

    } else {

    $output .= $indent . \'<li>\';

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

    $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, $id );
  }

}

结束
标签： php   menus   html   小码农  

相关推荐

数据验证：始终转义延迟/转义HTML代码

我在市场上传了一个主题，但遭到了软拒绝，因为我应该“总是迟到”我不知道如何解决这个问题，除了我自己。我有多个if语句，其中HTML保存在一个变量中。我在那里转义了用户值，后来输出了变量，但没有再次转义，因为它包含静态HTML代码。<?php if(get_post_meta( get_the_ID(), \"portfolio-lightbox\", true ) == \'1\') { $portfoliolink = \'<a href=\"\'. esc_url(