6.14 返信コメントをスレッド形式で表示する

P.461

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

「コメント」テンプレートモジュール（サンプルテンプレート）

<mt:ifCommentsActive>
 
<mt:setVarTemplate name="comment_data">
<div id="comment-<mt:commentID />">
<mt:ifCommentParent>
  <p class="comment-header"><a href="<mt:commentParent>#comment-<mt:commentID /></mt:commentParent>"><mt:commentParent>No.<mt:commentID />の<mt:commentAuthor /></mt:CommentParent></a>さんのコメントへの返信</p>
</mt:ifCommentParent>
  <div class="comment-content"><mt:commentBody /></div>
  <p class="comment-footer">
  No.<mt:commentID /> Posted by <mt:commentAuthorLink default_name="Anonymous" show_email="0"$> <mt:if tag="commentAuthorIdentity"><mt:commentAuthorIdentity /></mt:if> at <mt:commentDate /><mt:ifCommentsAccepted> | <mt:commentReplyLink /></mt:ifCommentsAccepted>
  </p>
</div>
</mt:setVarTemplate>
 
<div id="comments">
<mt:if name="body_class" like="mt-comment-preview|mt-comment-error">
  <mt:include module="コメント入力フォーム" />
</mt:if>
<h3 class="content-header">これまでのコメント<mt:entryCommentCount singular="[1]" plural="[#]" none="[0]" /></h3>
<div class="content">
<mt:comments>
  <mt:commentsHeader>
  <ul class="content comment-replies">
  </mt:commentsHeader>
  <mt:ifCommentParent>
  <mt:else>
    <li class="comment-replies-content">
    <mt:getVar name="comment_data" />
    <mt:commentReplies>
      <mt:commentsHeader>
    <ul class="comment-replies">
      </mt:commentsHeader>
      <li class="comment-replies-content">
      <mt:getVar name="comment_data" />
      <mt:commentRepliesRecurse />
      </li>
      <mt:commentsFooter>
    </ul>
      </mt:commentsFooter>
    </mt:commentReplies>
  </li>
  </mt:ifCommentParent>
  <mt:commentsFooter></ul></mt:commentsFooter>
</mt:comments>
</div>
<mt:unless name="body_class" like="mt-comment-preview|mt-comment-error">
  <mt:include module="コメント入力フォーム" />
</mt:unless>
</div>
</mt:ifCommentsActive>

P.462

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

...前略...
#comments .content {
    font-size: 93%;
}
#comments .content ul.comment-replies {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
#comments ul li.comment-replies-content li.comment-replies-content {
    margin-left: 10px;
    padding-left: 10px;
}
#comments ul li.comment-replies-content {
    list-style: none;
}
...後略...

P.463

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

「コメント」テンプレートモジュール（デフォルトテンプレート）

<mt:ignore>
<!-- Display comments for the entry/page or commenting form if entry/page is accepting comments -->
</mt:ignore>
<MTIfCommentsActive>
 
<mt:setVarTemplate name="comment_data">
<div id="comment-<$MTCommentID$>" class="comment<mt:IfCommentParent> comment-reply</mt:IfCommentParent>">
  <div class="inner">
    <div class="comment-header">
      <div class="asset-meta">
        <span class="byline">
          <mt:IfCommentParent>
            <$MTCommentAuthorIdentity$> <span class="vcard author"><$MTCommentAuthorLink$></span>から<a href="<mt:CommentParent>#comment-<$MTCommentID$></mt:CommentParent>"><mt:CommentParent><$MTCommentAuthor$></mt:CommentParent></a>への返信
          <mt:else>
            <$MTCommentAuthorIdentity$>
            <span class="vcard author"><$MTCommentAuthorLink$></span>
          </mt:IfCommentParent>
          | <a href="#comment-<$MTCommentID$>"><abbr class="published" title="<$MTCommentDate format_name="iso8601"$>"><$MTCommentDate relative="js"$></abbr></a>
          <MTIfCommentsAccepted> | <$MTCommentReplyLink$></MTIfCommentsAccepted>
        </span>
      </div>
    </div>
    <div class="comment-content">
      <$MTCommentBody$>
    </div>
  </div>
</div>
</mt:setVarTemplate>
 
<div id="comments" class="comments">
  <mt:ignore>
  <!-- Display comments -->
  </mt:ignore>
  <MTComments>
    <MTCommentsHeader>
  <h2 class="comments-header">コメント(<$MTEntryCommentCount$>)</h2>
  <div class="comments-content">
    <ul class="comment-replies">
    </MTCommentsHeader>
    <MTIfCommentParent>
    <MTElse>
      <li class="comment-replies-content">
        <mt:getVar name="comment_data" />
      <MTCommentReplies>
        <MTCommentsHeader>
        <ul class="comment-replies">
        </MTCommentsHeader>
          <li class="comment-replies-content">
          <mt:getVar name="comment_data" />
        <$MTCommentRepliesRecurse$>
          </li>
        <MTCommentsFooter>
        </ul>
        </MTCommentsFooter>
      </MTCommentReplies>
      </li>
    </MTIfCommentParent>
    <MTCommentsFooter>
    </ul>
  </div>
    </MTCommentsFooter>
  </MTComments>
 
  <mt:ignore>
  <!-- Display commenting form if entry/page is accepting comments -->
  </mt:ignore>
...中略...
</div>
</MTIfCommentsActive>

P.464

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

...前略...
.comments-content ul.comment-replies {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.comments-content li.comment-replies-content li.comment-replies-content {
    margin-left: 10px;
    padding-left: 10px;
}