Xommentプラグインを使ったコメントのAjax化（その2）

Xommentプラグインを使ったコメントのAjax化の第2回として、小粋空間様の「Movable Type 4.2用スタイル対応版（フッタ付きリキッドレイアウト対応）」テンプレートセットでXommentプラグインを使う方法を解説します。

1.準備

まず、MT4.2標準テンプレートでの手順の「1.Xommentプラグインのインストール」から「3.『コメントの確認ページ』をオンにする」を行い、Xommentプラグインを使う準備をします。

2.「ヘッダー」テンプレートモジュールの書き換え

次に、「ヘッダー」テンプレートモジュールを書き換えます。

「ヘッダー」テンプレートモジュールを開き、「</head>」のタグを探します。
そして、そのタグの前に、以下を挿入します。

<mt:If name="feedback_template"><mt:IfCommentsActive>
    <mt:SetVar name="do_xomment_head" value="1"/>
</mt:IfCommentsActive></mt:If>
<mt:If name="do_xomment_head">
  <mt:Include module="Xomment Head" />
  <mt:SetVar name="panel_size" value="10"/>
  <mt:SetVar name="panel_static_list" value="1,-1"/>
<mt:Ignore>
<!-- Remove the mt:Ignore tags if you use jQuery in the rest of your site.  -->
<mt:Else>
  <script type="text/javascript" src="<mt:StaticWebPath/>plugins/Xomment/jquery.js"></script>
</mt:Ignore>
</mt:If>

「ヘッダー」テンプレートモジュールをこれまでにカスタマイズしていなかったのであれば、書き換え後の結果は以下のようになります（赤字が追加した部分）。

<?xml version="1.0" encoding="<mt:publishCharset />" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="<mt:defaultLanguage />" xml:lang="<mt:defaultLanguage />" id="sixapart-standard">
・
・（途中略）
・
   <mt:if name="main_template">
      <mt:CCLicenseRDF />
   </mt:if>
<mt:If name="feedback_template"><mt:IfCommentsActive>
    <mt:SetVar name="do_xomment_head" value="1"/>
</mt:IfCommentsActive></mt:If>
<mt:If name="do_xomment_head">
  <mt:Include module="Xomment Head" />
  <mt:SetVar name="panel_size" value="10"/>
  <mt:SetVar name="panel_static_list" value="1,-1"/>
<mt:Ignore>
<!-- Remove the mt:Ignore tags if you use jQuery in the rest of your site.  -->
<mt:Else>
  <script type="text/javascript" src="<mt:StaticWebPath/>plugins/Xomment/jquery.js"></script>
</mt:Ignore>
</mt:If>
</head>
<body class="<mt:getVar name="page_layout" />"<mt:if name="body_onload"> onload="<mt:getVar name="body_onload" />"</mt:if>>
<div id="box" class="clearfix">
・
・（以後略）
・

3.「コメント」テンプレートモジュールの書き換え

次に、「コメント」のテンプレートモジュールを書き換えます。
「コメント」のテンプレートモジュールを開き、「<MTComments>」~「</MTComments>」の部分を切り取って以下のタグに置き換え、テンプレートモジュールを保存します。

<mt:Include module="Xomment Panels"/>

「コメント」テンプレートモジュールをこれまでにカスタマイズしていなかったのであれば、書き換え後の結果は以下のようになります（赤字が変更した部分）。

<mt:ifCommentsActive>
<div id="comments">

   <mt:if name="comment_preview_template">
   <mt:include module="コメント入力フォーム" />
   </mt:if>

<mt:Include module="Xomment Panels"/>

   <mt:unless name="comment_preview_template">
   <mt:include module="コメント入力フォーム" />
   </mt:unless>

</div>
</mt:ifCommentsActive>

4.「コメント詳細」テンプレートモジュールの書き換え

次に、「コメント詳細」のテンプレートモジュールの中で、「c<mt:commentID />」を「comment-<mt:commentID />」に置換します。
このテンプレートモジュールをこれまでにカスタマイズしていなければ、置換する箇所は以下の赤字の2箇所です。

<div class="comment"<mt:ifArchiveTypeEnabled archive_type="Individual"> id="comment-<mt:commentID />"</mt:ifArchiveTypeEnabled>>

   <div class="comment-content">
   <mt:ifCommentParent>
   <p><a href="<mt:commentParent>#comment-<mt:commentID /></mt:commentParent>"><mt:commentParent>No.<mt:commentID />の<mt:commentAuthor /></mt:commentParent></a>さんのコメントへの返信</p>
・
・（以後略）
・

5.「最近のコメント」ウィジェットの書き換え

次に、「最近のコメント」のウィジェットの中で、「c<mt:commentID$>」を「comment-<mt:commentID$>」に置換します。
このテンプレートモジュールをこれまでにカスタマイズしていなければ、置換する箇所は以下の赤字の2箇所です。

<dt class="sidetitle">
Recent Comments
</dt>
・
・（途中略）
・

  <mt:comments lastn="2">
        <li>
        └ <a href="<mt:entryLink$>#comment-<mt:commentID$>" title="comment-<mt:commentID$>"><mt:commentAuthor default="Anonymous"></a> <mt:commentDate format="%m/%d"$>
        </li>
  </mt:comments>
・
・（以後略）
・

6.「コメントプレビュー」「コメント完了」システムテンプレートの書き換え

次に、「コメントプレビュー」と「コメント完了」のシステムテンプレートを書き換えます。

「コメントプレビュー」「コメント完了」とも、既存のテンプレートの内容をすべて削除し、代わりに以下のタグを入力します。

「コメントプレビュー」システムテンプレート

<div class="comment-preview">
<mt:Include module="コメント詳細" />
</div>

「コメント完了」システムテンプレート

<mt:If name="comment_confirmation">
  <mt:XommentPanels new_comments="1">
    <mt:XommentPanelComments>
      <$mt:Include module="コメント詳細"$>
    </mt:XommentPanelComments>
  </mt:XommentPanels>
<mt:Else name="comment_pending">
  <div class="comment-pending"><p>コメントは現在承認されるまで公開を保留されています。</p></div>
<mt:Else name="comment_error">
  <div class="comment-error"><p>コメントを投稿できませんでした。エラー: <$MT:ErrorMessage$>
  </p></div>
</mt:If>

7.「Xomment Panel」テンプレートモジュールの書き換え

次に、「Xomment Panel」テンプレートモジュールを開き、その2行目にあるMTIncludeタグで、以下のように「Comment Detail」を「コメント詳細」に書き換えます。

<$mt:Include module="コメント詳細"$>

8.ブログの再構築

最後に、ブログ全体を再構築します。
これで作業は終わりです。

お知らせ