Nav_menu उप मेनू में कंटेनर जोड़ें


9

वहाँ एक तरह से मैं wp_nav_menu के ul.sub- मेनू के चारों ओर एक 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>

जहां "सब-मेनू-रैप" कस्टम डिव है।

क्या यह संभव है?

जवाबों:


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 यह अभी भी काम करना चाहिए।
FUXIA

यह केवल पहले स्तर में कैसे करें।
jho1086
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.