WDP Ajax Comments は、ページの移動をすることなく軽快にコメントを投稿することができ、入力不備時のエラーもほぼリアルタイムに表示してくれます。

プラグインの有効化

プラグインの新規追加から「WDP Ajax Comments」を検索。インストール後に有効化すればすぐ利用できます。設定画面はありません。

有効化されると wp_head(); の場所に、cssファイルとjsファイルが下記の順番で読み込まれます。ajax.googleapis.com で jquery.js を読み込んでいる場合や、css と js の記述順を気にする方は、その制御が必要かもしれません。

<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.3.2'>
<script type='text/javascript' src='/wp-content/plugins/wdp-ajax-comments/jquery.validate.min.js?ver=1.5.5'>
<script type='text/javascript' src='/wp-content/plugins/wdp-ajax-comments/ajax-comments.js?ver=1.2'>
<link rel="stylesheet" href="/wp-content/plugins/wdp-ajax-comments/wdp-ajax-styles.css" type="text/css" media="screen" />

各種メッセージ

エラーの場合
  • 名前またはメールアドレス、あるいはその両方の入力がない場合
  • コメントの入力がない場合
  • 重複投稿（同じコメント内容）した場合
  • その他

日本語にするための設定は特に必要ありません。 画像で確認

正常に投稿できた場合

送信中を表す「送信しています」や、送信完了のメッセージ「コメントありがとうございます」は、デフォルトだと英語表記のままです。

日本語で表示したい場合は、wp-content/plugins/wdp-ajax-comments フォルダ内にある ajax-comments.js の

・17行目： Processing...
・44,53行目： Thanks for your comment. We appreciate your response.

という部分を、それぞれ適当なコメントに書き換えます。（utf-8で保存）

スタイルの変更

各メッセージは、 comments.php の <form method="post" action="/wp-comments-post.php"> 直下に <div id="wdpajax-info"><p class="***">メッセージ</p></div> という形で出力されます。

プラグインフォルダ内にある「wdp-ajax-styles.css」に、各メッセージのスタイルが定義されていますので、これを修正すれば好みの表示にすることができます。

  • .wdpajax-error : エラーメッセージ
  • .wdpajax-success : 送信完了メッセージ
  • .wdpajax-loading : 送信中メッセージ
  • label.error : jquery.validate.jsを利用したエラーメッセージ*

以上で設定完了です。

以下、コメントの投稿を「名前とメールアドレスの入力を必須」にしている方は無視していい項目です。

* jquery.validateを利用すると…

必須にしたい項目のinput要素に、class="required" を加えることによって、より迅速にエラーメッセージを表示してくれます。

<input type="text" class="required" name="author" id="author" />
<input type="text" class="required email" name="email" id="email" />

また、名前とメールアドレスの入力を 必須にしていない 場合でも、jquery.validate の方でチェックしてくれますので、名前だけを必須項目にしたコメントフォームにすることも可能です。（javascriptが有効な場合） サンプル