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

日付	2015-11-10T06:54:00
分類	WEBマスター
画像	0枚
訪問数

コメントをワンクリックボタン式にすると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などで高得点を得ることができます。