Movable Type 備忘録

 

 コメント投稿フォームをポップアップ画面にする

エントリ・ページにあるコメント投稿フォームを外に取り出して、ポップアップ表示させるカスタマイズを紹介します。

ネットサーフしているとたまにコメント投稿フォームがポップアップされるのを見かけたりします。 コメント投稿フォームを外に出す利点といったら、

  • テンプレートがすっきりする。
  • 記事を見ながらコメントできる…そんなことするかなぁ汗
  • コメント数が多くなった場合ページが見やすくなる…これが最大のメリットかな。

う～ん…あまり思い浮かばないけど、人それぞれの好みなのでとやかくは言いません。
この先気が変わっていつでもポップアップ表示させられるように備忘録としてメモっておきます。

カスタマイズ方法

まず、コメント投稿用のテンプレートを作成します。

MovableType(ムーバブルタイプ) 3.2では、とりあえずデフォルトのテンプレートを流用して、各自のサイトに合ったテンプレートを作成します。
MovableType(ムーバブルタイプ)の管理画面から、テンプレート＞システムと移動するとコメント一覧というリンクがありますので、それがコメント投稿用のテンプレートです。 テンプレートを作成したら、既存のテンプレートに上書きして保存します。

次に、コメント・ポップアップの呼び出し元のテンプレートを変更します。 エントリ・アーカイブのテンプレートを変更します。 まず、テキストファイルに既存のテンプレートをバックアップしてください。 そして、<MTEntryIfCommentsOpen>～</MTEntryIfCommentsOpen>までを以下のコードと差し替えます。

変更前
<MTEntryIfCommentsOpen>
　　　　：
　　　　：
　　　　：
</MTEntryIfCommentsOpen>
変更後
<MTEntryIfCommentsOpen>
<a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">コメントをお願いします。</a>
</MTEntryIfCommentsOpen>

差し替えたら保存して再構築します。 人によってはコメントに関連するカスタマイズを行っていたりすると思いますが、それらは各自で対応してください。

最後に、コメント・ポップアップ用のJSを追加します。 MovableType(ムーバブルタイプ)のインデックス・テンプレート一覧の中に、mt-site.js というJSが既にあると思いますので、最後の方に以下のコードを追加します。

function OpenComments (c) {
window.open(c,'comments','width=480,height=580,scrollbars=yes,resizable=yes,status=yes');
}

追加したら、保存して再構築します。

ポップアップ表示確認します。 エントリページにフォームが消えて「コメントをお願いします。」リンクが表示されてますね。 そのリンクをクリックすると、コメント投稿フォームのポップアップ画面が表示されます。

以上で、コメント投稿フォームを外に出して、ポップアップ表示させることができました。

では。SEE YOUハート３

  • Edit
  • Permalink
  • Comments(0)
  • Trackbacks(0)

 Trackback Pings(0)

No trackbacks found.

 Comments(0)

No comments found.

 Post a Comment

コメント用フィード