菜單沃克 - 在頂級項目的鏈接在WordPress的導航菜單

Question

只是想知道，如果有人可以請幫助我的代碼添加到現有的菜單沃克在一個WordPress 4.7.4導航菜單中添加各地的頁面標題跨度所謂的「主」在鏈接添加一個跨度周圍的網頁標題中所有頂級項目。

我想（簡體）HTML看起來像這樣：

<ul> 
    <li><a href="#" title="Page 1"><span>Page 1</span></a></li> 
    <li><a href="#" title="Page 2"><span>Page 2</span></a><div class="drop"> 
     <ul> 
      <li><a href="#" title="Sub Page 2.1">Sub Page 2.1</a></li> 
      <li><a href="#" title="Sub Page 2.2">Sub Page 2.2</a></li> 
      <li><a href="#" title="Sub Page 2.3">Sub Page 2.3</a></li> 
      <li><a href="#" title="Sub Page 2.4">Sub Page 2.4</a></li> 
     </ul> 
    </div></li> 
    <li><a href="#" title="Page 3"><span>Page 3</span></a></li> 
    <li><a href="#" title="Page 4"><span>Page 4</span></a><div class="drop"> 
     <ul> 
      <li><a href="#" title="Sub Page 4.1">Sub Page 4.1</a></li> 
      <li><a href="#" title="Sub Page 4.2">Sub Page 4.2</a></li> 
     </ul> 
    </div></li> 
    <li><a href="#" title="Page 5"><span>Page 5</span></a></li> 
    <li><a href="#" title="Page 6"><span>Page 6</span></a></li> 
    <li><a href="#" title="Page 7"><span>Page 7</span></a></li> 
</ul> 

的沃克在我functions.php文件目前有代碼它周圍添加子菜單項的包裝DIV的下拉菜單。這個偉大的工程，如下所示：

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

Link_before並在菜單調用link_after屬性似乎並不合適，因爲它們增加跨距所有菜單項，包括子頁面。

我發現了一些的functions.php代碼添加各地的頂級項目的跨度，但是這增加了跨所有WP菜單的頂級項目，而不僅僅是所謂的「主」菜單。此代碼如下所示：

add_filter('wp_nav_menu_objects', function($items) { 
     foreach ($items as $item) { 
     if (!$item->menu_item_parent) { 
      $item->title = '<span>' . $item->title . '</span>'; 
     } 
    } 
    return $items; 
}); 

上面的代碼可以在一個名爲main的菜單中使用菜單助手嗎？如果是這樣，我該如何實現呢？或者是菜單步行者需要的新代碼？如果是這樣，有什麼想法？

在此先感謝您的幫助。

Answer 1

嘿，我已經實現了代碼按我的項目菜單HTML是一樣的。

希望這將幫助你:-)

請檢查下面的代碼爲HTML

<nav class="wsmenu slideLeft clearfix"> 
<ul class="mobile-sub wsmenu-list"> 
<li><a href="index.html" class="active"> Menu 1</a></li> 
<li><a href="services.html">Menu 2 <span class="arrow"></span></a> 
<ul class="wsmenu-submenu"> 
<li><a href="#"> sub Menu 2</a> 
<ul class="wsmenu-submenu-sub"> 
<li><a href="#">sub sub Menu 2</a></li> 
<li><a href="#">sub sub Menu 2</a></li> 
<li><a href="#">sub sub Menu 2</a></li> 
</ul> 
</li> 
<li><a href="#">sub Menu 2</a> 
<ul class="wsmenu-submenu-sub"> 
<li><a href="#">sub sub Menu 2</a></li> 
<li><a href="#">sub sub Menu 2</a></li> 
<li><a href="#">sub sub Menu 2</a></li> 
</ul> 
</li> 
<li><a href="#">Onsite Gear Measurement</a></li> 
</ul> 
</li> 
<li><a href="">Menu 3</a></li> 
<li><a href="">Menu 4</a></li> 
</ul> 
</nav> 

檢查header.php中我的頭菜單代碼文件

<nav class="wsmenu slideLeft clearfix"> 
<!--<ul class="mobile-sub wsmenu-list">--> 
<?php 
wp_nav_menu(array('theme_location' => 'primary', 
'menu_class' => 'mobile-sub wsmenu-list', 
'menu_id' => '', 
'container' => false, 
'walker' => new WPDocs_Walker_Nav_Menu())); 
?> 
</nav> 

檢查下面的代碼把步行者菜單function.php文件

<?php 
class WPDocs_Walker_Nav_Menu extends Walker_Nav_Menu { 

    /** 
    * Starts the list before the elements are added. 
    * 
    * Adds classes to the unordered list sub-menus. 
    * 
    * @param string $output Passed by reference. Used to append additional content. 
    * @param int $depth Depth of menu item. Used for padding. 
    * @param array $args An array of arguments. @see wp_nav_menu() 
    */ 
    function start_lvl(&$output, $depth = 0, $args = array()) { 
     // Depth-dependent classes. 
     $indent = ($depth > 0 ? str_repeat("\t", $depth) : ''); // code indent 
     $display_depth = ($depth + 1); // because it counts the first submenu as 0 
     $classes = array(
      'wsmenu-submenu', 
      ($display_depth % 2 ? 'menu-odd' : 'menu-even'), 
      ($display_depth >=2 ? 'wsmenu-submenu-sub' : ''), 
      'menu-depth-' . $display_depth 
     ); 
     $class_names = implode(' ', $classes); 

     // Build HTML for output. 
     $output .= "\n" . $indent . '<ul class="' . $class_names . '">' . "\n"; 
    } 

    /** 
    * Start the element output. 
    * 
    * Adds main/sub-classes to the list items and links. 
    * 
    * @param string $output Passed by reference. Used to append additional content. 
    * @param object $item Menu item data object. 
    * @param int $depth Depth of menu item. Used for padding. 
    * @param array $args An array of arguments. @see wp_nav_menu() 
    * @param int $id  Current item ID. 
    */ 
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { 
     global $wp_query; 
     $indent = ($depth > 0 ? str_repeat("\t", $depth) : ''); // code indent 

     // Depth-dependent classes. 
     $depth_classes = array(
      ($depth == 0 ? 'main-menu-item' : 'sub-menu'), 
      ($depth >=2 ? 'sub-sub-menu-item' : ''), 
      ($depth % 2 ? 'menu-item-odd' : 'menu-item-even'), 
      'menu-item-depth-' . $depth 
     ); 
     $depth_class_names = esc_attr(implode(' ', $depth_classes)); 

     // Passed classes. 
     $classes = empty($item->classes) ? array() : (array) $item->classes; 
     $class_names = esc_attr(implode(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item))); 

     // Build HTML. 
     $output .= $indent . '<li id="nav-menu-item-'. $item->ID . '" class="' . $depth_class_names . ' ' . $class_names . '">'; 

     // Link attributes. 
     $attributes = ! empty($item->attr_title) ? ' title="' . esc_attr($item->attr_title) .'"' : ''; 
     $attributes .= ! empty($item->target)  ? ' target="' . esc_attr($item->target ) .'"' : ''; 
     $attributes .= ! empty($item->xfn)  ? ' rel="' . esc_attr($item->xfn  ) .'"' : ''; 
     $attributes .= ! empty($item->url)  ? ' href="' . esc_attr($item->url  ) .'"' : ''; 
     $attributes .= ' class="menu-link ' . ($depth > 0 ? 'sub-menu-link' : 'main-menu-link') . '"'; 

     // Build HTML output and pass through the proper filter. 
     $item_output = sprintf('%1$s<a%2$s>%3$s%4$s%5$s<span></span></a>%6$s', 
      $args->before, 
      $attributes, 
      $args->link_before, 
      apply_filters('the_title', $item->title, $item->ID), 
      $args->link_after, 
      $args->after 
     ); 
     $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); 
    } 
} 

?>