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

Posted on by Eternal-tears
Sponsored Link

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

Sponsored Link


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

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

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

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

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

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="カテゴリー１ に含まれる投稿をすべて表示">カテゴリー１</a>
   <ul class="children nav nav-tabs nav-stacked">
      <li class="cat-item cat-item-10"><a href="#" title="子カテゴリー１ に含まれる投稿をすべて表示">子カテゴリー１</a>
</li>
      <li class="cat-item cat-item-11"><a href="#" title="子カテゴリー２ に含まれる投稿をすべて表示">子カテゴリー２</a>
</li>
      <li class="cat-item cat-item-12"><a href="#" title="子カテゴリー３ に含まれる投稿をすべて表示">子カテゴリー３</a>
</li>
   </ul>
</li>
<li class="cat-item cat-item-2"><a href="#" title="カテゴリー２ に含まれる投稿をすべて表示">カテゴリー２</a>
</li>
<li class="cat-item cat-item-3"><a href="#" title="カテゴリー３ に含まれる投稿をすべて表示">カテゴリー３</a>
</li>
<li class="cat-item cat-item-4"><a href="#" title="カテゴリー４ に含まれる投稿をすべて表示">カテゴリー４</a>
</li>
<li class="cat-item cat-item-5"><a href="#" title="カテゴリー５ に含まれる投稿をすべて表示">カテゴリー５</a>
</li>
<li class="cat-item cat-item-6"><a href="#" title="カテゴリー６ に含まれる投稿をすべて表示">カテゴリー６</a>
</li>
</ul>

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

Twitter Bootstrapのナビリスト

ulにclassを追加する

$('.category').addClass('nav nav-list');

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

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

$('.category>li').addClass('nav-header');

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

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

Twitter Bootstrapの機能の１つで、

<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');

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

まとめ

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

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

Sponsored Link