ITTI STAFF
BLOG

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

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

WordPressのアクセスが多い人気記事をランキング表示できるプラグイン「Simple GA Ranking」の設置から表示、画像の表示方法です。

Google Analyticsからのデータを参照してランキング表示するため、事前にGoogle Analyticsが設定済みでアクセスデータが蓄積されている事が、プラグイン利用の条件となります。

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同意画面に情報を入力していきます。 アプリケーション名やドメインなどは必須となります。
  14. 認証情報の「OAuthクライアントID」を設定します。画像の手順で進めます。
  15. アプリケーションの種類は「ウェブアプリケーション」を選択します。 「認証済みのリダイレクトURL」には、WordPressの「Google Analytics設定」のコールバックURLをペーストします。

    ※マルチブログの場合は「認証済みのリダイレクトURL」を追加していくとOKです。
  16. 表示されたOAuthクライアントのIDとシークレット情報が表示されます。
  17. WordPressのGoogle Analytics設定にクライアントIDと、クライアントシークレットをペーストして「トークンを取得」ボタンをクリックします。
  18. Googleアカウントの認証画面が表示されるので、ユーザーを選択します。
  19. ユーザー選択から認証でエラーとなる場合は下記の手順で進めます。
  20. 「許可」をクリックします
  21. 再度確認してきますので「許可」ボタンをクリックします。
  22. WordPressのGoogleAnalytics設定画面で、取得するAnalyticsを選択して「保存」ボタンをクリックします。
  23. 以上で設定は完了です。

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

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

  • 「OAuth同意」に時間がかかっているため、しばらく経過してから「トークン取得」を行うと大丈夫です。
  • クライアントIDや、シークレットキーをコピペする時に無駄な空白スペースが無いかを確認してください。
  • 他のプラグインとコンフリクトしている場合があります。
    プラグイン「Revive Old Posts」とコンフリクトすることが確認できます。

ランキングを表示する

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

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

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制作会社イッティ