小粋空間  -  a cheap joke and a play on words site

Movable Type 5（MT5）のコメントのページ分割機能（その2：カスタマイズ）

「Movable Type 5 のコメントのページ分割機能（その1：概要）」で紹介した、Movable Type 5（MT5.0）における、コメントのページ分割のカスタマイズ方法です。

ここでは未設定のブログテーマに新たに設定する手順を説明したいと思います。

１．theme.yaml の修正

システムテンプレートに「コメント一覧」があることが前提となるため、利用中のテーマに「コメント一覧」システムテンプレートがない場合、利用中のテーマの theme.yaml を任意のエディタで開いて、青色部分を追加します。

…前略…
system:
    comment_listing:
        label: Comment Listing
    comment_preview:
        description_label: Displays preview of comment.
        label: Comment Preview
…後略…

また、利用中のテーマの templates ディレクトリ配下に以下の内容を comment_listing.mtml というファイル名で保存してください。

{
    "direction": "<mt:Var name="commentDirection">",
    "comments": "<mt:Comments sort_order="$commentDirection"><$mt:Include module="<__trans phrase="Comment Detail">" replace="\","\\" replace='"','\"' strip_linefeeds="1"$></mt:Comments>"
}

設定が完了したらテンプレートの初期化を行なってください。

２．ブログ記事テンプレート・ウェブページテンプレートの修正

head 要素部分に以下の内容を追加してください。

<$mt:Var name="comments_per_page" value="50"$>
<mt:If tag="EntryCommentCount" gt="$comments_per_page">
<script type="text/javascript">
     MT.entryID = <$mt:EntryID$>;
     MT.commentsPerPage = <$mt:Var name="comments_per_page"$>;
     MT.entryCommentCount = <$mt:EntryCommentCount$>;
     MT.commentIds = [<mt:Comments sort_order="ascend" glue=","><mt:CommentID></mt:Comments>];
</script>
</mt:If>

1行目の Var タグの value モディファイアの値「50」が1ページあたりの表示コメント数になるので、好きな値に変更してください。

３．インデックステンプレート「JavaScript」の変更

MT4 以前のJavaScript（mt.js） を利用している場合、MT5 のクラシックブログなど、デフォルトのテンプレートの内容に差し替えてください。

４．コメントテンプレートモジュールの修正

コメントテンプレートモジュールを修正します（赤色部分を青色部分の内容に差し替え）。例は当サイトの配布テンプレートです。

変更前

<mt:ifCommentsActive>
<div id="comments">
 
   <mt:if name="comment_preview_template">
   <mt:include module="コメント入力フォーム" />
   </mt:if>
 
   <mt:comments>
 
   <mt:commentsHeader><h3 class="comments-header">コメント<mt:entryCommentCount singular="[1]" plural="[#]" none="[0]" /></h3></mt:commentsHeader>
      <mt:include module="コメント詳細" />
   <mt:commentsFooter></mt:commentsFooter>
   </mt:comments>
 
   <mt:unless name="comment_preview_template">
   <mt:include module="コメント入力フォーム" />
   </mt:unless>
 
</div>
</mt:ifCommentsActive>

変更後

<mt:ifCommentsActive>
<div id="comments">
 
   <mt:if name="comment_preview_template">
   <mt:include module="コメント入力フォーム" />
   </mt:if>
 
<mt:Comments lastn="$comments_per_page">
  <mt:CommentsHeader>
<h2 class="comments-header"><$mt:EntryCommentCount singular="コメント(1)" plural="コメント(#)" none="コメント(0)"$></h2>
<mt:If tag="EntryCommentCount" gt="$comments_per_page">
<ul id="top-comment-nav">
  <li id="top-prev-comments">
    <a href="javascript://" id="top-prev-comments-link" title="古いコメント">&lt;&lt;&nbsp;古いコメント</a>
  </li>
  <li id="top-num-comments"><span id="top-current-comments"></span></li>
  <li id="top-next-comments">
    <a href="javascript://" id="top-next-comments-link" title="新しいコメント">新しいコメント&nbsp;&gt;&gt;</a>
  </li>
</ul>
</mt:If>
<div id="comments-content" class="comments-content" style="clear: left;">
  </mt:CommentsHeader>
  <$mt:Include module="コメント詳細"$>
  <mt:CommentsFooter>
</div>
  </mt:CommentsFooter>
</mt:Comments>
<mt:If tag="EntryCommentCount" gt="$comments_per_page">
<mt:Ignore>ページネーションスクリプトによって変更されています。</mt:Ignore>
<ul id="comment-nav">
  <li id="prev-comments">
    <a href="javascript://" id="prev-comments-link" title="古いコメント">&lt;&lt;&nbsp;古いコメント</a>
  </li>
  <li id="num-comments"><span id="current-comments"></span></li>
  <li id="next-comments">
    <a href="javascript://" id="next-comments-link" title="新しいコメント">新しいコメント&nbsp;&gt;&gt;</a>
  </li>
</ul>
</mt:If>
 
   <mt:unless name="comment_preview_template">
   <mt:include module="コメント入力フォーム" />
   </mt:unless>
 
</div>
</mt:ifCommentsActive>

５．スタイルシートの修正

スタイルシートに以下の内容を追加します。これはページナビゲーション部分のデザインの調整なので、内容は適宜修正してください。

#top-comment-nav, #comment-nav {
  list-style-image:none;
  list-style-position:outside;
  list-style-type:none;
  margin:0 0 1em;
  padding:0;
  text-align:center;
  width:100%;
}
#top-comment-nav li, #comment-nav li {
  display:inline;
  padding:0;
}
#top-prev-comments, #prev-comments {
  margin:0 1em 0 0;
  text-align:left;
}
#top-num-comments, #num-comments {
  text-align:center;
}
#top-next-comments, #next-comments {
  margin:0 0 0 1em;
  text-align:right;
}