【Simple GA Ranking】にサムネイルと順位とPVを表示してみたよ

『WordPress Popular Posts (以下 WPP)』をつかわずに、人気記事ランキングと PV を表示する方法をご紹介します(＞Д＜)ゝ”

ここで、つかうプラグインは以下の 2 つです。

1. 『Simple GA Ranking』
2. 『Google Analytics Post Pageviews』

この 2 つのプラグインを組み合わせることで、Google アナリティクスで取得した PV を表示できるようになるんッス(´∀｀)

あとは CSS で、ブログに合うように調整すれば完成なのです(　´∀｀)bｸﾞｯ!

それじゃ、いってみよっ！

『Google Analytics Post Pageviews』でこんな感じに表示されるよ

最終的には、こんな表示になります↑

一覧をカードタイプにしているんで、ランキングもカードっぽくしてみました(ﾟ∀ﾟ)

ここで表示されてる PV は、記事ごとの総 PV なんですよ。

『今日の人気記事』なので、本来はデイリー PV を表示すべきなんですよね(； ･`д･´)

でも、デイリー表示にするには、プラグインを編集しないといけなかったのと、それだと数字が少なくて寂しかったんで、いまのところは総 PV を表示しています(∀｀*ゞ)ｴﾍﾍ

『Google Analytics Post Pageviews』設定作業の流れ

1. Google API の設定
2. プラグインの設定
3. functions.php に追記
4. CSS でレイアウト調整

以上の流れで、設定していきます。

Google API の設定

Google API と『Simple GA Ranking』の設定は、下記のサイトの手順どおりで作成できます。

ワードプレスの人気記事表示プラグイン「Simple GA Ranking」の設定とサムネイル表示

WordPressで人気記事表示のプラグインといえば、何と言っても「WordPress Popular Posts」。それでもこのプラグイン、実はサーバーのアクセスに結構負担をかけているようです。 私の運営するブログで、以前ある記事がYah...

tabibitojin.com

Google のデザインが変わっていたので、ちょっと探しちゃいましたが、「Analytics API」で検索かければ見つかるはず(´∀｀)

『Google Analytics Post Pageviews』の設定

『Google Analytics Post Pageviews』では、『Simple GA Ranking』で作成した同じトークンをつかいます。

Google Cloud Platform

Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure ...

console.developers.google.com

Google API の認証情報の「承認済みのリダイレクト URI」に、

『(自分のサイトアドレス)/wp-admin/options-general.php?page=google-analytics-post-pageviews』

を追加します。

あとは、WordPress の設定から『Post Pageviews』を開いて、

1. クライアントID
2. クライアントシークレット

の 2 つを入力すれば、下記のような表示になります(ﾟ∀ﾟ)

設定はお好みで(　´∀｀)bｸﾞｯ!

New：2018/01/07 追記

functions.php に追記

次は、functions.php に必要な処理を追記していきます。

1. 「sga_ranking_before_title」タイトルの前部分にはアイキャッチ画像
2. 「sga_ranking_after_title」タイトルの後部分にはPV 数

の 2 つの処理を入れました。

//Simple GA Ranking
add_filter('sga_ranking_before_title','showRankingImage',10,2);
function showRankingImage($ret, $id) {
	$post_url = get_permalink($id); // 記事のURL
	$title = get_the_title($id); //タイトル
	$ret = "";
	if (has_post_thumbnail($id)) { // アイキャッチ画像の有無
		$post_thumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($id),array(284,160));
		$post_thumb = $post_thumb_src[0];
		$ret = "
<div class='ranking-img'><a href=\"{$post_url}\" title=\"{$title}\"><img src=\"{$post_thumb}\" alt=\"{$title}\" title=\"{$title}\"></a></div>

";
	}
	return $ret;
}

//Post Pageviews
add_filter('sga_ranking_after_title','showPv',10,2);
function showPv($ret, $id) {
	$pv = gapp_get_post_pageviews($id);
	$ret = "

<div class='gapv'>".$pv." views"."<div/>";
	return $ret;
}

この段階で、ウィジェットの「Simple GA Ranking」をサイドバーに置いてみると、アイキャッチとタイトル文字が一緒に表示されているはずっ！

最後に、CSS でランキング表示とレイアウトを調整したら、完成でッス(＞Д＜)ゝ”

CSS でレイアウト調整

/************************************

** GoogleAnalytics

************************************/

ol.sga-ranking {

 counter-reset: pupular-ranking;

 list-style:none;

 padding-left: 0;

}

li.sga-ranking-list {

 position: relative;

 margin: 10px;

 border-top: 1px solid #00a23f;

 border-left: 1px solid #00a23f;

 border-bottom: 1px solid #00a23f;

 border-right: 1px solid #00a23f;

 border-radius: 5px;

}

li.sga-ranking-list:before {

 background-color: #00a23f;

 color: #fff;

 content: counter(pupular-ranking, decimal);

 counter-increment: pupular-ranking;

 font-size: 100%;

 left: 0; top: 0;

 line-height: 1;

 padding: 4px 7px;

 position: absolute;

 z-index: 1;

 border-radius: 5px;

}

div.gapv {

 color: #555;

 font-family: ‘nico’;

 text-align : right;

}

ホントのところ、「div.gapv」じゃなくて「li.sga-ranking-list:after」をつかうつもりだったんですけど、うまく動いてくれなかったので、つかえませんでした(´・∀・｀)

まとめ

WPP は設定が簡単だし、Simplicity の人気記事の表示につかわれていたりと、使いやすいプラグインですね。

「Simple GA Ranking」は、処理が軽くなるのが魅力です。

サイトが重くて開くまで時間がかかる！って人は、WPP から乗り換えも検討してみてね(´∀｀)

ぱきち

じゃ、またねぇ