在wordpress中，如果任何一个子导航链接处于活动状态，如何将.active类添加到父导航链接？

Question

首先，我不是开发人员，我只是自己学习。我还没有深入了解php和javascript。

我正在开发自己的WordPress网站作为测试主题和我的学习基础。我在我的自定义子主题中使用了twitter bootstrap，它有一个名为320Press WP-Bootstrap的父主题。我在这方面没有问题。只在php的一面。

我现在面临着关于我的顶级导航栏菜单的问题。我无法为我想要的菜单项触发.active类。

使用添加菜单小部件从管理面板创建菜单。菜单的父项称为BLOG，其子项是BLOG的类别。基本上，博客菜单是我的TOP NAV BAR MENU的子项。我的TOP NAV BAR MENU，包含主页，博客和信息菜单。单击BLOG菜单将触发主题的下拉菜单功能并显示可用的博客类别。我已将我的永久链接设置设置为自定义结构，如http://mysite.com//blog/%postname%/

我创建了一个静态页面并将其设置为我的主页，活动类正在处理该URL，即我的根域。我的主题的function.php是通过定位当前菜单项类在其上添加.active类。但是当我导航到我的BLOG部分（也是自定义页面）时，活动类不会添加到导航菜单“博客”中。菜单“博客”是通过管理菜单小工具添加的。

一位用户建议在服务器端解决此问题，因此我认为他的意思是添加一些php代码。

但我还没有那种技能。但是wordpress提供了codex，我可能只需复制粘贴一些代码并调整它。但为了调整它，我仍然需要一些PHP技能。我在网上搜索了一些类似的问题并找到了一些有效的解决方案，但我不知道如何实现它来解决我的具体问题。

我在这里发现了一些类似的问题：

jquery active class to menu item based on current url

Set active link based on URL

How to add class based on current url

但我对如何实施它毫无头绪。

我还从wordpress论坛找到了this，我已经用我的值替换了这些值，但它没有用。

这就是我的WordPress导航菜单的外观：

<div class="nav-collapse collapse">
    <ul class="nav">
        <li class="cateogry-1">Home</a></li>
        <li class="this-shall-become-active"><a data-toggle="dropdown" class="dropdown-toggle" title="blog">Blog<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="category-1"><a href="../blog/cat1">Blog Category 1</a></li>
                <li class="category-2"><a href="../blog/cat2">Blog Category 2</a></li>
            </ul>
        </li>
        <li class="somelink1"><a href="#">Some Link 1</a></li>
        <li class="somelink2" ><a href="#">Some Link 2</a></li>
    </ul>                           
</div>

主要目标是，当用户浏览mysite.com/blog以及/ blog path <下面的所有其他页面时，将{。class}添加到Blog菜单，<li>的第二ul#nav。 / p>

更新1

我在导航中找不到任何current_page_parent或current_page_ancestor。

更新2

从wordpress codex网站上读到，我发现了这个

add_filter( 'wp_nav_menu_objects', 'add_menu_parent_class' );
function add_menu_parent_class( $items ) {

$parents = array();
foreach ( $items as $item ) {
    if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) {
        $parents[] = $item->menu_item_parent;
    }
}

foreach ( $items as $item ) {
    if ( in_array( $item->ID, $parents ) ) {
        $item->classes[] = 'menu-parent-item'; 
    }
}

return $items;    
 }

它将类名添加到父<li>，我现在可以进一步定位它并添加.active类名。

现在，我需要代码将.active类添加到menu-parent-item。

Answer 1

您应该能够使用location.pathname来加载DOM，即

$(document).ready(function(){
   var currentLocation = location.pathname;
   if (currentLocation == "/test/1"){
      $("#page1").addClass("active");
   }
});

希望它有所帮助。

Answer 2

经过深入的反复试验和研究。我终于为我的具体问题找到了解决方案。

此解决方案适用于我的情况。我将以下代码粘贴在我的子主题的function.php

中

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
         if( in_array('current-menu-parent', $classes) ){
                         $classes[] = 'active ';
         }
         return $classes;
}

以上代码取自wordpress topic。

我已经修改了一下以满足我的需求。

以下是工作结果的屏幕截图。