wordpress 如何将“活动”类添加到 wp_nav_menu() 当前菜单项（简单方法）

How to add "active" class to wp_nav_menu() current menu item (simple way)

提问by mizurnix

I am creating custom Wordpress theme using a starter theme _Underscores. I am also using Bootstrap as a front-end framework.

我正在使用入门主题 _Underscores 创建自定义 Wordpress 主题。我也使用 Bootstrap 作为前端框架。

I would like to modify wp_nav_menu so that it assigns current menu item class="active" instead of class="current-menu-item" (which is default). Or maybe at least assigns both of these classes. I need this in order to use .active class from bootstrap.css.

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

Here is the example of what I have (all these classes are wp generated, please scroll to see what I mean):

这是我所拥有的示例（所有这些类都是 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>

And here is what I need:

这是我需要的：

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

I would prefer to do this in a correct way - don't want to change anything in ..wp-includes/nav-menu-template.php for sure, don't want to use js either.

我更愿意以正确的方式执行此操作 - 肯定不想更改 ..wp-includes/nav-menu-template.php 中的任何内容，也不想使用 js。

---

---

Well I found the answer just before posting this question (it was all ready, that's why it is still formed in a way as if I am still seeking the answer), but I had rather hard time finding it so I decided to post it as a QA. I hope someone will find this useful.

好吧，我在发布这个问题之前找到了答案（一切都准备好了，这就是为什么它仍然以某种方式形成，就好像我仍在寻找答案一样），但是我很难找到它，所以我决定将其发布为质量保证。我希望有人会发现这很有用。

回答by mizurnix

Just paste this code into functions.php file:

只需将此代码粘贴到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;
}

More on wordpress.org:

更多关于 wordpress.org 的信息：

• Highlight Current Page in WordPress 3.0 Menus
• Adding .activeclass to active menu item

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

回答by peerbolte

To also highlight the menu item when one of the child pages is active, also check for the other class (current-page-ancestor) like below:

要在其中一个子页面处于活动状态时突出显示菜单项，还要检查其他类 ( 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;
}

回答by Ivan

In addition to previous answers, if your menu items are Categories and you want to highlight them when navigating through posts, check also for current-post-ancestor:

除了以前的答案，如果您的菜单项是类别，并且您想在浏览帖子时突出显示它们，还请检查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;
}

回答by Vince Verhoeven

If you want the 'active' in the html:

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

header with html and php:

带有 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>";
            }
        }
        ?>

functions.php:

函数.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 '';
}

回答by mghhgm

In header.phpinsert this code to show menu:

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

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

In functions.phpuse this:

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