在Wordpress中更改子菜单换行

Question

In Wordpress, how can I add a button or div into all sub-menu li's using wp_nav_menu?

This is my current code:

<?php wp_nav_menu(array(
  'theme_location' => 'main_menu', 
  'items_wrap'=>'%3$s', 
  'container' => false
)); ?>

This is my desired output:

<li class="submenu">
  <a>Link 1</a>
  <ul>
    <li><a>Link 2</a></li>
  </ul>
  <button type="button">Click Me!</button> 
</li>

Answer 1

So, Custom Walkers are a bit of a pain to work with, until you understand them.

The below custom walker code should get you what you need. Add this to your theme's functions.php file:

class Custom_Button_Walker extends Walker_Nav_Menu {
    // We only care about the "end level" part of the menu, where closing </ul> tags are generated
    public function end_lvl( &$output, $depth = 0, $args = array() ) {
        // This is from WP core code
        $indent = str_repeat("\t", $depth);
        // This line ensures we only add it on the proper level
        $button = (0 == $depth) ? "{$indent}<button type=\"button\">Click Me!</button>
" : '';
        // This line is modified to include the button markup
        $output .= "{$indent}</ul>
{$button}";
    }
}

To use the custom walker, modify your wp_nav_menu call like so:

wp_nav_menu( array(
    'theme_location' => 'main_menu', 
    'items_wrap'     =>'%3$s', 
    'container'      => FALSE,
    'walker'         => new Custom_Button_Walker()
));