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.