在自定义NAV_WORKER的子菜单中添加父菜单项

时间:2018-11-07 作者:Wouter

目前,我正在进行一个项目,我们需要将父标题作为移动菜单子菜单中的第一项附加。

我试图做到的是:

 <ul class="menu">
   <li>
     <a href="linktomenu">Level 0 item</a>
     <ul class="submenu">
       <li><a href="linktoparent">Show All Level 0 item </a></li>
       <li><a href="#0">Back to parent</a></li>
       <li><a href="linktomenu">Level 1 item</a></li>
       <li><a href="linktomenu">Level 1 item</a></li>
     </ul>
   </li>
 </ul>
这是我目前拥有的代码

 <?php

class mobilenav_walker_nav_menu extends Walker_Nav_Menu {

  private $color_idx = 0;

  // add classes to ul sub-menus
  function start_lvl( &$output, $depth = 0, $args = Array()) {
    // 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(
                \'sidebar-menu\',
                ( $display_depth % 2  ? \'menu-odd\' : \'menu-even\' ),
                ( $display_depth >=2 ? \'sub-sub-menu\' : \'\' ),
                \'level-\' . $display_depth
              );
    $class_names = implode( \' \', $classes );

    $back_btn = \'\';

    if($display_depth > 0){
      $parent_label = \'<li class="go-back"><a href="#0"><span class="parent_label"></span><i class="fa fa-close"></i></a></li>\';

      $back_btn = \'<li class="see-all"><a class="hit-area" href="#">Back</a><i class="fa fa-chevron-left"></i></li>\';
    }

    // build html
    $incri = $this->color_idx-1;
    $output .= "\\n" . $indent . \'<ul class="menu__level" data-menu="submenu-\'.$incri.\'">\' .$parent_label.$back_btn. "\\n";
  }

  // add main/sub classes to li\'s and links
  function start_el( &$output, $item, $depth = 0, $args = Array(), $id = 0 ) {

    global $wp_query;
    $indent = ( $depth > 0 ? str_repeat( "\\t", $depth ) : \'\' ); // code indent

    // depth dependent classes
    $depth_classes = array(
        \'sidebar-item\',
        ( $depth == 0 ? \'li0\' : \'\' ),
        ( $depth == 1 ? \'li1\' : \'\' ),
        ( $depth == 2 ? \'li2\' : \'\' ),
        ( $depth == 3 ? \'li3\' : \'\' ),
        ( $depth % 2 ? \'menu-item-odd\' : \'menu-item-even\' ),
        \'menu-item-depth-\' . $depth
    );

    if(in_array(\'menu-item-has-children\',$item->classes)){
      $has_children = \'data-has-children="1"\';
      $has_children_var = 1;
      $depth_classes[] = \'has-children\';
    } else{
      $has_children_var = 0;
      $depth_classes[] = \'no-children\';
    }

    $li_attributes = \'data-level="\'.$depth.\'" data-title="\'.apply_filters( \'the_title\', $item->title, $item->ID ).\'" \'.$has_children;

    $depth_class_names = esc_attr( implode( \' \', $depth_classes ) );

    // passed classes
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $class_names = esc_attr( implode( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item ) ) );

    // build html
    $output .= $indent . \'<li class="menu__item"\'.$li_attributes.\'>\';

    // link attributes
    $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        ) .\'"\' : \'\';
    if($has_children_var == 1){
      $attributes .= \' data-submenu="submenu-\'.$this->color_idx.\'"\';
    }
    $attributes .= \' class="menu__link"\';

    $item_output = sprintf( \'%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s\',
      $args->before,
      $attributes,
      $args->link_before,
      apply_filters( \'the_title\', $item->title, $item->ID ),
      ($has_children_var == 1 ? $args->link_after : \'\'),
      $args->after
    );

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

    if($has_children_var == 1){
      $this->color_idx++;
    }
  }
}
这是我的电流输出

  <ul id="menu-hoofdnavigatie" class="sidebar-menu level-0">
    <li class="menu__item" data-level="0" data-title="Menu Item Level 0" data-has-children="1"><a data-submenu="submenu-0" class="menu__link">Menu Item Level 0</a>
      <ul class="menu__level" data-menu="submenu-0">
        <li class="go-back"><a href="#0"><span class="parent_label"></span><i class="fa fa-close"></i></a></li>
        <li class="see-all"><a class="hit-area" href="#">Back</a><i class="fa fa-chevron-left"></i></li>
        <li class="menu__item" data-level="1" data-title="Menu Item 1 Level 1"><a class="menu__link">Menu Item 1 Level 1</a></li>
        <li class="menu__item" data-level="1" data-title="Menu Item 2 Level 1"><a class="menu__link">Menu Item 2 Level 1</a></li>
        <li class="menu__item" data-level="1" data-title="Menu Item 3 Level 1"><a class="menu__link">Menu Item 3 Level 1</a></li>
        <li class="menu__item" data-level="1" data-title="Menu Item 4 Level 1"><a class="menu__link">Menu Item 4 Level 1</a></li>
        <li class="menu__item" data-level="1" data-title="Menu Item 5 Level 1"><a class="menu__link">Menu Item 5 Level 1</a></li>
      </ul>
    </li>
  </ul>
我对wordpress navwalker很陌生,你能帮我做这个吗?我搜索了整个互联网,但到目前为止找不到解决问题的方法。

1 个回复
SO网友:André Kelling

因此,您需要在子菜单中输入父级的真实名称和URL

你有no info about a post item 在您的function start_lvl().

但在function start_el() you have the items 并可以查询其父级。

这需要一些refactoring 将线条如if($display_depth > 0){ 条件来自start_lvl 在您的start_el 作用然后写a proper WP query 在子菜单中获取所需父项的信息。

更具体地说:

Instart_el 函数您有var$item 它应该包含它所表示的帖子的ID。应该是$itemId = $item->Id. 如果是这样,你应该让家长$parentId = wp_get_post_parent_id( $itemId ); 此外,您还可以使用其他一些WP函数从具有父ID的父级获取信息。

希望这能帮你找到路

结束