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

プラグイン
スポンサーリンク

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

 

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

  1. Simple GA Ranking
  2. Google Analytics Post Pageviews

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

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

 

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

スポンサーリンク

こんな感じになるよ

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

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

 

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

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

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

作業の流れ

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

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

functions.php は、うっかりぶっこわしちゃうとブログが表示されなくなっちゃうんで、バックアップしといてね(´・∀・`)

Google API の設定

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

ワードプレスの人気記事表示プラグイン「Simple GA Ranking」の設定とサムネイル表示
WordPressで人気記事表示のプラグインといえば、何と言っても「WordPress Popular Posts」。それでもこのプラグイン、実はサーバーのアクセスに結構負担をかけているようです。 私の運営するブログで、以前ある記事がYahooからリンクされてアクセスが集中した時に(1時間・・・

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 as Google.

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

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

を追加します。

 

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

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

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

設定はお好みで( ´∀`)bグッ!

New2018/01/07 追記

PV の取得数に上限があるのか、時々Googleアカウントのエラーになっちゃうことがあります。再接続すれば表示されるんだけど、めんどくさいなぁ( ´Д`)=3 フゥ
New2018/02/06 追記
「Display the Views column in Posts list」にチェックを入れると、投稿一覧で View の数を表示できるようになって便利なんですけど、これがかなり重い処理みたいで、投稿一覧を開くのが大変になります。チェックはしない方がいいかもしれません。

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」をサイドバーに置いてみると、アイキャッチとタイトル文字が一緒に表示されているはずっ!

New2017/12/28 追記

ソースの最後に謎のごみコードが入ってたので修正しました。

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

CSS でレイアウト調整

/************************************
** GoogleAnalytics
************************************/
ol.sga-ranking {
	counter-reset: pupular-ranking;
}
 
li.sga-ranking-list {
	position: relative;
	padding: 0px 0px 5px 0px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #2098a8;
    border-right: 1px solid #2098a8;
    border-radius: 5px;
}

li.sga-ranking-list:before {
	background: none repeat scroll 0 0 #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 から乗り換えも検討してみてね(´∀`)

ぱきち
ぱきち

じゃ、またねぇ


うつ病|適応障害|ADHD疑惑|ゲーム好き|体調不良|サラリーマン引退|ゲームライター|専業主夫|仮想通貨で火傷
ぱきちをフォローする
関連記事
関連記事
プラグイン
スポンサーリンク
ぱきちをフォローする
ぱきちゃんねる

コメント

  1. あお より:

    これ使えませんよ。functions.phpで必ず真っ白になります

    • ぱきち より:

      あおさん

      functions.php の最後にゴミが混じってました(`ー人ー´)ゴメンナサイ
      修正したので、今度は動くんじゃないかと・・・。

      それでもおかしい場合は、「$ret = “」以降が改行されていたら、一行にしてみてください。
      プラグインでソースを表示させているんですが、なぜか改行が入っちゃうみたいで。

  2. よかばい より:

    functions.phpを更新しようとすると「何かうまくいかなかったようです。変更が保存されていないかもしれません。手動で修正し、FTP 経由でファイルをアップロードすることもできます。」と出ます。
    また、FTP経由でファイルをアップロードしてもエラーになるんですけど、なにが悪いのでしょうか?

    • ぱきち より:

      よかばいさん

      WordPress 4.9 でエラーチェックの機能が追加されているので、その影響だと思います。
      私も WordPress からは更新ができなかったので、FTP でアップロードしましたが、そのときは正常に更新ができました。

      同様の現象について記載している記事がありました。
      https://goo.gl/zR2FCT

      可能性として考えられるのは、
      『Simple GA Ranking』
      『Google Analytics Post Pageviews』
      の 2 つのプラグインが入っていないか、有効になっていないか。

      また、functions.php に問題があるかもしれないので、こちらのソースを確認してみます。