wp_nav_menuでBootstrapのnavに対応する方法

WordPress のテンプレートタグ wp_nav_menu を BootstrapのNavsメニューに対応させたいケースについてご紹介します。

wp-bootstrap-navwalkerというライブラリを使用すると、wp_nav_menuをBootstrapのNavsに対応させることができます。

使い方

使い方は２ステップ、ライブラリの読み込みとソースコードの作成です。

読み込み

class-wp-bootstrap-navwalker.php をコピーもしくはダウンロードして、テーマディレクトリに保存します。class-wp-bootstrap-navwalker.php というファイル名で保存しましょう（ファイル名はなんでもOK）。

読み込み記述がない場合は、functions.php に class-wp-bootstrap-navwalker.php の読み込みコードを記載します。

<?php
/**
* WP Bootstrap Navwalker
*/
require get_template_directory() . '/class-wp-bootstrap-navwalker.php';

これでライブラリ class-wp-bootstrap-navwalker.php が読み込まれて使用可能になります。

wp_nav_menu の記述

wp_nav_menu にキーを渡すことで Bootstrap の Navs 対応ができるようになっています。

<?php
wp_nav_menu( array(
	'menu_id' => 'メニュー名',
	'menu_class' => 'nav',
	'container_id' => 'navbarNav'
	'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
	'walker' => new WP_Bootstrap_Navwalker()
));

メニューの子要素を表示するには、depthのキーを2に指定してください。