コメントをワンクリックボタン式にすると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();
?>

コードの解説

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

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