ページ表示速度を低下させずに人気記事ランキングが作成できるWordPressプラグイン「Simple GA Ranking」の設定と使い方をご紹介します。
人気記事ランキング作成用のWordPressプラグインといえば、WordPress Popular Post が有名ですが、このプラグインは重いのでページ表示速度が低下するという欠点があります。
Simple GA Rankingは、Googleアナリティクスのデータを使って軽快に動作するので、ページ表示速度を低下させずに人気記事ランキングを作成することができます。
ランキングの集計期間や記事の表示数も自由に変更可能で、コードのパラメータをいじって固定ページを含めることや、カテゴリを絞り込んだ表示、さらにカスタマイズによってサムネイル画像を表示させることも可能です。
いわしブログでもSimple GA Rankingをカスタマイズして、サイドバーに設置した週間人気記事ランキングにサムネイル画像を表示させています。
Googleアナリティクスのデータを使うためには、事前にGoogle API の設定が必要になります。少し面倒ですが、この記事に従って設定すれば大丈夫ですよ。
あと、当然ながらSimple GA Rankingは、Googleアナリティクスを設置しているサイトでないと使えないのでご注意を。
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」というメッセージが表示されます。
メッセージ内のリンク「setting panel」をクリックしてください。
Analytics API プロジェクト作成
次に「Google Analytics設定」に移りますが、その前にコールバックURLをコピーしておいてください。このURLは後ほどOAuth クライアントIDの取得で必要になります。
続いて「Google API Console」をクリックしてAPIの設定に移りますが、互いにURLやIDのコピペが必要なので、両方の画面を開いて設定すると便利です。
Googleアカウントでログインします。アカウントが複数ある場合は、Simple GA Rankingを設置するサイトのGoogleアナリティクスに紐付いたものを選択してください。
Googleの利用規約に同意してください。「利用規約」にチェックを入れ、「最新情報をメールで通知」のどちらかを選んで「承諾」をクリックします。
まず最初にGoogle API 管理画面の「プロジェクトを作成」をクリックしてください。
「新しいプロジェクト」でプロジェクト名を入力して「作成」をクリックします。
新しいプロジェクトが追加されました。追加されない場合は、ページを再読込してください。
Analytics API を有効化
続いてAnalytics API を有効化します。作成したプロジェクトをクリックします。
プロジェクト「iwashiblog-ranking」の権限から左上のメニューを開きます。
メニュー内の「APIとサービス」から「ダッシュボード」をクリックします。
ダッシュボードから「APIとサービスの有効化」をクリックします。
APIライブラリの一覧が表示されるので、下の方にある「Analytics API」をクリックします。
「有効にする」をクリックして、Analytics API を有効化します。
Analytics API 認証情報を追加
次に、Analytics API 認証情報を追加します。ここで手順を間違えると、Analytics APIとプラグインとの連携に失敗するので注意してください。
Analytics API の概要上部に「このAPIを使用するには、認証情報が必要になる可能性があります。」というメッセージが表示されているので、「認証情報を作成」をクリックします。
「プロジェクトへの認証情報の追加」から認証情報を設定します。
使用するAPIは「Analytics API」、APIを呼び出す場所は「ウェブブラウザ(Javascript)」、アクセスするデータの種類は「ユーザーデータ」を選択して、「必要な認証情報」をクリックします。
次に、OAuth2.0 クライアントIDを作成しますが、ここでは2つ注意点があります。入力したURLは認識に少し時間がかかります。右側にゴミ箱アイコンが表示されたらOKです。
あと、承認済みのJavaScript生成元は、下層部分を入れずに入力してください。いわしブログは2層のディレクトリ構造ですが、ドメインの部分だけ入力します。
正しい：https://wind-mill.co.jp
間違い：https://wind-mill.co.jp/iwashiblog/
名前は好きなものを入力、承認済みのJavaScript生成元は設置するサイトのURLを、承認済みのリダイレクトURLは先程コピーしたコールバックURLを貼り付けて、「OAuth クライアントIDを作成」をクリックします。
貼り付けるリダイレクトURLは、ここでコピーしたコールバックURLです。
続いて、OAuth2.0 同意画面の設定です。メールアドレスはそのまま使用、ユーザーに表示するサービス名も好きなように入力して「次へ」をクリックします。
最後の認証情報ダウンロードですが、ここはスルーしてそのまま「完了」します。
Analytics API クライアントIDとトークン取得
最後にOAuth2.0 クライアントIDを取得して、Simple GA Rankingとの連携を行いましょう。まずは作成したクライアントID名をクリックします。
ウェブアプリケーションのクライアントIDとクライアントシークレットをコピーします。
Simple GA Rankingに戻り、クライアントIDとコンシューマーシークレットに貼り付けて「トークンを取得」します。
ここも注意点があります。IDとシークレット入力の際は、スペースが入らないようにしてください。文字列をコピーした時に、前後にスペースが付いていると認証エラーになります。
アカウントの選択から、表示されたドメインに紐付いたアカウントでログインします。
Googleアカウントのリクエストを「許可」してください。
「トークンの取得に成功しました」と表示されたら、Google APIとの連携成功です。
サイトの設定で人気記事ランキングを表示させるアカウントを選びます。複数ある場合は、選択を間違えるとランキングが表示されないのでご注意を。
人気記事ランキングの表示と設定
人気記事ランキングをサイトに表示する方法は3つあり、「ウィジェット」を使う、「ショートコード」を使う、テーマファイルにコードを記述する方法があります。
コードにはパラメータを含めることが可能で、ランキング表示数や期間だけでなく、固定ページ追加、カテゴリの絞り込み、投稿タイプやタクソノミーも選択できます。
また、フィルターフックを使えば、ランキング表示のカスタマイズを行うこともできます。
詳しい設定方法は、Simple GA Rankingのプラグイン公式ページを参照してください。
まずはランキング集計期間と表示数を設定します。ダッシュボード左から「設定」→「Simple GA Ranking」に進み、各項目に数値を入れて設定します。
期間は月間ランキングであれば30日、週間であれば7日で設定します。表示数はランキングのスペースと、表示させる場所との兼ね合いで決めてください。
ウィジェットでランキング表示
まずはウィジェットを使って、サイドバーにランキングを表示させてみます。
ダッシュボード左「外観」→「ウィジェット」に進み、「Simple GA Ranking 」のウィジェットをサイドバー領域にドラッグドロップします。あとは好きなタイトルを入れて「保存」すればOKです。
ライブプレビューで見ると、ちゃんとランキングが表示されていますね。
ショートコードでランキング表示
ランキングの表示方法は、他にもショートコードを使う方法や、関数を使う方法があります。
ショートコードの場合は、ランキングを表示させたい場所に［sga_ranking］ショートコードを設置すればOKです。一例として、カテゴリーを「wordpressプラグイン」に限定した以下のランキングを表示させてみます。
ショートコードの作成ですが、集計期間は7日、表示数は5、カテゴリーを「wordpressプラグイン」に限定したパラメータを追記して、表示させたい場所に貼り付けます。
[sga_ranking period="7" display_count="5" category__in="wordpress-plugin"]
ウィジェットなら簡単にランキングを設置できますが、ショートコードを使えば、カテゴリや投稿タイプ、タクソノミーの表示など、さらなる設定が可能になります。
関数でランキング表示
「sga_ranking_get_date()」は、テーマファイルにコードを記述してランキングを表示するための関数です。テーマ内のランキングを表示させたい場所に以下の関数を記述します。
この関数もパラメータが使えるので、上のショートコードと同じ表示条件を設定しました。表示数は5、集計期間は7日、カテゴリーは「wordpressプラグイン」限定です。
<?php
$args = array(
'display_count' => 5,
'period' => 7,
'category__in' => 'wordpress-plugin'
);
$ranking_data = sga_ranking_get_date($args);
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>';
}
}
?>Simple GA Ranking のカスタマイズ
Simple GA Ranking は、フックの使用やCSSの追記によって、ランキング表示をカスタマイズすることが可能です。
また、使用テーマによってはCSSで表示を修正する必要があります。ランキング表示のタグは「ol」ですが、いわしブログでは順位が表示されなかったので、CSSで修正しました。
#sidebar ol{
list-style: decimal;
padding-left:2em;
font-size:0.85em;
}フォントサイズを下げて、タイトルの長さも調整しています。カスタマイズに使うclass名ですが、olタグは「.sga-ranking」、liタグは「.sga-ranking-list」となっています。
また、ランキングのタイトル前後をカスタマイズできるフィルターフックがあるので、これを用いて記事のサムネイルを表示するといったことも可能です。
Simple GA Ranking まとめ
Simple GA Rankingは設置までの手順が少し難しいからか、同じ人気記事ランキング作成プラグイン「WordPress Popular Post」ほどの人気はありません。
しかし、WordPress Popular Postは動作が重くてサーバーに負担がかかるため、ページ速度向上のために外すべきプラグインとして挙げられることも多いです。
Simple GA Rankingはカスタマイズ性が高く、何より軽快に動作するので、ページ表示速度を低下させないことが大きなメリットです。
WordPressで人気記事ランキングを作成するなら、WordPress Popular Postよりも軽快に動作する「Simple GA Ranking」をオススメします。
