<?php
/**
 * 記事一覧に GA4 の人気順位を星で表示する
 *
 *   1〜3位：★★★ ／ 4〜10位：★★☆ ／ 11〜30位：★☆☆ ／ 31位以下・ランキング外：表示しない
 *
 * 前提：Backon GA4 Ranking プラグイン（bgr_ga4_get_ranking_ids()）が有効で、GA4 との接続テストが通っていること
 * 格納先：テーマの inc/ga4-rank-stars.php（functions.php から require_once で読み込む）
 *
 * ・集計期間は MY_RANK_STARS_PERIOD（昨日までの○日間）。POPULAR POSTS のページと同じ日数にそろえる
 * ・1ページの中で何回呼んでも、ランキングの取得は最初の1回だけ（static で使い回す）
 *   一覧の記事ごとにランキングを取得すると、記事の数だけ同じ処理をくり返すため
 * ・GA4 への問い合わせはプラグインのキャッシュ（12時間）を使う。ページを開くたびには問い合わせない
 * ・プラグインが止まっているときは何も表示しない（エラーにならない）
 *
 * テンプレートでの使い方（ループの中）：
 *   <?php echo my_ga4_rank_stars(); ?>
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// ★ 集計期間（昨日までの○日間）。POPULAR POSTS のページと同じ日数にする
if ( ! defined( 'MY_RANK_STARS_PERIOD' ) ) {
	define( 'MY_RANK_STARS_PERIOD', 90 );
}

/**
 * 星の HTML を返す（31位以下・ランキング外は空文字）。
 *
 * @param int $post_id 投稿ID。省略時はループ中の投稿。
 * @return string 星の HTML（エスケープ済み）。
 */
function my_ga4_rank_stars( $post_id = 0 ) {
	static $ranks = null;

	// 最初の1回だけランキングを取得して「投稿ID => 順位」の表を作る
	if ( null === $ranks ) {
		$ranks = array();
		if ( function_exists( 'bgr_ga4_get_ranking_ids' ) ) {
			$ids = bgr_ga4_get_ranking_ids(
				array(
					'period' => MY_RANK_STARS_PERIOD,
					'limit'  => 30, // ★ 星を表示するのは30位まで
				)
			);
			foreach ( $ids as $index => $id ) {
				$ranks[ (int) $id ] = $index + 1;
			}
		}
	}

	$post_id = $post_id ? (int) $post_id : (int) get_the_ID();
	$rank    = isset( $ranks[ $post_id ] ) ? $ranks[ $post_id ] : 0;

	// ★ 順位から黒星の数を決める（31位以下・ランキング外は表示しない）
	if ( $rank >= 1 && $rank <= 3 ) {
		$filled = 3;
	} elseif ( $rank >= 4 && $rank <= 10 ) {
		$filled = 2;
	} elseif ( $rank >= 11 && $rank <= 30 ) {
		$filled = 1;
	} else {
		return '';
	}

	// マウスを乗せると順位が表示される（title）。読み上げにも同じ文言（aria-label）
	$label = sprintf( 'POPULAR %d位', $rank );
	$stars = str_repeat( '★', $filled ) . str_repeat( '☆', 3 - $filled );

	return sprintf(
		'<span class="rank-stars" title="%1$s" aria-label="%1$s">%2$s</span>',
		esc_attr( $label ),
		esc_html( $stars )
	);
}

/**
 * 記事一覧の人気順位の星（GA4。Backon GA4 Ranking プラグインを使う）
 * 本体：inc/ga4-rank-stars.php
 * 使わなくなったら、下の1行とテンプレートの my_ga4_rank_stars() をコメントアウトする
 */
require_once get_template_directory() . '/inc/ga4-rank-stars.php';

<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

<h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><?php echo my_ga4_rank_stars(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- 関数内でエスケープ済み ?></h2>

<p class="entry-meta">
	<span><?php the_time( 'Y-n-j' ); ?></span>
	<span><?php the_category( ' ' ); ?></span>
	<?php the_tags( '<span>', ' ', '</span>' ); ?>
</p>

<p class="entry-meta">
	<span><?php the_time( 'Y-n-j' ); ?></span>
	<span><?php the_category( ' ' ); ?></span>
	<?php the_tags( '<span>', ' ', '</span>' ); ?>
	<?php echo my_ga4_rank_stars(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- 関数内でエスケープ済み ?>
</p>

/* ===== ここから CSS（記事一覧の人気順位の星） ===== */
.rank-stars {
	margin-left: 0.4em;      /* ★ タイトル・日付との間 */
	font-family: sans-serif; /* ★☆ が無いフォント（英字専用の Web フォントなど）でも表示されるように、記号は標準のフォントで */
	font-size: 80%;          /* ★ 星の大きさ（周りの文字に対して） */
	font-weight: 400;
	letter-spacing: 0.05em;
	color: inherit;          /* ★ 星の色。周りの文字と同じ。たとえば #3c3c3b のように指定もできる */
	white-space: nowrap;     /* 星3つの途中で折り返さない */
	cursor: default;
}
/* ===== ここまで CSS ===== */