答案应该很简单，但我就是想不出来，也找不到答案。我需要添加一个data-id 属性到<li> 相应子页的父容器<a> 链接。

HTML如下所示：

  <aside id="sidebar-b">
    <ul class="sub-menu side-nav page-sidebar child-pages">
      <li id="menu-item-9044" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-9044">
        <a href="http://localhost/about/" class="menu-image-title-after">
          <span class="menu-image-title">About</span>
        </a>
      </li>
      <li id="menu-item-9045" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-9045">
        <a href="http://localhost/contact/" class="menu-image-title-after">
          <span class="menu-image-title">Contact</span>
        </a>
      </li>
      <li id="menu-item-9046" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-9046">
        <a href="http://localhost/history/" class="menu-image-title-after">
          <span class="menu-image-title">History</span>
        </a>
      </li>
    </ul>
  </aside>

应该注意的是，作为一种临时解决方案，我使用jQuery 手动将子页面列表从其父页面移出到#sidebar-b.

任何建议都将不胜感激！

class My_DataId_Walker_Nav_Menu extends Walker_Nav_Menu {

    //  other code found in original Walker_Nav_Menu class

    //  changing output of li elemens
    $output .= $indent  
            .  \'<li id="nav-menu-item-\' . $item->ID . \'" \'
            .  \'data-id="\' . $item->ID . \'" \' 
            .  \'class="\' . $depth_class_names . \' \' . $class_names . \'">\';

    //  other code found in original Walker_Nav_Menu class

}

//  in the template file, output menu with custom walker class
wp_nav_menu( 
    array(
        \'theme_location\'    =>\'primary\', // your menu position
        \'walker\'            => new My_DataId_Walker(),
        \'depth\'             => 0
    ) 
);