tips

wordpressのコメント欄をajax化する。

ajaxfy_comment

プラグインに頼らずテーマ内で完結するAJAXコメントフォーム。

前回に引き続き、コメントの周りのカスタマイズ。

一昔前にQuick Commentsというのがあって、いまはAjax CommentsやWP Ajaxify Commentsというのもあって、でも環境依存の問題か上手く動作しなかったり、もっさりしていたりで、いくつもある他のプラグインの動作確認をやるのもしんどいしで、どうにも…あ゛ーって感じになったので、自作してみたら意外とすんなりまとまった、と。

※2015/2/25 …. undefinedを区別するようにjsを修正しました。このコードはAJAXを使用しているので、htmlタグが誤っていたり、複雑な構造になっている場合、あるいは他のjs系プラグインを使用している場合、干渉しあって期待通りの動作をしないこともあります。十分に注意してお使いください。

 

CODE: Ajaxify WordPress comments

###0###

このサンプルコードではfunctions.phpに記載することを前提にwp_footerにフックしてますが、jQueryだけで完結してるんでjs部分をテンプレートに直書きしてもOKです。動作はここのフォームでコメントなしで送信ボタンを押せば、エラーが返ってきますのでどうぞ。ちなみに前記事「Really Simple CAPTCHAをコメント欄に応用する。」も併用できます。

 

どうやってヴァリデートするか、が肝なのかも。

ajaxでpostするところまではどのプラグインでも動作は大体同じ。コメントのヴァリデーション方法については作者毎に個性があるが、comment_postにフックしてajax時のみ処理を分岐させて云々…というのが常道のようだった。それで良いのだけども、結局、コメント投稿に失敗したときに返ってくるエラーページを読み込んでPOSTの可否を判断することにした。htmlソースで判断することの是非はあるかもしれないが、フック処理が不要になるしwordpressのエラーメッセージを流用できるので、関数をシンプルに保てて、保安上もメリットになると思えたからだ。

もうひとつの大きな設計判断としては、コメント後にユーザーにだけ見えるモデレート待ち のコメントを表示する方法をどうするかだけども、これはコメントが通過後に返ってくる新しいポストから#commentsタグを抽出して丸ごと差し替えること にした。キャプチャを使用している場合にはその更新が必要だったり、コメントテンプレートのデザインやソートがテーマ毎にまちまちだったりするので、コメントテンンプレートをまるごと差し替えるのが現実的だろうというわけです。

おまけ:ここで適用してるcss

ajaxは思いの外時間がかかることもあるので、css 3のアニメーションなどを活用してユーザーを迷わせないよう設計することが大事ですね。

###1###

Your Comment

コードの記述は<pre>または<code>タグで括って下さい。自動的にエスケープされます。

 

右の文字を入力して下さい captcha

31 comments

  1. 匿名

    Apr 15, 2018

    Yu

    返信する
  2. a

    Mar 28, 2018

    テスト

    返信する
  3. 匿名

    Mar 28, 2018

    返信する
  4. 匿名

    Mar 13, 2018

    参考にさせていただきました。

    尚、以下の行でエラーが出て動きませんでしたのでシングルクォートないしダブルクォートで囲いました。
    var matches = data.match(/([sS]*?)/);

    var matches = data.match(‘/([sS]*?)/’);

    返信する
  5. 匿名

    Jan 18, 2018

    てすと

    返信する
    • 匿名

      Jan 18, 2018

      テスト

  6. 匿名

    Dec 13, 2017

    test

    返信する
  7. 匿名

    Nov 30, 2017

    テストさせていただきます。

    返信する
  8. 匿名

    Jul 15, 2017

    コメントテスト

    返信する
    • 匿名

      Jul 23, 2017

      返信

    • 匿名

      Nov 10, 2017

      test

    • 匿名

      Nov 10, 2017

      test2

  9. 匿名

    Nov 15, 2016

    テストですう

    返信する
    • test

      Feb 4, 2017

      テストさせていただきます。

    • 匿名

      May 13, 2018

      テスト

  10. test

    Nov 9, 2016

    成功するときと失敗するときがあり、失敗するとURLの末尾に「#undefined」が付いて、commentsのdivがごっそり消え去ります。

    どうすれば。。。。

    返信する
    • Mizuho Ogino

      Feb 25, 2017

      ご報告ありがとうございます。

      undefinedを区別するように上記のjsを修正しました。

      commentsのdivが消えるのは、ポストはうまくいったにもかかわらずjsの処理が失敗しているせいです。
      undefinedの発生原因は、ajaxの読み出し先に誤ったhtmlタグなどがあるって失敗している可能性が高いのではないかと推測します。処理はphpなのでコメントがなくなるわけではないです。動作が改善しない場合は、テンプレートを見直すか、コメントIDを取得するタイプのajaxプラグインを使う必要があるかもしれません。
      undefinedが帰ってきた場合、ページをロードするようなjsの仕掛けをするのもいいかもしれませんね。承認待ちなどのシステムを活用していると、コメントが現れず不安を覚えて重ねて投稿、ということもあるかもしれませんので。そのうち考えます。

  11. test

    Nov 9, 2016

    一番最初のコメント投稿だと、#commentsごと消えてしまいます。。。

    返信する
  12. test

    Jul 15, 2016

    testさせてください

    返信する
    • test

      Jul 23, 2016

      テストさせてください

    • 匿名

      Sep 23, 2016

      テスト

    • test222

      Aug 17, 2016

      test22

    • eee

      Aug 25, 2016

      test

    • 匿名

      Sep 23, 2016

      tss

    • test

      Nov 8, 2016

      テストさせていただきます

  13. k

    Mar 1, 2016

    テスト投稿させてください。

    返信する
    • 匿名

      Jul 12, 2016

      test

    • お試し

      Jul 13, 2016

      test

  14. かず

    Jan 9, 2016

    こんにちは!

    素晴らしいコードありがとうございます!
    一つ質問があるのですが、メッセージを表示させる場所を変更するには
    どうしたら良いのでしょうか?
    お手すきの間にでもご教示頂けると幸いです。

    返信する
    • Mizuho Ogino

      Jan 9, 2016

      ###0###

      上記の箇所で、div.comment-ajaxをフォームに対してprepend(先頭)に挿入しています。appendに変更してフォームの後方に入れるか、そもそもjsは触らなくて済むように、cssでポジションを指定するのが一番簡単な改変方法です。

    • かず

      Jan 9, 2016

      さっそくの返信ありがとうございます!

      appendにしてさらにCSSで調整することにしました。
      JSは全然わからなかったので助かりました〜m(_ _)m
      これを機に勉強してみようと思います。
      ありがとうございます。