「Simple GA Ranking」の人気記事にサムネイルと順位を付けてみた

先月のブログリニューアルに伴い、人気記事ランキングの表示に使用するプラグインを「WordPress Popular Posts」から「Simple GA Ranking」へと変更しました。

プラグイン導入に関する記事は検索で見つけやすかったのですが、実際にサムネイル画像付きで表示させる方法については記事数がそれほど多くない印象だったため、当ブログの設定を紹介しようと思います。

*記事投稿時のワードプレス本体のバージョンは4.7.5、「Simple GA Ranking」のバージョンは2.0.9です。

「WordPress Popular Posts」から乗り換えた理由

当ブログでは、約4年近く「WordPress Popular Posts」を利用してきました。特に不自由なく利用していたのですが、色々調べているとサーバーに負担をかけがちなプラグインだということを知りました。

CPUに高負荷がかかり、サーバーからアクセス制限をかけられ、「WordPress Popular Posts」を外すように提案された、というケースを結構目にしました。しかも、当ブログと同じサーバーを利用している方の記事です。

現時点のアクセス数は多くないものの、「このブログも将来はもしかしたら……」なんて淡い期待と不安から、以前より気になっていた「Simple GA Ranking」を導入しようと思い立ったのです。

このプラグインのメリットとして、サーバー負担が軽いことが挙げられます。アクセス数のデータはGoogle Analyticsのものを用いますからね。急激なアクセス増加があっても安心です。

「Simple GA Ranking」の導入

まず前提として、Google Analyticsを利用していることが必要です。また、PHPのバージョンが5.4以上であることが必須です。5.3以下だとエラーメッセージが表示されます。

さて、検索してみると分かるのですが、このプラグインに関して書かれた記事は「WordPress Popular Posts」に比べて非常に少ないです。それはおそらく、導入の面倒臭さに理由があるかと思われます。

GoogleのAnalytics APIと連携し、クライアントIDやらコンシューマシークレットやらを取得し、トークンも取得して……と聞いただけで大変なのが伝わってきます。

しかし、先達は偉大です。画像付きで分かりやすく説明されているブログ記事がありました。

この記事を見ながら作業していけば、特に滞りなくプラグイン導入のための設定を終えることができるかと思います。現に僕も数分でできました。

導入の流れは既に上記のサイトで説明されているため、当ブログでは詳しく書きません。全く同じことを書いてもアレですからね。

人気記事を表示するためのコード

「Simple GA Ranking」のデフォルト表示は記事タイトルの羅列ですが、以下に掲載するコードによってこんな感じに表示することができます。

サムネイル画像、順位、その横に記事タイトルですね。実際はブラウザ幅によって2列表示にしているのですが、コードが長くなってしまうため、1列オンリーと仮定したコードを紹介します。そのため画像のサイズ指定など実際と異なっている点があります。

なお、当ブログではウィジェットを使わず、サイドバーを表示させるPHPファイルに直接記述しています。もしウィジェットを使う場合は、ショートコードを利用するといいかもしれません。次の記事がとても参考になります。

それでは、当ブログで記述しているコードを載せたいと思います。

<div id="popular-wrapper">
<?php if (function_exists('sga_ranking_get_date'))
  $ranking = sga_ranking_get_date();
  $args = array(
  'post__in' => $ranking,
  'posts_per_page' => 20, // 人気記事として表示させる記事数
  'orderby' => 'post__in');
  $my_query = new WP_Query($args);
  if($my_query->have_posts()):
  while ($my_query->have_posts()) : $my_query->the_post(); 
?>
<!-- 分かりやすいように改行していきます -->
<a href="<?php the_permalink() ?>" class="popular-list">
 <div class="popular-left">
 <?php if ( has_post_thumbnail() ): // サムネイルを持っているとき ?>
  <?php the_post_thumbnail( 'obolog_128x128' ,array( 'alt' =>get_the_title() ) ); ?>
 <?php else: // サムネイルを持っていないとき ?>
  <img src="任意の画像のURL" width="64" height="64" alt="<?php echo get_the_title(); ?>" />
  <?php endif; ?>
 </div>
 <div class="popular-right">
  <h5 class="popular-title"><?php echo get_the_title(); ?></h5>
 </div>
</a>
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>
</div>

こんな感じです。HTMLタグの構造やクラス名は「WordPress Popular Posts」で使っていたのをほぼそのまま利用しています。蛇足ですが、そのときはfunctions.phpに次のコードを記述し、ウィジェットを用いて人気記事を表示させていました。

// 蛇足:WordPress Popular Posts利用時のカスタマイズコード
function my_custom_single_popular_post( $post_html, $p, $instance ){
  if ( has_post_thumbnail( $p->id ) ) {
     $thumbnail_id = get_post_thumbnail_id( $p->id );
     $image_src    = wp_get_attachment_image_src( $thumbnail_id , 'obolog_240x160' );   	
     $output = '<a href="' . get_the_permalink($p->id) . '" class="popular-list"><div class="popular-left"><img src="' .$image_src[0]. '" width="120" height="80" alt="' . esc_attr($p->title) . '" /></div><div class="popular-right"><h5 class="popular-title">' . esc_html($p->title) . '</h5></div></a>';
     return $output;
  }
  else {
     $output = '<a href="' . get_the_permalink($p->id) . '" class="popular-list"><div class="popular-left"><img src="省略" width="120" height="80" alt="' . esc_attr($p->title) . '" /></div><div class="popular-right"><h5 class="popular-title">' . esc_html($p->title) . '</h5></div></a>';
     return $output;
  }
}
add_filter( 'wpp_post', 'my_custom_single_popular_post', 10, 3 );

話を戻します。先ほどのコード内にある‘posts_per_page’ => 20,の部分は表示させたい記事数に変えればOKです。10記事ならば‘posts_per_page’ => 10,とします。

「Simple GA Ranking」の設定画面でも記事数の項目があります。

しかし、当ブログではここを「20」としても「18」記事しか表示されなかったのでコードで改めて指定しています。

また、コード内にobolog_128x128とありますが、ここも任意の指定でOKです。僕はfunctions.phpにおいてadd_image_size()で定義したものを指定しています。

add_image_size( 'obolog_128x128', 128, 128, true );

さて、それでは人気記事の表示を整えるCSSの方も載せたいと思います。

#popular-wrapper {
   padding: 16px 15px;
}
.popular-list {
   position: relative;
   display: block;
   padding-bottom: 10px;
   margin-bottom: 10px;
   border-bottom: 1px solid #ddd;
}
.popular-list:last-child {
   padding-bottom: 0;
   border-bottom: 0;
   margin-bottom: 0;
}
.popular-list::after {
   content: "";
   display: block;
   clear: both;
}
.popular-left {
   float: left;
   width: 64px;
   height: 64px;
}
.popular-right {
   padding-left: 72px;
}
.popular-title {
   font-size: 13px;
   line-height: 1.5;
}
/* 以下、順位表示に関する記述 */
#popular-wrapper {
   counter-reset: number;
}
.popular-list::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:2;
}

当ブログでは今のところ全順位の背景色を同じにしていますが、次のような記述を加えることで色を変えることができます。

/* 1位の記事 */
.popular-list:nth-of-type(1)::before {
   background: 任意の色;
}
/* 2位の記事 */
.popular-list:nth-of-type(2)::before {
   background: 任意の色;
}
/* 3位の記事 */
.popular-list:nth-of-type(3)::before {
   background: 任意の色;
}

おわりに

今回は当ブログにおける「Simple GA Ranking」を利用した人気記事の表示について書いてみました。

プラグインの乗り換えを検討している方など、この記事が誰かの参考になれば幸いです。紹介したコードについては、このブログに合わせたものとなっているので、もし利用する際は適宜調整してみてください。