【WordPress】Simple GA RankingをWP REST APIで呼び出せるようにする

Simple GA RankingというGoogle Analyticsと連携して人気記事ランキングを表示してくれるWordPressプラグインがあります。

自前のDBでアクセス数をカウントするわけではなくAnalytics APIを利用するため、サーバー負荷が少なくて済むというのがこのプラグインの良いところです。

そんな素晴らしいプラグインなのですが、AMPページでAPIを叩いて動的に記事一覧を取得するamp-listでランキングを呼び出そうとしたところ、デフォルトではREST APIのエンドポイントは用意されていないようでした。

プラグインのコードの中身を見てみるとREST APIに対応するような開発もされていた痕跡があったのですが、現時点の最新版（WordPress ver 5.3・プラグイン ver 2.0.11の時点）ではどうやら対応していないみたいでした。

と、いうことで自前でエンドポイントを追加して実装してみました。

WP REST APIのエンドポイントを追加する

functions.phpにAPIのエンドポイントを追加する記述を書きます。

今回は「ranking」という名前のエンドポイントを作ります。

下記、サンプルコードです。

//SIMPLE GA RANKIG用のエンドポイントを追加
if (function_exists('sga_ranking_get_date')) {
	add_action('rest_api_init', function() {
		register_rest_route( 'wp/v2', '/ranking', array(
			'methods' => 'GET',
			'callback' => 'get_ranking',
		));
	});
	function get_ranking() {
		$json = array();
		$args = array(
			'display_count' => 10, //取得件数
			'period'        => 7, //集計期間
			'post_type'     => 'post', //投稿タイプ
		);
		$ranking_data = sga_ranking_get_date($args);
		if (!empty( $ranking_data )):
			$rank = 0;
			foreach ($ranking_data as $post_id):
				$rank++;
				$title = get_the_title($post_id);
				$link = get_permalink($post_id);
				$thumbnail = array();
				$thumbnail_id = get_post_thumbnail_id($post_id);
				if($thumbnail_id) {
					$img = wp_get_attachment_image_src( $thumbnail_id, 'thumbnail' );
					$thumbnail = array($img[0],$img[1],$img[2]);
				} else {
					$thumbnail = array(get_template_directory_uri() .'/img/noimage.png', 600, 600);
				}
				array_push($json, array(
					"rank" => $rank,
					"title" => $title,
					"link" => $link,
					"thumbnail" => $thumbnail,
				));
			endforeach;
		endif;

		return $json;
	}
}

APIを叩く

下記、amp-listでランキング記事一覧をGETする場合のサンプルコードです。

<amp-list
	width="auto"
	height="500"
	layout="flex-item"
	src="<?php echo $home_url; ?>/wp-json/wp/v2/ranking"
	items="."
	binding="no"
	noloading
>
	<template type="amp-mustache">
		<div class="item">
			<a href="{{link}}" class="item__link">
				<div class="item__rank">{{rank}}</div>
				<div class="item__thumbnail">
					<amp-img layout="responsive" src="{{thumbnail.0}}" width="{{thumbnail.1}}" height="{{thumbnail.2}}" alt="{{title}}" class="item__thumb__img"></amp-img>
				</div>
				<h3 class="item__title">{{title}}</h3>
			</a>
		</div>
	</template>
</amp-list>

まとめ

今回僕が実装したようにAMPページで利用したり、あるいはWP REST APIを利用したJAMStackなサイトでSimple GA Rankingを使いたいという場合などでも今回の手法が使えるのではないでしょうか？

エンドポイントの追加のやり方を覚えておくと、応用で色々とカスタマイズができると思いますよ！