Home > Movable Type > カテゴリーリストの折りたたみとツリー化

カテゴリーリストの折りたたみとツリー化

前回(caramel*vanilla : カテゴリーリストのカスタマイズ)エントリーしてから間もないのですがMT3.0にバージョンアップしたりテンプレートを変えたりでカテゴリーリストの表示方法を変えたので改めて覚書を…

ツリー化してもたくさんあるカテゴリーのせいでごちゃごちゃ感は歪めないしリストもズラズラ長くなってしまってました。
Javascriptでの折りたたみも活用しつつ何とか思い通りのカテゴリーリストの表示をしようと思います。

前回のエントリーとかぶりますが手順です。

1)カテゴリー表示を好きな順番に変える
表示したい順にカテゴリー名の頭に数字を割り振る

2)カテゴリーをツリー表示にする
カテゴリーの編集→カテゴリーの説明に表示したいカテゴリー名を入れる(ツリー化のため頭に「 ∟ 」)
テンプレートのタグを<$MTCategoryLabel$>→<$MTCategoryDescription$>に変更

ここまでは前回と同様です。
今回はSubCategoriesプラグインは使いませんでした。
なくてもできるじゃんって思ったのとMT3.1からはサブカテゴリー管理もできるようなので…

3)ツリーメニューのみJavascriptで折りたたむ
ARTIFACT ―人工事実― | Movable Type作業メモ
↑こちらのサイドバー折りたたみ技を使わせていただけばカテゴリーリスト全部を折りたたむのは簡単です。
ただ、常に表示するカテゴリーと折りたたんで隠しておくカテゴリーがある場合はちょっとややこしいです。

特定のカテゴリを表示しないプラグイン(CROSSBREED クロスブリード!)
↑こちらのエントリーを読んで閃いた方法です。
このプラグインは特定のカテゴリだけを表示したり隠したりできるのです。
まずFilterCategoriesプラグインをGETしてpluginディレクトリにUP
テンプレートのタグを書き換えます。

*常に表示するカテゴリーの場合
[例]about・diary・link
各カテゴリーの間は「|」で区切ります。

<MTCategories show_empty="1">
<MTFilterCategories include="about|diary|link">
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryDescription$> (<$MTArchiveCount$>) </a><br />
</MTFilterCategories>
</MTCategories>

*折りたたんで隠しておくカテゴリーの場合
[例]親 - review サブ - music・movie・book
赤字はJavascriptの部分です。

<a href="javascript:void(0);" onClick="showHide('c1');"> review </a><br>
<div class="sidehide" id="c1">

<MTCategories show_empty="1">
<MTFilterCategories include="music|movie|book">
<a href="<$MTCategoryArchiveLink$>">
<$MTCategoryDescription$> (<$MTArchiveCount$>) </a><br />
</MTFilterCategories>
</MTCategories>

隠したいツリーの数だけ繰り返してください。
かなりスッキリ表示できるようになって大満足です。

Home > Movable Type > カテゴリーリストの折りたたみとツリー化

Search
Feeds

Page Top