いまフルスクラッチで作る人少ないのかな。そもそもWP使う人いないのかな？
というか低賃金web制作廃業している人多いのかな。
WordPress nav Walker – Bootstrap 5。ドキュメント読むだけなんだけどね。
ここからDL
https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker
functions.phpの内容を自分のテーマに追記する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<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> |
管理画面のmenuでカスタムリンクを作る。で以下のように設定する。CSSの部分は自分の好きなブレイクポイントで。表示されてない場合は表示オプションでCSSクラスにチェックついていない。
以上。
三階層以上になるとドロップダウンしません。
動かないときはjsの読み込み順を注意して。
hoverでドロップダウンしたいときにはCSSに以下を追加して。あとスマホではクリックで開くようにしてみたよ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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; } } |
