nav_menu 하위 메뉴에 컨테이너 추가


9

wp_nav_menu의 ul. 하위 메뉴 주위에 div를 래핑 할 수있는 방법이 있습니까

예를 들어 마크 업은

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <ul class="sub-menu">

            <li><a href="/">Item 1</a></li>
            <li><a href="/">Item 1</a></li>

        </ul>
   </li>
    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

이에

<ul class="menu">

    <li><a href="/">Item 1</a></li>
    <li>
        <a href="/">Item 2</a>

        <div class="sub-menu-wrap">

            <ul class="sub-menu">

                <li><a href="/">Item 1</a></li>
                <li><a href="/">Item 1</a></li>

            </ul>

        </div>

   </li>

    <li><a href="/">Item 1</a></li>
    <li><a href="/">Item 1</a></li>

</ul>

여기서 "하위 메뉴 랩"은 사용자 지정 div입니다.

이것이 가능한가?

답변:


21

사용자 정의 워커를 사용 , 방법을 확장 start_lvl()하고 end_lvl.

테스트되지 않은 샘플 코드 :

class WPSE_78121_Sublevel_Walker extends Walker_Nav_Menu
{
    function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<div class='sub-menu-wrap'><ul class='sub-menu'>\n";
    }
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";
    }
}

테마에서의 사용법 :

wp_nav_menu(
    array (
        'theme_location' => 'your-theme-location-EDIT-THIS',
        'walker'         => new WPSE_78121_Sublevel_Walker
    )
);

메뉴 항목별로 변경할 수 있습니까? 예를 들어 메뉴 항목 클래스는 내부에서 사용할 수 Walker_Nav_Menu있습니까?
댄.

@단. 그렇습니다.
fuxia

@ fuxia,이 접근법은 WP 5 이상에서도 여전히 건강합니까, 아니면 같은 것을 달성하기 위해 대체 기술을 권장합니까?
klewis

@klewis 이것은 여전히 ​​작동합니다.
fuxia

첫 번째 수준에서만이 작업을 수행하는 방법
jho1086 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.