如何将"active"类添加到wp_nav_menu()当前菜单项(简单方法)

Question

我正在使用启动主题_Underscores创建自定义Wordpress主题.我也使用Bootstrap作为前端框架.

我想修改wp_nav_menu,以便它分配当前菜单项class ="active"而不是class ="current-menu-item"(这是默认值).或者至少可以分配这两个类.我需要这个才能使用bootstrap.css中的.active类.

以下是我所拥有的示例(所有这些类都是wp生成的,请滚动查看我的意思):

<ul id="menu-main-menu" class="nav navbar-nav">
   <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-14"><a href="">item1</a></li>
   <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">item2</a></li>
</ul>

这就是我需要的:

<ul id="menu-main-menu" class="nav navbar-nav">
   <li id="menu-item-14" class="active menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-13 current_page_item menu-item-14"><a href="">item1</a></li>
   <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12"><a href="">item2</a></li>
</ul>

我更愿意以正确的方式做到这一点 - 不要想改变..wp-includes/nav-menu-template.php中的任何内容,当然,也不想使用js.

---

好吧,我在发布这个问题之前找到了答案(它已经准备就绪,这就是为什么它仍然形成的方式,好像我仍在寻找答案),但我很难找到它所以我决定将其发布为质量保证.我希望有人会觉得这很有用.

Answer 1

只需将此代码粘贴到functions.php文件中:

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

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

更多关于wordpress.org:链接1,链接2

Answer 2

要在其中一个子页面处于活动状态时突出显示该菜单项,还要检查其他类(current-page-ancestor),如下所示:

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

function special_nav_class ($classes, $item) {
    if (in_array('current-page-ancestor', $classes) || in_array('current-menu-item', $classes) ){
        $classes[] = 'active ';
    }
    return $classes;
}

Answer 3

如果您想要 html 中的“活动”：

带有 html 和 php 的标题：

        <?php
        $menu_items = wp_get_nav_menu_items( 'main_nav' ); // id or name of menu
        foreach ( (array) $menu_items as $key => $menu_item ) {
            if ( ! $menu_item->menu_item_parent ) {
                echo "<li class=" . vince_check_active_menu($menu_item) . "><a href='$menu_item->url'>";
                echo $menu_item->title;
                echo "</a></li>";
            }
        }
        ?>

函数.php：

function vince_check_active_menu( $menu_item ) {
    $actual_link = ( isset( $_SERVER['HTTPS'] ) ? "https" : "http" ) . "://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
    if ( $actual_link == $menu_item->url ) {
        return 'active';
    }
    return '';
}

Answer 4

除了以前的答案，如果您的菜单项是“类别”，并且您想在浏览帖子时突出显示它们，请同时检查以下内容current-post-ancestor：

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

function special_nav_class ($classes, $item) {
    if (in_array('current-post-ancestor', $classes) || in_array('current-page-ancestor', $classes) || in_array('current-menu-item', $classes) ){
        $classes[] = 'active ';
    }
    return $classes;
}