17713433920 info@mac163.com
wordpress动态

高亮显示网站主菜单中的活动菜单项确实有利于可用性，以便查看您网站的人确切知道他们正在查看的页面，并且可以更轻松地从当前页面浏览菜单。在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开源程序服务经验，我们一直在坚持客户体验，没有最好，只有更好！

随机推荐

回到顶部