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

php WordPress单页/发布模板的类别

PHP Wordpress的基于日期的类别档案

Wordpress:仅在类别/档案的第一页显示

如何获取在 Wordpress 中按类别过滤的自定义帖子类型的永久链接?

在 Wordpress 中从类别创建帖子的下拉菜单

php 从WordPress管理区域的侧边菜单中隐藏本机类别和标签