17713433920 info@mac163.com

高亮显示网站主菜单中的活动菜单项确实有利于可用性,以便查看您网站的人确切知道他们正在查看的页面,并且可以更轻松地从当前页面浏览菜单。在WordPress 3.0之前,根据访问者所在的页面突出显示当前菜单项比较费力,因为您必须运行if每个链接上的语句来测试它是当前页面还是当前页面的祖先,但是,随着WordPress第3版中新的拖放菜单系统的引入,现在为每个链接分配了特殊的类,从而使样式设置更加容易。

在WordPress菜单中突出显示当前链接
在WordPress菜单中突出显示当前链接

基本的WordPress菜单输出

首先,让我们花一点时间看一下基本的WordPress菜单输出(基于使用“ twentyten WordPress主题 ”的简单菜单),以便您可以看到自动添加到链接的类的类型:

<ul id="menu-my-menu" class="menu"><li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3"><a href="http://mysite.com">Home</a></li>
<li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="http://mysite.com/sample-page">Page 1</a></li>
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a href="http://mysite.com/sample-page-2">Page 2</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-6"><a href="http://mysite.com/drop-down">Drop Down</a>
<ul class="sub-menu">
	<li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://mysite.com/drop-down-1">Drop Down 1</a></li>
	<li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-8"><a href="http://mysite.com/drop-down-2">Drop Down 2</a></li>
</ul>
</li>
</ul>

突出显示当前页面/类别/其他菜单链接

如果您看一下上面的代码,您会看到WordPress添加到菜单链接的所有不同类,但您要重点突出显示的类如下:

  1. .current-menu-item
  2. .current-page-ancestor
  3. .current-post-ancestor

.current-menu-item:添加到用户正在查看的当前页面的菜单项中的类。

〜示例:如果您在“关于”页面上并且有指向“关于”页面的链接,则它将继承该类

.current-page-ancestor :如果当前正在查看子页面,则将类添加到父页面的菜单项中。

〜示例:如果您有一个名为“ Pages”的页面和一个名为“ about”的子页面,如果您位于“ about”页面上,则名为“ Pages”的菜单链接将继承该类。

.current-post-ancestor :只要类别是所查看帖子的祖先,便添加到菜单项中的类。

〜示例:如果您当前正在查看名为“哈利·波特”的帖子,则该类将添加到菜单中的“电影”类别中。

基本样本菜单突出显示

这是一种非常基本且通用的突出显示方法,但它可以使您入门。只需在style.css文件中复制并编辑以下CSS以突出显示菜单链接:

.current-menu-item a,
.current-page-ancestor a,
.current-post-ancestor a { background: #000; }

当然,此CSS的目标是所有当前类,这意味着如果您在站点上有多个菜单,甚至在小部件区域中有菜单,它们都将成为目标。因此,请确保对CSS进行调整以使其与您的主题匹配,以便它仅针对您要专门针对的菜单。


微信二维码

扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答:WP主题推荐,WP网站建设,Google SEO,百度SEO,专业服务器环境搭建


需要提供WordPress主题/插件的汉化服务可以随时联系我们!另外成品WordPress网站以及半成品WordPress网站建设,海外Google SEO优化托管服务,百度SEO优化托管服务,Centos/Debian服务器WP专用环境搭建,WP缓存服务器搭建,我们都是你的首选,拥有多年WP开源程序服务经验,我们一直在坚持客户体验,没有最好,只有更好!
Mac163网站建设,需要帮助点击我!
  • 17713433920
  • 在线客户
  • 联系邮箱
  • 扫一扫,加好友

关闭搜索
购物车
回到顶部