wp_nav_menu() 현재 메뉴 항목에 "액티브" 클래스를 추가하는 방법(간단한 방법)

wp_nav_menu() 현재 메뉴 항목에 "액티브" 클래스를 추가하는 방법(간단한 방법)

스타터 테마 _Underscores 및 Bootstrap을 사용하여 커스텀 Wordpress 테마를 만들고 있습니다.

수정하고 싶습니다wp_nav_menu그러면 현재 메뉴 항목이 할당됩니다..active기본값이 아닌 클래스.current-menu-item사용하기 위해서는 이것이 필요합니다..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.phpJS를 사용하지 않습니다.

---

업데이트: 이 질문을 올리기 직전에 답을 찾았는데 찾기가 어려웠기 때문에 QA로 게시하여 시간을 절약해 주셨으면 합니다.

이 코드를 함수에 붙여넣기만 하면 됩니다.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;
}

자세한 것은, wordpress.org 를 참조해 주세요.

• WordPress 3.0 메뉴에서 현재 페이지 강조 표시
• 추가 중.active클래스에서 활성 메뉴 항목

또한 하위 페이지 중 하나가 활성화되어 있을 때 메뉴 항목을 강조 표시하려면 다른 클래스도 확인합니다(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;
}

html에서 'active'를 사용하는 경우:

헤더(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 '';
}

이전 답변과 더불어 메뉴 항목이 카테고리이고 게시물을 탐색할 때 강조 표시하고 싶은 경우 다음 항목도 확인하십시오.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;
}

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

언급URL : https://stackoverflow.com/questions/26789438/how-to-add-active-class-to-wp-nav-menu-current-menu-item-simple-way