使用条件语句在WordPress菜单项中添加自定义类

在大多数情况下,在设置WordPress导航菜单样式时,您只需从WordPress管理面板添加CSS类即可。最近在开展项目时,我们发现自己陷入了困境。我们只想在单个帖子页面上为特定菜单项添加自定义类。环顾四周后,我们找不到任何解决方案。我们的最后一招是在推特上提问。Otto(@ Otto42)回答说可以使用过滤器,但是没有过滤器的文档。

在查看核心一段时间之后,我们找到了解决方案。你需要做的是将以下代码粘贴到functions.php文件中:

  //Filtering a Class in Navigation Menu Item  add_filter("nav_menu_css_class" , "special_nav_class" , 10 , 2);  function special_nav_class($classes, $item){       if(is_single() && $item->title == "Blog"){               $classes[] = "current-menu-item";       }       return $classes;  }  

上面的代码只是检查它是否是一个帖子页面,菜单项标题是Blog。如果条件匹配,则添加“Current-menu-item”类。我们需要添加一个自定义类,以使其适用于我们正在处理的这种设计。

如果您还不能说清楚,基本上我们想要做的是当用户在一个帖子上时保持菜单中突出显示的博客项目。这让他们看到单个帖子是博客的一部分。这通常没有意义,但在我们正在开发的设计中,它确实有意义。

如果您非常渴望寻找此代码,我们希望本文有所帮助。您也可以检查其他$ item变量。一些例子是:$ item-> ID,$ item-> title,$ item-> xfn

快速编辑:在twitter上发布这篇文章后,我们的一位用户@dbrabyn指出我们可以使用CSS Body类轻松完成此操作。例如:

.single #navigation .leftmenublog div{display: inline-block !important;}

在大多数情况下,在设置WordPress导航菜单样式时,您只需从WordPress管理面板添加CSS类即可。最近在开展项目时,我们发现自己陷入了困境。我们只想在单个帖子页面上为特定菜单项添加自定义类。环顾四周后,我们找不到任何解决方案。我们的最后一招是在推特上提问。Otto(@ Otto42)回答说可以使用过滤器,但是没有过滤器的文档。

在查看核心一段时间之后,我们找到了解决方案。你需要做的是将以下代码粘贴到functions.php文件中:

  //Filtering a Class in Navigation Menu Item  add_filter("nav_menu_css_class" , "special_nav_class" , 10 , 2);  function special_nav_class($classes, $item){       if(is_single() && $item->title == "Blog"){               $classes[] = "current-menu-item";       }       return $classes;  }  

上面的代码只是检查它是否是一个帖子页面,菜单项标题是Blog。如果条件匹配,则添加“Current-menu-item”类。我们需要添加一个自定义类,以使其适用于我们正在处理的这种设计。

如果您还不能说清楚,基本上我们想要做的是当用户在一个帖子上时保持菜单中突出显示的博客项目。这让他们看到单个帖子是博客的一部分。这通常没有意义,但在我们正在开发的设计中,它确实有意义。

如果您非常渴望寻找此代码,我们希望本文有所帮助。您也可以检查其他$ item变量。一些例子是:$ item-> ID,$ item-> title,$ item-> xfn

快速编辑:在twitter上发布这篇文章后,我们的一位用户@dbrabyn指出我们可以使用CSS Body类轻松完成此操作。例如:

.single #navigation .leftmenublog div{display: inline-block !important;}

相关推荐

发表回复

房先生
我们将24小时内回复。
2024-04-23 15:41:35
您好,有任何疑问请与我们联系!
您的工单我们已经收到,我们将会尽快跟您联系!
[QQ客服]
2781198
加我微信
[电话联系]
13585372227
[电子邮件]
[email protected]
取消

选择聊天工具: