人気記事ランキングのプラグイン「Simple GA Ranking」【WordPress】

2020-06-04
プラグイン

ブログやWebサイトに人気記事ランキングを表示させるプラグイン「Simple GA Ranking」を追加しました。専門用語がよくわからず、何度かエラーも起こしたので、ここで設定方法をまとめておきたいと思います。

Simple GA Rankingについて

Google Analytics(アナリティクス)のアクセス解析と連動し、自動的にページのランキングを表示してくれるプラグインです。Simple GA RankingはWordPressのランキング表示プラグインよりも動作が軽いらしく、ページの読み込み速度改善のために導入している人も多いのだそう。

私が使っているWordPressの無料テーマ「yStandard」でもSimple GA Rankingを推奨していたので、早速入れてみることにしました。

Simple GA Rankingの設定方法

正直、普通のプラグインの導入よりもハードルは高いです。設定手順がちょっとややこしいので、最初に流れを説明します。

  1. Simple GA Rankingプラグインをインストールし、有効化
  2. setting panel(Analytics設定)からGoogle API Consoleへ移動
  3. Analytics APIでプロジェクトを作成
  4. クライアントIDとシークレットを入力
  5. トークンの取得で完了

一番ややこしいのが「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;

ランキング順位の数字の位置も上に持ってきたいなぁ。。あんまりいじって干渉エラー吐かれると怖いので、ちょっと様子見。間違いないのかどうかも謎なので、任意で使ってくださいね。

モバイルバージョンを終了