web-dev-qa-db-ja.com

「アクティブな」クラスをwp_nav_menu（）の現在のメニュー項目に追加する方法（簡単な方法）

スターターテーマ_Underscoresを使用してカスタムWordpressテーマを作成しています。フロントエンドフレームワークとしてBootstrapも使用しています。

Wp_nav_menuを変更して、class = "current-menu-item"（デフォルト）ではなく、現在のメニュー項目class = "active"を割り当てるようにします。または、少なくともこれらのクラスの両方を割り当てます。 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。誰かがこれが役立つことを願っています。

wordpressmenuitem
31
mizurnix

このコードを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;
}

Wordpress.orgの詳細： link1 、 link2

80
mizurnix

子ページの1つがアクティブなときにメニュー項目も強調表示するには、次のように他のクラス（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;
}
14
peerbolte

以前の回答に加えて、メニュー項目がカテゴリであり、投稿をナビゲートするときにそれらを強調表示する場合は、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;
}
5
Ivan

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 '';
}
3
Vince Verhoeven

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>';
    }
}
1
mghhgm