2018WordpressにBootStrap4のナビゲーションを組み込むver2

bootstrap-navwalkerはWordPressにBootstrapのナビを組み込むファイルです。ドロップダウンなんかも出来ます。

以前紹介しましたが、アップデートされている様なので、再度書きました。

スポンサードリンク

wp-bootstrap/wp-bootstrap-navwalker at v4
まず、有志が作った最新版を落とす。

Bootstrap4CDNをさくっと。

<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を読み込む

// Register Custom Navigation Walker
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

1 2	// Register Custom Navigation Walker require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

header.phpなんかに以下を追加。

<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>

</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(の中に自分の作ったカスタムメニュー名

‘menu’ => ‘hoge_menu’,

1	‘menu’ => ‘hoge_menu’,

などと追記する。

余談ですが、マウスオーバーでドロップダウンを開くようにするにはcssに以下を追加します。

.dropdown:hover > .dropdown-menu{
display: block;
}

.dropdown:hover > .dropdown-menu{

display: block;

}

以上。後は任せた。