Как добавить" активный " класс в wp nav menu () текущий пункт меню (простой способ)
Я создаю пользовательскую тему Wordpress, используя стартовую тему _Underscores. Я также использую Bootstrap в качестве front-end framework.
Я хотел бы изменить wp_nav_menu так, чтобы он назначал текущий пункт меню class="active" вместо class="current-menu-item" (который по умолчанию). Или, может быть, по крайней мере, назначает оба этих класса. Мне нужно это, чтобы использовать .активный класс из bootstrap.стиль CSS.
вот пример того, что у меня есть (все эти классы генерируются 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-шаблон.php наверняка не хочет использовать js.
Ну, я нашел ответ непосредственно перед публикацией этого вопроса (он был готов, поэтому он все еще сформирован таким образом, как будто я все еще ищу ответ), но мне было довольно трудно найти его, поэтому я решил чтобы опубликовать его как QA. Надеюсь, кто-нибудь найдет это полезным.
5 ответов
просто вставьте этот код в функции.файл 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;
}
чтобы также выделить пункт меню, когда одна из дочерних страниц активна, также проверьте другой класс (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;
}
в дополнение к предыдущим ответам, Если ваши пункты меню являются категориями, и вы хотите выделить их при навигации по сообщениям, проверьте также 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;
}
Если вы хотите "активный" в 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>";
}
}
?>
функции.на 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 '';
}
на 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>';
}
}