[WordPress/Twitter Bootstrap]カスタムメニュー使用時にナビゲーションバーにactiveを追加する




[WordPress/Twitter Bootstrap]カスタムメニュー使用時にナビゲーションバーにactiveを追加する

なんだかタイトルの日本語がおかしいですが気にしません下山です。

WordPressのテーマをTwitter Bootstrapで作っていましたところ、アノBootstrapのナビバーとか使うじゃないですか。
更にはWordPressのカスタムメニューとか使うじゃないですか。

ところがBootstrapのナビバーのアクティブ時のclassはactiveなのに対してWordPressはcurrent-menu-itemなんですよね。
bootstrap.cssのactiveを探してcurrent-menu-itemで同じスタイルと追加するなり書き換えるなりすれば済む話なんですが、それじゃ悔しいじゃないですか。

で、せっかくjQuery使ってるんだから!というわけです。

jQueryでactiveを追加しちゃえってわけです。

まずは確認。
基本的にカスタムメニューを表示するにはfanctions.phpに

 'ナビゲーションバー'));
?>

とした場合テンプレート(例えばheader.php)に

 'navigation')); ?>

と書きます。
※カムタムメニューの作り方(管理画面側)は書かないので調べてね。

ですが、Bootstrapのナビバーはulにクラスでnavとnav-tabs(基本的なタブ式を使用する場合)を指定しなければいけませんのでテンプレート(例えばheader.php)には

'navigation',
	'items_wrap'=>''));
?>

と書きます。

そして実際に出力されるコードが


になります。
classがいっぱい入ってますがWordPressのアクティブ時のclassはcurrent-menu-itemになります。
このclassにBootstrapのactiveを追加する方法が

  

となります。
classのnavの中のli.current-menu-itemにactiveを追加したれや!って感じです。
他に方法ありそうだけど、とりあえず動きますし・・・

タイトルとURLをコピーしました