【Movable Type】記事にコメント機能を実装する
概要
MT(PowerCMS含む、以下同)で記事およびWebページにコメント機能を実装する方法について解説しています。
コメント機能は、ウェブサイト(あるいはブログ)の「設定」>「コミュニケーション」のコメント設定でコメントが許可されており、かつ各記事(あるいはウェブページ)の投稿画面でコメントが許可されているものに対して表示・投稿が可能です。
構造
コメント機能のMTMLは、大まかに以下の構造です。
<!-- <head></head>内に挿入 -->
<script src="mt.js"></script>
<!-- コメント部分MTML -->
<mt:IfCommentsActive>
<h2>コメント</h2>
<mt:Comments>
<!-- 投稿されたコメント一覧 -->
</mt:Comments>
<mt:IfCommentsAccepted>
<!-- コメント投稿フォーム -->
</mt:IfCommentsAccepted>
</mt:IfCommentsActive>
MTComments
とIfCommentsAccepted
のブロックは順番が前後しても問題ありません。
管理画面のコミュニケーション設定でコメントを許可、あるいはすでにコメントを受け付けていた場合に、MTIfCommentsActive
ブロックの中身が実行されます。
管理画面の設定および各記事やウェブページでコメントを許可している場合は、MTIfCommentsAccepted
ブロックの中身が実行されます。
なお、コメント実装時(とくに返信機能を利用する場合)はmt.js
が必要です。
これらはMTインストール時のテーマ内に含まれており、このまま利用します。ただし空テーマである「Mont-Blanc」には含まれないため、「Mont-Blanc」を利用する場合は、他のテーマからファイルをコピーして利用します。ファイル名は任意のものに変更可能です。また、mt.js
テンプレートのステータスは「手動」で問題ありません。
コメント投稿フォーム
コメントの投稿フォーム部分については説明を割愛します。
基本的にはMTのインストール済みテーマのフォーム部分をそのまま利用する形になります。フォームを装飾しているHTML部分は、必要に応じて適宜修正してください。
コメント一覧
コメント一覧はMTComments
を利用して出力(処理)します。
<!-- MTML -->
<mt:Comments>
<mt:CommentsHeader>
<div class="comment_area">
<h2>コメント</h2>
<dl>
</mt:CommentsHeader>
<dt class="comment-<$mt:CommentID$>">
<$mt:CommentAuthor$>
<time datetime="<$mt:CommentDate format='%Y-%m-%dT%H:%M:%SZ'$>"><$mt:CommentDate format="%Y-%m-%d %H:%M:%S"$></time>
</dt>
<dd>
<$mt:CommentBody$>
<p class="reply"><$mt:CommentReplyToLink$></p>
</dd>
<mt:CommentsFooter>
</dl>
</div>
</mt:CommentsFooter>
</mt:Comments>
<!-- 出力結果 -->
<div class="comment_area">
<h2>コメント</h2>
<dl>
<dt class="comment-1">
投稿者
<time datetime="2025-03-03T15:52:36Z">2025-03-03 15:52:36</time>
</dt>
<dd>
<p>投稿コメント内容</p>
<p class="reply"><a title="返信" href="javascript:void(0);" onclick="mtReplyCommentOnClick(1, '投稿者')">返信</a></p>
</dd>
(略)
</dl>
</div>
「返信」をクリックすると、フォームにチェックボックスが自動で追加され、該当コメントに対して返信を行うことができます(先述のとおりmt.js
が必要です)
コメント一覧(返信を親コメントにぶら下げる)
先の例のようにコメント一覧を実装すると、返信コメントも親コメントと同列に日付順で出力されます(下記スクショはMTのテーマ「rainier」での表示です)
返信コメントを親コメントに紐づけて階層的に表示するには、MTIfCommentParent
とMTCommentReplies
を利用します。
<mt:Comments>
<mt:CommentsHeader>
<div class="comment_area">
<h2>コメント</h2>
<dl>
</mt:CommentsHeader>
<mt:IfCommentParent>
<mt:Else>
<dt class="comment-<$mt:CommentID$>">
<$mt:CommentAuthor$>
<time datetime="<$mt:CommentDate format='%Y-%m-%dT%H:%M:%SZ'$>"><$mt:CommentDate format="%Y-%m-%d %H:%M:%S"$></time>
</dt>
<dd>
<$mt:CommentBody$>
<p class="reply"><$mt:CommentReplyToLink$></p>
<mt:CommentReplies>
<mt:CommentsHeader>
<dl class="reply<mt:If tag='CommentParentID'>-<$mt:CommentParentID$></mt:If>">
</mt:CommentsHeader>
<dt>
<$mt:CommentAuthor$>
<time datetime="<$mt:CommentDate format='%Y-%m-%dT%H:%M:%SZ'$>"><$mt:CommentDate format="%Y-%m-%d %H:%M:%S"$></time>
</dt>
<dd><$mt:CommentBody$></dd>
<mt:CommentsFooter>
</dl>
</mt:CommentsFooter>
</mt:CommentReplies>
</dd>
</mt:IfCommentParent>
<mt:CommentsFooter>
</dl>
</div>
</mt:CommentsFooter>
</mt:Comments>
MTIfCommentParent
で「親コメントの存在有無」を判別します。
すこし違和感のある書き方ですが、以下のようにすることで親コメントとその返信コメントをまとめることができます(通常の一覧出力から返信コメントのみ除外する)
<mt:IfCommentParent>
<mt:Else>
<!-- MTMLを書く -->
</mt:IfCommentParent>
MTCommentReplies
ブロックで返信コメントの出力(処理)をします。MTComments
タグ内で利用できるMTタグを利用できます。
とりあえず覚えておくといいMTタグ
コメント一覧を出力(処理)する際にとりあえず覚えておくといいMTタグとモディファイアです。
MTComments
コメント一覧を表示するためのブロックタグ。
個別の記事ページやウェブページ、MTEntries
やMTPages
の中で利用すると、その記事に対するコメントのみを出力(処理)する。単独で使用すると、そのウェブサイト(あるいはブログ)内のすべてのコメントを出力する。
lastn
出力するコメントの数を指定する。このモディファイアが指定されていない場合は、すべてのコメントを出力する。
sort_order
表示を昇順(ascend
)か降順(descend
)で指定する。初期値はascend
。
blog_ids
MTComments
を単独で利用する場合に、コメントの一覧で表示させるブログのIDを指定する。複数のブログを指定する場合は,
(カンマ)で区切る。
ほかにinclude_blogs
などが利用できる。詳細は公式リファレンスを参照。
top
1
を指定すると、返信を含まないコメントのみを出力する。
MTCommentAuthor
コメントの投稿者名を出力する。
default
投稿フォームの名前欄が無記名のときに表示する名前を指定する。初期値は「匿名」
MTCommentDate
コメントの投稿日付を出力する。
format
モディファイアで書式の選択が可能。
参照:http://www.movabletype.jp/documentation/appendices/date-formats.html
MTCommentBody
コメント本文を出力する。
autolink
1
を指定すると、本文中のURLが自動的にリンクされる。管理画面の設定よりも優先される。
convert_breaks
0
を指定すると、改行されず本文がそのまま出力される。初期値は1
。
初期状態では、出力時にp
タグと改行(<br />
)が挿入される。
words
出力するコメント本文の文字数を指定する。このモディファイアを指定すると、autolink
とconvert_breaks
の設定は無視される。
MTCommentID
コメントのIDを出力する。
MTCommentReplyToLink
コメントに返信するためのリンクを出力する。以下のHTMLが出力される。
<a title="返信" href="javascript:void(0);" onclick="mtReplyCommentOnClick([コメントID], '[投稿者名]')">返信</a>
MTCommentsHeader
ループ出力の一番はじめのときだけ実行されるブロックタグ。
MTCommentsFooter
ループ出力の一番最後のときだけ実行されるブロックタグ。
MTIfCommentParent
親コメントが存在する場合に実行されるブロックタグ。親コメントと返信コメントをまとめる際などに利用する。
MTCommentReplies
コメントに返信コメントが存在する場合、このブロックタグの内容が出力(処理)される。
MTCommentParentID
コメントに親コメントが存在する場合、親コメントのIDを出力する。親コメントがなければ0
を出力する。
公式リファレンス
大枠のもののみ記載しています。
MT
- https://www.movabletype.jp/documentation/appendices/tags/comments.html
- https://www.movabletype.jp/documentation/appendices/tags/commentreplies.html
- https://www.movabletype.jp/documentation/appendices/tags/ifcommentparent.html
Discussion