WordPressのカスタムナビでBootstrapを使ってドロップダウンメニューの親要素をクリックさせる方法


泣きながらBootstrapをWordPressに組み込んでました。Bootstrapのナビゲーションを使って、かつWordPressのカスタムナビを使いたい。
けっこう手間取ったので、二度とハマらないようにメモ。

まずBootstrapは通常だとドロップダウンメニューの親要素はリンクが聞かなくなる。これ大事。
なので、あまり知られていないBootstrapスタイルテクニック、小技16個まとめ – PhotoshopVIPにあるように、

$('.dropdown-toggle').click(function() {
    var location = $(this).attr('href');
    window.location.href = location;
    return false;
});

を追記すると、リンクが効くようになる。
wp-bootstrap-navwalkerを導入。
テーマディレクトリにアップ。
WordPressでBootstrapのドロップダウンを表示するwp-bootstrap-navwalker
では、

<?php require get_template_directory_url().'/wp-bootstrap-navwalker.php';

となってるけど、GitHubみたら、

require_once('wp_bootstrap_navwalker.php');

になってるので、こちらが正しいす。てか、
get_template_directory_url()→get_template_directory_uri()が正しい(´・ω・`)。
header.phpにナビを入れたいので、ざっくりこんな感じ。

<nav class="navbar navbar-inverse navbar-default" role="navigation">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="/">TOP</a>
 </div>
 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 <?php
 wp_nav_menu(
 array(
 'theme_location' => 'navigation',
 'menu_class'=> 'nav navbar-nav',
 'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
 'depth' => 2,
 'walker' => new wp_bootstrap_navwalker()
 )
 );
 ?>
 </div>
 </nav>

んで、これだけだとホバーしたときにクリックできないので、
wp-bootstrap-navwalker.phpの
85行目の

$atts['href']   		= '#';

となってるのが原因なので、

$atts['href']   		= $item->url;

とすると、親要素のリンクが生きてる状態でクリックできる。
たぶんこれで良いはず。