ブログやWebサイトに人気記事ランキングを表示させるプラグイン「Simple GA Ranking」を追加しました。専門用語がよくわからず、何度かエラーも起こしたので、ここで設定方法をまとめておきたいと思います。
目次
Simple GA Rankingについて
Google Analytics（アナリティクス）のアクセス解析と連動し、自動的にページのランキングを表示してくれるプラグインです。Simple GA RankingはWordPressのランキング表示プラグインよりも動作が軽いらしく、ページの読み込み速度改善のために導入している人も多いのだそう。
私が使っているWordPressの無料テーマ「yStandard」でもSimple GA Rankingを推奨していたので、早速入れてみることにしました。
Simple GA Rankingの設定方法
正直、普通のプラグインの導入よりもハードルは高いです。設定手順がちょっとややこしいので、最初に流れを説明します。
- Simple GA Rankingプラグインをインストールし、有効化
- setting panel（Analytics設定）からGoogle API Consoleへ移動
- Analytics APIでプロジェクトを作成
- クライアントIDとシークレットを入力
- トークンの取得で完了
一番ややこしいのが「3」です。私はもう設定し終わった手前、解説するのが難しいので、導入と設定に役立った外部サイトを紹介しておきますね。
人気記事表示プラグイン「Simple GA Ranking」の設定方法。
ここが一番分かりやすかったような気がする。
途中、私がつまづいた場所をダイジェストで紹介していきます。
OAuth 同意画面（同意画面を設定）のユーザーは「外部」を選択？
Simple GA Rankingのチュートリアルにも解説サイトにも載っていなかったのが「OAuth 同意画面」というところで選択するユーザーの種類。実際に載っているのはUser typeだったかな？外部と内部と2択する場面があったんですが、ここでは外部しか選択できないようになってたので、外部を選択しました。今だにこれが何だったのか分かってません。
「このアプリは確認されていません」エラーと対処法
一番最後の最後、「トークンの取得」ボタンを押して終わりって時に、警告メッセージで「このアプリは確認されていません」という表示が出てしまいました。
この場合の対処法は「詳細」リンクをクリックし、次に出てくる「（安全ではないページ）に移動」リンクをクリックし、次の画面で「許可」を選択すれば上手くいきました。
Simple GA Rankingがウィジェットに表示されない（解決済み）
Simple GA Rankingは、ウィジェットに入れる場合はコードとかを追加しなくてもそのまま使えるものです。設定が成功した段階で、ウィジェット一覧に「Simple GA Ranking」という項目が追加されているので、それをウィジェットに入れるだけ。
なのに、表示されない。
一旦設定もクリアし、特にエラーも出ていないようなのにウィジェットに表示されない場合は、何かのエラーが出ているか、設定を間違えている可能性があります。すぐには表示されないとの声もあるので、時間の問題？設定から約2時間が経過中ですが、反応なし。
原因を色々調べてみたところ、下記のどれかに該当するかもしれないとのこと。
- 設定後すぐには表示されない
- サイトの設定で選択するアカウントが間違えている
- サイトに紐づくアカウントでAPI登録ができていない
- ランキング表示の日数と件数の値がおかしい
- API設定のところで何か間違えている
設定は多分間違えてないはずなので、時間の問題かな？と思い、待ってみることにしましたが、「Simple GA Ranking設定」のところでちょっと気になっていた「Debug Mode」のチェック。ここのチェックを一度有効にしてみることに。
すると、表示されました！デバッグモードって何だろう？通常はバグを発見するためのモードですよね？なんかしっくりこないけど、とりあえず表示されたからよしとよう。
でも、ページをリロードするたびに順位が変わるから、多分これ合ってないですよね？ランダム？もう少し様子をみることにします。
とりあえず今はデバッグモードでランキングを表示している次第です。何かのプラグインと不具合でも起きてるのかな？誰かわかる方いたらコメントください。
Simple GA Rankingをサムネイル表示にする
ついでにSimple GA Rankingにサムネイルを表示させるコード実装をやったので、共有しておきます。何もしてないデフォルトの状態は左のように文章のみですが、やはりせっかくのサムネイル画像も表示させたいですよね。
ということで、私もPHPのことはよく分かっていませんが、「Simple GA Rankingでサムネイルを簡単に表示する方法」というサイトの力を借りて、ちょっとカスタマイズしていきます。
リンク先に載っている「AMPに対応させる」コードをベースに、サムネイルのサイズとStyleをいじりました。このサイトに実装したコードはこちらです。
functions.phpに入れるコード（外観 > テーマエディター > functions.php）
//サムネイル登録（サイズを100→260に変え、正方形に。※ウィジェットのサイズに変更すればOK）
add_theme_support('post-thumbnails');
add_image_size('thumb260',260,150,true);
//サムネイル生成
function sga_ranking_thumb_4536($thumbnail, $id) {
$post_url = get_permalink($id);
$title = get_the_title($id);
$thumbnail = '';
if( has_post_thumbnail( $id ) ) {
$post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $id ) , 'thumb100' );
$post_thumb_url = $post_thumb[0];
$post_thumb_width = $post_thumb[1];
$post_thumb_height = $post_thumb[2];
$img = '<img';
if( function_exists('is_amp') && is_amp()) {
$img = '<amp-img layout="responsive"';
}
$thumbnail = '
'.$img.' src="'.$post_thumb_url.'" alt="'.$title.'" title="'.$title.'" width="'.$post_thumb_width.'" height="'.$post_thumb_height.'">
';
}
return $thumbnail;
}
add_filter('sga_ranking_before_title', 'sga_ranking_thumb_4536', 10, 2);
そして、Styleはこちら。
style.cssに入れるコード（外観 > テーマエディター > style.css）
.sga-ranking-list figure {
width: 260px; /* 画像の横の長さ。自由に変更可 /
height: 150px; / 画像の縦の長さ。自由に変更可 */
}
.sga-ranking-list {
margin: 0.8rem 0;
padding-bottom: 0.8rem;
border-bottom: 1px solid #e1e1e1;
}
.sga-ranking-list::after {
clear: both;
content: "";
display: block;
}
.sga-ranking-list:last-child {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.sga-ranking-list figure a {
display: inline;
}
.sga-ranking-list a {
overflow: hidden;
text-decoration:none;
}
content: "";
です。
具体的には、横並びだった画像とタイトルをブロック化（上下2段）にし、タイトルリンクの下線を消し、画像サイズを大きくしました。
ただ、一つ問題点があって、画像のトリミングができていないんですよね。アイキャッチで登録したサイズのまま（横幅は指定サイズでいけてる）表示されてしまうんです。
「overflow: hidden;」も効かないし、「object-fit: cover;」も効かなかったので、もう少し粘ります。該当のコードは多分この「height: auto;」だとは思うんですが、、、
amp-img, img, svg {
max-width: 100%;
height: auto;
ランキング順位の数字の位置も上に持ってきたいなぁ。。あんまりいじって干渉エラー吐かれると怖いので、ちょっと様子見。間違いないのかどうかも謎なので、任意で使ってくださいね。