WordPressでBootstrapドロップダウンメニューを使って親にもアクティブクラスを追加する方法
作成日:
2018年7月26日
タイトルが長すぎてよくわからないので、箇条書きで要約
- WordPressのメインメニューにBootstrapを利用⇒wp-bootstrap-navwalkerを利用
- メニューに階層を持たせてドロップダウンを実装
- その際、親アイテムは「カスタムリンク」で、複数の子アイテムはそれぞれ「カテゴリー」で設定
- カテゴリーに属する投稿が表示される際に、子アイテムにアクティブクラスが追加される(active、current-menu-parent等)
- この状態だと、アクティブな子アイテムはドロップダウンで常時非表示なので、親アイテムはアクティブにならない。
- ここで、子アイテムがアクティブな親アイテムにもアクティブクラスを追加したい。
という要望です。
割と必要なのだけど、なかなか良い方法を探り当てる事ができませんでしたが、以下のようにfunctions.phpに記述すると実装出来ました。
// ( 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' );[/php]
手順としては、
- wp_nav_menu_objectsで、メニューアイテムそれぞれを呼び出す。
- メニューアイテムの中で、親アイテムとアクティブクラスを持っているアイテムを調べて、親アイテムのIDを取得する。
- もう一度メニューアイテムを呼び出して、先程取得した親アイテムIDと合致したアイテムに対してアクティブクラスを追加する。
参考:
物草 灸太郎
WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。
コメントをどうぞ