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 单页、类别和档案菜单当前项的主要内容,如果未能解决你的问题,请参考以下文章