WordPress

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

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

『Simple GA Ranking』プラグインを使って、人気記事ランキングを表示する方法の紹介です。

人気記事をランキングで表示する方法として、『Populer Posts』や『Jetpack』を利用した方法もありますが、サーバー負荷が高い為オススメしません。『Simple GA Ranking』はランキングのデータをGoogleAnalyticsから持ってくるためサーバー負担が軽いのが特徴です。

人気記事ランキングを作る下準備

まずは、『Simple GA Ranking』プラグインをインストール有効化しましょう。

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

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の設定画面

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

GoogleAPIのプロジェクトを作成

GoogleAPIのプロジェクトを作成

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

新しいプロジェクト

新しいプロジェクト

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

ハンバーガーメニューからライブラリへ

ハンバーガーメニューからライブラリへ

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

Google Analytics API

Google Analytics APIをクリック

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

Google Analytics APIを有効にする

Google Analytics APIを有効にする

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

OAuth同意画面

OAuth同意画面

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

OAuth同意画面の設定

OAuth同意画面の設定

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

認証情報を作成

認証情報を作成

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

OauthクライアントIDの作成

OauthクライアントIDの作成

『ウェブアプリケーション』にチェックを入れ、『名前』に適当な名前を入れます。

コールバックURL

コールバックURL

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

OAuth クライアント作成完了

OAuth クライアント作成完了

Simple GA Rankingの設定画面

Simple GA Rankingの設定画面

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

Googleアカウントにログイン

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

スポンサーリンク

コメント欄

    • ビッグふぃ~るど@ solar-nenkin.com
    • 2023/01/04

    はじめまして、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側の仕様などが変更された結果、このようになっているものと推測していますが、この問題の解決の方法をもしお分かりでしたら、ご教示頂けると助かります。何卒よろしくお願いいたします。

    • ビッグふぃ~るど@ solar-nenkin.com
    • 2023/01/04

    度々すみません、先のコメントで xxxxxxxxx.com と表記していますが、このコメントで既に身元を「ビッグふぃ~るど@ solar-nenkin.com」と明かしていてほとんど意味がないのでw、xxxxxxxxx.com = solar-nenkin.com であることを付記しておきます。

    • ビッグふぃ~るど
    • 2023/01/05

    何度もお騒がせして恐縮です。本件、解決しました!
    Simple GAランキングの設定について他のサイトを調べたところ、

    OAuthの公開ステータスが「テスト」のままだったのが原因で、「アプリを公開」にしてから「トークンを取得」すると無事に認証が通りました。

    大変失礼しました。

コメントを書く

RELATED POST

関連記事

NEW POST

新着記事はこちら

プロフィール

プロフィール画像

ヨッシー

ゲーム・アニメ好きなWEBデザイナー。特にブログの方向性はありません。今気になった事を適当に記事にしています。

アクセスランキング