WordPress
【WordPress】人気の記事ランキングを『Simple GA Ranking』で表示する!

『Simple GA Ranking』プラグインを使って、人気記事ランキングを表示する方法の紹介です。
人気記事をランキングで表示する方法として、『Populer Posts』や『Jetpack』を利用した方法もありますが、サーバー負荷が高い為オススメしません。『Simple GA Ranking』はランキングのデータをGoogleAnalyticsから持ってくるためサーバー負担が軽いのが特徴です。
人気記事ランキングを作る下準備
まずは、『Simple GA Ranking』プラグインをインストール有効化しましょう。

Simple GA Ranking
有効化が完了すると画面上部に

Simple GA Ranking is available OAuth2 authorization. Please set on setting panel. ClientLogin is no longer available. Please see this link
と出てくるので『setting panel』をクリックしましょう。

Simple GA Rankingの設定画面
『Simple GA Ranking』の設定画面に行きましたら、GoogleAPIのOAuth認証が必要になりますので『Google API Console』をクリックします。
OAuth認証を簡単に説明すると『GoogleAnalytics』のデータを使う為に鍵を手に入れる感じです。

GoogleAPIのプロジェクトを作成
画面上部にある、『プロジェクトを作成』をクリック。

新しいプロジェクト
『プロジェクト名』に適当な名前を入れて『作成』をクリック。『~ranking』とかで良い気がします。

ハンバーガーメニューからライブラリへ
プロジェクトの作成が出来たら、左上の『GoogleAPI』のロゴの左にあるハンバーガーメニューをクリックして、『APIとサービス』→『ライブラリ』をクリックします。

Google Analytics APIをクリック
一番左下にある『GoogleAnalytics API』をクリック。

Google Analytics APIを有効にする
『有効にする』をクリックして、Google Analytics APIを使える状態にします。

OAuth同意画面
有効化が完了しましたら、左上の『GoogleAPI』ロゴをクリックし、左メニューの『OAuth同意画面』をクリックして出てくる画面で『外部』にチェックを入れ『作成』をクリック。

OAuth同意画面の設定
『アプリケーション名』に適当な名前を付けて、『承認済みドメイン』に『Simple GA Ranking』を使うサイトのドメインを入れて、画面下部の『保存』をクリック。

認証情報を作成
左メニューの『認証情報』をクリック。画面上部にある『認証情報を作成』をクリックすると出てくる『OauthクライアントID』をクリック。

OauthクライアントIDの作成
『ウェブアプリケーション』にチェックを入れ、『名前』に適当な名前を入れます。

コールバックURL
『承認済みのリダイレクト URI』には『Simple GA Ranking』設定画面のコールバックURLを入れます。全て入力が終わったら『作成』をクリック。

OAuth クライアント作成完了

Simple GA Rankingの設定画面
完了画面に出てきた、『クライアントID』と『クライアントシークレット』を『Simple GA Ranking』の設定画面にコピペして、『トークンを取得』をクリック。

Googleアカウントにログイン
使いたいGoogleAnalyticsのアカウントをクリックします。

このアプリは確認されていません
『このアプリは確認されていません』と出ますが、『詳細』をクリックし、自分の作ったアプリ名の『(安全ではないページ)に移動』をクリック。

権限の付与
権限の内容を確認してから、『許可』をクリック。もう一度確認されますが『許可』をクリック。
当たり前ですが、自分の作ったアプリ名以外は許可しないでください。

サイトの設定
『Simple GA Ranking』の設定画面に戻ると、『サイトの設定』という項目が増えていると思います。サイトで使いたいAnalyticsのデータにチェックを入れて、最下部の『保存』をクリックしましょう。
これで、『Simple GA Ranking』で人気記事ランキングを表示する下準備は完了です。
人気記事ランキングの表示方法
表示する方法はSimple GA Ranking本家サイトで紹介されています。
<?php
if (function_exists('sga_ranking_get_date')) {
$ranking_data = sga_ranking_get_date();
if ( !empty( $ranking_data ) ) {
echo '<ol>';
foreach ( $ranking_data as $post_id ) {
echo '<li><a href="' . esc_attr(get_permalink($post_id)) . '">' . esc_html(get_the_title($post_id)) . '</a></li>';
}
echo '</ol>';
}
}
?>
上記コードを人気記事ランキングを表示したいテーマに記述すればサムネイル無しの記事タイトルだけのランキングの完成です。
私の場合は、カテゴリでの絞込とサムネイル画像がほしかったので、yosiakatsuki様が公開しているコードを使用させていただいています。
<?php
if ( function_exists( 'sga_ranking_get_date' ) ) {
$sga_args = array(
'display_count' => 10, //10件表示
'period' => 30, //過去30日のデータ
);
/**
* 投稿 or カテゴリーアーカイブページならカテゴリーで絞り込む
*/
if ( is_single() || is_category() ) {
$cat_slug = array();
$cat_list = array();
/**
* 絞り込み対象のカテゴリー一覧を作成する
*/
if ( is_single() ) {
$cat_list = get_the_category();
} else {
$cat = get_queried_object();
$cat_list[] = $cat;
$children = get_term_children( $cat->term_id, 'category' );
foreach ( $children as $cat_id ) {
$cat_list[] = get_category( $cat_id );
}
}
foreach ( $cat_list as $cat ) {
$cat_slug[] = $cat->slug;
}
/**
* カテゴリーslugを指定して絞込
*/
$sga_arg_cat = array(
'category__in' => implode( ',', $cat_slug )
);
/**
* 条件結合
*/
$sga_args = wp_parse_args( $sga_arg_cat, $sga_args );
}
/**
* ランキングデータ取得
*/
$ranking_data = sga_ranking_get_date( $sga_args );
/**
* ランキング作成
*/
if ( ! empty( $ranking_data ) ) {
echo '<ol>';
foreach ( $ranking_data as $post_id ) {
echo '<li><a href="'. esc_url_raw( get_permalink( $post_id ) ) .'"><div class="thumbnail">'. get_the_post_thumbnail( $post_id, 'image60' ) . '</div><p>' . esc_html( get_the_title( $post_id ) ) . '</p></a></li>';
}
echo '</ol>';
}
}
wp_reset_postdata();
?>
これをCSSでちょちょいとやれば、人気記事ランキングの完成です。

人気記事ランキング
人気の記事ランキングの作り方まとめ
GoogleAPIのOAuth認証が少し手間ですが、一回やってしまえば終わりなので頑張りましょう。
『Simple GA Ranking』は軽いのはもちろん、表示方法も自分で好きな様にカスタムできるので、自分の思った通りにコードを書きたい人には非常にオススメできるプラグインです。
スポンサーリンク
コメント欄
はじめまして、Google Pagespeed Insightsのスコアを上げようとしていて、Jetpackの統計情報の代わりにSimple GA Rankingを使う方向で色々調べていたところ貴サイトに辿り着きました。
ご説明がたいへん分かり易かったので、こちらの手順に従って設定を進めていたところ、「『このアプリは確認されていません』と出ますが、…」の箇所では、当方の設定では、次のようにアクセス拒否を示すエラーメッセージがGoogleで表示されて、そこから先に進めません:
___________________________________________________________________________
アクセスをブロック: xxxxxxxxx.com は Google の審査プロセスを完了していません
xxxxxxxxx.com は Google の審査プロセスを完了していません。このアプリは現在テスト中で、デベロッパーに承認されたテスターのみがアクセスできます。アクセス権があると思われる場合は、デベロッパーにお問い合わせください。
xxxxxxxxx.com のデベロッパーの場合は、エラーの詳細をご確認ください。
エラー 403: access_denied
___________________________________________________________________________
たぶん、ここが最後のステップでこれさえクリアできれば、設定が完了してSimple GAランキングを使えるようになると思うのですが。。。
で、上記エラーの「デベロッパー」というのは自分なんですが、何か承認か許可のようなことを自分でするか、もしくかGoogleに依頼するかとかすれば、このアクセス拒否をクリアできるのでしょうか?
貴殿よりもSimple GA Ranking開発元に尋ねる方が適切なのかもしれないですし、2年ほど経過する間にGoogle側の仕様などが変更された結果、このようになっているものと推測していますが、この問題の解決の方法をもしお分かりでしたら、ご教示頂けると助かります。何卒よろしくお願いいたします。
度々すみません、先のコメントで xxxxxxxxx.com と表記していますが、このコメントで既に身元を「ビッグふぃ~るど@ solar-nenkin.com」と明かしていてほとんど意味がないのでw、xxxxxxxxx.com = solar-nenkin.com であることを付記しておきます。
何度もお騒がせして恐縮です。本件、解決しました!
Simple GAランキングの設定について他のサイトを調べたところ、
OAuthの公開ステータスが「テスト」のままだったのが原因で、「アプリを公開」にしてから「トークンを取得」すると無事に認証が通りました。
大変失礼しました。
コメントを書く