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

Simply Threaded プラグイン（MT4版）でコメントフォームに返信機能を追加する

Movable Type 4 では、元コメントに対する返信機能が新たに追加されましたが、デフォルトでは元コメントに返信できるのは管理画面から、つまり Movable Type ユーザのみです。

ブログ記事ページのコメントフォームから同様に返信できるようにするには、MT3 の時に紹介した、Simply Threaded プラグインが MT4 対応にバージョンアップされたので、これを利用します。

• Simply Threaded プラグイン
• 過去の紹介記事

本プラグインをインストールすることで、管理画面のコメント返信と同等の機能が追加され、さらに MT4 のコメント関連テンプレートタグでカスタマイズすれば、いわゆる掲示板のようなスレッド形式のコメント欄を表示することができます。

まず、プラグイン導入後のコメント返信方法から説明します。

１．コメント返信方法

返信したい元コメントに表示されている「返信」リンクをクリック。

クリックすると、コメント投稿画面にリプライのチェックボックス（「In reply to yujiro」の部分）が表示されます。
チェックボックスチェックした状態でコメント投稿すると、元コメントの返信コメントとして認識されます。

投稿後はスレッド形式で表示することができます。

コメント欄をスレッド表示にする方法は「Movable Type 4 で返信コメントをスレッド形式で表示する」の設定を利用しています。

以下、プラグインの設定方法です。

２．プラグインのダウンロード

Simply Threaded のサイトより、「download now」をクリック。

User Type（ここでは Personal bloggers を選択）、License の確認、Your Name、Email Adress を入力して「Submit」をクリック。

同じ画面の左下に「Success! Check your email for instructions on downloading this plugin」が表示されれば送信OKです。

入力したメールアドレスにダウンロード用のURLが送信されるので、そこにアクセスし、表示された画面で、Version（Movable Type 4.0x の方）、Format を選択して、Download をクリック。

商用利用または企業利用の場合は有償なので、ダウンロード後、「purchase license」をクリックして必要な金額を送金してください。

３．プラグインのインストール

ダウンロードしたアーカイブ Simply-Threaded_1.xx.zip（または tar.gz） を解凍し、SimplyThreaded フォルダを丸ごと plugins フォルダ配下にアップロード。SimplyThreaded フォルダは2つありますので注意してください。

アップロード後、下のような構成になっていればOKです。

plugins/
　SimplyThreaded/
  　lib/
    　SimplyThreaded/
      　CommentThread.pm
　　php/
     　function.MTCommentReplyField.php
　　　function.MTCommentReplyLink.php
　　simplythreaded.pl

管理画面にアクセスすると、「アップグレード開始」画面になるので、「アップグレード」をクリック。

サインインします。

アップグレード開始します。完了後「Movable Type に戻る」をクリック。

「システムメニュー」→「プラグイン」で「Simply Threaded 1.xx」が表示されていればインストール完了です。

４．テンプレート修正（コメント詳細）

管理画面より「デザイン」→「テンプレート」→「テンプレートモジュール」→「コメント詳細」を開き、リプライ用リンクの MTCommentReplyLink タグ（青色部分）を追加します。

デフォルトテンプレート

<div class="comment"<MTIfArchiveTypeEnabled archive_type="Individual"> id="comment-<$MTCommentID$>"</MTIfArchiveTypeEnabled>>
    <div class="inner">
        <div class="comment-header">
            <$MTCommentAuthorLink default_name="Anonymous" show_email="0"$> <MTIfNonEmpty tag="CommentAuthorIdentity"><$MTCommentAuthorIdentity$></MTIfNonEmpty>:
        </div>
        <div class="comment-content">
            <$MTCommentBody$>
        </div>
        <div class="comment-footer">
            <a href="#comment-<$MTCommentID$>" title="コメントのURL"><$MTCommentDate format="%x %X"$></a> | <$MTCommentReplyLink$>
        </div>
    </div>
</div>

公開テンプレート

<div class="comment"<MTIfArchiveTypeEnabled archive_type="Individual"> id="c<$MTCommentID$>"</MTIfArchiveTypeEnabled>>
 
   <div class="comment-content"><$MTCommentBody$></div>
 
   <p class="comment-footer">
      Posted by <$MTCommentAuthorLink default_name="Anonymous" show_email="0"$> <MTIfNonEmpty tag="CommentAuthorIdentity"><$MTCommentAuthorIdentity$></MTIfNonEmpty> at <$MTCommentDate$> | <$MTCommentReplyLink$>
   </p>
</div>

MTCommentReplyLink タグにはオプションで text 属性が用意されています。これで表示テキストを変更できます。

<MTCommentReplyLink text="Reply to this comment">

５．テンプレート修正（コメント入力フォーム）

管理画面より「デザイン」→「テンプレート」→「テンプレートモジュール」→「コメント入力フォーム」を開き、チェックボックス表示用の MTCommentReplyField タグ（青色）を追加します。

デフォルトテンプレート

　　　　　：
<div id="comment-form-remember-me">
    <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
        ログイン情報を記憶</label>
</div>
<$MTCommentReplyField$>
　　　　　：

公開テンプレート

　　　　　：
<div id="comment-form-remember-me">
   <p>
      <label for="comment-bake-cookie"><input type="checkbox" id="comment-bake-cookie" name="bakecookie" tabindex="4" accesskey="r" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" onkeypress="if (!this.checked) forgetMe(document.comments_form)" />
      ログイン情報を記憶</label>
   </p>
</div>
<$MTCommentReplyField$>
　　　　　：

ちなみに MTCommentReplyField タグは、(X)HTML上は下のように展開されます。

<script type="text/javascript">
<!--
function replyComment(entry_id, parent_id, author, created_on) {
    var p = document.getElementById(entry_id + '_comment-reply');
    while (p.hasChildNodes()) {
        p.removeChild(p.firstChild);
    }
 
    var label = document.createElement('label');
    var checkbox = document.createElement('input');
    checkbox.setAttribute('type', 'checkbox');
    checkbox.setAttribute('name', 'simplythreaded_parent_id');
    checkbox.value = parent_id; 
    checkbox.setAttribute('checked', true);
    checkbox.style.marginLeft = '0px';
    checkbox.style.verticalAlign = 'middle'; 
    label.appendChild(checkbox);
 
    var reply_text = document.createTextNode(' In reply to ');
    label.appendChild(reply_text);
 
    var anchor = document.createElement('a');
    anchor.setAttribute('href', '#comment-' + parent_id);
    anchor.innerHTML = author;
    label.appendChild(anchor);
 
    p.appendChild(label);
    checkbox.focus();
}
//-->
</script>
 
<p id="2_comment-reply"></p>

６．関連リンク

下記に、プラグイン適用時のブログ記事ページを valid にする方法が掲載されています。

• WolaWola：コメント返信機能を使い倒す：Simply Threadedプラグイン