如何在wp_nav_menu()当前菜单项中添加“active”类（简单方法）

Question

我正在使用一个起始主题_Underscores和Bootstrap来创建自定义的WordPress主题。

我想修改wp_nav_menu，以便将当前菜单项分配为.active类，而不是默认的.current-menu-item类。我需要这样做才能使用Bootstrap的.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来实现这个目标。

---

更新：在发布这个问题之前，我找到了答案，但由于我花了很长时间才找到它，所以将其发布为QA，希望能节省别人的时间。

- mzrnsh

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的内容:

• 如何在WordPress 3.0菜单中突出显示当前页面
• 如何为活动菜单项添加.active类

- mzrnsh

---

工作得真好。你有追踪子帖子的解决方案吗？它可以在我的博客链接上运行，但不能追踪子帖子。 - OneMohrTime

@OneMohrTime，请查看下面的另一个答案。 - Unicornist

一个元素怎么样？如何给 .current-menu-item a 元素添加 'active' 类？ - Fatih Toprak

更新2022年：这仍然有效。 - mzrnsh

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;
}

- peerbolte

Answer 3

如果您想要在HTML中使用'active':

结合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 '';
}

- Vince Verhoeven

---

非常适合完全从头开始创建菜单，例如从其他CMS（如Typo3和Joomla！）导入菜单。 - chakmear

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;
}

- Ivan

Answer 5

在 header.php 中插入以下代码以显示菜单：

<?php
    wp_nav_menu(
        array(
            'theme_location' => 'menu-one',
            'walker' => new Custom_Walker_Nav_Menu_Top
        )
    );
?>

在functions.php中使用以下代码：

class Custom_Walker_Nav_Menu_top extends Walker_Nav_Menu
{
    function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        $is_current_item = '';
        if(array_search('current-menu-item', $item->classes) != 0)
        {
            $is_current_item = ' class="active"';
        }
        echo '<li'.$is_current_item.'><a href="'.$item->url.'">'.$item->title;
    }

    function end_el( &$output, $item, $depth = 0, $args = array() ) {
        echo '</a></li>';
    }
}

- mghhgm

---

你的解决方案对我来说是最好的。它为自定义WordPress菜单提供了很大的自由度 :) - Tuxy