CF7で作った【いいね！】の数値をリアルタイムで更新させてみた

　今回も記事タイトルのとおりです。

　前回、ContactForm7を使ってフォーム送信ボタンが押された回数の統計をとり、それを任意の場所に表示させるところまで実装しました。

　しかし、保存されている数値を取り出してページ上に表示させるまではできたのですが、【いいね！】が押されたタイミングで即座にその結果を反映(数値を1加算)して表示を更新する、という処理はできていませんでした。

　今回はAjaxを使ってそれを実装してみたので、作成したコードの解説と注意点などをまとめようと思います。
　

概要・やりたいこと

　今回実装したいのは、【いいね！】ボタンが押された時、画面のリロードを挟まずその場でカウンターの数値を１→２というふうに表示を書き換える処理です。
　今ではX(旧Twitter)などのSNSには当たり前のように付いている機能なので考えたこともありませんでしたが、これって実はそこそこ手間の掛かる処理をしてたんだな～と知りました。

　このような、ページ全体の更新を挟むことなく一部の情報のみサーバーとやりとりを行い、受け取った情報を反映させる仕組みのことを非同期通信と言い、その名称をAjaxと呼ぶのだそうです。

　処理を行うのにAjaxを使う必要があるということはわかりましたが、残念ながら名称とどういうものかという雑な認識しかない自分にそのコードを書くなんて出来る筈がないので、今回はChatGPTさんにお手伝いしてもらうことにしました。

　どういった処理を行いたいのか、それをどんな環境に実装したいのか…　といった要望をChatGPTさんに伝え、それを形にする為に必要な情報や具体的なコードの書き方等を教えてもらいました。
　勿論、提示されたコードをそのままコピペしても上手くいかない(いく時も稀にあるが…)ので、ChatGPTさんから貰った情報はあくまで参考資料とし、必要な箇所は自分で書き換えたり、提示されたいくつかのサンプルコードをそれぞれ試し、使えそうなものを繋ぎ合わせたりして少しずつコードを組み立てていきました。

　また、処理が上手く実行されず行き詰った時も、エラーの原因となりそうなものを教えてもらったり、こちらが考える原因の可能性を精査してもらったり等、非常に助けられました。
　プログラミング初心者にとってChatGPTさんの存在は本当に心強い！！！✨

　そして、ChatGPTさんの協力のもと試行錯誤して出来上がったのがこちらになります。↓

function.php

/* Ajaxリクエスト-----------------------------------------------------*/

add_action('wp_enqueue_scripts', 'add_custom_script');

function add_custom_script() {
	wp_enqueue_script('custom-script', get_template_directory_uri().'/js/admin-javascript.js', array('jquery'), null, true);
    wp_localize_script('custom-script', 'custom_vars', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('custom-nonce'),
		'post_id' => get_the_ID() //投稿IDをローカライズ
	));
}


/* Ajax用いいねカウンター関数-------------------------------------------------*/
function ajaxFavCount(){
		
	$post_id = $_POST['postId'];
	$result = get_post_meta($post_id, 'sent_count', true);
	$result = $result +1;

    echo $result; 
    die();
	
}

add_action( 'wp_ajax_favcount', 'ajaxFavCount' );
add_action( 'wp_ajax_nopriv_favcount', 'ajaxFavCount' );

ヘッダータグ内

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

HTML(Body もしくはフッタータグ内など)

<script>

jQuery(function($) {
    // フォーム送信ボタンがクリックされたときの処理
    $('#cf7_webclapform').submit(function(event) {
        // クリックイベントをキャンセル
        event.preventDefault();
		        
        // フォームデータからサーバへ送信するデータを作成
        var fd = new FormData(this);
        
        // フォーム送信ボタンが含まれる投稿のIDを取得
        var postId = custom_vars.post_id;

        // 投稿IDをフォームデータに追加
        fd.append('postId', postId);
		
		// function.phpから処理を行いたい関数を指定
        fd.append('action' , 'favcount' );
        
        // Ajaxの通信
        $.ajax({
            type: 'POST',
            url: custom_vars.ajaxurl,
            data: fd,
            processData: false,
            contentType: false,
            success: function(response) {
                $("#fav_point_pc").html(response);
            },
            error: function(response) {
                $("#fav_point_pc").html("error");
            }
        });
        return false;
    });
});
</script>

　これらのコードは前回作成したContactForm7のフォームやそれを動かす為の関数があることを前提として作成しています。
　また、これらのコードを正しく動作させる為にフォームや数値を表示させたいエリアに専用のIDを追加しておく必要があります。
　

各コードの内容・解説

　ここからは上記のコードについての具体的な説明です。
　私と同じようにプログラミング初心者でコードの使い方や設置場所などわからないよ！という方は参考にしてください。

　但し、私もプログラミング初心者ですので、コードの内容を正確に理解できているかわかりません。間違った解説をしている可能性も大いにあります。上手く動作しなかったらごめんなさい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

　ではまずこちらから。
　これはJavaScriptのライブラリの一つであるjQueryの本体です。とりあえずこれを記述しておかないと折角作ったプログラムも動作してくれないので、何もわからなくても入れておきましょう。

　記述する場所はヘッダータグ内(<head>と</head>の間)です。
　また、「3.7.1」の部分はライブラリのバージョンにあたる部分で、この記事を書いている現在(2024.4.26)見つけられた最新のものを使用していますが、もし古くなっている場合は最新のものに書き換えた方がよいと思われます。

　次に function.php に記述した関数を一つずつ。

/* Ajaxリクエスト-----------------------------------------------------*/

add_action('wp_enqueue_scripts', 'add_custom_script');

function add_custom_script() {
	wp_enqueue_script('custom-script', get_template_directory_uri().'/js/admin-javascript.js', array('jquery'), null, true);
    wp_localize_script('custom-script', 'custom_vars', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('custom-nonce'),
		'post_id' => get_the_ID() //投稿IDをローカライズ
	));
}

　これは必要なjsファイルや関数を読み込んでいる。のだと思います。たぶん。
　【/js/admin-javascript.js】の部分は最初別のファイルが指定されていたのですが、コンソールでエラーが出続けていたので、色々試してエラーにならないファイルに書き換えました。

　【’post_id’ => get_the_ID()】はワードプレスで用意されている投稿IDを取得する為の関数をJavaScriptでも使えるようにしています。
　投稿IDの取得は前回もかなり手こずった箇所だったのですが、今回もまたここで躓いて解決するまでかなりの時間を要しました…。これができないとその投稿が何回いいねされたかわからないので一生完成しません。大事です。

/* Ajax用いいねカウンター関数-------------------------------------------------*/
function ajaxFavCount(){
		
	$post_id = $_POST['postId'];
	$result = get_post_meta($post_id, 'sent_count', true);
	$result = $result +1;

    echo $result; 
    die();
	
}

add_action( 'wp_ajax_favcount', 'ajaxFavCount' );
add_action( 'wp_ajax_nopriv_favcount', 'ajaxFavCount' );

　次の関数は、実際にAjaxでどのような処理をするのか、の部分です。
　ここではブラウザから送られてきたデータの中から投稿IDを抜き出し、既にサーバー側に保管されているデータの中から一致するIDの【いいねされた回数】を取得。それに1を加算してブラウザ側に返す。…という処理を行っています。

　関数の下にあるのは、関数を呼び出す為のアクションフックです。
　ワードプレスにログインしている人用と、ログインしていない人用の二つを用意していないとダメらしいです。

<script>

jQuery(function($) {
    // フォーム送信ボタンがクリックされたときの処理
    $('#cf7_webclapform').submit(function(event) {
        // クリックイベントをキャンセル
        event.preventDefault();
		        
        // フォームデータからサーバへ送信するデータを作成
        var fd = new FormData(this);
        
        // フォーム送信ボタンが含まれる投稿のIDを取得
        var postId = custom_vars.post_id;

        // 投稿IDをフォームデータに追加
        fd.append('postId', postId);
		
		// function.phpから処理を行いたい関数を指定
        fd.append('action' , 'favcount' );
        
        // Ajaxの通信
        $.ajax({
            type: 'POST',
            url: custom_vars.ajaxurl,
            data: fd,
            processData: false,
            contentType: false,
            success: function(response) {
                $("#fav_point_pc").html(response);
            },
            error: function(response) {
                $("#fav_point_pc").html("error");
            }
        });
        return false;
    });
});
</script>

　最後はブラウザ側での処理を記述したJavaScriptコードです。
　ここで、特定のIDを持つフォームの送信ボタンが押されたら、フォームに記入された内容と投稿IDをサーバー側へ渡し、それを受け取ったサーバーから数値が返ってきたら指定した箇所の数値を書き換える…　という処理を行っています。

　このスクリプトを先に記述したjQueryの本体以下に記述することで動作します。
　私の場合はワードプレスのウィジェット機能を使って、コンタクトフォームのショートコードのすぐ下に記述しました。

　サーバー側に送る情報を変えたいとか、返ってきた値を表示させたいエリアを変更する場合はここを編集します。

　ここからは細かい点ですが、見落とすと正しく処理が行われないので注意して欲しい箇所についてです。

①コンタクトフォームにformIDを追加する
　コンタクトフォームで作ったフォームに専用のIDを追加します。IDの名前は上記で記述したスクリプト内のものと一致していないと正しく処理が行われません。
　上記コードをそのままコピペする場合は【cf7_webclapform】になります。

　コンタクトフォームにIDを追加するには、フォーム用のショートコード内に【 html_id”××××” 】という形式で記述します。

［contact-form-7 id="×××××××" title="××××××" html_id="cf7_webclapform"］

↑のコードは両端の［］が全角になっていますのでこのまま記述するとエラーになります。コピペする場合は半角に修正してお使いください。

②数値を表示させたいエリアにもIDをつけておく
　いいねされた回数を表示させたい箇所にもIDをつけておきます。これもスクリプト内のIDと一致していないと正しく処理が行われませんので注意してください。
　上記コードをそのままコピペする場合は【fav_point_pc】になります。

　私の場合は<div>タグを使って表示させる場所を作りましたので、以下のように記述しています。

<div id="fav_point_pc">17</div>

③デスクトップ版とレスポンシブ版を作る
　ここまでの内容でデスクトップのブラウザでは正常に動いていることが確認できたのですが、レスポンシブ表示…　つまりスマホなどで表示した場合、どうしても正しく処理が行われないという問題が発生しました。
　これについてはchatGPTさんにも協力してもらってかなり時間をかけて原因を探ったのですが、結局明確な原因を見つけることはできず、仕方なくデスクトップ版とレスポンシブ版の二つのフォームを作成することで無理矢理に問題を解決しました。

　コンタクトフォームの管理画面からフォームを複製し、↑①と②のところで設定したformIDと表示エリア用のIDをデスクトップ版とは違うものにしておきます。
　また、JavaScriptのコードもレスポンシブ版専用のものを作成し、ウィジェットのモバイル表示用テキストエリアを使って記述しておきます。

　これでデスクトップとレスポンシブ、どちらでも正常に動作確認ができるようになります。
　もしこれ以外にもっと簡単な解決法がありましたらコメント等で教えていただけると大変ありがたいです！　是非よろしくお願いします！