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

Posted 2023-05-08

【中文标题】在 wordpress 中，如果它的任何子导航链接处于活动状态，如何将 .active 类添加到父导航链接？

【英文标题】：In wordpress, how to add an .active class to a parent nav link if any of it's child nav link is active?

【发布时间】：2013-07-01 18:08:30

【问题描述】：

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

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

我现在面临关于顶部导航栏菜单的问题。我无法触发所需菜单项的 .active 类。

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

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

一位用户建议在服务器端解决这个问题，所以我认为他的意思是添加一些 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 路径下的所有其他页面时，将 .active 类添加到博客菜单，ul#nav 中的第二个 <li>

更新 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 类添加到菜单父项的代码。

【问题讨论】：

根据您发布的代码，Blog 的 确实有 .active 类。 class="blog-section-menu active" 我误解了这个问题吗？

@Chris 这是我的 html 标记，用于说明。该 .active 类应根据 url 动态加载。

ruedamanuel 的答案仅适用于父 li。所以还没有修复。我希望它与嵌套的 li 一起使用。所以博客部分下的任何页面都应该激活并向父li添加一个活动类，即博客（mysite.com/blog）url。

鉴于相对 hrefs，在 JavaScript 中执行此操作将是一场噩梦。在服务器端做这个真的更有意义。

@DavidJohnSmith 正如我上面提到的，我想使用 php 或 javascript。如果有人可以加入并帮助我在服务器端修复它，那将很有帮助。

【参考方案1】：

您应该能够使用 location.pathname 在加载时操作 DOM，即

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

希望对你有帮助。

【讨论】：

不错！但我想在博客中添加活动类以及博客链接中的所有 url。像这样，mysite.com/blog、mysite.com/blog/somepage2、mysite.com/blog/somepage2

@GaryDapogi 您是指您博客域中的所有网址吗？

@tr33hous 是的，博客。 mysite.com/blog/othermorepath。不仅是博客路径，还有 mysite.com 的所有子路径。例如，mysite.com/about-us/somemorepath。从我的 wordpress 管理员添加静态页面，然后将其添加到菜单中没有激活的链接功能。

【参考方案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。

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

这是工作结果的截图。

【讨论】：

好吧，这只有在我的导航菜单只有 2 级 li 时才有效。如果我想用它来定位单个帖子，它就不起作用。例如，博客 > 类别 > 帖子。因此，在浏览单个博客文章时，我需要进一步的帮助才能在博客菜单中添加一个活动类。