bootstrap ドロップダウンナビゲーションの親リンク有効化

公開日:2020年8月3日

bootstrap3でドロップダウンメニュを利用するには、wp-bootstrap-navwalker.phpを使っていますが、デフォルトのままでは、親メニューをリンクできないので不便な場合があります。

カテゴリーページをグローバルメニューに表示したい時がほとんどですが、そのような場合、親メニューをカテゴリー名にしています。

親メニューをクリックでカテゴリーの投稿一覧にリンクさせたい訳です。

スマフォでは親メニューをタップでリンク先に飛んでしまう場合があります(感度にもよりますが)

そのため、私はスマフォでは、親メニューだけを表示させています。(ドロップダウンメニューCSSのメディアクエリーで無効化)

 

wp-bootstrap-navwalker.phpの以下の部分を

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
	$atts['href']   		= '#';
	$atts['data-toggle']	= 'dropdown';
	$atts['class']			= 'dropdown-toggle';
	$atts['aria-haspopup']	= 'true';
} else {
	$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

 

以下のように変更して、親メニュークリック有効化

// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
    $atts['data-toggle']   = 'hover';
    $atts['class']           = 'dropdown-toggle';
} else {
    $atts['href'] = ! empty( $item->url ) ? $item->url : '';
}

 

CSSでスマフォではドロップダウンしないようにする

@media all and (max-width: 767px) {
.dropdown:hover > .dropdown-menu {
	display:none;
}
}


参考ページ:ブートストラップ:ドロップダウンナビゲーションの親リンクをアクティブリンクにするにはどうすればよいですか?
サイト名:it-swarm.dev