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

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

Posted at December 24,2009 1:55 AM
Tag:[Comment, Customize, MovableType, Paginate]

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

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

1.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>"
}

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

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

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ページあたりの表示コメント数になるので、好きな値に変更してください。

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

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

4.コメントテンプレートモジュールの修正

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

変更前

<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>

5.スタイルシートの修正

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

#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;
}
関連記事
トラックバックURL


コメント

小粋空間様

いつもこのサイトを参考にさせていただいています。
大変有用な情報ばかりでありがたいです。

早速ですが、Movable Type 5(MT5)のコメントのページ分割機能についてですが、古い順がデフォルトになっていると思います。新しい順で分割するにはどのようにすれば、よろしいでしょう?

お忙しい中、申し訳ありませんが、ご教授お願いいたします。

[1] Posted by 伊藤 : November 13, 2011 10:06 AM

先の方がご質問されていますが、私も同様の方法を知りたくコメントさせていただきました。
新しい順で分割するにはどのようにすれば、よろしいでしょう?

[2] Posted by takabooo logo : May 4, 2014 3:29 AM

先の方がご質問されていますが、私も同様にコメント分割を新しい順にする方法を知りたくコメントさせていただきました。
ご教授お願いいたします。

[3] Posted by takabooo logo : May 4, 2014 3:31 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)