wordpress - Wordpress のナビゲーション レンダリングの変更

Question

今、私はこのようにレンダリングするメニューを持っています

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

2 つのレベルがあり、古典的な方法でレンダリングします。

---

<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 );
  }
}