WordPressで人気記事ランキングに “Simple GA Ranking” を使う方法

WordPressの人気記事ランキングを生成するプラグインと言えば “WordPress Popular Posts” が有名ですが、このプラグインはサーバー負荷が高く、記事数やアクセス数が多くなると負荷を無視できなくなってしまいます。そのため、サーバー負荷がより少ない “Simple GA Ranking” に乗り換えてみました。

Simple GA Rankingとは？
Simple GA Rankingの使いかた
1. Google Analytics設定
2. Simple GA Rankingの設定
サイトに掲載するには？
1. ショートコードの作成
2. ウィジェットに貼り付ける

Simple GA Rankingとは？

WordPressのプラグイン “Simple GA Ranking” は、Googleアナリティクスの解析結果を元に人気記事ランキングを生成してくれます。

WordPress Popular Postsは自前でアクセスをカウントする関係上、アクセスごとにデータベースへの処理が発生してしまいます。そのため、アクセスが増えれば増えるほど処理が多くなり高負荷となってしまいます。

しかし、Simple GA RankingはGoogleアナリティクスの解析結果を用いるので、自前でカウントする必要は無く低負荷となっています。

もともと、Googleアナリティクスを使用しているのであれば、そのデータを利用するだけなので合理的でしょう。

Simple GA Rankingの使いかた

Simple GA Rankingを使うためには、Google APIの “クライアントID” と “コンシューマーシークレット” を取得する必要があります。

Google Analytics設定

メニューの “設定” より『Analytics設定』をクリックします。
Google Analytics設定より『Google API Console』をクリックします。

この時、別タブ（別ウィンドウ）で開くと便利です。
Google APIより『プロジェクトを選択』をクリックします。
選択より『＋』をクリックします。
新しいプロジェクトより “プロジェクト名” を入力の上で『作成』をクリックします。
選択より『（作成したプロジェクト）』をクリックします。
Google APIより『Analytics API』をクリックします。

Google APIは “Google Analytics Reporting API” では無くAnalytics APIを選択します。
Analytics APIより『有効にする』をクリックします。
Analytics APIより『認証情報を作成』をクリックします。
認証情報より『クライアントID』をクリックします。
クライアントIDの作成より『同意画面を設定』をクリックします。
認証情報のOAuth同意画面より “ユーザーに表示するサービス名” を必須入力、その他の任意入力し『保存』をクリックします。
クライアントIDの作成より “ウェブアプリケーション” を選択し “名前” と “承認済みのリダイレクトURL”　を入力したら『作成』をクリックします。

承認済みのリダイレクトURLとは、WordPressの “Google Analytics設定” 画面に表示されています。
表示OAuthクライアントより “クライアントID” と “クライアントシークレット” をコピーします。
WordPressのGoogle Analytics設定に戻り “クライアントID” と “クライアントシークレット” を入力し『トークンを取得』をクリックします。

エラー “アカウントを取得できませんでした。” と表示される場合にはGoogle APIの選択で “Google Analytics Reporting API” を選択している可能性があります。
サイトの設定より “統計データを利用するアカウント” を選択し『保存』をクリックします。

Simple GA Rankingの設定

メニューの “設定” より『Simple GA Ranking』をクリックします。
Simple GA Rankingより “本日から何日前までのランキングを表示させるか” と “表示数” を入力し『保存』をクリックします。

サイトに掲載するには？

設定を終え、ウィジェット “Simple GA Ranking” をサイドバーなどに設定すれば、人気ランキングを掲載することができます。ただ、デフォルトだとデザインが少々味気ないので、サイトのデザインに合わせてカスタマイズをオススメします。

今回は例として、当サイトでも利用しているテーマ “Simplicity” での “人気記事” で表示される「サムネイル付きの一覧」を作成してみました。

ショートコードの作成

サムネイル付きの一覧を生成するショートコード “my_ga_ranking” を作成するため、functions.phpに対してコードを追記します。今回は無料のWordPressテーマで御馴染みの “Simplicity2” と “Coccon” で作ってみました。

functions.phpの編集を誤ると、画面が真っ白になって操作不能になるので注意してください。

掲載コードを流用する場合には御自身で充分にテストし自己責任で使用してください。何がおきても一切の責任は負いません。

Simplicity2

add_shortcode('my_ga_ranking', 'exec_my_ga_ranking');
function exec_my_ga_ranking() {
  if (function_exists('sga_ranking_get_date')) {
    $ranking_data = sga_ranking_get_date();
    if ( !empty( $ranking_data ) ) {
      $ret = '';
      $ret .= '<div class="widget_popular_ranking"><ul class="wpp-list">';
      foreach ( $ranking_data as $post_id ) {
        $post_thumb = "";
        if( has_post_thumbnail( $post_id ) ) {
          $post_thumb_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id ),array( 100, 100 ) );
          $post_thumb = $post_thumb_src[0];
        }
        $ret .= '<li><a href="' . esc_attr(get_permalink($post_id)) . '" title="' . esc_html(get_the_title($post_id)) . '" target="_self"><img src="' . $post_thumb . '" width="75" height="75" title="' . esc_html(get_the_title($post_id)) . '" alt="' . esc_html(get_the_title($post_id)) . '" class="wpp-thumbnail wpp_cached_thumb wpp_featured" /></a> <a href="' . esc_attr(get_permalink($post_id)) . '" title="' . esc_html(get_the_title($post_id)) . '" class="wpp-post-title" target="_self">' . esc_html(get_the_title($post_id)) . '</a></li>';
      }
      $ret .= '</ul><div class="clear"></div></div>';
    }
  }

	return $ret;
}

Coccon

add_shortcode('my_ga_ranking', 'exec_my_ga_ranking');
function exec_my_ga_ranking() {
    if (function_exists('sga_ranking_get_date')) {
        $ranking_data = sga_ranking_get_date();
        $ret = '';

        if ( !empty( $ranking_data ) ) {
            $thumb_size = get_new_entries_thumbnail_size(ET_DEFAULT);
            $ret .= '<div class="ga-entry-cards widget-entry-cards no-icon cf' . get_additional_new_entriy_cards_classes(ET_DEFAULT) . '">';

           foreach ( $ranking_data as $post_id ) {
                $title = esc_attr(get_the_title($post_id));
                $permalink = esc_attr(get_permalink($post_id));

                $ret .= '  <a href="' . $permalink . '" class="ga-entry-card-link widget-entry-card-link a-wrap" title="' . $title . '">';
                $ret .= '    <div class="ga-entry-card widget-entry-card e-card cf">';
                $ret .= '      <figure class="ga-entry-card-thumb widget-entry-card-thumb card-thumb">';
                if ( has_post_thumbnail($post_id) ):
                    $ret .= get_the_post_thumbnail( $post_id, $thumb_size, array('alt' => '') );
                else:
                    $ret .= '        <img src="<?php echo get_no_image_320x180_url(); ?>" alt="NO IMAGE" class="no-image ga-entry-card-thumb-no-image widget-entry-card-thumb-no-image" width="320" height="180" />';
                endif;
                $ret .= '      </figure><!-- /.ga-entry-card-thumb -->';
                $ret .= '      <div class="ga-entry-card-content widget-entry-card-content card-content">';
                $ret .= '        <div class="ga-entry-card-title widget-entry-card-title card-title">' . $title . '</div>';
                $ret .= '      </div><!-- /.ga-entry-content -->';
                $ret .= '    </div><!-- /.ga-entry-card -->';
                $ret .= '  </a><!-- /.ga-entry-card-link -->';
            }
            $ret .= '</div>';
        }
        else {
            $ret .= '<p>'.__( '人気記事は見つかりませんでした。', THEME_NAME ).'</p>';
        }
    }

	return $ret;
}