Question

我无法理解如何执行以下操作。

在我的网站上，我有一个菜单：

主页|关于|技能|投资组合|接触

要调用上面的菜单，我在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>

以上工作正常，但我想要实现的是当用户点击博客文章或存档或选择一个类别时，我希望“博客”链接保持用不同的彩色背景图像突出显示。

目前没有任何表现。是否有一个我可以使用的功能表明所有单个和存档页面突出显示“博客”锚点？

Answer 1

不知道这篇文章是否还是相关的，但我今天以相当动态的方式解决了类似的问题，而没有使用JavaScript来定位特定的ID。

在您的正文HTML标记上，请确保使用body_class函数，如下所示：

<body <?php body_class(); ?>>

这告诉WordPress提供一些有用的CSS类，它们反映了您当前所在的页面。例如，如果您当前在归档页面上，则body标签现在将具有archive CSS类。如果您在类别页面上，正文标记将具有category类，如果您在单个帖子页面上，正文标记将具有single-post类等等（检查元素到看看WordPress提供了哪些其他类。

接下来，您希望在WordPress管理界面的“菜单”页面上为目标菜单项指定一个CSS类（确保在“屏幕选项”窗格中勾选“CSS类”选项）。对于您的博客菜单项，您可能会给它类似menu-item-blog。

现在，当您在单个帖子页面上时，您可以使用CSS专门定位“博客”菜单项：

body.single-post .menu-item-blog {
    /* Your highlight style goes here */
}

现在，我知道这不是一个完美的解决方案，因为你仍然需要在单个菜单项上设置自定义CSS类，但我喜欢它可以从管理界面而不是代码实现。

我希望这有帮助！

Answer 2

这是一个小的 php - jquery 组合脚本。

wordpress的PHP函数检查页面是归档，类别还是单个帖子页面。

然后在Jquery的帮助下，我们使用 id“menu-item-52”（“Blog”li）向li添加课程“ current-menu-item”。

请在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>
    <?  

}


?>

Answer 3

将此css添加为活动菜单样式

.current_page_parent a{
}

Wordpress单页，类别和档案菜单当前项目

3 个答案: