フレームワークとして愛用している「_u(アンダースコア)」と「Bootstrap(ブートストラップ)」を合わせた「UnderStrap」をカスタマイズしている中でのTips
UnderStrap
https://ja.wordpress.org/themes/understrap/
<あるある例>
ドロップダウン(子メニュー階層がある)メニュー構成時に、親メニューのリンクが効いていない
<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
array(
'theme_location' => 'primary',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'navbarNavDropdown',
'menu_class' => 'navbar-nav ml-auto ',
'fallback_cb' => '',
'menu_id' => 'main-menu',
'depth' => 2,
'walker' => new Understrap_WP_Bootstrap_Navwalker(),
)
); ?>
△例えばこんな例
ドロップダウンメニューは作成できているのに、親カテゴリーは栗区は出来るけれどリンクは有効ではない状態です。
今回の場合は、「Understrap_WP_Bootstrap_Navwalker」とある通り、
WP_Bootstrap_Navwalker.phpを導入しているので、ここをカスタマイズしてみます。
// If item has_children add atts to <a>.
if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth !== 1 ) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['aria-haspopup'] = 'true';
$atts['aria-expanded'] = 'false';
$atts['class'] = 'dropdown-toggle nav-link';
$atts['id'] = 'menu-item-dropdown-' . $item->ID;
もともとこのように記述されています。ここを
// If item has_children add atts to <a>.
if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth !== 1 ) {
//$atts['href'] = '#';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
//$atts['data-toggle'] = 'dropdown';
$atts['aria-haspopup'] = 'true';
$atts['aria-expanded'] = 'false';
$atts['class'] = 'dropdown-toggle nav-link';
$atts['id'] = 'menu-item-dropdown-' . $item->ID;
「href」の動きを変更、また
$atts['data-toggle'] = 'dropdown';
この1行を//でコメントアウト。
注:$ att [‘href’]が有効になり、$ atts [‘data-toggle’]が無効になり、親リンクがクリック可能になります。
このままだと、スマートフォンなど画面サイズによって挙動がおかしくなるので、style.cssに下記を追加。
.dropdown:hover .dropdown-menu {
display: block;
}
PC版はこれでほぼOKになりました。
スマホで確認すると、親カテゴリーはリンクなし。。
もう少し頑張らないとダメな感じです。