WordPressでBootstrapドロップダウンメニューを使って親にもアクティブクラスを追加する方法

WordPressでBootstrapドロップダウンメニューを使って親にもアクティブクラスを追加する方法



タイトルが長すぎてよくわからないので、箇条書きで要約

  • WordPressのメインメニューにBootstrapを利用⇒wp-bootstrap-navwalkerを利用
  • メニューに階層を持たせてドロップダウンを実装
  • その際、親アイテムは「カスタムリンク」で、複数の子アイテムはそれぞれ「カテゴリー」で設定
  • カテゴリーに属する投稿が表示される際に、子アイテムにアクティブクラスが追加される(active、current-menu-parent等)
  • この状態だと、アクティブな子アイテムはドロップダウンで常時非表示なので、親アイテムはアクティブにならない。
  • ここで、子アイテムがアクティブな親アイテムにもアクティブクラスを追加したい。

という要望です。
割と必要なのだけど、なかなか良い方法を探り当てる事ができませんでしたが、以下のようにfunctions.phpに記述すると実装出来ました。

function mx_haschild_nav_class( $items ) {
    // ( 1 )
    foreach ( $items as $item ) {
        // ( 2 )
        if ( $item->menu_item_parent && $item->menu_item_parent > 0 && in_array('current-menu-parent', $item->classes)  ) {            
            $parent_id = $item->menu_item_parent;
        }
    }
    // ( 3 )
    foreach($items as $item){
        if($item->ID == $parent_id){
            $item->classes[] = 'active';
        }
    }  
    return $items;   
}
add_filter( 'wp_nav_menu_objects', 'mx_haschild_nav_class' );

手順としては、

  1. wp_nav_menu_objectsで、メニューアイテムそれぞれを呼び出す。
  2. メニューアイテムの中で、親アイテムとアクティブクラスを持っているアイテムを調べて、親アイテムのIDを取得する。
  3. もう一度メニューアイテムを呼び出して、先程取得した親アイテムIDと合致したアイテムに対してアクティブクラスを追加する。

参考:

Add Menu Parent Class | Zoran Ugrina
参考
Add Menu Parent Class | Zoran Ugrina

If you want to detect which menu item has children, this snippet add a class to a menu item if it has children items.

Add Menu Parent Class | Zoran Ugrina Zoran Ugrina

今日はここまで
WordPressでBootstrapドロップダウンメニューを使って親にもアクティブクラスを追加する方法

WordPressでBootstrapドロップダウンメニューを使って親にもアクティブクラスを追加する方法


開発

タイトルが長すぎてよくわからないので、箇条書きで要約 WordPressのメインメニューにBootstrapを利用⇒wp-bootstrap-navwalkerを利用 メニューに階層を持たせてドロップダウンを実装 その際…


関連する記事



こちらはいかが?


コメントを残す