Question

现在我有一个像这样渲染的菜单

wp_nav_menu(array( 'menu' => 'header', 'walker' => new Header_menu_walker() );

它有2级并以clasic方式呈现：

<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul class="sub-menu">
            <li><a href="#">Item 3.1</a></li>
            <li><a href="#">Item 3.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a>
        <ul class="sub-menu">
            <li><a href="#">Item 4.1</a></li>
            <li><a href="#">Item 4.2</a></li>
        </ul>
    </li>
</ul>

预期结果：

<ul>
    <li data-id="1"><a href="#">Item 1</a></li>
    <li data-id="2"><a href="#">Item 2</a></li>
    <li data-id="3"><a href="#">Item 3</a></li>
    <li data-id="4"><a href="#">Item 4</a></li>
</ul>

<ul data-parent-id="3" class="sub-menu">
    <li><a href="#">Item 3.1</a></li>
    <li><a href="#">Item 3.2</a></li>
</ul>
<ul data-parent-id="4"  class="sub-menu">
    <li><a href="#">Item 4.1</a></li>
    <li><a href="#">Item 4.2</a></li>
</ul>

我试图用Walker_Nav_Menu类来做，但堆栈并不知道如何解决它。有什么帮助吗？

我的沃克课程：

class Header_menu_walker extends Walker_Nav_Menu  {
  var $sub_menus = [];

  function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )
  {
      if ($depth > 0){
        return; 
      }
      return parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
  }


  function start_lvl( &$output, $depth = 0, $args = array() ) {
    if ($depth == 0){ 
      return;
    }else{
      $output .='<ul data-parent-id='.$args->parent_menu_id.'>';
    }

    return parent::start_lvl($output, $depth, $args );

  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    if ($depth == 0){
      $this->display_element($sub_menus, [], 0, 0);
      return;
    }else{
      $output .= '</ul>';
    }
    return parent::end_lvl($output, $depth, $args );
  }
}

Wordpress导航渲染修改

0 个答案: