【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』は軽いのはもちろん、表示方法も自分で好きな様にカスタムできるので、自分の思った通りにコードを書きたい人には非常にオススメできるプラグインです。