記事内に広告が含まれています

MT 親子カテゴリーのツリー化

Movable Type

2008.11.03

１　スクリプト（menufolder.js）をダウンロードします。
menufolder.js
２　スクリプト（menufolder.js）をメインページと同じディレクトリにアップロードします。
３　</head> の直前に次のコードを追加します。

４　テンプレートに次のコードを追加します。

<MTTopLevelCategories><MTSubCatIsFirst><MTHasParentCategory><div id=”subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list”></MTHasParentCategory><ul class=”tree”></MTSubCatIsFirst><MTIfNonZero tag=”MTCategoryCount”>
<li class=”tree<MTSubCatIsLast>_end</MTSubCatIsLast>”><MTHasSubCategories><div class=”subcategories” id=”subcategories<$MTCategoryID$>name”></MTHasSubCategories><a href=”<$MTCategoryArchiveLink$>” title=”<$MTCategoryID$>”><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories></div></MTHasSubCategories><MTElse><li class=”tree<MTSubCatIsLast>_end</MTSubCatIsLast>”><MTHasSubCategories><div class=”subcategories” id=”subcategories<$MTCategoryID$>name”></MTHasSubCategories><MTCategoryLabel><MTHasSubCategories></div></MTHasSubCategories></MTElse></MTIfNonZero><MTSubCatsRecurse max_depth=”3″></li><MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast></MTTopLevelCategories><script type=”text/javascript”><!–<MTTopLevelCategories><MTHasSubCategories>FoldNavigation(‘subcategories<$MTCategoryID$>’,’initState’,false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories><MTSubCatsRecurse></MTTopLevelCategories>//–></script>

５　スタイルシートに次のコードを追加します。

ul.tree {
margin: 0 0 0 3px;
padding: 0;
font-size: 13px;
list-style: none;
}
ul.tree ul {
margin: 0;
padding: 0;
}
ul.tree li {
margin: 0px;
padding: 0 0 0 17px;
background: url(画像２URL) no-repeat 1px 0.15em;
list-style: none;
}
ul.tree li li {
margin: 0;
padding: 0 0 0 15px;
background: url(画像URLtree_lst) no-repeat 4px 0;
list-style: none;
}
ul.tree li li.tree_end {
background: url(画像URLtree_end) no-repeat 4px 0;
list-style: none;
}

画像２URL　画像URLtree_lst　画像URLtree_end
（参考記事）
小粋空間：サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type　　サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する

コメントはこちら

Keyword