WP Bootstrap Navwalker 不显示“当前菜单项”类

Question

WP Bootstrap Navwalker 生成的li 不包含“current-menu-item”类，导致我在设置当前活动菜单项时出现问题。

我在functions.php 文件中添加了以下代码，但它不起作用，因为li 没有'current-menu-item' 类开头。

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

我还尝试声明一个全局变量 $myNav，然后分配整个 wp_nav_menu 代码块，但仍然无法正常工作。

这是我的header.php 文件中的wp_nav_menu 代码的样子。

<?php
  wp_nav_menu( array(
    'theme_location'  =>    'primary-menu',
    'depth'           =>    1, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       =>    'div',
    'container_class' =>    'collapse navbar-collapse',
    'container_id'    =>    'nav-bar',
    'menu_class'      =>    'navbar-nav mr-auto',
    'fallback_cb'     =>    'WP_Bootstrap_Navwalker::fallback',
    'walker'          =>    new WP_Bootstrap_Navwalker(),
) );
?>

这是我的functions.php 文件。

// Register Custom Navigation Walker
if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    // file does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // file exists... require it.
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.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;
}

// Register WordPress nav menu
register_nav_menu('top', 'Top menu');

这是我检查输出 HTML 上的元素时的样子。

<div id="nav-bar" class="collapse navbar-collapse">
  <ul id="menu-main-menu" class="navbar-nav mr-auto">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11 nav-item">
      <a title="Home" href="#home-page" class="nav-link">Home</a>
    </li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12 nav-item">
      <a title="Our Company" href="#our-company" class="nav-link">Our Company</a>
    </li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13 nav-item">
      <a title="Our Products" href="#our-products" class="nav-link">Our Products</a>
    </li>
  </ul>
</div>

我的目标是让 navwalker 在活动的 li 中生成 current-menu-item 类，以便我可以正确设置它的样式。

Answer 1

注意：我将在此处添加它，以防有人和我一样在没有解决方案的情况下绕过火锅。

我忘记了菜单中的所有页面都是“用户链接”。 WP 不能知道它一般是我认为的当前页面 - 除非你构建一些 URL 解析。

一旦我将 菜单链接重做为 WP 页面，它就开始自行工作了。

Answer 2

我认为您只是在这里遗漏了一个点，然后删除了“当前菜单项”类。

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