カテゴリーの階層

┌カテゴリー１
│　　├記事１
│　　├記事２
│　　└記事３
├カテゴリー２
│　│└記事４
│　└カテゴリー２-a
│　　　　├記事ア
│　　　　└記事イ
└カテゴリー３
　　　├記事５
├記事６
└記事７

という階層があったとする。このとき、カテゴリー2-aは、カテゴリー２のサブカテゴリーです。
このときに、いろいろなメニューの表示をさせたいと思います。
例えば、カテゴリーのみ表示させて、記事のリストは該当のカテゴリーにいるときのみ展開させるということなどです。

まずは、デフォルトのテンプレートでの表示です。

左図のようになります。ちなみにテンプレートは「xoops_cube」です。
カテゴリーと記事がすべて展開されます。
カテゴリー２とカテゴリー２-aは親子関係であるのに、それがわかりにくいデザインです。

あとでスタイルシートの設定で、親子関係が明確になるように、テンプレートにちょっとだけ手を加えてみます。レベルの数値を加えます。

ちなみに、テンプレートは、「pico_block_menu.html」をいじります。

<{foreach item=category from=$block.categories}>
<dl>
<dt  class=”level<{$category.depth_in_tree}>”>
<a href=”<{$block.mod_url}>/<{$category.link}>”>
<{$category.title}>
</a>
</dt>
<dd  class=”level<{$category.depth_in_tree}>”><ul>
<{foreach item=content from=$category.contents}>
<li><a href=”<{$block.mod_url}>/<{$content.link}>” title=”<{$block.lang_lastupdated}>:<{$content.created_time_formatted}>”><{$content.subject}></a></li>
<{/foreach}>
</ul></dd>
</dl>
<{/foreach}>

直接ＨＴＭＬタグに、styleタグを入れてごちゃごちゃと指定するのは好きではないので、すべて外しました。
class=”level<{$category.depth_in_tree}>”というのを追加しましたが、重要なのは{$category.depth_in_tree}>です。levelという部分が何になってもかまわないです。
そして、それに対するスタイルシートの設定の仕方が問題になります。
これによって、HTMLソースのほうは、

<dl>
<dt class=”level2″>
<a href=”http://xxxx/modules/page/index.php?cat_id=1″>
ﾂꀀﾂꀀﾂꀀカテゴリー１
ﾂꀀﾂꀀ</a>
ﾂꀀ</dt>
ﾂꀀ<ddﾂꀀclass=”level2“><ul>
ﾂꀀﾂꀀﾂꀀ<li><a href=”http://xxxx/modules/page/index.php?content_id=1″ title=”:2010-6-4 15:05:19″>記事１</a></li>
ﾂꀀﾂꀀﾂꀀ<li><a href=”http://xxxx/modules/page/index.php?content_id=2″ title=”:2010-6-4 15:05:36″>記事２</a></li>
ﾂꀀﾂꀀﾂꀀ<li><a href=”http://xxxx/modules/page/index.php?content_id=3″ title=”:2010-6-4 15:05:48″>記事３</a></li>
ﾂꀀﾂꀀ</ul></dd>
</dl>

という風に、カテゴリーの深さが入ります。これを、<h1>などに組み合わせることで勝手に階層に準じたリストが出来ます。それは、ページのリストに使用したらよいと思います。$category.depth_in_treeは、計算式も入ります。$category.depth_in_tree-1や$category.depth_in_tree＋1などという記述が可能です。

上記のテンプレートと、下記のスタイルシートの組み合わせで左図のようになります。

dt.level2 a{color:#008000;}
dd.level2 a{color:#000000;}
dt.level3 {margin-left: 20px;}
dd.level3 {margin-left: 60px;}
dt.level3 a{color:#99cc00;}
dd.level3 a{color:#808080;}