WordPress nav Walker - Bootstrap 5の設定

いまフルスクラッチで作る人少ないのかな。そもそもWP使う人いないのかな？

というか低賃金web制作廃業している人多いのかな。

WordPress nav Walker – Bootstrap 5。ドキュメント読むだけなんだけどね。

ここからDL

https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker

functions.phpの内容を自分のテーマに追記する

<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-menu">
<?php
wp_nav_menu(array(
'theme_location' => 'main-menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
));
?>
</div>
</div>
</nav>

<a class="navbar-brand" href="#">Navbar</a>

</button>

<?php

wp_nav_menu(array(

'theme_location' => 'main-menu',

'container' => false,

'menu_class' => '',

'fallback_cb' => '__return_false',

'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',

'depth' => 2,

'walker' => new bootstrap_5_wp_nav_menu_walker()

));

</div>

</nav>

管理画面のmenuでカスタムリンクを作る。で以下のように設定する。CSSの部分は自分の好きなブレイクポイントで。表示されてない場合は表示オプションでCSSクラスにチェックついていない。

以上。

三階層以上になるとドロップダウンしません。

動かないときはjsの読み込み順を注意して。

hoverでドロップダウンしたいときにはCSSに以下を追加して。あとスマホではクリックで開くようにしてみたよ。

.dropdown:hover > .dropdown-menu {
display: block;
}
//スマホ対応
@media screen and (max-width: 767px) {
.dropdown:hover > .dropdown-menu.show {
display: block;
}
.dropdown:hover > .dropdown-menu {
display: none;
}
}

.dropdown:hover > .dropdown-menu {

display: block;

}

//スマホ対応

@media screen and (max-width: 767px) {

.dropdown:hover > .dropdown-menu.show {

display: block;

}

.dropdown:hover > .dropdown-menu {

display: none;

}