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

Question

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

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

我现在在我的顶级导航栏菜单上遇到问题。 我无法为所需的菜单项触发.active类。

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

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

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

但是我还没有那个技能。 但是wordpress提供了Codex，在这里我可能只需要复制粘贴一些代码并进行调整。 但是为了进行调整，我仍然需要一些php技巧。 我已经在网上搜索了一些类似的问题，并找到了一些可行的解决方案，但是我不知道如何实施它来解决我的特定问题。

我在这里找到了一些类似的问题：

jQuery活动类到基于当前URL的菜单项

根据URL设置活动链接

如何基于当前URL添加类

但我对如何实施一无所知。

我也在wordpress论坛上找到了这个 ，我用我的值替换了值，但是它不起作用。

这是我的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路径下的所有其他页面时，向ul#nav的Blog菜单（第二个<li>添加.active类。

更新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主题 。

我已经对其进行了一些修改以满足我的需求。

这是工作结果的屏幕截图。