Seçili bir menü açılır menüsü oluşturmak için wp_nav_menu nasıl kullanılır?


21

wp_nav_menuHer menü öğesinin seçmeli açılır menüde bir seçenek olduğu bir seçim açılır menüsü oluşturmak için aşağıdaki fonksiyonu kullanıyorum ...

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

Bağlantı değerini 'before'bildirime nasıl eklerim ? Bu konuda daha iyi bir yol var mı? biliyorumwp_dropdown_pages ama bu işe yaramıyor çünkü kullanıcıların menüyü "Menüler" sayfasından kontrol edebilmelerini istiyorum.

Yanıtlar:


25

Wp_nav_menu ile bunu yapamazsınız, çünkü liste öğelerini çıkarır ve kodunuzda geçersiz işaretleme oluşturur.

Wp_get_nav_menu_items () öğesini kullanmayı deneyinBunun yerine .


Özel bir walker ile açılan menü için hızlı bir çözüm:

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";
    }
}

Şablonlarınızda bu şekilde kullanın:

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

1
Aslında, "items_wrap" bölümünü kullanırken, liste öğelerini kaldırır, bu nedenle işaretleme tamamdır. Yine de bağlantıyı kontrol edeceğim. Teşekkürler!
Chris Molitor

evet, ama bu iç içe geçmiş <UL>s ile başa
çıkmıyor

Aslında :-) yapar
Chris Molitor

1
Kaynağa göre , özel bir yürüteç kullanmadıkça ...
onetrickpony

Bu işe ya da değil mi?
chrisjlee

0

Bunu faydalı buldum:

Css code dropdovn menüsünü kolaylaştırmak için tüm cevapları takip edebilirsiniz.

  1. Bir sınıf ekle parentAlt menüsü olan öğeler için
  2. depthsınıf ekle (derinlik0, derinlik1, derinlik2 ...)

function.php temanıza ekleyin

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;
}

şimdi header.php içinde

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

header-menu menünüzün adı ile değiştirilir

CSS örnek kodu,

#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;
}

where #menu-header-menu- ana UL listesini tanıtın (bunu güncellemeniz gerekir)


-1

Açılır Menüler eklentisi yapar soruya cevap: wp_nav_menuselect menü açılır listesini oluşturmak için kullanılamaz, eklenti şık sağlar oysa dropdown_menu()takdire şayan bir iş yok fonksiyonunu.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.