ホーム＞サンプル＞ 6.33 リストをツリー表示する ★

6.33 リストをツリー表示する ★

P.545

ツリー化の基本

ツリー化の(X)HTML

<ul class="tree">
  <li class="tree-list">
  <li class="tree-list">
  <li class="tree-list tree-list-end">
</ul>

スタイルシートの設定

●サンプルテンプレートをカスタマイズする

「スタイルシート」インデックステンプレート（サンプルテンプレート）

...前略...
.side ul.tree {
    margin-left: 0;
    padding-left: 5px;
    list-style: none;
}
.side li.tree-list {
    padding-left: 13px;
    background: url(tree.png) no-repeat;
    list-style: none;
}
.side li.tree-list-end {
    background: url(tree_end.png) no-repeat;
}
...後略...

P.546

●デフォルトテンプレートをカスタマイズする

「スタイルシート」インデックステンプレート（デフォルトテンプレート）

...前略...
ul.tree {
    margin-left: 0;
    padding-left: 5px;
    list-style: none;
}
li.tree-list {
    margin: 0;
    padding-left: 13px;
    background: url(tree.png) no-repeat;
    list-style: none;
}
li.tree-list-end {
    background: url(tree_end.png) no-repeat;
}
...後略...

ツリー化のサブテンプレート

●「最近のブログ記事一覧」をツリー化する

「最近のブログ記事」ウィジェットテンプレート（サンプルテンプレート）

<mt:if tag="blogEntryCount">
<dt class="sidetitle">最近のブログ記事一覧</dt>
<dd class="side">
  <mt:entries lastn="10">
    <mt:entriesHeader>
  <ul class="tree">
    </mt:entriesHeader>
    <li class="tree-list<mt:entriesFooter> tree-list-end</mt:entriesFooter>"><a href="<mt:entryPermalink valid_html="1" />" title="entry-<mt:entryID />"><mt:entryTitle encode_html="1" /></a></li>
    <mt:entriesFooter>
  <ul>
    </mt:entriesFooter>
  </mt:entries>
</dd>
</mt:if>

★「最近のブログ記事」ウィジェットテンプレート（デフォルトテンプレート）

007のul要素にclass属性treeを設定します。また、009のli要素のclass属性にentriesFooterタグを与え、最後の繰り返しの時だけブロック内を実行し、class属性値tree-list-endを出力します。既存のclass属性値も残しています。

001:<mt:If tag="BlogEntryCount">
002:  <mt:Entries lastn="10">
003:    <mt:EntriesHeader>
004:<div class="widget-recent-entries widget-archives widget">
005:  <h3 class="widget-header">最近のブログ記事</h3>
006:  <div class="widget-content">
007:    <ul class="widget-list tree">
008:    </mt:EntriesHeader>
009:      <li class="widget-list-item tree-list<mt:entriesFooter> tree-list-end</mt:entriesFooter>"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
010:    <mt:EntriesFooter>
011:    </ul>
012:  </div>
013:</div>
014:    </mt:EntriesFooter>
015:  </mt:Entries>
016:</mt:If>

P.547

●「ブログ記事一覧を日別表示する」をツリー化する（サンプルテンプレート）

「最近のブログ記事」ウィジェットテンプレート

<mt:if tag="blogEntryCount">
<dt class="sidetitle">最近のブログ記事</dt>
<dd class="side">
<mt:entries lastn="10">
  <mt:entriesHeader>
<ul>
  </mt:entriesHeader>
  <mt:dateHeader>
  <li><mt:entryDate format="%Y.%m.%d" />
    <ul class="tree">
  </mt:dateHeader>
      <li class="tree-list<mt:dateFooter> tree-list-end</mt:dateFooter>"><a href="<mt:entryPermalink valid_html="1" />"><mt:entryTitle /></a></li>
  <mt:dateFooter>
    </ul>
  </li>
  </mt:dateFooter>
  <mt:entriesFooter>
</ul>
  </mt:entriesFooter>
</mt:entries>
</dd>
</mt:if>

★「最近のブログ記事」ウィジェットテンプレート（デフォルトテンプレート）

011のul要素にclass属性treeを設定します。また、013のli要素のclass属性にdateFooterタグを与え、日付が切り替わる直前の繰り返しの時だけブロック内を実行し、class属性値tree-list-endを出力します。007のul要素、010のli要素はツリー化を行わないので、class属性を設定しません。

001:<mt:If tag="BlogEntryCount">
002:  <mt:Entries lastn="10">
003:    <mt:EntriesHeader>
004:<div class="widget-recent-entries widget-archives widget">
005:  <h3 class="widget-header">最近のブログ記事</h3>
006:  <div class="widget-content">
007:    <ul class="widget-list">
008:    </mt:EntriesHeader>
009:    <mt:dateHeader>
010:      <li><mt:entryDate format="%Y.%m.%d" />
011:        <ul class="widget-list tree">
012:    </mt:dateHeader>
013:          <li class="widget-list-item tree-list<mt:dateFooter> tree-list-end</mt:dateFooter>"><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></li>
014:    <mt:dateFooter>
015:        </ul>
016:      </li>
017:    </mt:dateFooter>
018:    <mt:EntriesFooter>
019:    </ul>
020:  </div>
021:</div>
022:    </mt:EntriesFooter>
023:  </mt:Entries>
024:</mt:If>

P.548

●「最近のコメント」をツリー化する

「最近のコメント」ウィジェットテンプレート（サンプルテンプレート）

<mt:if tag="blogCommentCount">
<dt class="sidetitle">最近のコメント一覧</dt>
<dd class="side">
<ul>
<mt:entries recently_commented_on="3">
  <li><a href="<mt:entryPermalink valid_html="1" />"><mt:entryTitle encode_html="1"></a>
    <ul class="tree">
    <mt:comments lastn="3">
      <li class="tree-list<mt:commentsFooter> tree-list-end</mt:commentsFooter>">
        <a href="<mt:entryLink archive_type="Individual" />#c<mt:commentID />" title="comment-<mt:commentID />">
          <mt:commentAuthor default="Anonymous">
        </a> <mt:commentDate format="%m/%d" />
      </li>
    </mt:comments>
    </ul>
  </li>
</mt:entries>
</ul>
</dd>
</mt:if>

★「最近のコメント」ウィジェットテンプレート（デフォルトテンプレート）

001:<mt:If tag="mt:BlogCommentCount">
002:<div class="widget-recent-comments widget">
003:  <h3 class="widget-header">最近のコメント</h3>
004:  <div class="widget-content">
005:    <ul class="widget-list">
006:  <mt:entriesRecentlyCommented comment_lastn="6">
007:      <li><a href="<mt:entryPermalink valid_html="1" />"><mt:entryTitle encode_html="1"></a>
008:        <ul class="recent-comments-list tree">
009:    <mt:recentComments sort_order="ascend">
010:          <li class="tree-list<mt:commentsFooter> tree-list-end</mt:commentsFooter>">
011:            <a href="<mt:CommentEntry><$mt:EntryPermalink$></mt:CommentEntry>#comment-<$mt:CommentID$>"><$mt:CommentAuthor$> から <mt:CommentEntry><$mt:EntryTitle$></mt:CommentEntry> に対するコメント</a>: <$mt:CommentBody remove_html="1" trim_to="10"$>
012:          </li>
013:    </mt:recentComments>
014:        </ul>
015:      </li>
016:  </mt:entriesRecentlyCommented>
017:    </ul>
018:  </div>
019:</div>
020:    </mt:CommentsFooter>
021:  </mt:Comments>
022:</mt:If>

●「カテゴリ一覧」をツリー化する

「カテゴリアーカイブ」ウィジェットテンプレート（サンプルテンプレート）

<mt:ifArchiveTypeEnabled archive_type="Category">
<mt:if tag="blogCategoryCount">
<dt class="sidetitle">カテゴリ一覧</dt>
<dd class="side">
  <mt:topLevelCategories>
    <mt:subCatIsFirst><ul<mt:hasParentCategory> class="tree"</mt:hasParentCategory>></mt:subCatIsFirst>
    <mt:if tag="categoryCount">
      <li<mt:hasParentCategory> class="tree-list<mt:subCatIsLast> tree-list-end</mt:subCatIsLast>"</mt:hasParentCategory>><a href="<mt:categoryArchiveLink />" title="<mt:categoryDescription />"><mt:categoryLabel></a> [<mt:categoryCount />]
    <mt:else>
      <li<mt:hasParentCategory> class="tree-list<mt:subCatIsLast> tree-list-end</mt:subCatIsLast>"</mt:hasParentCategory>><mt:categoryLabel>
    </mt:if>
    <mt:subCatsRecurse />
      </li>
    <mt:subCatIsLast></ul></mt:subCatIsLast>
  </mt:topLevelCategories>
</dd>
</mt:if>
</mt:ifArchiveTypeEnabled>

★「カテゴリアーカイブ」ウィジェットテンプレート（デフォルトテンプレート）

008と011にhasParentCategoryタグ、subCatIsLastタグを用いて、ul要素、li要素が最上位の階層である場合には、class属性を設定しないようにしています。さらに011は、最上位以外の階層であれば、subCatIsLastタグを用いてカテゴリの階層表示が切り替わる直前のみ、class属性値tree-list-endを出力します。また、既存のclass属性値も残しています。

001:<mt:IfArchiveTypeEnabled archive_type="Category">
002:<div class="widget-archive widget-archive-category widget">
003:  <h3 class="widget-header">カテゴリ</h3>
004:  <div class="widget-content">
006:  <mt:TopLevelCategories>
007:    <mt:SubCatIsFirst>
008:    <ul class="widget-list<mt:hasParentCategory> tree</mt:hasParentCategory>">
009:    </mt:SubCatIsFirst>
010:    <mt:IfNonZero tag="mt:CategoryCount">
011:      <li class="widget-list-item<mt:hasParentCategory> tree-list<mt:subCatIsLast> tree-list-end</mt:subCatIsLast></mt:hasParentCategory>"><a href="<$mt:CategoryArchiveLink$>"<mt:IfNonEmpty tag="mt:CategoryDescription"> title="<$mt:CategoryDescription$>"</mt:IfNonEmpty>><$mt:CategoryLabel$> (<$mt:CategoryCount$>)</a>
012:    <mt:Else>
013:      <li class="widget-list-item<mt:hasParentCategory> tree-list<mt:subCatIsLast> tree-list-end</mt:subCatIsLast></mt:hasParentCategory>"><$mt:CategoryLabel$>
014:    </mt:IfNonZero>
015:    <$mt:SubCatsRecurse$>
016:      </li>
017:    <mt:SubCatIsLast>
018:    </ul>
019:    </mt:SubCatIsLast>
020:  </mt:TopLevelCategories>
021:  </div>
022:</div>
023:</mt:IfArchiveTypeEnabled>

P.549

●年別の見出しつき「月別アーカイブ一覧」をツリー化する

「月別アーカイブ」ウィジェットテンプレート（サンプルテンプレート）

<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">月別アーカイブ</dt>
<dd class="side">
  <mt:archiveList archive_type="Monthly" sort_order="descend">
    <mt:archiveListHeader>
  <ul>
    <li><mt:archiveDate format="%Y&#24180;" />
      <ul class="tree">
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
    </mt:archiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
        <li class="tree-list tree-list-end"><mt:getVar name="month_title" /></li>
      </ul>
    </li>
    <li><mt:getVar name="current_year" />
      <ul class="tree">
    <mt:else>
      <mt:unless name="__first__">
        <li class="tree-list"><mt:getVar name="month_title" /></li>
      </mt:unless>
    </mt:if>
    <mt:getVar name="current_year" setvar="year" />
      <mt:setVarBlock name="month_title">
        <a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /></a> [<mt:archiveCount />]
      </mt:setVarBlock>
    <mt:archiveListFooter>
        <li class="tree-list tree-list-end"><mt:getVar name="month_title" /></li>
      </ul>
    </li>
  </ul>
    </mt:archiveListFooter>
  </mt:archiveList>
</dd>
</mt:ifArchiveTypeEnabled>

★「月別アーカイブ」ウィジェットテンプレート（デフォルトテンプレート）

このサブテンプレートは、元のサブテンプレートから、008～031を大きく変更しています。処理の流れはサンプルテンプレートと同様です。

001:<mt:IfArchiveTypeEnabled archive_type="Monthly">
002:  <mt:ArchiveList archive_type="Monthly">
003:    <mt:ArchiveListHeader>
004:<div class="widget-archive-monthly widget-archive widget">
005:  <h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
006:  <div class="widget-content">
007:    <ul class="widget-list">
008:      <li class="widget-list-item"><mt:archiveDate format="%Y&#24180;" />
009:        <ul class="widget-list tree">
010:      <mt:archiveDate format="%Y&#24180;" setvar="year" />
011:    </mt:ArchiveListHeader>
012:    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
013:    <mt:if name="current_year" ne="$year">
014:          <li class="widget-list-item tree-list tree-list-end"><mt:getVar name="month_title" /></li>
015:        </ul>
016:      </li>
017:      <li class="widget-list-item"><mt:getVar name="current_year" />
018:        <ul class="widget-list tree">
019:    <mt:else>
020:      <mt:unless name="__first__">
021:          <li class="widget-list-item tree-list"><mt:getVar name="month_title" /></li>
022:      </mt:unless>
023:    </mt:if>
024:    <mt:getVar name="current_year" setvar="year" />
025:    <mt:setVarBlock name="month_title">
026:      <a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /> (<mt:archiveCount />)</a>
027:    </mt:setVarBlock>
028:    <mt:ArchiveListFooter>
029:          <li class="widget-list-item tree-list tree-list-end"><mt:getVar name="month_title" /></li>
030:        </ul>
031:      </li>
032:    </ul>
033:  </div>
034:</div>
035:    </mt:ArchiveListFooter>
036:  </mt:ArchiveList>
037:</mt:IfArchiveTypeEnabled>

P.550

●年別の見出しつき「月別アーカイブ一覧」をツリー化する（月を昇順表示）

「月別アーカイブ」ウィジェットテンプレート（サンプルテンプレート）

<mt:ifArchiveTypeEnabled archive_type="Monthly">
<dt class="sidetitle">月別アーカイブ</dt>
<dd class="side">
  <mt:archiveList archive_type="Monthly" sort_order="descend">
    <mt:archiveListHeader>
  <ul>
    <li><mt:archiveDate format="%Y&#24180;" />
      <ul class="tree">
      <mt:archiveDate format="%Y&#24180;" setvar="year" />
      <mt:setVar name="flag" value="1" />
    </mt:archiveListHeader>
    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
    <mt:if name="current_year" ne="$year">
      <mt:getVar name="monthly_list" />
      </ul>
    </li>
    <li><mt:getVar name="current_year" />
      <ul class="tree">
      <mt:setVar name="monthly_list" value="" />
      <mt:setVar name="flag" value="1" />
    </mt:if>
    <mt:setVarBlock name="monthly_list" prepend="1">
    <li class="tree-list<mt:if name="flag"> tree-list-end</mt:if>"><a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /></a> [<mt:archiveCount />]</li>
    </mt:setVarBlock>
    <mt:setVar name="flag" value="0" />
    <mt:if name="__last__">
      <mt:getVar name="monthly_list" />
    <mt:else>
      <mt:getVar name="current_year" setvar="year" />
    </mt:if>
    <mt:archiveListFooter>
      </ul>
    </li>
  </ul>
    </mt:archiveListFooter>
  </mt:archiveList>
</dd>
</mt:ifArchiveTypeEnabled>

★「月別アーカイブ」ウィジェットテンプレート（デフォルトテンプレート）

このサブテンプレートは、元のサブテンプレートから、008～034を大きく変更しています。処理の流れはサンプルテンプレートと同様です。

001:<mt:IfArchiveTypeEnabled archive_type="Monthly">
002:  <mt:ArchiveList archive_type="Monthly">
003:    <mt:ArchiveListHeader>
004:<div class="widget-archive-monthly widget-archive widget">
005:  <h3 class="widget-header"><$mt:ArchiveTypeLabel$> <a href="<$mt:Link template="archive_index"$>">アーカイブ</a></h3>
006:  <div class="widget-content">
007:    <ul class="widget-list">
008:      <li class="widget-list-item"><mt:archiveDate format="%Y&#24180;" />
009:        <ul class="widget-list tree">
010:      <mt:archiveDate format="%Y&#24180;" setvar="year" />
011:      <mt:setVar name="flag" value="1" />
012:    </mt:ArchiveListHeader>
013:    <mt:archiveDate format="%Y&#24180;" setvar="current_year" />
014:    <mt:if name="current_year" ne="$year">
015:      <mt:getVar name="monthly_list" />
016:        </ul>
017:      </li>
018:      <li class="widget-list-item"><mt:getVar name="current_year" />
019:        <ul class="widget-list tree">
020:      <mt:setVar name="monthly_list" value="" />
021:      <mt:setVar name="flag" value="1" />
022:    </mt:if>
023:    <mt:setVarBlock name="monthly_list" prepend="1">
024:          <li class="widget-list-item tree-list<mt:if name="flag"> tree-list-end</mt:if>"><a href="<mt:archiveLink />"><mt:archiveTitle regex_replace="/\d+&#24180;/","" /></a> [<mt:archiveCount />]</li>
025:    </mt:setVarBlock>
026:    <mt:setVar name="flag" value="0" />
027:    <mt:if name="__last__">
028:      <mt:getVar name="monthly_list" />
029:    <mt:else>
030:      <mt:getVar name="current_year" setvar="year" />
031:    </mt:if>
032:    <mt:ArchiveListFooter>
033:        </ul>
034:      </li>
035:    </ul>
036:  </div>
037:</div>
038:    </mt:ArchiveListFooter>
039:  </mt:ArchiveList>
040:</mt:IfArchiveTypeEnabled>

6.33 リストをツリー表示する ★

ツリー化の基本

スタイルシートの設定

ツリー化のサブテンプレート

カテゴリ

月別アーカイブ

ウェブページ

検索

このアーカイブについて

6.33 リストをツリー表示する ★

ツリー化の基本

スタイルシートの設定

ツリー化のサブテンプレート

カテゴリ

月別 アーカイブ

ウェブページ

検索

このアーカイブについて

月別アーカイブ