WordPress Nav Walker-多级导航

我需要有关Wordpress网站导航的帮助。我正在尝试让Wordpress以以下格式打印导航：

< ul data-menu="main" class="menu__level"> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-1" href="http://www.srcmini.com/#"> Vegetables< /a> < /li> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-2" href="http://www.srcmini.com/#"> Fruits< /a> < /li> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-3" href="http://www.srcmini.com/#"> Grains< /a> < /li> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-4" href="http://www.srcmini.com/#"> Mylk & Drinks< /a> < /li> < /ul> < !-- Submenu 1 / Shown when user clicks the first list item (item with data-submenu="submenu-1") on data-menu="main" --> < ul data-menu="submenu-1" class="menu__level"> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Stalk Vegetables< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Roots & Seeds< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Cabbages< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Salad Greens< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Mushrooms< /a> < /li> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-1-1" href="http://www.srcmini.com/#"> Sale %< /a> < /li> < /ul> < !-- Submenu 2 / Shown when user clicks the second list item (item with data-submenu="submenu-2") on data-menu="main" --> < ul data-menu="submenu-2" class="menu__level"> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Citrus Fruits< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Berries< /a> < /li> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-2-1" href="http://www.srcmini.com/#"> Special Selection< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Tropical Fruits< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Melons< /a> < /li> < /ul> < !-- Submenu 3 / Shown when user clicks the third list item (item with data-submenu="submenu-3") on data-menu="main" --> < ul data-menu="submenu-3" class="menu__level"> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Buckwheat< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Millet< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Quinoa< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Wild Rice< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Durum Wheat< /a> < /li> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-3-1" href="http://www.srcmini.com/#"> Promo Packs< /a> < /li> < /ul> < !-- Submenu 4 / Shown when user clicks the forth list item (item with data-submenu="submenu-4") on data-menu="main" --> < ul data-menu="submenu-4" class="menu__level"> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Grain Mylks< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Seed Mylks< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Nut Mylks< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://www.srcmini.com/#"> Nutri Drinks< /a> < /li> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-4-1" href="http://www.srcmini.com/#"> Selection< /a> < /li> < /ul>

但是我不知道如何指定子项到特定的父项, 然后使用数据子菜单打印它们。
导航结构从此处获取：http://tympanus.net/Blueprints/MultiLevelMenu/
谢谢！
更新：这让我很想念：用php获取导航数据, 然后使用Javascript以正确的格式填充导航数据会更容易或更清洁吗？有谁知道这是否是更好的处理方式？
或者如何将rest-api与此一起使用(我对此还很陌生, 所以有一点将其用作小型网站项目的一部分)
#1实际上, 你可以将所有菜单数据(从特定位置)捕获到阵列中, 并以任何你喜欢的方式输出。
例如, 你具有如下菜单结构：

Menu_parent1_item Submenu_item_1 Submenu_item_2 Submenu_item_3 Menu_parent2_item Submenu2_item_1 Submenu2_item_2 Submenu2_item_3 Menu_parent3_item Submenu3_item_1 Submenu3_item_2 Submenu3_item_3

将此代码放在function.php中：

function custom_menu_output( $theme_location ) { if ( ($theme_location) & & ($locations = get_nav_menu_locations()) & & isset($locations[$theme_location]) ) { $menu = get_term( $locations[$theme_location], 'nav_menu' ); $menu_items = wp_get_nav_menu_items($menu-> term_id); $menus = array(); foreach( $menu_items as $menu_item ) { $pid = $menu_item-> menu_item_parent ? $menu_item-> menu_item_parent : 0; $menus[$pid][] = array( 'link' => $menu_item-> url, 'title' => $menu_item-> title, 'id' => $menu_item-> ID, ); }foreach($menus as $key => $menu) { if($key == 0) echo '< ul data-menu="main" class="menu__level"> '; else echo '< ul data-menu="submenu-'.$key.'" class="menu__level"> '; foreach($menu as $item) { if(isset($menus[$item['id']])) echo '< li class="menu__item"> < a class="menu__link" data-submenu="submenu-'.$item['id'].'" href="'.$item['link'].'"> '.$item['title'].'< /a> < /li> '; else echo '< li class="menu__item"> < a class="menu__link" href="'.$item['link'].'"> '.$item['title'].'< /a> < /li> '; } echo '< /ul> '; }} else { $menu_list = '< !-- no menu defined in location "'.$theme_location.'" --> '; } echo $menu_list; }

并在模板中像这样使用它：

< ?php custom_menu_output('menu_location_name_from_register_nav_menu'); ?>

它将生成这样的HTML(我已经根据你的问题描述进行了处理)：

< ul data-menu="main" class="menu__level"> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-717" href="http://yourdomain.tld/your_link/"> Menu_parent1_item< /a> < /li> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-720" href="http://yourdomain.tld/your_link/"> Menu_parent2_item< /a> < /li> < li class="menu__item"> < a class="menu__link" data-submenu="submenu-725" href="http://yourdomain.tld/your_link/"> Menu_parent3_item< /a> < /li> < /ul> < ul data-menu="submenu-717" class="menu__level"> < li class="menu__item"> < a class="menu__link" href="http://yourdomain.tld/your_link/"> Submenu_item_1< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://yourdomain.tld/your_link/"> Submenu_item_2< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://yourdomain.tld/your_link/"> Submenu_item_3< /a> < /li> < /ul> < ul data-menu="submenu-720" class="menu__level"> < li class="menu__item"> < a class="menu__link" href="http://yourdomain.tld/your_link/"> Submenu2_item_1< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://yourdomain.tld/your_link/"> Submenu2_item_2< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://yourdomain.tld/your_link/"> Submenu2_item_3< /a> < /li> < /ul> < ul data-menu="submenu-725" class="menu__level"> < li class="menu__item"> < a class="menu__link" href="http://yourdomain.tld/your_link/"> Submenu2_item_1< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://yourdomain.tld/your_link/"> Submenu2_item_2< /a> < /li> < li class="menu__item"> < a class="menu__link" href="http://yourdomain.tld/your_link/"> Submenu2_item_3< /a> < /li> < /ul>

【WordPress Nav Walker-多级导航】你可以根据需要进一步自定义此代码。
#2你可以使用沃克类来更改ul和li结构。

class themeslug_walker_nav_menu extends Walker_Nav_Menu {private $color_idx = 0; // add classes to ul sub-menus function start_lvl( & $output, $depth) { //p($output); // 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="top custom-row"> < a class="close-menu" href="http://www.srcmini.com/#"> < span class="parent_label"> < /span> < i class="fa fa-close"> < /i> < /a> < /li> '; $back_btn = '< li class="sidebar-item back no-children back'.$display_depth.'"> < div class="inner"> < a class="hit-area" href="http://www.srcmini.com/#"> Back< /a> < i class="fa fa-chevron-left"> < /i> < /div> < /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, $args ) {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"> '; // 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++; } }}

但是它没有提供将子菜单与父li分开的方法。
其他所有子类, 如submenu-1, submenu-2都可以管理。
尝试修改此代码。
供参考, 请参阅此网站能源与人力
单击页面右侧的菜单按钮时, 右侧菜单的构建方式相同