打开文章类型详情页时，为文章类型存档页菜单项目添加 current-menu-item CSS 类

About WordPress导航菜单

作为一名前端开发者，我相信大多数人都使用过WordPress，WordPress拥有方便的导航菜单功能。当我们访问一个WordPressURL时，WordPress会自动给导航菜单项目中的这个URL加上“current-menu-item”类，以帮助前端开发者进行高亮处理。

为文章类型存档页添加“current-menu-item”类

但是当我们有多个文章类型的时候，访问文章类型的文章详情页面的时候，我们有时候需要给该文章类型的存档页也加上“current-menu-item”类。比如访问http://abc.com/box/small-box的时候，我们想给该文章类型的存档页http://abc.com/box/加上“current-menu-item”类，WordPress默认是不支持这个特性的。在严格意义上来讲，文章类型的详情页和文章类型的存档页不是同一个页面，但是从用户体验的角度来讲，这种操作是讲的通的。

通过 nav_menu_css_classAction钩子为文章类型详情页添加当前菜单类

我们可以通过比对文章类型Slug和URL字符串的方式来实现这个需求，下面是实现的代码，这种方法并不是很严谨，在特殊情况下，会有bug出现。

add_action('nav_menu_css_class',function($classes,$item)
{

//获取当前文章
global$post;

//获取当前文章的文章类型
$current_post_type=get_post_type_object(get_post_type($post->ID));
$current_post_type_slug=$current_post_type->rewrite['slug'];

//获取导航菜单项的URL
$menu_slug=strtolower(trim($item->url));

//如果菜单项包含当前文章类型的Slug，添加当前菜单CSS类
if(strpos($menu_slug,$current_post_type_slug)!==false){
$classes[]='current-menu-item';
}

//返回添加后的CSS类数据
return$classes;

},10,2);

注意，以上代码只在固定链接结构设置为“文章名”的情况下有效，其他情况可以参考上面的代码自行测试。

可能会遇到的Bug及解决思路

我们设想一下这种情况，一个文章类型的名称为“box”,而网站的地址为www.express-box.com，这种情况下，网站的Url总是包含“box”，当我们打开box文章类型的详情页时，所有的菜单项目都会被添加一个当前菜单类。

比对URL的时候，把网址的域名部分排除掉可以减少这个Bug发生的概率。根据WordPressURL的结构特性，文章类型Slug是紧跟域名显示的，我们可以使用正则表达式把网址中的这个文章类型Slug匹配出来，再跟通过文章对象获取到的文章类型Slug比对就可以了。

除了给当前文章的文章类型存档URL添加当前菜单类，我们还可以通过类似的方法给当前文章所属的分类或者自定义分类法项目添加当前菜单类，时间所限，就不一一测试对应的代码了，有空测试了再补上。如果您写出了对应的代码，可以在评论中贴出，供大家参考。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。