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

作成日:

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

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

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

[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' );[/php]

手順としては、

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

参考:

favicon
Add Menu Parent Class - zugrina http://www.zugrina.com/add-menu-parent-class/

My personal blog

物草 灸太郎
物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

Loading...

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシー利用規約が適用されます。