我使用启动主题_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。
嗯我在发布这个问题之前找到了答案(它已经准备就绪,这就是为什么它仍然形成的方式,好像我仍在寻找答案),但我很难找到它所以我决定将其作为QA发布。我希望有人会觉得这很有用。
答案 0 :(得分:76)
只需将此代码粘贴到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;
}
答案 1 :(得分:13)
要在其中一个子页面处于活动状态时突出显示菜单项,还要检查其他类(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;
}
答案 2 :(得分: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;
}
答案 3 :(得分:2)
如果你想要活跃的&#39;在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>";
}
}
?>
的functions.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 '';
}
答案 4 :(得分:0)
在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>';
}
}