【jQuery編】wp_list_categoriesのclassにスラッグを含める方法

wp_list_categoriesをカスタマイズして、
liにタグを入れたいと思っていてぐぐったところ、
黄色いおじさんこと、
まがりんの記事wp_list_categoriesのclassにスラッグを含める方法が出てきました。

やりたい事はこれで出来るのですが、
ちょっと時間がないので、
さくっと終わらせてしまいたいと思って、
他に良い方法はないか考えたところ、

もしやPHPでカスタマイズしなくても、
jQueryで大抵のことはできちゃうんじゃないかと思った次第ですｗ

勿論、やりたいことによっては出来る事と出来ないことがあるので、
jQueryで出来なければ、
PHPでカスタマイズするしかありません。

PHPで処理するよりjQueryで処理した方が、
軽いという利点もありますｗ

そのカスタマイズ方法を解説します。

jQueryで便利な属性の指定方法

まずは、簡単に属性の指定方法です。

[php]$(‘li’)[/php] …普通に属性を指定するとそのページにあるli属性に反映させる

[php]$(‘ul#category li’)[/php] …ulにid=categoryが付いたliのみ反映させる

[php]$(‘ul.category li’)[/php] …ulにclass=categoryが付いたliのみ反映させる

[php]$(‘li:first’)[/php] …要素の一番最初のみに反映させる

[php]$(‘li:last’)[/php] …要素の一番最後のみに反映させる

[php]$(‘li’).eq(5)[/php] …ulの中にあるli要素の5番目にあるliのみ反映させる

[php]$(‘li:even’)[/php] …ulの中にあるli要素の偶数のliのみ反映させる

[php]$(‘li:odd’)[/php] …ulの中にあるli要素の奇数のliのみ反映させる

[php]$(‘ul#category>li’)[/php] …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のテンプレートタグです。

[php]

[/php]

テーマファイル内に記述をすると、例として下記のソースが出力されます。

[php]

• カテゴリー１
  • 子カテゴリー１
  • 子カテゴリー２
  • 子カテゴリー３
• カテゴリー２
• カテゴリー３
• カテゴリー４
• カテゴリー５
• カテゴリー６

[/php]

ここでは、分かりやすくTwitter BootstrapのnavsのNav listsを反映させてみたいと思います。

ulにclassを追加する

[php]$(‘.category’).addClass(‘nav nav-list’);[/php]

これで、ulにnav nav-listが追加されます。

親カテゴリーのみclassを追加する

[php]$(‘.category>li’).addClass(‘nav-header’);[/php]

これで、ul内の直下のliのみnav-headerクラスが追加されます。

親カテゴリーの後に区切り線を付けたい

Twitter Bootstrapの機能の１つで、

[php]

[/php]

を入れるとHorizontal＝区切り線を付けてくれます。
この区切り線を親カテゴリーの後に追加する方法です。
折角なので、
前述した【親カテゴリーのみclassを追加する】で追加したnav-headerで指定してみます。

[php]$(‘.nav-header’).after(‘

‘);[/php]

う〜ん、困った！
li.dividerにも.nav-headerが付いて、
スタイルが崩れちゃうぞ！

ということで…

li.dividerについてしまった.nav-headerを削除する

[php]$(‘li.divider’).removeClass(‘nav-header’);[/php]

これで、区切り線のスタイルが崩れない！

一番最後の区切り線を削除したい

一番最後の区切り線を削除するためには、
【親カテゴリーの後に区切り線を付けたい】で付けた、

[php]

[/php]

をliごと削除しなければなりません。
そこで使うのが、removeです。

[php]$(“.nav-list>li.divider:last-child”).remove();[/php]

liの最後の要素はli:last-childで指定します。

これで親カテゴリーにTwitter BootstrapのNav listsのスタイルが反映されました。
細かい制御は、jQueryを細々と設定すれば大抵できちゃいます。

子カテゴリーをTwitter Bootstrapに対応する

子カテゴリーはTwitter BootstrapのStacked tabsを使うことにします。

子カテゴリーはulに.childrenが付いているので、
.childrenを指定して.nav nav-tabs nav-stackedを追加します。

[php]$(‘.children’).addClass(‘nav nav-tabs nav-stacked’);[/php]

特定のカテゴリーにclassを追加する方法

WordPressが出力するli要素には、
カテゴリーのクラスが付与されます。

カテゴリーのクラスを元に、クラスを追加する事も可能です。

例えば、まがりんの記事：wp_list_categoriesのclassにスラッグを含める方法にあるソースを元にカスタマイズしてみると…

[php]

Webの小ネタ

WordPressの小技

[/php]

Webの小ネタのliには、.cat-item-web-techを、
WordPressの小技のliには、cat-item-techniqueを追加したい場合は、

[php]$(‘.cat-item-40’).addClass(‘cat-item-web-tech’);
$(‘.cat-item-1’).addClass(‘cat-item-technique’);[/php]

この２行を追加すればOKです。
PHPをカスタマイズするより、簡単でしょ！？

まとめ

PHPでカスタマイズするより、
jQueryでカスタマイズすれば簡単に出来る場合もあります。
勿論、jQueryでもできる事とできない事もあって、
その場合はPHPでカスタマイズしなければなりません。

時間とコストとお手軽さを考えて、
jQueryでも出来る場合は、
PHPにこだわらずにjQueryでもいいんじゃない？っていう例を書いてみました。