WP Bootstrap Navwalker生成的li
不包括"当前菜单项"类,这导致我无法设置当前活动菜单项的样式。
我在functions.php
文件中添加了下面的代码,但它不起作用,因为li
一开始没有"当前菜单项"类。
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
类,这样我就可以正确地设置它的样式。
我想您只是漏掉了一个点,并删除了"当前菜单项"类。
function special_nav_class ($classes, $item) {
if (in_array('current-menu-item', $classes) ){
// instead of $classes[] = 'active ';
$classes[] .= ' active';
}
return $classes;
}
注意:我只会在这里添加它,以防有人和我一样在没有解决方案的情况下围着火锅转。
我忘了我所有的页面都是";用户链接";在菜单中。WP不能知道它是目前的页面,我认为,除非你建立一些URL解析。
一旦我将菜单链接重做为WP页面,它就开始自己工作了。