なんだかタイトルの日本語がおかしいですが気にしません下山です。
WordPressのテーマをTwitter Bootstrapで作っていましたところ、アノBootstrapのナビバーとか使うじゃないですか。
更にはWordPressのカスタムメニューとか使うじゃないですか。
ところがBootstrapのナビバーのアクティブ時のclassはactiveなのに対してWordPressはcurrent-menu-itemなんですよね。
bootstrap.cssのactiveを探してcurrent-menu-itemで同じスタイルと追加するなり書き換えるなりすれば済む話なんですが、それじゃ悔しいじゃないですか。
で、せっかくjQuery使ってるんだから!というわけです。
jQueryでactiveを追加しちゃえってわけです。
まずは確認。
基本的にカスタムメニューを表示するにはfanctions.phpに
1 2 3 4 |
<?php //カスタムメニュー register_nav_menus(array('navigation' => 'ナビゲーションバー')); ?> |
とした場合テンプレート(例えばheader.php)に
1 |
<?php wp_nav_menu(array('theme_location' => 'navigation')); ?> |
と書きます。
※カムタムメニューの作り方(管理画面側)は書かないので調べてね。
ですが、Bootstrapのナビバーはulにクラスでnavとnav-tabs(基本的なタブ式を使用する場合)を指定しなければいけませんのでテンプレート(例えばheader.php)には
1 2 3 4 |
<?php wp_nav_menu(array( 'theme_locatinon'=>'navigation', 'items_wrap'=>'<ul class="nav nav-tabs">%3$s</ul>')); ?> |
と書きます。
そして実際に出力されるコードが
1 2 3 |
<ul class="nav nav-tabs"> <li id="menu-item-*" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16"><a href="#">ナビゲーション</a></li> </ul> |
になります。
classがいっぱい入ってますがWordPressのアクティブ時のclassはcurrent-menu-itemになります。
このclassにBootstrapのactiveを追加する方法が
1 2 3 4 5 6 7 |
<script> jQuery(function(){ if(jQuery('.nav').children().hasClass('current-menu-item')) { jQuery('li.current-menu-item').addClass('active'); } }); </script> |
となります。
classのnavの中のli.current-menu-itemにactiveを追加したれや!って感じです。
他に方法ありそうだけど、とりあえず動きますし・・・