今回は前回の記事で紹介したポップアップを何回クリックされたかをカウントして、ダッシュボード上で確認できるようにする方法です。
ページ遷移がなくカウントを発火させるのに詰まったので、残しておきます。
カスタム投稿の内容をポップアップで表示させる方法
HTMLとJavaScriptのコードは基本的に前回の記事と同じものを使いますが、21行目を下記コードに変更して、どの記事がクリックされたかを認識します。
<button id="countBtn" class="popupBtn" data-modal-link="link-<?php the_ID(); ?>" data-post-id="<?php echo get_the_ID(); ?>">ボタン</button>
JavaScriptとfunctions.phpにコピペでOK!カスタム投稿のクリック数をカウントしてダッシュボードに閲覧数を表示する方法
少し長くなりますが、結論となるコードを。
//==== クリック数カウント ====
//ボタンクリックを検出し、サーバーに送信する
// HTMLドキュメントの読み込みが完了した後に関数を実行するイベントリスナーを設定します。
document.addEventListener('DOMContentLoaded', function() {
// ドキュメントからすべての '.popupBtn' クラスを持つ要素(ボタン)を選択します。
let buttons = document.querySelectorAll('.popupBtn');
// 選択されたボタンのリストに対してループ処理を行います。
buttons.forEach(function(button) {
// 各ボタンにクリックイベントリスナーを追加します。
button.addEventListener('click', function() {
// クリックされたボタンから 'data-post-id' 属性の値を取得し、変数に格納します。
let postId = this.getAttribute('data-post-id');
// 新しい XMLHttpRequest オブジェクトを作成します。
let xhr = new XMLHttpRequest();
// XMLHttpRequest を使用して POST メソッドのHTTPリクエストを開始します。
xhr.open('POST', '/wp-admin/admin-ajax.php', true);
// リクエストのヘッダーにコンテンツタイプを設定します。
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// リクエストが完了したときに実行される関数を定義します。
xhr.onload = function() {
// リクエストのステータスが 200(成功)の場合、処理を実行します。
if (this.status === 200) {
// コンソールに成功メッセージを表示します。
console.log('Button click counted for post ID ' + postId);
}
};
// リクエストを送信します。送信するデータにはアクション名と投稿IDを含めます。
xhr.send('action=count_button_click&post_id=' + postId);
});
});
});
上記コードをjsに追記、下記コードはfunctions.phpに記載します。
//==== クリック数カウント・表示 ====
//AJAXリクエストを処理し、カウントを保存
// handle_button_click関数を定義します。この関数はAJAXリクエストを処理します。
function handle_button_click() {
// $_POST['post_id']が設定されているか確認します。
if (isset($_POST['post_id'])) {
// $_POSTからpost_idを取得し、変数$post_idに格納します。
$post_id = $_POST['post_id'];
// 投稿のメタデータから現在のボタンクリックカウントを取得します。
$count = get_post_meta($post_id, 'button_click_count', true);
// カウントが存在する場合はインクリメントし、そうでない場合は1に設定します。
$count = $count ? $count + 1 : 1;
// 更新されたカウントを投稿のメタデータとして保存します。
update_post_meta($post_id, 'button_click_count', $count);
}
// AJAX処理を終了し、余計な出力を防ぐためにwp_dieを呼び出します。
wp_die();
}
// WordPressのAJAXアクションフックにhandle_button_click関数を登録します。
// ログインしているユーザー向けのAJAXアクションです。
add_action('wp_ajax_count_button_click', 'handle_button_click');
// WordPressのAJAXアクションフックにhandle_button_click関数を登録します。
// ログインしていないユーザー向けのAJAXアクションです。
add_action('wp_ajax_nopriv_count_button_click', 'handle_button_click');
//管理画面の投稿一覧にカスタムカラムを追加
// カスタムカラムを追加するための関数を定義します。
function add_custom_columns_to_dflip($columns) {
// 新しいカラムを追加します。キーはカラムのID、値は表示するタイトルです。
$columns['button_click_count'] = 'Click Count';
// 変更したカラムの配列を返します。
return $columns;
}
// 'manage_dflip_posts_columns' フィルターを使って、上記の関数を登録します。
// これにより、dflipタイプの投稿一覧にカスタムカラムが追加されます。
add_filter('manage_dflip_posts_columns', 'add_custom_columns_to_dflip');
// カスタムカラムに情報を表示するための関数を定義します。
function display_button_click_count_in_dflip_column($column, $post_id) {
// 表示するカラムが 'button_click_count' の場合に処理を行います。
if ($column == 'button_click_count') {
// 投稿メタデータからクリックカウントを取得します。ない場合は '0' を使用します。
$click_count = get_post_meta($post_id, 'button_click_count', true) ?: '0';
// クリックカウントをエスケープして表示します。
echo esc_html($click_count);
}
}
// 'manage_dflip_posts_custom_column' アクションフックを使って、上記の関数を登録します。
// これにより、dflipタイプの投稿一覧のカスタムカラムにデータが表示されます。
add_action('manage_dflip_posts_custom_column', 'display_button_click_count_in_dflip_column', 10, 2);
長い。もう少し短く書けたりするんですかね?
先輩コーダーさん、有識者の方、ご意見よろしくお願いします!