おもしろ雑学集

WordPressのコメント欄に簡単にAjax非同期通信化する

日付
編集
分類
画像0枚
PV日0 月0 年1295
70.73%

コメントをワンクリックボタン式にすると1日に200件ほどの大量のコメント(スパムでは無い)を頂けるようになったので、コメントされる方にもっとスムーズに送信できるようにしました。コメントボタンをクリックするとページ遷移すること無く、その画面の状態で通信が行われ送信することができます。これをAjax非同期通信と言います。


Ajaxと聴くと一見難しそうに聞こえますが、中身はただのjQueryなのでフォーメーション(JSON)さえ覚えれば簡単です。jQueryなのでiPhoneやAndroidなどのスマホ端末にも対応しているところが見どころです。


実装コード

<?php function ajaxify_comments_script(){ ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {
    $("#comment-button input").click(function() {
        $("#comment-text").val($(this).val()+$.now());
        var formdata = $("#comment-form").serialize();
        var commentbody = $("#comment-text").val();
        $.ajax({
            type:'post',
            url:FORM_ACTION_URL,
            data:formdata
            }).done(function(data, status) {
                if(status == "success") {
                $('body').delay(100).animate({
                scrollTop:$(document).height()
                },1000);
                $("#comments-area").after('
                    <div class="comments-author">コメントが送信されました</div>
                    <div class="comments-body">'+commentbody+'</div>
                ');

                $("#comment-form").hide();
                return false;
            } else {
                alert("ERROR");
                return false;
            }
        }).fail(function(data) {
            alert("中断");
        });
    });
});
</script>
<?php
}
add_action('wp_footer', 'ajaxify_comments_script');
wp_footer();
?>



コードの解説

// WordPress誓約上、Ajaxを使用する際には関数を記述しなければならない。
<?php function ajaxify_comments_script(){ ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function() {


// コメント簡易ボタン式のどれか一つをクリックすると実行
$("#comment-button input").click(function() {


// ボタンのテキストをそのままコメント本文へ
// $.nowは時刻。コメント重複するとスパムと認識されてしまうのでとりあえず現在の時刻を数値化し排他
$("#comment-text").val($(this).val()+$.now());


// 便利なserialize関数。formの内容をすべて一意の変数にしてくれる。
var formdata = $("#comment-form").serialize();


// コメント内容を変数に代入
var commentbody = $("#comment-text").val();


// Ajax通信開始
$.ajax({
type:'post',
url:FORM_ACTION_URL,
data:formdata


// 通信処理が成功すれば下記を実行
}).done(function(data, status) {


// 通信が無事完了すれば下記を実行
if(status == "success") {


// 一番下へアニメーションスクロールさせる
$('body').delay(100).animate({
scrollTop:$(document).height()
},1000);


// コメントループの最後に、実際にコメント欄に挿入された時の状態を再現。
$("#comments-area").after('<div class="comments-author"style="background:#9A93FF;">コメントが送信されました、まもなく処理されます</div><div class="comments-body">'+commentbody+'</div>');

// コメント送信関連は全て撤去、これをしないと何度も連投できてしまう。
$("#comment-form").hide();


// フォルスをリターンする。
return false;


// 通信が失敗した場合
} else {
alert("ERROR");
return false;
}


// 通信できなかった場合
}).fail(function(data) {
alert("中断");
});
});
});
</script>
<?php
}

// WordPressの誓約上、このような記述が必要。いちいちfunctions.phpに記載しなくてもよい
add_action('wp_footer', 'ajaxify_comments_script');
wp_footer();
?>

wp_head()やwp_footer()は絶対に付けたくないんですが、Ajax使用するためには必要不可欠でした。裏で何をやっているかよくわかりませんが、内部構造をいじれればwp_footer()を外します。ただ、ソースを見る限りwp_footer()をつけたからといって不要なコードなど付加されていないので、良しとします。

また、このコードを使用する際は外部に読み込まず、直接テンプレートに入力(インライン化)、さらに一番最後の方に記述したほうがSEO的に有利です。ちなみにエロジンではJavaScriptはJavaScriptで生成されたJavaScript以外の全てをインライン入力にしています。そのためソースが大変読みづらいですが、GTMetrixなどで高得点を得ることができます。

  • 🥰抜けました
    23
  • 🥹感動しました
    3
  • 😆笑いました
    3
  • 🤔意味わからんです
    3
  • 😡胸糞悪かったです
    3
  • 😣萎えてしまいました
    6
  • 投票する
この記事をブックマーク
    日付
    編集
    分類
    画像0枚
    PV日0 月0 年1295
    70.73%
    お読み頂きありがとうございました!
    Thanks Good Read again!
    コメントを書き込め
    本文必須 最低2字 最大400字 名前空欄可 最大20字
    コメント一覧
    1
    814cb1dd

    これで抜けたってやつがいて草jQueryの3xかあ。XHR直書きでも対応できそうな気もするけど……

    2
    2
    返信
    2
    d555cadc

    まぁな2年前だからな!

    2
    2
    返信
    3
    39477e

    あああああああ

    2
    2
    返信
    4
    39477e

    テスト送信

    2
    2
    返信
    5
    d01814

    mmmm

    2
    2
    返信
    6
    a3d55c

    ee

    1
    1
    返信
    7
    da7ede

    ee

    0
    0
    返信
    8
    da7ede

    ee

    0
    0
    返信
    9
    da7ede

    ee

    0
    0
    返信
    10
    da7ede

    ee

    0
    0
    返信
    11
    da7ede

    ../../../../../../../../../../../../../../etc/passwd

    性別:ホモ
    0
    0
    返信
    12
    da7ede

    ../../../../../../../../../../../../../../windows/win.ini

    性別:ホモ
    0
    0
    返信
    13
    da7ede

    file:///etc/passwd

    性別:ホモ
    0
    0
    返信
    14
    da7ede

    ee

    0
    0
    返信
    15
    da7ede

    ee

    性別:ホモ
    0
    0
    返信
    16
    da7ede

    ../ee

    性別:ホモ
    0
    0
    返信
    17
    da7ede

    ee

    性別:ホモ
    0
    0
    返信
    18
    ../../../../../../..

    ee

    性別:ホモ
    0
    0
    返信
    19
    ../../../../../../..

    ee

    性別:ホモ
    0
    0
    返信
    20
    file:///etc/passwd

    ee

    性別:ホモ
    0
    0
    返信
    21
    ../../../../../../..

    ee

    性別:ホモ
    0
    0
    返信
    22
    ..%2F..%2F..%2F..%2F

    ee

    性別:ホモ
    0
    0
    返信
    23
    ../../../../../../..

    ee

    性別:ホモ
    0
    0
    返信
    24
    ..%2F..%2F..%2F..%2F

    ee

    性別:ホモ
    0
    0
    返信
    25
    /../..//../..//../..

    ee

    性別:ホモ
    0
    0
    返信
    26
    .\\./.\\./.\\./.\\./

    ee

    性別:ホモ
    0
    0
    返信
    27
    /etc/passwd

    ee

    性別:ホモ
    0
    0
    返信
    28
    da7ede

    性別:ホモ
    0
    0
    返信
    29
    %2fetc%2fpasswd

    ee

    性別:ホモ
    0
    0
    返信
    30
    /.././.././.././../.

    ee

    性別:ホモ
    0
    0
    返信
    31
    ../..//../..//../../

    ee

    性別:ホモ
    0
    0
    返信
    32
    ../.../.././../.../.

    ee

    性別:ホモ
    0
    0
    返信
    33
    ../././../././.././.

    ee

    性別:ホモ
    0
    0
    返信
    34
    da7ede

    ee

    性別:ホモ
    0
    0
    返信
    35
    ..%c0%af..%c0%af..%c

    ee

    性別:ホモ
    0
    0
    返信
    36
    file:///etc/passwd

    ee

    性別:ホモ
    0
    0
    返信
    37
    da7ede

    ee

    性別:ホモ
    0
    0
    返信
    38
    /\../\../\../\../\..

    ee

    性別:ホモ
    0
    0
    返信
    39
    /WEB-INF/web.xml

    ee

    性別:ホモ
    0
    0
    返信
    40
    da7ede

    ee

    性別:ホモ
    0
    0
    返信
    全てのコメントを読み込む
    関連記事
    2019年7月13日冷夏の3連休に無意識に保存されていた125枚もの写真を公表のサムネイル画像
    2019年7月13日冷夏の3連休に無意識に保存されていた125枚もの写真を公表
    日0 月4.38k 年13.4k
    178
    15

    #53かわいい<br>誰かわかる35件

    2020年節分の前日に備えておいた豆同然のファイル125個を撒いた記事のサムネイル画像
    2020年節分の前日に備えておいた豆同然のファイル125個を撒いた記事
    日0 月714 年2.38k
    85
    19

    ee22件

    【ToLOVEる】褐色幼女ババアネメシス性奴隷の校長のチン○コどす黒スギィwwwwwwのサムネイル画像
    【ToLOVEる】褐色幼女ババアネメシス性奴隷の校長のチン○コどす黒スギィwwwwww
    日0 月2.07k 年10.7k
    99
    22

    ee8件

    【エロ同人誌】ビチクソギャル二人組が純粋な少年にドスケベごっこwwwwのサムネイル画像
    【エロ同人誌】ビチクソギャル二人組が純粋な少年にドスケベごっこwwww
    日0 月1.45k 年7.89k
    207
    66

    ee4件

    【200枚】今保存した最高の画像を転載する記事【重い】のサムネイル画像
    【200枚】今保存した最高の画像を転載する記事【重い】
    日0 月1.13k 年4.86k
    29
    14

    ee3件

    2020年ハロウィンに保存したエキサイティングな写真集131枚のサムネイル画像
    2020年ハロウィンに保存したエキサイティングな写真集131枚
    日0 月287 年4.73k
    43
    13

    ee44件

    最大10連休の2022GWに保存した150/300km/hのサムネイル画像
    最大10連休の2022GWに保存した150/300km/h
    日0 年3.0k
    82
    8

    ee35件

    2020年12月28日 本年度最後の画像集はこれだのサムネイル画像
    2020年12月28日 本年度最後の画像集はこれだ
    日2.74k 月2.85k 年5.0k
    57
    11

    ee41件

    2020.02.09 セーファーインターネットデーに保存された安全な画像集のサムネイル画像
    2020.02.09 セーファーインターネットデーに保存された安全な画像集
    日0 月483 年4.14k
    49
    12

    ee29件

    教会でおいのり中に保存した痛恨の画像集134枚のサムネイル画像
    教会でおいのり中に保存した痛恨の画像集134枚
    日0 月686 年4.28k
    52
    8

    男と牛はダメだろ🐮🙅25件

    広告