nav_menuサブメニューにコンテナーを追加する


9

wp_nav_menuのul.sub-menuの周りに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>

「sub-menu-wrap」はカスタム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これはまだ動作するはずです。
fuxia

これを最初のレベルでのみ行う方法。
jho1086
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.