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; } }