У меня есть html-структура, которая требует настройки кода wp_nav_menu
.
Это html, который мне нужно сгенерировать:
<ul class="main-nav">
<li class="item">
<a href="http://example.com/?p=123" class="title">Title</a>
<a href="http://example.com/?p=123" class="desc">Description</a>
<ul class="sub-menu">
<li class="item">
<a href="http://example.com/?p=123" class="title">Title</a>
<a href="http://example.com/?p=123" class="desc">Description</a>
</li>
</ul>
</li>
<li class="item">
<a href="http://example.com/?p=123" class="title">Title</a>
<a href="http://example.com/?p=123" class="desc">Description</a>
</li>
</ul>
В настоящее время я использую wp_get_nav_menu_items
, чтобы получить все элементы из моего меню в виде массива.
Сейчас я могу сгенерировать выше html без подменю, используя следующий код:
<?php
$menu_name = 'main-nav';
$locations = get_nav_menu_locations()
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
foreach ( $menuitems as $item ):
$id = get_post_meta( $item->ID, '_menu_item_object_id', true );
$page = get_page( $id );
$link = get_page_link( $id ); ?>
<li class="item">
<a href="<?php echo $link; ?>" class="title">
<?php echo $page->post_title; ?>
</a>
<a href="<?php echo $link; ?>" class="desc">
<?php echo $page->post_excerpt; ?>
</a>
</li>
<?php endforeach; ?>
Я бы сгенерировал меню, используя функцию wp_nav_menu
, но мне все еще нужно описание, показанное с помощью $page->post_excerpt
.
Я обнаружил, что для каждого элемента с именем $item->menu_item_parent
есть свойство, которое дает идентификатор родительского пункта меню.
Как мне сгенерировать подменю в моем цикле foreach
?
Или существует действительно простой способ использования wp_nav_menu
, о котором Google забыл упомянуть?
Для тех, кто решает что-то подобное здесь мое решение:
Здесь код для github gist для всех, кто хочет войти в действие copy paste.
TL; DR Переверните список, разверните его, если есть подменю, закройте, если мы дойдем до конца подменю и меню.
Во-первых, получить пункты меню как плоский массив:
<?php
$menu_name = 'main_nav';
$locations = get_nav_menu_locations();
$menu = wp_get_nav_menu_object( $locations[ $menu_name ] );
$menuitems = wp_get_nav_menu_items( $menu->term_id, array( 'order' => 'DESC' ) );
?>
Затем перебираем массив элементов меню:
<nav>
<ul class="main-nav">
<?php
$count = 0;
$submenu = false;
foreach( $menuitems as $item ):
// set up title and url
$title = $item->title;
$link = $item->url;
// item does not have a parent so menu_item_parent equals 0 (false)
if ( !$item->menu_item_parent ):
// save this id for later comparison with sub-menu items
$parent_id = $item->ID;
?>
Напишите первый родительский элемент <li>
:
<li class="item">
<a href="<?php echo $link; ?>" class="title">
<?php echo $title; ?>
</a>
<?php endif; ?>
Убедитесь, что родительский идентификатор этих элементов совпадает с сохраненным родительским идентификатором:
<?php if ( $parent_id == $item->menu_item_parent ): ?>
Запустите подменю <ul>
и установите для параметра $submenu
значение true для последующего обращения:
<?php if ( !$submenu ): $submenu = true; ?>
<ul class="sub-menu">
<?php endif; ?>
Введите пункт подменю:
<li class="item">
<a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
</li>
Если следующий элемент не имеет одного и того же родительского идентификатора, и мы объявили подменю, закройте подменю <ul>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
</ul>
<?php $submenu = false; endif; ?>
<?php endif; ?>
Опять же, если следующий элемент в массиве не имеет одного и того же родительского идентификатора, закройте <li>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
</li>
<?php $submenu = false; endif; ?>
<?php $count++; endforeach; ?>
</ul>
</nav>
Лучше всего сделать собственный класс Уокер, чтобы адаптировать результат к вашим потребностям. Что-то вроде этого:
class Excerpt_Walker extends Walker_Nav_Menu
{
function start_el(&$output, $item, $depth, $args)
{
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$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 ) .'"' : '';
$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
/*GET THE EXCERPT*/
$q = new WP_Query(array('post__in'=>$item->object_id));
if($q->have_posts()) : while($q->have_posts()) : $q->the_post();
$item_output .= '<span class="menu-excerpt">'.get_the_excerpt().'</span>';
endwhile;endif;
/*****************/
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}
И затем назовите его так:
<?php
wp_nav_menu(array('walker' => new Excerpt_Walker()));
?>
Все до и после маркера GET THE EXCERPT в моем примере была прямой копией функции start_el в wp-includes/nav-menu-template.php. В моем примере WP_Query используется для определения того, имеет ли пост/страницу выдержку и помещает выдержку между тегами span после названия ссылки.
Идея заключалась бы в том, чтобы теги span отображались только при наведении, что можно сделать с помощью CSS.
Дополнительная информация о Walkers здесь:
//Just set your variable and apply.. for sub menu
<ul>
<?php
$activeclass = '';
$activeclass1='';
$count=0;
$submenu = FALSE;
foreach ( $primaryNav as $navItem ) {
$activeclass = '';
if($navItem->object_id == $getid){
$activeclass = 'class="live-act"';
}
if (!$navItem->menu_item_parent ){
$parent_id = $navItem->ID;
echo '<li><a href="'.$navItem->url.'" '.$activeclass.' title="'.$navItem->title.'">'.$navItem->title.'</a>';
}
?>
<?php if ( $parent_id == $navItem->menu_item_parent ) { ?>
<?php if ( !$submenu ): $submenu = true; ?>
<ul>
<?php endif; ?>
<li>
<a href="<?php echo $navItem->url; ?>" class="title"><?php echo $navItem->title; ?></a>
</li>
<?php if ( $primaryNav[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ){ ?>
</ul>
<?php $submenu = false;
}
?>
<?php }
if ( $primaryNav[ $count + 1 ]->menu_item_parent != $parent_id ){ ?>
</li>
<?php $submenu = false; } ?>
<?php $count++; ?>
<?php } ?>
</ul>