เพิ่มคอนเทนเนอร์ในเมนูย่อย nav_menu


9

มีวิธีที่ฉันสามารถล้อมรอบ div ของ wp_nav_menu ของ ul.sub-menu ได้ไหม

ตัวอย่างเช่นมาร์กอัปจะมาจาก

<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และเป็นลูกไหม
ด่าน

@Dan ใช่แล้ว.
fuxia

@fuxia วิธีนี้ยังคงมีประโยชน์สำหรับ WP 5+ หรือคุณแนะนำเทคนิคทางเลือกเพื่อทำสิ่งเดียวกันให้สำเร็จหรือไม่?
klewis

@klewis วิธีนี้ควรใช้งานได้
fuxia

วิธีการทำเช่นนี้เฉพาะในระดับแรก
jho1086
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.