WordPress的自定義菜單沃克

Question

我剛開始與WP主題，我堅持與沃克類。我想輸出下面的代碼：

<ul> 
<li><a href="#" title="">Menu 1</a></li> 
<li><a href="#" title="">Menu 2</a></li> 
<li class="hasDropdown"> 
    <a href="#" title="">Menu 3 - Level 1</a> 
    <div> 
     <div> 
      <h5>Description 1</h5> 
      <ul> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
      </ul> 
     </div> 

     <div> 
      <h5>Description 2</h5> 
      <ul> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
      </ul> 
     </div> 

     <div> 
      <h5>Description 3</h5> 
      <ul> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
      </ul> 
     </div> 

     <div> 
      <h5>Description 4</h5> 
      <ul> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
       <li><a href="#" title="">Menu 3 - Level 2</a></li> 
      </ul> 
     </div> 
    </div> 
</li> 
<li><a href="#" title="">Menu 4</a></li> 
<li><a href="#" title="">Menu 5</a></li> 

我已經閱讀了大量的文章對步行者類，但每個做什麼，我試圖做的一小部分。我想把它們放在一起，並加深理解。我不確定如何開始/結束並設置下拉菜單。請任何人都可以幫忙？提前謝謝了。

我試圖複製和修改在導航菜單模板發現漫步者類，如下所示：

function start_lvl(&$output, $depth = 0, $args = array()) { 
    $indent = str_repeat("\t", $depth); 
    $output .= "\n$indent<div>\n"; 
    $output .= "\n$indent<h5></h5>\n"; 
    $output .= "\n$indent<ul class=\"sub-menu\">\n"; 
} 


function end_lvl(&$output, $depth = 0, $args = array()) { 
    $indent = str_repeat("\t", $depth); 
    $output .= "$indent</ul>\n"; 
    $output .= "\n$indent</div>\n"; 
} 

這給了我：

<div><h5><ul> 

我努力理解如何實現包裝div和.hasDropdown

Answer 1

嘗試覆蓋一個更多的方法。 （在Walker_Nav_Menu延伸的Walker類中實施）。

function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) { 
    $id_field = $this->db_fields['id']; 

    if (! empty($children_elements[$element->$id_field])) { 
     $element->classes[] = "hasDropdown"; 
    } 

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output); 
} 

並與div元素包裹，你有display_element方法（位於wp-includes/class-wp-walker.php）深入挖掘，但我敢肯定你會知道該怎麼做。