bootstrap-navwalkerはWordPressにBootstrapのナビを組み込むファイルです。ドロップダウンなんかも出来ます。
以前紹介しましたが、アップデートされている様なので、再度書きました。
スポンサードリンク
wp-bootstrap/wp-bootstrap-navwalker at v4
まず、有志が作った最新版を落とす。
Bootstrap4CDNをさくっと。
1 2 3 4 |
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> |
Gitからダウンロードしたclass-wp-bootstrap-navwalker.phpをテーマフォルダに入れる。
functionでwp-bootstrap-navwalkerを読み込む
1 2 |
// Register Custom Navigation Walker require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php'; |
header.phpなんかに以下を追加。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback', 'walker' => new WP_Bootstrap_Navwalker() ) ); ?> </div> </nav> |
自作したカスタムメニューがある場合、wp_nav_menu( array(の中に自分の作ったカスタムメニュー名
1 |
‘menu’ => ‘hoge_menu’, |
などと追記する。
余談ですが、マウスオーバーでドロップダウンを開くようにするにはcssに以下を追加します。
1 2 3 |
.dropdown:hover > .dropdown-menu{ display: block; } |
以上。後は任せた。