1

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

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

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

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

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

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

4

2 回答 2

4

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

在您的 body HTML 标签上，确保您使用 body_class 函数，如下所示：

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

这告诉 WordPress 提供一些有用的 CSS 类来反映您当前所在的页面。例如，如果您当前在存档页面上，则 body 标记现在将具有archiveCSS 类。如果您在类别页面上，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 类，但我喜欢可以从管理界面而不是代码来实现。

我希望这有帮助！

于 2013-03-10T01:49:37.413 回答
1

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

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

然后在 Jquery 的帮助下，我们将类“ current-menu-item”添加到 li，id 为“menu-item-52”，即“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>
    <?  

}


?>
于 2012-10-03T11:46:17.307 回答