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

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

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

使い方

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

読み込み

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

読み込み記述がないばあは、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に指定してください。