ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

人気記事ランキング「Simple GA Ranking」の設定とカスタマイズ方法

WordPressの人気記事を表示するプラグイン「Simple GA Ranking」の設置から表示、画像の表示方法です。アクセスが多いサイトでもサーバ負担が軽いプラグインです。

ワードプレスの人気記事を表示するプラグインといえば「Populer Posts」が定番でしたが、アクセスが多い場合はサーバ負担が大きいため、サーバ負担の軽い「Simple GA Ranking」へ変更するケースが増えています。

Simple GA Rankingの主な特徴

  • ランキングデータはデータベースではなく、GoogleAnalyticsを参照するためサーバに負担をかけない。
  • カテゴリーごとのランキング表示も可能。
  • 1日のランキング、30日間のランキングなど任意のランキング期間を設定できます。
  • Top10や、Top30など、ランキング表示件数も任意で設定できます。
  • ランキング表示のカスタマイズも簡単。
  • マルチサイトにも対応しています。
  • GoogleAnalyticsのAPIを利用するため、設定に手間がかかる。 (クライアントワークの場合は事前にGoogleAnalyticsのユーザーに追加されておく必要があります)

Simple GA Rankingの設定方法

  1. まずはプラグイン「Simple GA Ranking」をインストール。有効化しておきます。
  2. WordPressのサイドバーの設定に「Google Analytics設定」が表示されるので「Google Analytics」の設定を進めていきます。
  3. 設定画面の「Google API Console」をクリックすると、Google APIに遷移します。
  4. Google APIの画面で「プロジェクトの作成」をクリックします。
  5. プロジェクト名を入力して「作成」をクリックします。プロジェエクト名は何でも良いです。
  6. 「ハンバーガーメニュー」をクリックして「APIとサービス」→「ライブラリ」と進みます。
  7. APIライブラリから「Analytics API」をクリックします。
  8. Analytics APIを有効にします。
  9. 「認証情報を作成」をクリックします。
  10. 「クライアントID」をクリックします。
  11. 「同意画面を設定」をクリックします。
  12. OAuth同意画面に情報を入力して保存します。メールアドレスと、ユーザーに表示するサービス名は必須となります。
  13. 認証情報を作成するため「認証情報を作成」をクリックして「OAuthクライアントID」をクリックします。
  14. アプリケーションの種類は「ウェブアプリケーション」を選択します。 「認証済みのリダイレクトURL」には、WordPressの「Google Analytics設定」のコールバックURLをペーストします。
    ※マルチブログの場合は「認証済みのリダイレクトURL」を追加していくとOKです。
  15. 表示されたOAuthクライアントのIDとシークレット情報が表示されます。
  16. WordPressのGoogle Analytics設定にクライアントIDと、クライアントシークレットをペーストして「トークンを取得」ボタンをクリックします。
  17. Googleアカウントの認証画面が表示されるので、ユーザーを選択します。
  18. 「許可」ボタンをクリックします。
  19. WordPressのGoogleAnalytics設定画面で、取得するAnalyticsを選択して「保存」ボタンをクリックします。
  20. 以上で設定は完了です。

トークン取得でエラーになる場合

「トークン取得」でエラーになる原因としては下記があります。

  • 「OAuth同意」に時間がかかっているため、しばらく経過してから「トークン取得」を行うと大丈夫です。
  • クライアントIDや、シークレットキーをコピペする時に無駄な空白スペースが無いかを確認してください。

ランキングを表示する

オフィシャルにランキング表示のコードや、パラメータが記載されています。

今回は画像とカスタムフィールドも表示させてみます。

PHP
<?php
    $args = array(
        'display_count' => 10, //10件表示
        'period' => 30, //30日間のデータからランキング
        'post_type' => 'post' //記事のみ );
    $ranking_data = sga_ranking_get_date($args);
    if ( !empty( $ranking_data ) ):
        echo '<ol>';
        foreach ( $ranking_data as $post_id ): ?>
        <li>
        <a href="<?php echo get_permalink($post_id); ?>">
        <h3><?php echo get_the_title($post_id); ?></h3>
        <p><?php echo get_post_meta($post_id, 'カスタムフィールド名', true); ?></p>
        <figure>
        <?php if (has_post_thumbnail()) : ?>
        <?php the_post_thumbnail('thumbnail'); ?>
    <?php else : ?>
        <img src="<?php bloginfo('template_url'); ?>/no-img.gif" /> //アイキャッチ画像が無い場合
    <?php endif ; ?>
        </figure>
        </a>
        </li>
<?php
    endforeach;
    echo '</ol>';
    endif;
    wp_reset_postdata();
?>

カテゴリーのランキングを表示したい

オフィシャルでも説明していますが「category_in」を利用することでカテゴリーごとのランキングを表示させることができます。

カテゴリーのスラッグが「book」であればarrayに挿入すればOKです。

PHP
    $args = array(
        'display_count' => 10, //10件表示
        'period' => 30, //30日間のデータからランキング
        'post_type' => 'post' //記事のみ
        'category__in' => 'book' //カテゴリーを指定

ランキング表示を50件にしたのに30件しか表示されない

記事数が1,000件以上もあるにも関わらず、ランキング表示を50件にしても30件前後しか表示されない場合があります。

この場合、フィルターフックでAnalyticsからのデータ取得を増やすと50件表示されます。

下記のコードを「functions.php」に記述するとOKです。

PHP
<?php add_filter( 'sga_ranking_limit_filter', function($limit) { return 300; } ); ?>  //データ300件取得

Simple GA RankingはGoogleAPIの設定に少し手間が掛かりますがサーバに負担が無く、画像やカスタムフィールドなどの表示カスタマイズも簡単なため、ランキング表示プラグインとしてお薦めです。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ