반응형
WordPress에서 wp_get_nav_menu_items를 사용하여 커스텀 메뉴/서브메뉴 시스템을 생성하는 방법은 무엇입니까?
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상위 메뉴 항목의 ID를 제공합니다.
내 서브메뉴를 생성하려면 어떻게 해야 합니까?foreach루프? 아니면 정말 간단한 방법이 있을까요?wp_nav_menu구글이 깜빡 잊고 언급하지 않은 것은?
이와 유사한 문제를 해결하는 방법은 다음과 같습니다.
GIST에 대한 빠른 코드 예시
복사 붙여넣기 작업에 참여하려는 사람을 위한 Gitub Gest의 코드입니다.
TL;DR
TL;DR Loop over list, 하위 메뉴가 있으면 드릴다운하고 하위 메뉴 및 메뉴 끝에 도달하면 닫습니다.
완전한 코드 설명
먼저 메뉴 항목을 플랫 배열로 가져옵니다.
<?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; ?>
이 항목의 부모 ID가 저장된 부모 ID와 일치하는지 확인합니다.
<?php if ( $parent_id == $item->menu_item_parent ): ?>
[시작(Start)]서브메뉴<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>
다음 항목의 부모 ID가 동일하지 않고 서브메뉴가 선언되어 있는 경우 서브메뉴를 닫습니다.<ul>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ): ?>
</ul>
<?php $submenu = false; endif; ?>
<?php endif; ?>
어레이의 다음 항목에 동일한 부모 ID가 없으면<li>
<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ): ?>
</li>
<?php $submenu = false; endif; ?>
<?php $count++; endforeach; ?>
</ul>
</nav>
Walker 클래스를 직접 만들어 필요에 따라 출력을 맞춤 제작하는 것이 가장 좋습니다.다음과 같은 경우:
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 EXTECTPT 마커 앞과 뒤의 모든 것은 wp-includes/nav-menu-template의 start_el 함수의 직접 복사입니다.php. 이 예에서는 WP_Query를 사용하여 투고/페이지에 발췌가 있는지 확인하고 링크 제목 뒤에 스판 태그 사이에 발췌를 배치합니다.
CSS를 사용하여 실행할 수 있는 스판태그를 호버에만 표시하도록 하는 방법이 있습니다.
Walker에 대한 자세한 내용은 여기를 참조하십시오.
//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>
완전한 코드 설명.....
먼저 함수에서 두 개의 함수 아래에 두 개의 함수를 만듭니다.php 파일
function get_menu_id( $location ){
//get all the location....
$locations =get_nav_menu_locations();
//get object id by location.....
$menu_id = $locations[$location];
return !empty($menu_id) ? $menu_id : '';
}
function get_child_menu_items($menu_array , $parent_id){
$child_menu = [];
if(!empty($menu_array) && is_array($menu_array)){
foreach($menu_array as $menu){
if( intval($menu->menu_item_parent) === $parent_id){
array_push($child_menu , $menu);
}
}
}
return $child_menu;
}
그리고나서
$menu_name = 'menu_name';
$location = get_nav_menu_locations();
$menu = wp_get_nav_menu_object($location[$menu_name]);
$menuitems = wp_get_nav_menu_items( $menu->term_id);
$header_menu_id = get_menu_id('primary-menu');
$header_menus = wp_get_nav_menu_items($header_menu_id);
이게 내 html과 php 코드야...
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<?php
if(!empty($header_menus) && is_array($header_menus)){
?>
<ul class="navbar-nav ml-auto">
<?php
foreach($header_menus as $menu_item){
if(!$menu_item->menu_item_parent){ //checking the item are parent?
$child_menu_items = get_child_menu_items($header_menus, $menu_item->ID);
$has_children = !empty($child_menu_items) && is_array($child_menu_items);
if(! $has_children){
?>
<li class="nav-item">
<a class="nav-link" href="<?php echo esc_url($menu_item -> url); ?>"> <?php echo esc_html($menu_item->title); ?></a>
</li>
<?php
}else{
?>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="<?php echo esc_url($menu_item -> url); ?>" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<?php echo esc_html($menu_item->title); ?>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<?php
foreach($child_menu_items as $child){
?>
<a class="dropdown-item" href="<?php echo esc_url($child->url); ?>" > <?php echo esc_html($child->title); ?></a>
<?php
}
?>
</div>
</li>
<?php
}
}
}
?>
</ul>
<?php
}
?>
이거 한번 먹어봐.저는 좋아요.
<?php
$menuLocations = get_nav_menu_locations();
$menuID = $menuLocations['primary'];
$menu = wp_get_nav_menu_object($menuLocations['primary']);
$menuitems = wp_get_nav_menu_items($menu->term_id, array('order' => 'DESC'));
$ParentArray = array();
$count = 0;
$submenu = false;
foreach ($menuitems as $menu_item) {
$link = $menu_item->url;
$title = $menu_item->title;
if ($menu_item->menu_item_parent == 0 ) {
$parent_id = $menu_item->ID;
echo '<li class="main-li dropmenu"><a href="' .$menu_item->url . '">'.$menu_item->title .'</a>';
}
if ($parent_id == $menu_item->menu_item_parent ) {
if (!$submenu ) {
$submenu = true;
echo '<ul class="level1">';
}
echo '<li><a href="'.$link.'">'.$title.'</a></li>';
if ($menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ) {
echo '</ul>';
$submenu = false;
}
}
if ($menuitems[ $count + 1 ]->menu_item_parent != $parent_id ) {
echo '</li>';
$submenu = false;
}
$count++;
}
?>
테마가 다음을 사용하는 경우has_nav_menu('<menu-name>') header ★★★★★★★★★★★★★★★★★」footer.php를 들면, (예를 들면, '나중에', '나중에', '나중에')로 갈 수 . Appearance > Menus구성할 메뉴 또는 하위 메뉴를 선택합니다.
언급URL : https://stackoverflow.com/questions/11935423/how-do-i-generate-a-custom-menu-sub-menu-system-using-wp-get-nav-menu-items-in-w
반응형
'programing' 카테고리의 다른 글
| JSON을 나타내는 Redis 문자열 vs Redis 해시: 효율성? (0) | 2023.03.14 |
|---|---|
| application.properties를 사용하여 봄에 CSRF를 비활성화하려면 어떻게 해야 합니까? (0) | 2023.03.14 |
| 스프링 부트 기본 로그 위치 (0) | 2023.03.14 |
| 네이티브 응답 오류: 요소 유형이 잘못되었습니다. 문자열 또는 클래스/함수가 필요한데: 개체를 받았습니다. (0) | 2023.03.14 |
| org.springframework.boot.web.support가 존재하지 않습니다. (0) | 2023.03.14 |