Wordpress 单页、类别和档案菜单当前项
Posted
技术标签:
【中文标题】Wordpress 单页、类别和档案菜单当前项【英文标题】：Wordpress single page, categories and archives menu current item 【发布时间】：2012-09-21 14:23:56 【问题描述】：我无法理解如何执行以下操作。
在我的网站上，我有一个菜单：
首页 |关于 |技能 |投资组合 |联系方式
要调用上面的菜单，我的 header.php 文件中有以下内容：
<nav>
<?php wp_nav_menu( $args ); ?>
</nav>
当页面处于活动状态时，链接的背景颜色会发生变化，这是生成的 CSS 和 html：
header ul li a
border-radius: 4px;
background-color: transparent;
border: 1px solid transparent;
color: #939393;
margin: 0px;
border-image: initial;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 18px;
text-decoration: none;
header ul li.current-menu-item a,
header ul li a:hover
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.042);
border: 1px solid rgba(0, 0, 0, 0.15);
margin: 0;
border-image: initial;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
color: #939393;
header ul li.selected
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
background-color: rgba(0, 0, 0, 0.042);
border: 1px solid rgba(0, 0, 0, 0.15);
margin-top: -3px;
border-image: initial;
padding-left: 0px;
padding-right: 0px;
padding-top: 3px;
padding-bottom: 3px;
color: #939393;
这是生成的 HTML：
<nav>
<div class="menu-main-navigation-container"><ul id="menu-main-navigation" class="menu"><li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://localhost:8888/paulkenyon/home/">Home</a></li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://localhost:8888/paulkenyon/about/">About</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://localhost:8888/paulkenyon/skills/">Skills</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://localhost:8888/paulkenyon/portfolio/">Portfolio</a></li>
<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://localhost:8888/paulkenyon/contact/">Contact</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-50 current_page_item menu-item-52"><a href="http://localhost:8888/paulkenyon/blog/">Blog</a></li>
</ul></div>
</nav>
以上工作正常，但我想要实现的是当用户点击博客文章或存档或选择一个类别时，我希望“博客”链接保持突出显示不同颜色的背景图像。
目前没有任何显示。有没有我可以使用的功能来声明所有单个和存档页面以突出显示“博客”锚点？
【问题讨论】：
【参考方案1】：不知道这篇文章是否仍然相关，但我今天以相当动态的方式解决了一个类似的问题，没有使用 javascript 来定位特定的 ID。
在你的 body HTML 标签上，确保你使用 body_class 函数，像这样：
<body <?php body_class(); ?>>
这告诉 WordPress 提供一些有用的 CSS 类来反映您当前所在的页面。例如，如果您当前在存档页面上，则 body 标记现在将具有 archive CSS 类。如果您在类别页面上，body 标签将有一个 category 类，如果您在单个帖子页面上，body 标签将有一个 single-post 类等等（检查元素以查看其他类由 WordPress 提供）。
接下来，您要在 WordPress 管理界面的“菜单”页面上为您的目标菜单项指定一个 CSS 类（确保在“屏幕选项”窗格中勾选了“CSS 类”选项）。如果是你的博客菜单项，你可以给它类似menu-item-blog。
现在，当您在单个帖子页面上时，您可以使用 CSS 专门定位您的“博客”菜单项，如下所示：
body.single-post .menu-item-blog
/* Your highlight style goes here */
现在，我知道这不是一个完美的解决方案，因为您仍然需要在单个菜单项上设置自定义 CSS 类，但我喜欢可以通过管理界面而不是代码来实现。
我希望这会有所帮助！
【讨论】：
【参考方案2】：这里是小php - jquery 组合脚本。
wordpress 的 PHP 函数检查页面是存档、分类还是单个帖子页面。
然后在 Jquery 的帮助下，我们将类“current-menu-item” 添加到具有 id “menu-item-52” 的 li，即“Blog”li。
请在 wordpress 博客的标题中添加以下脚本。
<?php
if(is_archive() || is_category() || is_single())
?>
<script type="text/javascript">
$(document).ready(function()
$("li#menu-item-52").addClass("current-menu-item");
);
</script>
<?
?>
【讨论】：
以上是关于Wordpress 单页、类别和档案菜单当前项的主要内容，如果未能解决你的问题，请参考以下文章