WordPressのコメント欄をAjax化する方法【2023/07】プラグインなしでの実装は難しい

wordpressのコメント欄をajax化する方法を解説します。

まずプラグインなしでwordpressのコメント欄をajax化する方法が難しい理由を解説します。

プラグインなしでwordpressのコメント欄をajax化するのが難しい理由
本当にWordPressのコメント欄をajax化する必要があるのか考える
WordPressのコメント欄をajax化するには「wpDiscuz」を使用する
まとめ

プラグインなしでwordpressのコメント欄をajax化するのが難しい理由

プラグインなしでwordpressのコメントをajax化するのはプロレベルの技術が要求されます。phpコードが少し読めるくらいではまったく太刀打ちできませんのでいさぎよくあきらめてください。

サーバーサイドの処理を考える必用がある

まずwordpressでajaxを使うには専用のアクションフックを使う必要があります。

add_action('wp_ajax_ajax_comments', 'ajax_comments');
add_action('wp_ajax_nopriv_ajax_comments', 'ajax_comments');
function ajax_comments() {
    // コメントを追加するための処理をここに書く
    // 必要な場合は、コメントデータをデータベースに保存するなどの処理を行います
    die();
}

仮にこのコードでwp_insert_commentやwp_new_commentでデータベースにコメントが挿入されたとしてもコメントが挿入されたあとに管理者にメール通知されるかどうかはわかりません。（実際に検証してないのでわかりません）。

またwordpress標準のNGワードの除外処理も機能しなくなる可能性があります。

またこのコードはfunctions.phpで使用することを前提に書いていますが、functions.phpから投稿のidを参照することができません（できるかもしれませんがわたしはできませんでした）wp_new_commentにはコメントに紐づく投稿のidが必要になるためこれを取得できないということはカスタムテンプレートを作成する必要があるということです。

commenet.phpを自分で作成するとなるとプロレベルの技術が必要になると思います。

仮にajaxで要素を挿入できたとしても返信ボタンなどの処理もあるためかなり難しい

たとえばの話になるのですがまず以下を見てみます。

jQuery(document).ready(function($) {
    $('#commentform').submit(function() {
        var form = $(this);
        var formData = form.serialize();
        $.ajax({
            type: 'POST',
            url: ajax_object.ajax_url,
            data: formData + '&action=ajax_comments',
            success: function(response) {
                // コメントを追加するための処理をここに書く
                console.log(response); // 応答をコンソールに表示する例
            }
        });
        return false;
    });
});

データベースにコメントデータを挿入したあとajaxでコメントのテキストをうけたっとします。successブロックでjavascriptでコメントリストに要素を挿入する処理を書いたとしてもコメントへの返信ボタンの表示はどうなるでしょうか？

このようなことを考えるとwordpressのajax化は自力でやろうとするとかなり難しい問題に遭遇します。わたしはもはや自力でコメントをajax化することをあきらめました。

自力でwordpressのコメントをajax化するための情報がない

wordpressのコメントを自力でajax化する方法は需要がないためかまったく情報がありません。当然いくつか情報はでてくるのですが、さきほどの見出しでのべたようにサーバーサイドの処理や返信ボタン関係などが総合的に考慮されたコードは見つかりませんでした。

本当にWordPressのコメント欄をajax化する必要があるのか考える

基本的にWordPressのコメント欄をajax化する必要はありません。なぜならajax化するためのリソースを消費するためサイトは当然重くなるでしょう。またWordPress標準のコメント機能でもまったく問題なく動作します。標準ではコメントを投稿したあとそのコメントにリダイレクトするようになっています。この処理も数秒で終わるようになっているため、ブログへのコメントが少ない場合はコメント欄をあえてajax化する必要はないでしょう。

ではコメント欄をajax化したほうがよい場合とはどういうべきでしょうか？

これはおそらくコメントが多いときにユーザーとスムーズにコミュニケーションがとりたいときではないでしょうか？この2つの要件に当てはまる場合はコメント欄のajax化を検討する必要があるでしょう。