最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

filters - How to change menu structure?

programmeradmin2浏览0评论

When we show the menu using wp_nav_menu, it creates menu with a structure like this:

<div class="container">
  <ul class="list">
    <li class="item">
      <a class="link" href="#">Link 1</a>
    </li>
    <li class="item">
      <a class="link" href="#">Link 2</a>
    </li>
    <li class="item">
      <a class="link" href="#">Link 3</a>
    </li>
    <li class="item">
      <a class="link" href="#">Link 4</a>
    </li>
    <li class="item">
      <a class="link" href="#">Link 5</a>
    </li>
  </ul>
</div>

How can I change it to be like this:

<div class="container">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a href="#">Item 5</a>
</div>

I tried to customize it by filter, but I'm not able to check menu by arguments, the arguments just coming NULL.

My code is like this:

// page.php
wp_nav_menu([ 'theme_location' => 'sidebar_menu' ]);

// functions.php
function custom_menu($items, $args) {
    // ....
    print_r($args); // NULL
}

apply_filter('wp_nav_menu', 'custom_menu');

When we show the menu using wp_nav_menu, it creates menu with a structure like this:

<div class="container">
  <ul class="list">
    <li class="item">
      <a class="link" href="#">Link 1</a>
    </li>
    <li class="item">
      <a class="link" href="#">Link 2</a>
    </li>
    <li class="item">
      <a class="link" href="#">Link 3</a>
    </li>
    <li class="item">
      <a class="link" href="#">Link 4</a>
    </li>
    <li class="item">
      <a class="link" href="#">Link 5</a>
    </li>
  </ul>
</div>

How can I change it to be like this:

<div class="container">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a href="#">Item 5</a>
</div>

I tried to customize it by filter, but I'm not able to check menu by arguments, the arguments just coming NULL.

My code is like this:

// page.php
wp_nav_menu([ 'theme_location' => 'sidebar_menu' ]);

// functions.php
function custom_menu($items, $args) {
    // ....
    print_r($args); // NULL
}

apply_filter('wp_nav_menu', 'custom_menu');
Share Improve this question edited Aug 30, 2019 at 20:19 Lai32290 asked Aug 30, 2019 at 16:00 Lai32290Lai32290 3511 gold badge4 silver badges15 bronze badges 1
  • 1 It's also possible to do this with a custom menu walker class, and may be possible using the options in the wp_nav_menu call – Tom J Nowell Commented Sep 1, 2019 at 22:41
Add a comment  | 

1 Answer 1

Reset to default 2

Customizing menu markup can only be accomplished by adding a WordPress filter and using your own, custom menu template.

Unfortunately, menus are not a part of the WordPress template hierarchy so you need to do something like this:

add_filter( 'wp_nav_menu', function( $nav_menu, $args ) {
  if( 'my_custom_menu' == $args->menu->slug ) {
    // include a template with your required markup
    // reference both the $nav_menu and $args params in the template
    return include('my-nav-template.php');
  } else {
    return $nav_menu;
  }
}, 10, 2);

This is a somewhat abbreviated answer. You'll need to read the WordPress documentation on the nav_menu object / function in order to know exactly how to parse the object but it's pretty straight forward.

Also, be sure that sidebar_menu is registered before calling wp_nav_menu() and that at least one menu has been assigned to the sidebar before trying this code.

Good luck!

发布评论

评论列表(0)

  1. 暂无评论