wp_list_categoriesをカスタマイズして、
liにタグを入れたいと思っていてぐぐったところ、
黄色いおじさんこと、
まがりんの記事wp_list_categoriesのclassにスラッグを含める方法が出てきました。
やりたい事はこれで出来るのですが、
ちょっと時間がないので、
さくっと終わらせてしまいたいと思って、
他に良い方法はないか考えたところ、
もしやPHPでカスタマイズしなくても、
jQueryで大抵のことはできちゃうんじゃないかと思った次第ですw
勿論、やりたいことによっては出来る事と出来ないことがあるので、
jQueryで出来なければ、
PHPでカスタマイズするしかありません。
PHPで処理するよりjQueryで処理した方が、
軽いという利点もありますw
そのカスタマイズ方法を解説します。
jQueryで便利な属性の指定方法
まずは、簡単に属性の指定方法です。
$('li')
…普通に属性を指定するとそのページにあるli属性に反映させる
$('ul#category li')
…ulにid=categoryが付いたliのみ反映させる
$('ul.category li')
…ulにclass=categoryが付いたliのみ反映させる
$('li:first')
…要素の一番最初のみに反映させる
$('li:last')
…要素の一番最後のみに反映させる
$('li').eq(5)
…ulの中にあるli要素の5番目にあるliのみ反映させる
$('li:even')
…ulの中にあるli要素の偶数のliのみ反映させる
$('li:odd')
…ulの中にあるli要素の奇数のliのみ反映させる
$('ul#category>li')
…ul#category内の直下のli要素のみ反映させる。ul#category li liには反映されない。
jQueryで便利なAPI
次に指定した要素に、色々するAPIです。
もっと沢山ありますが、これくらい覚えておけばOKかな〜と。
- addClass…指定した要素にclassを追加
- removeClass…指定した要素からclassを削除
- after…指定した要素の後にコンテンツを挿入
- before…指定した要素の前にコンテンツを挿入
- attr…指定した属性にidやclassを挿入
- remove…指定した要素ごと削除
以上を覚えたことを前提に、
WordPressのテンプレートタグで出力するHTMLタグを、
PHPを使わずにカスタマイズしてみます。
wp_list_categoriesは、
カテゴリー一覧を出力するWordPressのテンプレートタグです。
<ul class="catrgory"> <?php wp_list_categories('title_li='); ?> </ul>
テーマファイル内に記述をすると、例として下記のソースが出力されます。
<ul class="catrgory"> <li class="cat-item cat-item-1"><a href="#" title="カテゴリー1 に含まれる投稿をすべて表示">カテゴリー1</a> <ul class="children nav nav-tabs nav-stacked"> <li class="cat-item cat-item-10"><a href="#" title="子カテゴリー1 に含まれる投稿をすべて表示">子カテゴリー1</a> </li> <li class="cat-item cat-item-11"><a href="#" title="子カテゴリー2 に含まれる投稿をすべて表示">子カテゴリー2</a> </li> <li class="cat-item cat-item-12"><a href="#" title="子カテゴリー3 に含まれる投稿をすべて表示">子カテゴリー3</a> </li> </ul> </li> <li class="cat-item cat-item-2"><a href="#" title="カテゴリー2 に含まれる投稿をすべて表示">カテゴリー2</a> </li> <li class="cat-item cat-item-3"><a href="#" title="カテゴリー3 に含まれる投稿をすべて表示">カテゴリー3</a> </li> <li class="cat-item cat-item-4"><a href="#" title="カテゴリー4 に含まれる投稿をすべて表示">カテゴリー4</a> </li> <li class="cat-item cat-item-5"><a href="#" title="カテゴリー5 に含まれる投稿をすべて表示">カテゴリー5</a> </li> <li class="cat-item cat-item-6"><a href="#" title="カテゴリー6 に含まれる投稿をすべて表示">カテゴリー6</a> </li> </ul>
ここでは、分かりやすくTwitter BootstrapのnavsのNav listsを反映させてみたいと思います。
ulにclassを追加する
$('.category').addClass('nav nav-list');
これで、ulにnav nav-listが追加されます。
親カテゴリーのみclassを追加する
$('.category>li').addClass('nav-header');
これで、ul内の直下のliのみnav-headerクラスが追加されます。
親カテゴリーの後に区切り線を付けたい
Twitter Bootstrapの機能の1つで、
<li class="divider"></li>
を入れるとHorizontal=区切り線を付けてくれます。
この区切り線を親カテゴリーの後に追加する方法です。
折角なので、
前述した【親カテゴリーのみclassを追加する】で追加したnav-headerで指定してみます。
$('.nav-header').after('<li class="divider"></li>');
う〜ん、困った!
li.dividerにも.nav-headerが付いて、
スタイルが崩れちゃうぞ!
ということで…
li.dividerについてしまった.nav-headerを削除する
$('li.divider').removeClass('nav-header');
これで、区切り線のスタイルが崩れない!
一番最後の区切り線を削除したい
一番最後の区切り線を削除するためには、
【親カテゴリーの後に区切り線を付けたい】で付けた、
<li class="divider"></li>
をliごと削除しなければなりません。
そこで使うのが、removeです。
$(".nav-list>li.divider:last-child").remove();
liの最後の要素はli:last-childで指定します。
これで親カテゴリーにTwitter BootstrapのNav listsのスタイルが反映されました。
細かい制御は、jQueryを細々と設定すれば大抵できちゃいます。
子カテゴリーをTwitter Bootstrapに対応する
子カテゴリーはTwitter BootstrapのStacked tabsを使うことにします。
子カテゴリーはulに.childrenが付いているので、
.childrenを指定して.nav nav-tabs nav-stackedを追加します。
$('.children').addClass('nav nav-tabs nav-stacked');
特定のカテゴリーにclassを追加する方法
WordPressが出力するli要素には、
カテゴリーのクラスが付与されます。
カテゴリーのクラスを元に、クラスを追加する事も可能です。
例えば、まがりんの記事:wp_list_categoriesのclassにスラッグを含める方法にあるソースを元にカスタマイズしてみると…
<li class="cat-item cat-item-40"><a href="http://www.warna.info/archives/category/web-tech/" title="Webの小ネタ に含まれる投稿をすべて表示">Webの小ネタ</a> </li> <li class="cat-item cat-item-1"><a href="http://www.warna.info/archives/category/technique/" title="WordPressの小技 に含まれる投稿をすべて表示">WordPressの小技</a> </li>
Webの小ネタのliには、.cat-item-web-techを、
WordPressの小技のliには、cat-item-techniqueを追加したい場合は、
$('.cat-item-40').addClass('cat-item-web-tech'); $('.cat-item-1').addClass('cat-item-technique');
この2行を追加すればOKです。
PHPをカスタマイズするより、簡単でしょ!?
まとめ
PHPでカスタマイズするより、
jQueryでカスタマイズすれば簡単に出来る場合もあります。
勿論、jQueryでもできる事とできない事もあって、
その場合はPHPでカスタマイズしなければなりません。
時間とコストとお手軽さを考えて、
jQueryでも出来る場合は、
PHPにこだわらずにjQueryでもいいんじゃない?っていう例を書いてみました。