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

私はwordpressでCSSフレームワークのbootstrapを利用してメニューをドロップダウンさせる場合、wp-bootstrap-navwalker.phpを利用しています。
ただし、これを利用するとデフォルトのままでは、親メニューがリンク不可です。

グローバルメニューをドロップダウンさせる場合、カテゴリーに分類した投稿をドロップダウンさせているのですが、その場合、親メニューをカテゴリー名にしているので、親メニュー(カテゴリー名)をクリックでカテゴリー一覧にリンクしたい場合がよくあります。

やりたいこと

  • 親メニューをクリックでカテゴリー一覧ページにリンクさせたい。(ドロップダウンで投稿ページに直接移動することも可)
  • スマフォではドロップダウンさせず親メニューだけ表示する(ドロップダウンすると縦に長くなり操作性が悪いから)

変更するところ

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

[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 : ”;
}
[/php]

 

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

[php]
// 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 : ”;
}
[/php]

 

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

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