get_query_varが肝?サイドバーに子カテゴリーの一覧だけを表示させたい

サイドバーにカテゴリー一覧を表示させる、という要件はビジネスサイトとしては必須ともいうべき内容だと思います。

ビジネスサイトでよく見るタイプは、ヘッダー部分に一番上のカテゴリ(ここではトップカテゴリと呼ぶ)だけを表示し、トップカテゴリをクリックすることで、そのカテゴリページに遷移します。そしてそのカテゴリーページには、そのカテゴリーがもつサブカテゴリー全てをサイドバーに表示します。これをwordpressでも実現したい。

というわけで調査。

最初、探そうにも何をキーワードにすれば良いのかさえも分からず、見つけたコードを組み合わせて次のようなコードを作ってみた。

$cat = get_the_category();
$cat = $cat[0];
$children = wp_list_categories('title_li=&child_of='.$cat->cat_ID.'&echo=0');
if ($children != "<li>カテゴリーなし</li>") {
<div id="nav_box">
<h3>ブログカテゴリ</h3>
<ul>
<?php echo $children; ?>
</ul>
</div>

一度動作させてみたところたまたま上手く行ったもののこれでは駄目でした。今となっては何で一回でも上手くいったのか不思議なぐらいですが(キャッシュ関係の仕業か、私のまとめミス?)、サイドバーで使うにはまったくもって不十分でした。記事が複数カテゴリーに関連付けされていたら、どのカテゴリーに特定させるのかが不定になるからです。

それからもっと調べたところ、下記フォーラムがとても参考になりました。というよりどんぴしゃです。なぜ最初にこれで出会わなかったのだろうか・・・。検索力のなさにがっかりしました。

参考:http://ja.forums.wordpress.org/topic/396

これを参考に、以下のコードを作成しました。

<?php
$cat_id = get_query_var('cat');
$children = wp_list_categories('title_li=&child_of='.$cat_id.'&echo=0');
if ($children != "<li>カテゴリーなし</li>") { ?>
<div>
<h3>ブログカテゴリ</h3>
</div>
<div class="frame_body">
<ul>
<?php echo $children; ?>
</ul>
</div>
<?php } ?>

以下のような階層構造の場合をだと
————————–
カテゴリーA
┣カテゴリーB
┣カテゴリーC
┃  ┣カテゴリーD
┣カテゴリーE
┗カテゴリーF
┃  ┗カテゴリーG
カテゴリーH
————————–

カテゴリーAのページのサイドバー
————————–
カテゴリーB
カテゴリーC
  ┣カテゴリーD
カテゴリーE
カテゴリーF
  ┗カテゴリーG
————————–

さらに、カテゴリーCのページのサイドバー
————————–
カテゴリーD
————————–

このコードで指定したカテゴリーのサブカテゴリー一覧が表示されるようになりました。

また、カテゴリーAのページのサイドバーで、次のように
————————–
カテゴリーB
カテゴリーC
カテゴリーE
カテゴリーF
————————–
子カテゴリーのみ、つまり孫カテゴリー以下を出したくない場合はコードを次のように変更すればOKです。

$children = wp_list_categories('title_li=&child_of='.$cat_id.'&echo=0&depth=1');

ですがまだ大きな問題が残ってます。上の例の時点でその問題が見られます。
その問題とは、カテゴリーCのページのサイドバーを見て分かるように、自分より下の階層しか表示しないということです。親のもつカテゴリーを表示しない。

このままでは3層以上の構成になった場合、最初の要件「あるトップカテゴリー以下のサブカテゴリ全てを表示したい」を満たせません。

表示上の例でいうと、カテゴリーCのページのサイドバーの時でも、カテゴリーAのページのサイドバーを表示させるという事ですが、この解決は別のエントリーでまとめたいと思います。

PS.
しょっぱなの「get_query_var」ってクエリストリングを読んでるのではないか?と。
つまり、getで渡ってきてる値(例: http://letsusewordpress.com/?cat=3 の3)を取ってきてる?

というわけで、wordpressのパーマリンク設定で数字ページに変更。動作を確認したところ無事動いてました。

よかった。

コメント / トラックバック 3 件

  1. [...] 以前の 『get_query_varが肝?サイドバーに子カテゴリーの一覧だけを表示させたい』 から引き続き、特定カテゴリー以下のサブカテゴリーリストを表示させる方法をまとめました。 以 [...]

  2. kazu_u より:

    初めまして。
    一点質問させてください。

    コチラのコードを利用して子カテゴリーを表示させる事はできたのですが、この表示されるものをアンカーリンクにしたいのですがそれは可能でしょうか?

    もし、なにかしらの方法がありましたら教えて頂けると幸いです。

    よろしくお願いします。

  3. ジェイ より:

    kaku_uさん

    コメント有難うございます。

    とはいえ、掲載のコードでアンカーリンクされるはずなのですが・・・。

    たいしたPHP使いではないので解決できるかどうかはわかりませんが、よろしかったら問題のコードを貼ってもらって考えてみてもいいでしょうか?

コメントをどうぞ