最近やっとTwitterBootstrapを使ってみたんですが、便利ですねあれ。
CSSとかJavascriptとかの知識が少しあれば、使えちゃうので新しくテンプレート作るときとか短時間でもいいものが作れる感じ。
TwitterBootstrapの派生でGoogleBootstrapとかそれ以外にもいろいろあるようなので調べてみると面白いかもしれません。
ダウンロードは以下で出来ます。
TwitterBootstrap
GoogleBootstrap
さて、便利なことは便利なんですがWordPressと組み合わせようとすると少々面倒なことが。
グローバルメニューとかサイドバーとかでカスタムメニューを使いたい場合、TwitterBootstrapに合わせて設定すると
<div class="navbar">;
<?php
$args = array(
'container_class' => 'navbar-inner',
'menu_class' => 'nav',
'theme_locaton' => 'GlobalNavigation',
);
wp_nav_menu($args);
?>
</div>;こんな感じになるわけです。
で、これだけだとカレントページ（現在のページ）を表示した際にメニューの色が変わるというのが動かない。
TwitterBootstrapのCSSだとカレントページは「class=”active”」で定義されているわけですが、WordPressのカスタムメニューだと「class=”current-menu-item”」で定義されているわけです。
グローバルメニューの部分だけCSSを再定義してもいいのですが、めんどくさい(´･д･｀)
というわけで、なにかいい方法はないものかと考え、Google大先生に聞き、また考え、出た結果がjQuery使ってクラスつけちゃおうという考えでした。
カスタムメニューを上のプログラムで表示させると
<div class="navbar">;
<div class="navbar-inner">
<ul id="menu-globalnavi" class="nav">
<li id="menu-item-**" class="menu-item current-menu-item">
<a href="#">...</a>
</li>
<li id=";menu-item-**" class="menu-item">
<a href="#">...</a>
</li>
<li id="menu-item-**" class="menu-item">
<a href="#">...</a>
</li>
</ul>
</div>
</div>
こんな感じの表記になるので、「class=”nav”」の下の「class=”current-menu-item”」に「active」というクラスを追加すればいいんじゃまいか。
というわけでこんな関数を作ってみました。
jQuery(function(){
if(jQuery('.nav').children().hasClass('current-menu-item')) {
jQuery('li.current-menu-item').addClass('active');
}
});
もっといい方法があるような・・・。そんな気がかなりしますが、とりあえず動くのでこれでいいかなと。
もっといい方法があるよという方はコメント待ってます。
jQueryも勉強せねばなぁ(´・ω・｀)
