Zenn
📃

【Movable Type】記事にコメント機能を実装する

2025/03/04に公開
Web
frontend
Movable Type
tech

概要

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

コメント本文を出力する。

1を指定すると、本文中のURLが自動的にリンクされる。管理画面の設定よりも優先される。

convert_breaks

0を指定すると、改行されず本文がそのまま出力される。初期値は1。
初期状態では、出力時にpタグと改行（<br />）が挿入される。

words

出力するコメント本文の文字数を指定する。このモディファイアを指定すると、autolinkとconvert_breaksの設定は無視される。

MTCommentID

コメントのIDを出力する。

コメントに返信するためのリンクを出力する。以下のHTMLが出力される。

<a title="返信" href="javascript:void(0);" onclick="mtReplyCommentOnClick([コメントID], '[投稿者名]')">返信</a>

MTCommentsHeader

ループ出力の一番はじめのときだけ実行されるブロックタグ。

MTCommentsFooter

ループ出力の一番最後のときだけ実行されるブロックタグ。

MTIfCommentParent

親コメントが存在する場合に実行されるブロックタグ。親コメントと返信コメントをまとめる際などに利用する。

MTCommentReplies

コメントに返信コメントが存在する場合、このブロックタグの内容が出力（処理）される。

MTCommentParentID

コメントに親コメントが存在する場合、親コメントのIDを出力する。親コメントがなければ0を出力する。

公式リファレンス

大枠のもののみ記載しています。

MT

PowerCMS

Discussion