WordPressで非ログインでも使える「いいね」ボタンを実装する方法【Ajax＋Cookie対応】

<?php

/**
 * 記事詳細ページに「いいね」機能を追加
 * - Ajaxで投稿ごとのいいね数を保存・削除
 * - ログイン不要で使用可能
 */

// Ajax アクションの登録（非ログインユーザー対応含む）
add_action('wp_ajax_nopriv_add_like', 'handle_add_like');     // いいね追加（非ログイン）
add_action('wp_ajax_add_like', 'handle_add_like');             // いいね追加（ログイン中）

add_action('wp_ajax_nopriv_remove_like', 'handle_remove_like'); // いいね削除（非ログイン）
add_action('wp_ajax_remove_like', 'handle_remove_like');         // いいね削除（ログイン中）

// いいねを追加する処理
function handle_add_like()
{
	//記事のIDを取得
	$post_id = isset($_POST['post_id']) ? (int) $_POST['post_id'] : 0;
	if (!$post_id || get_post_status($post_id) === false) {
		wp_send_json_error('Invalid post ID'); // 投稿IDが無効な場合、エラーを返す
	}

	// いいねの数を増やす
	$current = (int) get_post_meta($post_id, 'like_count', true);
	$new = $current + 1;
	update_post_meta($post_id, 'like_count', $new);

	wp_send_json_success(['likes' => $new]);
}

// いいねを削除する処理（トグル対応）
function handle_remove_like()
{
	//記事のIDを取得
	$post_id = isset($_POST['post_id']) ? (int) $_POST['post_id'] : 0;
	if (!$post_id || get_post_status($post_id) === false) {
		wp_send_json_error('Invalid post ID');	 // 投稿IDが無効な場合、エラーを返す
	}

	// いいねの数を減らす
	$current = (int) get_post_meta($post_id, 'like_count', true);
	$new = max(0, $current - 1); // カウントが0未満にならないように制限
	update_post_meta($post_id, 'like_count', $new);

	wp_send_json_success(['likes' => $new]);
}

<?php
// 現在の投稿IDを取得
$post_id = get_the_ID();
// いいね数を取得（デフォルトは0）
$likes = get_post_meta($post_id, 'like_count', true) ?: 0;
?>

<div class="p-like-button-wrap js-like-button-wrap" data-post-id="<?php echo esc_attr($post_id); ?>">
	<button class="p-like-button js-like-button" <?php if (isset($_COOKIE["liked_$post_id"])) echo 'disabled'; //二重クリック防止 ?>>
		<span class="p-like-button__icon">
			<svg height="16.352" viewBox="0 0 20.595 16.352" width="20.595" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
				<path d="m10.31 3.2a5.359 5.359 0 0 1 5.309-3.2c2.821 0 4.976 1.874 4.976 4.134 0 2.729-1.872 4.745-3.8 6.6-1.847 1.772-5.54 4.867-6.489 5.62h-.051c-.945-.754-4.613-3.854-6.455-5.623-1.928-1.853-3.8-3.868-3.8-6.597 0-2.302 2.231-4.134 5-4.134a5.313 5.313 0 0 1 5.258 3.2z" />
			</svg>
		</span>
		<span class="p-like-button__count js-like-count"><?php echo esc_html($likes); ?></span>
	</button>
</div>

<?php
if (is_single()) :
?>
	<?php
	// JavaScript からアクセスする WordPress の Ajax エンドポイント（admin-ajax.php）を変数に代入----------
	// JavaScript より前に出力しておく必要がある
	$ajax_url = esc_url(admin_url('admin-ajax.php'));
	?>

	<script>
		// いいねボタンの処理（ページ読み込み後に実行）
		document.addEventListener('DOMContentLoaded', function() {
			const ajaxUrl = "<?php echo $ajax_url; ?>";

			// すべての .js-like-button に対して処理を設定
			document.querySelectorAll('.js-like-button').forEach(button => {
				const wrapper = button.closest('.js-like-button-wrap');
				const postId = wrapper.dataset.postId;
				const cookieKey = `liked_${postId}`;

				// すでにいいね済みかをクッキーで判定し、クラスを追加
				const hasLiked = document.cookie.includes(`${cookieKey}=true`);
				if (hasLiked) button.classList.add('is-liked');

				// ボタンのクリックイベント（いいねのトグル）
				button.addEventListener('click', function() {
					const isCurrentlyLiked = document.cookie.includes(`${cookieKey}=true`);
					const actionType = isCurrentlyLiked ? 'remove_like' : 'add_like';

					// Ajax リクエスト送信
					fetch(ajaxUrl, {
							method: 'POST',
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							body: `action=${actionType}&post_id=${postId}`
						})
						.then(res => res.json())
						.then(data => {
							if (data.success) {
								// カウント表示を更新
								button.querySelector('.js-like-count').textContent = data.data.likes;

								if (actionType === 'add_like') {
									// クッキーを1年間保存 ※連続クリックを防ぐため
									document.cookie = `${cookieKey}=true; path=/; max-age=31536000`;
									button.classList.add('is-liked');
								} else {
									// クッキー削除（max-age=0）
									document.cookie = `${cookieKey}=false; path=/; max-age=0`;
									button.classList.remove('is-liked');
								}
							}
						});
				});
			});
		});
	</script>

<?php endif; ?>

.p-like-button {
  margin-top: 100px;
  cursor: pointer;
  display: flex;
  align-items: center;
  background-color: transparent;
  font-size: 1.5rem;
  font-weight: 500;
  color: #9f9f9f;

  &__icon {
    margin-right: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #dbdbdb;
    border-radius: 50%;

    svg {
      fill: #fff;
      width: 20px;
      height: auto;
    }
  }

  // 二重クリック防止処理対応の時のスタイル
  &:disabled {
    opacity: 0.5;
    cursor: default;
  }

  // クリック時のスタイル
  &.is-liked {
    color: #d13e5c;

    .p-like-button__icon {
      svg {
        fill: #d13e5c;
      }
    }
  }
}