Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

MovableTypeで2ちゃんねる風なコメントリストにする

Apr302006
Vote:
http://bizcaz.com/archives/2006/04/30-172020.php
Categories: Customize
Tags: Comment, Customize, MovableType, mt-link-number, Plugins
Social Bookmark

Prev Page: CustomFieldsプラグイン活用術 - 投稿者画面１
Next Page: MovableTypeのコメント欄の色を交互に変えてみる

今月最後のエントリとなりました。
実はFeed Meterのメモリが 4 になるように今月はかなりがんばってみたんです(●＞∀＜●)眠かったぁ

でも結局メモリ 4 にならなかったんですけどね (;￣∇￣A
それはさておき…

掲示板に投稿されたことがある人、読んだことがある人なら分かると思いますが、どのコメントに対してコメントされたのかが分かるように連番されてて、>>14のようにコメント間の関連が見やすくなっていますよね。

でも、MovableType(ムーバブルタイプ)に限らず、ブログのコメントでは、コメント数が少ない内はいいと思いますが、コメント数が多いと、コメント間の関連が分かりづらいと思ったことありませんか!?

今回は、コメント一覧を2ちゃんねる風にカスタマイズしてみようと思います。

投稿されたコメントには、必ずユニーク(エントリ内で唯一または、ブログ内で唯一)な番号が振られています。
この番号を利用するわけですが、2ちゃんねる風なコメント一覧にするにはmt-link-numberプラグインを使用します。

このプラグインでは、投稿時に ">>14" のようにあらかじめ記入して投稿することで、コメントが表示されるときに ">>14" という文字列を、コメント番号14に該当するコメントへのリンクに変換してくれるプラグインなんです。

今回参考にしたサイトは、bricklife.weblog.* 様です。

▼mt-link-numberプラグインの入手はこちらから▼
http://www.bricklife.com/library/mtlinknumber.html

カスタマイズ方法

まず、mt-link-numberをインストールします。
上記リンク先から、mt-link-number.zipという圧縮ファイルをダウンロードしてください。

そして適当なフォルダに展開して mt-link-number.pl を以下のように変更します。
mt-link-number.pl
1. $arg = "#r%d" if $arg eq "1";
赤い字の部分 'r' を追加します。
追加したら保存して、いつものように mt/plugins の中にアップロードします。
次にコメントへの返信をカンタンにする為のJavaScriptをダウンロードします。
コメント投稿者の横に[RES]というリンクを付加して、そのコメントに対する返信をカンタンにしてくれるスクリプトです。

上記リンクから、画面中央辺りにJavaScriptのコードが記載されていますので、それをテキストエディタにコピぺします。
そして以下のように修正します。
comment_res.js
1. function insertCommentRef(n, name) {
2. document.comments_form.text.value += ">>" + n + " " + name + " さん\n";
3. document.comments_form.text.focus();
4. }
青い字の部分を追加しました。
insertCommentRef()の第1パラメータの n はコメント番号で、第2パラメータの name を追加することで、コメントした人の名前も渡しています。

入手したらファイルに保存(たとえば、comment_res.js)して、サーバにアップロードします。
アップロード先はどこでも構いません。各自の環境に合わせてアップロードしてください。
次に個別エントリ・アーカイブ・テンプレートを修正します。
<head>～</head>の間に以下のコードを追加します。
1. <script type="text/javascript" src="<$MTBlogURL$>js/comment_res.js" charset="<$MTPublishCharset$>"></script>
青い字の部分を各自の環境に合わせて変更します。
次に、テンプレート内から、<$MTCommentBody$>を探してください。そして、以下のように修正します。
コメント欄の変更
1. <MTComments>
2. <a id="r<$MTCommentOrderNumber$>"></a>
3. <div id="c<$MTCommentID$>"><$MTCommentBody link_number="1"$></div>
5. <p class="posted">
6. <$MTCommentOrderNumber$>: 投稿者 <$MTCommentAuthorLink default_name="Anonymous" spam_protect="1"$>
7. <MTCommentAuthorIdentity> : <$MTCommentDate$>
8. <a href="#comment-form"
9. onclick="insertCommentRef('<$MTCommentOrderNumber$>','<$MTCommentAuthor default="Anonymous"$>')">[RES]</a>
10. </p>
11. </MTComments>
赤い字の部分がコメントのリンク先となるアンカーです。
青い字の部分は<$MTCommentBody$>にアトリビュート属性を追加することで、>>14という文字列をリンクに変換するよう支持しています。
緑の字の部分で、投稿されたコメント番号を表示させています。
そして、ピンクの字の部分で [RES] というリンクを追加しています。
最後に<MTIfRegistrationAllowed>を探してください。
<MTIfRegistrationAllowed>直後あたりに、以下のコードを追加します。
アンカーの追加
1. <a id="comment-form"></a>
一通り追加したら、保存して再構築します。
同様のことをコメント・プレビュー・テンプレートにも行います。
動作確認します。
テスト的にエントリを追加して、そのエントリにコメントを投稿します。

そして先ほど追加した[RES]をクリックして、そのコメントに対するレスをしてみてください。

ちなみに表示されているコメント番号は、そのエントリ内で唯一なコメント番号です。ブログ内で唯一な番号ではありません。

ですから、投稿されたコメントの削除などを行うと、そのコメントに割り当てられたコメント番号は欠番となります。