【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で人気記事表示のプラグインといえば、何と言っても「WordPressPopularPosts」。それでもこのプラグイン、実はサーバーのアクセスに結構負担をかけているようです。私の運営するブログで、以前ある記事がYahooからリンクされてアクセスが集中した時に（１時間に３万PVぐらいの集中）、レンタルサ...

tabibitojin.com

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

『Google Analytics Post Pageviews』の設定

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

Google Cloud Platform

GoogleCloudPlatformletsyoubuild,deploy,andscaleapplications,websites,andservicesonthesameinfrastructureasGoogle.

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 から乗り換えも検討してみてね(´∀｀)

ぱきち

じゃ、またねぇ