深入理解 WordPress `wp_nav_menu_args` 过滤器源码：如何动态修改菜单渲染的参数。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！我是今天的主讲人，一个和WordPress死磕了多年的老码农。今天咱们要聊聊WordPress的菜单系统里一个非常重要的过滤器：wp_nav_menu_args。

这玩意儿就像是菜单渲染前的最后一道关卡，你可以在这里对菜单的各种参数进行微调，让菜单按照你的想法呈现出来。掌握了它，你就能玩转WordPress的菜单，做出各种炫酷的效果。

咱们先从wp_nav_menu()函数入手，看看它到底是怎么工作的，以及wp_nav_menu_args过滤器在其中扮演的角色。

一、 wp_nav_menu() 函数：菜单渲染的发动机

wp_nav_menu()是WordPress负责渲染菜单的核心函数。它接受一个数组作为参数，这个数组包含了菜单的各种配置信息，比如菜单ID、容器标签、CSS类等等。

一个最简单的wp_nav_menu()调用可能是这样的：

<?php
wp_nav_menu( array( 'theme_location' => 'primary' ) );
?>

这段代码告诉WordPress，渲染主题位置为 ‘primary’ 的菜单。

那wp_nav_menu()内部到底做了什么呢？简化来说，它做了以下几件事：

合并默认参数和用户传入的参数： wp_nav_menu()会先将用户传入的参数和一些默认参数合并，形成一个完整的参数数组。
应用 wp_nav_menu_args 过滤器： 重点来了！在合并参数之后，wp_nav_menu()会应用wp_nav_menu_args过滤器，允许开发者修改这个参数数组。
获取菜单项： 根据参数数组中的菜单ID，获取对应的菜单项。
生成 HTML 标记： 遍历菜单项，根据参数数组中的配置，生成最终的 HTML 菜单代码。
输出 HTML 代码： 将生成的 HTML 代码输出到页面上。

可以看到，wp_nav_menu_args过滤器在参数传递到生成HTML代码的环节中起着至关重要的作用。我们可以通过它来改变菜单的行为，例如：添加自定义的CSS类，修改菜单容器，等等。

二、 wp_nav_menu_args 过滤器：掌控菜单的遥控器

wp_nav_menu_args过滤器允许你修改传递给wp_nav_menu()函数的参数数组。它的基本用法如下：

<?php
add_filter( 'wp_nav_menu_args', 'my_custom_menu_args' );

function my_custom_menu_args( $args ) {
  // 在这里修改 $args 数组
  return $args;
}
?>

add_filter( 'wp_nav_menu_args', 'my_custom_menu_args' );：这行代码将 my_custom_menu_args 函数注册为 wp_nav_menu_args 过滤器的回调函数。
my_custom_menu_args( $args )：这个函数接收一个参数 $args，它就是 wp_nav_menu() 函数的参数数组。你可以在这个函数里修改 $args 数组，然后返回它。

三、实战演练：用 wp_nav_menu_args 过滤器打造个性化菜单

光说不练假把式，接下来咱们通过几个实际的例子，来看看如何使用wp_nav_menu_args过滤器来定制菜单。

案例1：给特定菜单添加自定义CSS类

有时候，我们想给某个特定的菜单添加一些自定义的CSS类，以便更好地控制它的样式。这时，我们可以利用wp_nav_menu_args过滤器来实现。

<?php
add_filter( 'wp_nav_menu_args', 'add_custom_class_to_menu' );

function add_custom_class_to_menu( $args ) {
  // 检查是否是指定的菜单
  if ( $args['theme_location'] == 'primary' ) {
    // 添加自定义CSS类
    $args['menu_class'] .= ' my-custom-menu';
  }
  return $args;
}
?>

这段代码的作用是：

检查当前要渲染的菜单是否是主题位置为 ‘primary’ 的菜单。
如果是，则在 menu_class 参数的值后面追加 ‘ my-custom-menu’。

这样，渲染出来的菜单就会带有 my-custom-menu 这个CSS类，你就可以通过CSS来定制它的样式了。

案例2：修改菜单容器

默认情况下，WordPress菜单会用<ul>标签作为容器。如果你想用其他的标签作为容器，比如<nav>标签，可以使用wp_nav_menu_args过滤器来修改container参数。

<?php
add_filter( 'wp_nav_menu_args', 'change_menu_container' );

function change_menu_container( $args ) {
  // 检查是否是指定的菜单
  if ( $args['theme_location'] == 'primary' ) {
    // 修改容器标签
    $args['container'] = 'nav';
  }
  return $args;
}
?>

这段代码会将 ‘primary’ 菜单的容器标签修改为 <nav>。

案例3：动态设置 depth 参数控制菜单层级

depth 参数控制菜单的显示层级。默认情况下，WordPress会显示所有层级的菜单。如果你想限制菜单的显示层级，可以使用 depth 参数。

<?php
add_filter( 'wp_nav_menu_args', 'limit_menu_depth' );

function limit_menu_depth( $args ) {
  // 检查是否是指定的菜单
  if ( $args['theme_location'] == 'primary' ) {
    // 设置菜单深度为1，只显示一级菜单
    $args['depth'] = 1;
  }
  return $args;
}
?>

这段代码会将 ‘primary’ 菜单的显示层级限制为1，只显示一级菜单。

案例4：根据用户角色显示不同的菜单

这是一个比较高级的用法。我们可以根据用户的角色（比如管理员、编辑、普通用户）来显示不同的菜单。

<?php
add_filter( 'wp_nav_menu_args', 'filter_menu_by_user_role' );

function filter_menu_by_user_role( $args ) {
  // 获取当前用户
  $user = wp_get_current_user();

  // 检查用户是否登录
  if ( is_user_logged_in() ) {
    // 获取用户的角色
    $roles = ( array ) $user->roles;

    // 如果是管理员，显示 "admin-menu" 菜单
    if ( in_array( 'administrator', $roles ) ) {
      $args['menu'] = 'admin-menu'; // 替换为你的管理员菜单名称
    } else {
      // 否则，显示 "user-menu" 菜单
      $args['menu'] = 'user-menu'; // 替换为你的普通用户菜单名称
    }
  } else {
    // 如果用户未登录，显示 "guest-menu" 菜单
    $args['menu'] = 'guest-menu'; // 替换为你的游客菜单名称
  }

  return $args;
}
?>

这段代码的作用是：

获取当前用户的信息。
检查用户是否登录。
如果用户已登录，则获取用户的角色。
根据用户的角色，设置 menu 参数的值，指定要显示的菜单。
如果用户未登录，则显示 "guest-menu" 菜单。

注意：你需要先创建 "admin-menu"、"user-menu" 和 "guest-menu" 这三个菜单，才能让这段代码正常工作。

四、 wp_nav_menu_args 过滤器参数详解

wp_nav_menu_args 过滤器传递的 $args 数组包含了大量的参数，下面列出一些常用的参数：

参数名称	类型	描述
`menu`	string	指定要显示的菜单的名称、ID或slug。
`menu_class`	string	菜单容器的CSS类名。默认值为 ‘menu’。
`menu_id`	string	菜单容器的ID。默认值为 ‘menu-{菜单名}’。
`container`	string	菜单容器的标签。默认值为 ‘div’。
`container_class`	string	菜单容器的CSS类名。默认值为 ‘menu-{菜单名}-container’。
`container_id`	string	菜单容器的ID。
`before`	string	菜单项链接文本之前的内容。
`after`	string	菜单项链接文本之后的内容。
`link_before`	string	菜单项链接文本之前的内容（在链接标签内部）。
`link_after`	string	菜单项链接文本之后的内容（在链接标签内部）。
`items_wrap`	string	菜单项的包裹标签。默认值为 `<ul id="%1$s" class="%2$s">%3$s</ul>`。其中 `%1$s` 会被 `menu_id` 替换, `%2$s` 会被 `menu_class` 替换, `%3$s` 会被菜单项的HTML代码替换。
`depth`	int	菜单的显示层级。 0 表示显示所有层级， 1 表示只显示一级菜单， 2 表示显示两级菜单，以此类推。
`walker`	object	用于生成菜单 HTML 代码的 Walker 对象。可以自定义 Walker 对象来实现更高级的菜单定制。
`theme_location`	string	注册菜单时指定的主题位置。例如 ‘primary’、’secondary’ 等。

掌握了这些参数，你就可以随心所欲地定制WordPress的菜单了。

五、高级技巧：自定义 Walker 类

如果你想对菜单的HTML结构进行更精细的控制，可以自定义 Walker 类。 Walker 类负责遍历菜单项，并生成对应的 HTML 代码。

WordPress 提供了 Walker_Nav_Menu 类作为基类，你可以继承它，并重写其中的方法来实现自定义的菜单结构。

这里就不展开讲 Walker 类的具体用法了，因为这需要单独一篇文章才能讲清楚。但你可以记住，自定义 Walker 类是实现高级菜单定制的利器。

六、总结

wp_nav_menu_args 过滤器是WordPress菜单系统里一个非常强大的工具。它可以让你在菜单渲染之前，对菜单的各种参数进行修改，从而实现各种个性化的菜单效果。

通过本文的讲解，相信你已经对wp_nav_menu_args过滤器有了更深入的理解。希望你能在实际的项目中灵活运用它，打造出更加出色的WordPress网站。

好了，今天的讲座就到这里。感谢大家的收听！希望大家多多点赞，多多支持！如果有什么问题，欢迎在评论区留言。咱们下期再见！

发表回复 取消回复

发表回复取消回复