Simple GA Ranking を使って人気記事を表示してみた

2018年6月7日

ブログのカスタマイズって楽しいですよね。

まだまだ当サイトの記事数は少ないしFacebookの知り合いくらいしか見ていないですが，人気記事を表示させてみたいと思って，いろいろと調べてみました。

Simple GA Ranking

「WordPress Popular Posts」を利用するのが定番らしいのですが，なかなか重たい（サーバーに負荷をかける）プラグインという情報もちらほら。他にないかと探していて見つけたのが，「Simple GA Ranking」を利用するというもの。Google Analyticsを利用していることが前提のようですが，おそらく多くの皆さんが利用されていることでしょう。

さっそくプラグインをインストールして作業してみました。ちなみに，WordPressもPHPも理解できていないド素人が試した内容なので，間違いがあればこっそり教えてください……。

インストールと有効化

「Simple GA Ranking」で検索して，インストールを行って有効化。おそらく説明不要でしょう。

Google Analytics APIの取得

この作業，正直言って面倒くさいです。それでも，他のサイトを参考に作業を行っていたら何とかできました。「Simple GA Ranking」で検索すれば，この作業の詳細を説明してくれるブログ記事を見つけることができます。

つまづいたところといえば，最後の「トークンを取得」してGoogleでの「許可」ボタンをクリックするところ。何度やっても失敗するので，やっぱりダメかなとあきらめそうになりました。

ふと思い出したのが，セキュリティプラグインの「IP Geo Block」。これを無効化してやってみたら，無事？に完了しました。終わったら，ちゃんと有効化しておきましょう。

人気記事としてサイドバーに表示

「Simple GA Ranking」ウィジェットが用意されているのですが，記事タイトルがテキストで並んでいるだけです。せっかくなので，新着記事と同じようにサムネイルも表示させたく処理を作成しました。

下のブログ記事を参考にしました。こちらのブログも「Luxeritas」を利用しているらしく，とても参考になりました。

PHPとCSS，いずれも「Luxeritas」を使用していることを前提に作成しています。

PHP

<div id="sga-rank">
<?php if (function_exists('sga_ranking_get_date'))
$ranking = sga_ranking_get_date();
$args = array(
'post__in' => $ranking,
'posts_per_page' => 5,
'orderby' => 'post__in',
'ignore_sticky_posts' => true,
);
$my_query = new WP_Query($args);
if($my_query->have_posts()):
while ($my_query->have_posts()) : $my_query->the_post(); ?>

<div class="toc clearfix">
<div class="term"><a href="<?php the_permalink() ?>"><?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<?php the_post_thumbnail( 'thumb100' ,array( 'alt' =>get_the_title())); ?>
<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="<?php the_title(); ?>" width="100" height="100" />
<?php endif; ?></div>
<div class="excerpt"<?php if( !empty( $thumbnail ) ) echo ' style="padding:0 10px"'; ?>>
<p class="new-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<p><?php
echo apply_filters( 'thk_excerpt_no_break', 40 );
?></p>
</div>
</div>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div>

記事の抜粋が不要だったら，以下の部分を削除すればいいです。そもそも，Luxeritas独自のフィルターフックが使われているので……。
<p><?php
echo apply_filters( 'thk_excerpt_no_break', 40 );
?></p>

CSS

何も考えず，Luxeritasの新着記事におけるCSSを真似しました。というより，#thk-new を #sga-rank に置き換えただけですね。

/* Simple GA Ranking */
#sga-rank {
	margin: -10px 0 0 0;
}
#sga-rank .term img,
#sga-rank .term amp-img {
	margin: 0 10px 0 0;
	padding: 1px;
	width: 100px;
	height: 100px;
}
#sga-rank .excerpt p {
	margin: 0;
	padding: 0;
	font-size: 12px; font-size: 1.2rem;
	line-height: 1.4;
}
#sga-rank p.new-title {
	font-size: 14px; font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.4;
	padding: 0;
	margin: 0 0 14px 0;
	text-decoration: none;
}
#sga-rank .toc {
	padding: 15px 0;
	border-bottom: 1px dotted #ccc;
}
#sga-rank .toc:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-style: none;
}

それから，下のブログ記事を参考にしてプラグインを使わずウィジェットでPHPコードを動かすという方法で仕上げました。

順位の表示

記事の順位については興味がないけど，どんな感じに表示されるのか気になったので設定してみました。参考にしたのは下のブログ記事。CSSの値は，そのまま使っちゃています。


#sga-rank {
	counter-reset: number;
}
#sga-rank .term {
	position: relative;
}
#sga-rank .term:before {
	counter-increment: number;
	content: counter(number);
	position: absolute;
	top: 0;
	left: 0;
	width: 1.6em;
	height: 1.6em;
	line-height: 1.6em;
	font-size: 12px;
	color: #fff;
	text-align: center;
	background: rgba(244,87,63,.85);
	z-index: 1;
}

z-indexの仕様（positionとの関係）を理解していなかったので，なかなか苦労したことは内緒です。

最後に

人気記事の表示は，こんな感じです。
こんな感じで表示されました

こんな感じで，ド素人でもなんとか形になりました。

プラグインの設定時に「IP Geo Block」を無効化して対応したので，その後の集計がちゃんとできているかは不明です。とりあえず，人気記事を表示することができたことに満足して終わります……。

WordPress

Posted by MSD