特定のボタンがクリックされた時にカウントアップする機能を設ける方法

以前に以下のページでMatomoを使ってクリック数計測（イベント計測）をする方法を紹介しました。

特定のボタンブロックのクリック数をMatomoのクリックイベント計測を使って解析する方法（例）

この方法を使えば特別なプラグインを使わなくてもクリック計測ができて便利！と思ったのですが、例えばダウンロードコンテンツの場合、合計でいくつダウンロードされたか（クリックされたか）が分からないので、サイト内に累計クリック数のみをひたすらカウントアップして保存すできるコードを書いてみましたので、備忘録を兼ね紹介しておきます。

機能やコードの概要

本ページで紹介するコードは、WordPress標準のボタンブロックを使用してリンクにzip形式のファイルを指定したダウンロードボタンを設置した前提で以下の機能を追加するものです。

1. ボタンブロックに固有の追加CSSクラスを手動で追加する
2. クリックデータはWordPress標準のoptionsテーブルへ1のCSSクラスごとに保存する
3. ボタンクリックに反応して2のデータに1を追加していくjQueryを追加する
4. ショートコードを使って2のデータを任意に呼び出す（累計クリック数を表示させる）

ボタンにIDを加えることでもっと簡単に実装できそうだったのですが、WordPressのブロックエディター上で「特定の〇〇」ができるのは「高度な設定」にある「追加CSSクラス」しかないので、今回はここに追加した特定のCSSクラスに反応させる方法を取りました。

これにより、WordPress標準のボタンブロックと、これまた標準で設定が可能な「追加CSSクラス」でボタンを一意にすることができるため、メンテナンスが楽になり、かつ、同じ追加CSSクラスを持つボタンを複数のページに設置しても1つのダウンロードコンテンツとしてカウントできるようになります。

．．．とこんな機能でよければ頑張って実装してみてくださいね。

累計クリック数をカウントさせるためのコード

コピペで即実装は難しいため、ある程度分かっている方を前提に、解説は少なめにします。

前準備

テーマ内の既存ファイル内へコードを書いていくとかなり長くなるので、別のフォルダを作って実装する環境を作ります。

まずは、有効化しているテーマ内に以下のようなフォルダとファイルを用意します。

次に、有効化しているテーマのfunctions.phpへ以下のコードを追加します。

/* ダウンロードカウント機能の追加 */
include get_theme_file_path( '/download-counts/download-counts.php' );

次に、「download-counts.php」へ以下のコードを追加します。

<?php if ( !defined( 'ABSPATH' ) ) exit;//このファイルへの直接アクセスを禁止

/* スクリプトの読み込み */
function pwcn_download_counts_js_init(){
	wp_enqueue_script(
		'pwcn-download-count',
		get_theme_file_uri('/download-counts/download-counts.js'),
		array('jquery'),
		null,
		array( 
			'strategy'  => 'defer',
			'in_footer' => true,
		)
	);
}
add_action('wp_enqueue_scripts','pwcn_download_counts_js_init');

これで前準備は完了です。

特定の追加CSSクラスに反応してクリックカウントアップさせる機能を実装する

ここからちょっとややこしくなるので理解できない方は断念してください。

この機能はAjaxという、平たく言えばページを再読み込みすることなくデータベースへデータを渡すという措置をします（つまりボタンをクリックしたら何も画面変化することなくデータはデータベースへ送られるようにします）。

Ajaxはデータベースとのやり取りを行うことから、不正なデータが混入されないよう「その場所から確実に送られたデータか？」を検証することがセキュリティ上重要となります。

まずはAjaxを使ったデータのやり取りの基礎コードと、セキュリティ対策(nonceによる検証と言います)用のコードを「download-counts.php」へ追加します。

/* Ajaxのデータを渡す(nonceを含む) */
function pwcn_download_count_ajax_init() {
// AJAX用のデータをJavaScriptに渡す
	wp_localize_script('pwcn-download-count',
		'ajax_object',
		array(
			'ajaxurl' => admin_url('admin-ajax.php'),
			'nonce' => wp_create_nonce('update_click_count_nonce') // CSRF対策
	));
}
add_action('wp_enqueue_scripts', 'pwcn_download_count_ajax_init');

次に、上記のコードに反応して動作をさせるための以下のjQueryを「download-counts.js」へ追加します。

/*** 固有のボタンがクリックされた時の処理 ***/
jQuery(document).ready(function($) {
	const PWCN_click_count_class = '.count-button-a';
	const PWCN_actionFunc = 'pwcn_download_counts_button_a';//ユーザー定義関数

	$(document).off('click', PWCN_click_count_class).on('click', PWCN_click_count_class, function() {
		$.post(ajax_object.ajaxurl, {
			action: PWCN_actionFunc,
			nonce: ajax_object.nonce // CSRFトークンを送信
		}, function(response) {
			if (response.success) {
				// 成功時の処理
					console.log('カウントが更新されました: ' + response.data);
			} else {
				console.error('エラー: ' + response.data);
			}
		});
	});
});

次に、特定のCSSクラスを持つボタンをクリックした時に、jQueryでデータを処理させ、セキュリティ検証を行った上でデータベースのoptionsテーブル内へデータを保存するコードを「download-counts.php」へ追加します。

/***** ボタンクリック時の処理の指示とデータの更新 *****/
function pwcn_download_counts_button_a() {//ユーザー定義関数

//ログインユーザーは除外
//if(!is_user_logged_in()){
	// CSRFトークンの検証
		check_ajax_referer('update_click_count_nonce', 'nonce');

	//オプション名を変数化
		$option_name = 'click_count_data_button_a';//optionsテーブル内のキー

	// 現在のカウントを取得
		$current_count = get_option($option_name, 0);
		$new_count = $current_count + 1;

	// 新しいカウントを更新
		update_option($option_name, $new_count);
    
	// 成功レスポンスを返す
		wp_send_json_success($new_count);
//}
}
add_action('wp_ajax_pwcn_download_counts_button_a', 'pwcn_download_counts_button_a');
add_action('wp_ajax_nopriv_pwcn_download_counts_button_a', 'pwcn_download_counts_button_a');

ここで重要なのは、1つの固有ボタン（クリック時に累計数を更新していくための追加CSSクラスを追加したボタン）に対して、1つのjQueryコード（固有のボタンがクリックされた時の処理）と、1つのPHPコード（ボタンクリック時の処理の指示とデータの更新）が、ユーザー定義関数によって呼応していることです。

上記のコードは各コードで指定すべき値を以下のように指定しています。

• 「pwcn_download_counts_button_a」というユーザー定義関数名
• 「click_count_data_button_a」というデータベースのoptionsテーブルキー
• 「count-button-a」という追加CSSクラス

これにより、「count-button-a」というカスタムCSSクラスのある要素（本ページの場合はボタン）がクリックされた時、セキュリティ検証に問題がなければデータベースのoptionsテーブル内にある「click_count_data_button_a」というキーの値に1を追加しなさいという機能が出来上がります。

ここまで実装できたら、テストページなどにリンクを含むボタンブロックを追加して、「追加CSSクラス」へ「count-button-a」という文字列を追加し、プレビューなどをして、実際にクリックしてみてください。

そして、次項のショートコードを使ってデータをどこかに表示してみてください。

クリックごとに画面をリロードして、ショートコードを入れた箇所の数字が1ずつ大きくなっていれば実装完了です。

カウントアップされない場合は以下の点を確認ください。

• プレビュー画面などボタンを表示している画面で「Ctrl+F5」を押してブラウザキャッシュのクリアをしてから再度ボタンをクリックしてみてください
• ショートコードのoptionパラメーターが「click_count_data_button_a」になっているかを確認してください

それでも動かない場合には、ファイルがきちんと読み込まれているかなどご自身で検証ください。

PHPコード側の「//if(!is_user_logged_in()){」と「}」のコメントアウトを外せばログインユーザーがクリックしてもカウントアップしないようにすることができますので、テスト後はコメントを外しておくといいかも知れません

別のボタンの累計クリック数をカウントさせたいときは

ここまでくれば、PHPコードとjQueryのコードが呼応していることは理解できていると思います。

別のボタンに対して累計クリック数カウントを行う場合にはPHPコードとjQueryコードを複写して、「ユーザー定義関数名」「データベースのoptionsテーブルキー」「追加CSSクラス」を変え、ボタンに応じた追加CSSクラスを指定すればそのボタンの累計クリック数をカウントさせることができます。

「ユーザー定義関数名」は、add_action()の中の「wp_ajax_」「wp_ajax_nopriv_」の後ろと、「,」の後ろに共通して指定する必要があることに注意してください

累計クリック数を表示するショートコードを作る

以下のコードを「download-counts.php」へ追加します。

/*** ショートコードで累計回数を表示 ***/
/* パラメーターでオプション名を指定する */
function pwcn_click_counter_shortcode($atts) {
// デフォルトのパラメーター設定
	$atts = shortcode_atts(array(
		'option' => '', // デフォルトのオプション名
	), $atts);

// オプションの値を取得
	$count = get_option($atts['option'], 0);
    
//クリック数を返す
	return '<p style="text-align:center;margin-top:0;">累計ダウンロード数：' . esc_html($count).'回<p>';
}
add_shortcode('pwcn-click-count', 'pwcn_click_counter_shortcode');

累計クリック数を表示させたい場所へ以下のショートコードを挿入します。

[pwcn-click-count option="オプション名"]

「オプション名」は前項のコードの場合「click_count_data_button_a」（optionsテーブル内のキーのところの値）を入力します。

さいごに（注意点）

ここまで紹介したコードでは、IPアドレスなどを取得したり、Cookieを使ったりしてクリック間隔によってカウントアップを制限するなどの機能は持っていません。

従って、同一の人が複数回クリックした場合にもそのままカウントアップされいくことになります。

これを制限したり管理したりするにはさらにたくさんのコードが必要になり、とても紹介しきれませんので、制限をしたいという方は本ページのコードを基礎としてそれらのコードを自身で追加するようにしてください。