WordPressのカスタムメニューwp_nav_menuをBootstrap4のメニュー対応させたい場合、wp-bootstrap-navwalkerというライブラリを使用すると対応することができました。
目次
カスタムメニューwp_nav_menuの導入方法
1. wp-bootstrap-navwalkerライブラリのダウンロード
GitHubからファイルをダウンロードし、class-wp-bootstrap-navwalker.phpファイルをテーマフォルダに入れます。
2. functions.phpでファイルの読み込み
functions.phpの最後に以下のコードを追加します。
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';3. wp_nav_menuの設定
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu' => 'gnavi',
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>| menu | メニュー名 |
| container | div、navを選択 |
| container_id | containerに適用されるid |
| container_class | containerに適用されるclass |
| menu_id | メニューを構成する ul 要素に適用するid |
| menu_class | メニューを構成する ul 要素に適用するclass |
| depth | 1=ドロップダウンなし、2=ドロップダウンあり |
| fallback_cb | メニューが存在しない場合フォールバック関数呼び出し |
| walker | 使用するカスタムウォーカーオブジェクト |
4. header.phpにwp_nav_menuの追加
<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="<?php esc_attr_e( 'Toggle navigation', 'your-theme-slug' ); ?>">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu' => 'gnavi',
'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>