Wordpress Nav Walker -多级导航
Wordpress Nav Walker -多级导航
提问于 2016-01-26 20:01:37
我需要帮助导航在Wordpress网站。我正试图以这种格式打印Wordpress的导航：
<ul data-menu="main" class="menu__level">
<li class="menu__item"><a class="menu__link" data-submenu="submenu-1" href="#">Vegetables</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-2" href="#">Fruits</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-3" href="#">Grains</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-4" href="#">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="#">Stalk Vegetables</a></li>
<li class="menu__item"><a class="menu__link" href="#">Roots & Seeds</a></li>
<li class="menu__item"><a class="menu__link" href="#">Cabbages</a></li>
<li class="menu__item"><a class="menu__link" href="#">Salad Greens</a></li>
<li class="menu__item"><a class="menu__link" href="#">Mushrooms</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-1-1" href="#">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="#">Citrus Fruits</a></li>
<li class="menu__item"><a class="menu__link" href="#">Berries</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-2-1" href="#">Special Selection</a></li>
<li class="menu__item"><a class="menu__link" href="#">Tropical Fruits</a></li>
<li class="menu__item"><a class="menu__link" href="#">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="#">Buckwheat</a></li>
<li class="menu__item"><a class="menu__link" href="#">Millet</a></li>
<li class="menu__item"><a class="menu__link" href="#">Quinoa</a></li>
<li class="menu__item"><a class="menu__link" href="#">Wild Rice</a></li>
<li class="menu__item"><a class="menu__link" href="#">Durum Wheat</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-3-1" href="#">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="#">Grain Mylks</a></li>
<li class="menu__item"><a class="menu__link" href="#">Seed Mylks</a></li>
<li class="menu__item"><a class="menu__link" href="#">Nut Mylks</a></li>
<li class="menu__item"><a class="menu__link" href="#">Nutri Drinks</a></li>
<li class="menu__item"><a class="menu__link" data-submenu="submenu-4-1" href="#">Selection</a></li>
</ul>
但是，我不知道如何将子项指定到特定的父项，然后用数据子菜单打印它们。
导航结构取自于这里： http://tympanus.net/Blueprints/MultiLevelMenu/
谢谢!
更新:我突然想到:用php获取导航数据，然后用Javascript以正确的格式填充导航数据，会更容易或者更干净吗？有人知道这会不会更好地处理这件事吗？
或者对此使用rest-api如何(我对此相当陌生，所以有必要将其作为小型网站项目的一部分使用吗)
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-01-30 13:48:28
实际上，您可以将所有菜单数据(从特定位置)获取到数组中&以任何您喜欢的方式输出它。
例如，菜单结构如下：
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>您可以根据需要进一步自定义此代码。
Stack Overflow用户
发布于 2016-01-29 06:04:40
您可以使用walker类对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="#"><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="#">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++;
}
}
}但是它没有提供将子菜单ul与父li分离的方法。
否则，像submenu-1, submenu-2这样的所有类都可以被管理。
尝试修改这段代码。
有关参考资料，请参阅本网站能源和人力
当单击页面右侧的菜单按钮时，右侧菜单将以相同的方式生成。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35022819
复制相关文章
相似问题
腾讯云开发者
