चयन मेनू ड्रॉपडाउन बनाने के लिए wp_nav_menu का उपयोग कैसे करें?

Question

मैं अंदर का उपयोग कर रहा हूँ wp_nav_menu चयन ड्रॉपडाउन मेनू बनाने के फ़ंक्शन के जहां प्रत्येक मेनू आइटम चयन ड्रॉपडाउन में एक विकल्प है ...

'items_wrap' => '<select>%3$s</select>'
'before'     => '<option value="">'
'after'      => '</option>'

मैं 'before'घोषणा में लिंक मूल्य कैसे जोड़ूं ? क्या इस बारे में जाने का कोई बेहतर तरीका है? मुझे इसके बारे में मालूम हैwp_dropdown_pages , लेकिन यह काम नहीं करता है क्योंकि मैं चाहता हूं कि उपयोगकर्ता "मेनू" पृष्ठ से मेनू को नियंत्रित करने में सक्षम हों।

Answer 1

आप इसे wp_nav_menu के साथ नहीं कर सकते, क्योंकि यह सूची आइटमों को आउटपुट करता है, और आप अपने कोड के साथ अवैध मार्कअप उत्पन्न करेंगे।

इसके बजाय wp_get_nav_menu_items () का उपयोग करने का प्रयास करें ।

---

कस्टम वॉकर के साथ ड्रॉप डाउन मेनू के लिए एक त्वरित समाधान:

class Walker_Nav_Menu_Dropdown extends Walker_Nav_Menu{

    // don't output children opening tag (`<ul>`)
    public function start_lvl(&$output, $depth){}

    // don't output children closing tag    
    public function end_lvl(&$output, $depth){}

    public function start_el(&$output, $item, $depth, $args){

      // add spacing to the title based on the current depth
      $item->title = str_repeat("&nbsp;", $depth * 4) . $item->title;

      // call the prototype and replace the <li> tag
      // from the generated markup...
      parent::start_el(&$output, $item, $depth, $args);
      $output = str_replace('<li', '<option', $output);
    }

    // replace closing </li> with the closing option tag
    public function end_el(&$output, $item, $depth){
      $output .= "</option>\n";
    }
}

अपने टेम्प्लेट में इसे इस तरह उपयोग करें:

wp_nav_menu(array(
  'theme_location' => 'primary', // your theme location here
  'walker'         => new Walker_Nav_Menu_Dropdown(),
  'items_wrap'     => '<select>%3$s</select>',
));

Comments

वास्तव में, जब "items_wrap" भाग का उपयोग करते हैं, जो सूची आइटम को हटा देता है, तो मार्कअप ठीक है। मैं लिंक की जाँच करूँगा। धन्यवाद!

— क्रिस मोल्टर

हां, लेकिन यह नेस्टेड <UL>एस को संभाल नहीं करता है :)

— onetrickpony

यह वास्तव में :-)

— क्रिस मोल्ट

स्रोत के अनुसार , यह नहीं है, जब तक कि आप एक कस्टम वॉकर का उपयोग नहीं कर रहे हैं ...

— onetrickpony

यह काम करता है या नहीं?

— च्रिसली

Answer 2

मैंने पाया है कि उपयोगी:

आप सीएसएस कोड ड्रॉपडॉन मेनू को सरल बनाने के लिए किसी भी प्रतिक्रिया का अनुसरण कर सकते हैं।

1. parentएक सबमेनू वाले आइटम के लिए एक क्लास जोड़ें
2. depthवर्ग जोड़ें (गहराई ०, गहराई १, गहराई २ ...)

अपने विषय में जोड़ें

class DD_Wolker_Menu extends Walker_Nav_Menu {
    function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ){
        $GLOBALS['dd_children'] = ( isset($children_elements[$element->ID]) )? 1:0;
        $GLOBALS['dd_depth'] = (int) $depth;
        parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
    }
}
add_filter('nav_menu_css_class','add_parent_css',10,2);
function  add_parent_css($classes, $item){
     global  $dd_depth, $dd_children;
     $classes[] = 'depth'.$dd_depth;
     if($dd_children)
         $classes[] = 'parent';
    return $classes;
}

अब शीर्ष लेख में

wp_nav_menu( array( 'container_class' => '','container' => '',  'menu' => 'header-menu', 'walker'=> new DD_Wolker_Menu ) );

header-menu आपके मेनू के नाम से बदल दिया गया है

CSS उदाहरण कोड हो सकता है

#menu-header-menu{
    margin: 0;
    padding: 0;
}
#menu-header-menu  ul{

}

#menu-header-menu> li{
    display: inline;
    margin-left: 1.618em;
}
#menu-header-menu  li{
    list-style: none;
}
#menu-header-menu  li a{
    text-decoration: none;
    font-size:  1em;
    font-family:    'Lato',Helvetica,Arial,sans-serif ;
    letter-spacing: 1px;
}
#menu-header-menu li.parent::after{
    content:'+';
}

#menu-header-menu  .sub-menu {
   display: none;
   position: absolute;
   background-color: #fff;
}

#menu-header-menu  li:hover>.sub-menu{
    display: inline;
    width: auto;
    height: auto;
    border: solid 1px #BBBBBB;
    z-index: +1;
}

कहाँ #menu-header-menu- मुख्य उल सूची को आईडी करें (आपको इसे भी अपडेट करने की आवश्यकता है)

Answer 3

ड्रापडाउन मेनू प्लगइन करता है इस सवाल का जवाब: wp_nav_menuचयन मेनू लटकती बनाने के लिए इस्तेमाल नहीं किया जा सकता है, जबकि प्लगइन गंधा प्रदान करता है dropdown_menu()समारोह है कि काम सराहनीय है।