Simple GA Rankingでサムネイルを簡単に表示する方法。

WordPress Popular Postsと比較して動作が軽くて安定していると言われている「Simple GA Ranking」。

エックスサーバーの担当者からもおすすめされたので、すぐにWordPress Popular Postsから乗り換えたんですが、確かに安定している気がします。

ただ、その安定感の理由でもあるんですが、機能や見た目がかなりシンプルなので、通常はサムネイルが表示できません。

WordPress Popular Postsの場合は、ウィジェットから操作できるんですが、Simple GA Rankingの場合は自分でカスタマイズする必要があるんです。

このカスタマイズがわからなくて導入を諦めた方もいるかもしれませんが、ご安心ください。

今回は、めちゃくちゃ簡単にSimple GA Rankingでサムネイルを表示する方法をご紹介します。ほぼコピペで終わりますよ！

style.cssの修正（共通）

こちらが、共通のCSS。これをお使いのテーマのstyle.cssにコピペします。

どこにコピペすればいいかわからない方は、外観→カスタマイズ→追加CSSの1番下にコピペすれば間違いないです。

.sga-ranking-list figure {
    float: left;
    margin-right: 20px;
    width: 100px; /* 画像の横の長さ。自由に変更可 */
    height: 75px; /* 画像の縦の長さ。自由に変更可 */
    overflow: hidden;
}
.sga-ranking-list {
    margin: 0.8rem 0;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #e1e1e1;
    text-align: left;
}
.sga-ranking-list::after {
    clear: both;
    content: "";
    display: block;
}
.sga-ranking-list:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.sga-ranking-list figure a {
    display: inline;
}
.sga-ranking-list a {
    overflow: hidden;
    line-height: 1.4;
}

サイズを変更する場合

画像の横と縦の長さはデフォルトで「100px」と「75px」になっていますが、コードの中のコメントの通り、自由に変更可能です。

それぞれ150pxにして正方形にする
横750px、縦500pxにして画像をキレイに表示する

など、サイトのデザインに合わせて変更してみてください。

functions.phpの修正

後は、functions.phpにコードをコピペするだけで終わりです。早い！

目的別に3種類のコードを用意したので、どれか好きなものを選んでコピペしてくださいね:D

「考えるの面倒！」という方向け

///////////////////////////////
//---Simple GA Ranking---/////
//////////////////////////////
function sga_ranking_thumb_4536($thumbnail, $id) {
 $post_url = get_permalink($id);
 $title = get_the_title($id);
 $thumbnail = '';
 if( has_post_thumbnail( $id ) ) {
 $post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $id ) );
 $post_thumb_url = $post_thumb[0];
 $thumbnail = '<figure class="sga-ranking-thumb"><a href="'.$post_url.'" title="'.$title.'"><img src="'.$post_thumb_url.'" alt="'.$title.'" title="'.$title.'"></a></figure>';
 }
 return $thumbnail;
}
add_filter('sga_ranking_before_title', 'sga_ranking_thumb_4536', 10, 2);

サイズを指定する

先ほどのコードだと、元の画像の大きさがそのまま出力されるので、ユーザビリティ的にはサイズを指定した方が良いです。

大きい画像のまま使うと、PageSpeed Insightsなどのツールで点数も下がりますからね。

ということで、サイズを指定するパターンのコードがこちら。お使いのテーマのサムネイルのサイズがわかれば、thumb100の部分を適宜変更するだけでOKです。

///////////////////////////////
//---Simple GA Ranking---/////
//////////////////////////////
//サムネイル登録
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,75,true);
//サムネイル生成
function sga_ranking_thumb_4536($thumbnail, $id) {
 $post_url = get_permalink($id);
 $title = get_the_title($id);
 $thumbnail = '';
 if( has_post_thumbnail( $id ) ) {
 $post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $id ) , 'thumb100' );
 $post_thumb_url = $post_thumb[0];
 $post_thumb_width = $post_thumb[1];
 $post_thumb_height = $post_thumb[2];
 $thumbnail = '<figure class="sga-ranking-thumb"><a href="'.$post_url.'" title="'.$title.'"><img src="'.$post_thumb_url.'" alt="'.$title.'" title="'.$title.'" width="'.$post_thumb_width.'" height="'.$post_thumb_height.'"></a></figure>';
 }
 return $thumbnail;
}
add_filter('sga_ranking_before_title', 'sga_ranking_thumb_4536', 10, 2);

AMPに対応させる

WordPress Popular Postsより便利な点でもありますが、Simple GA RankingはAMPに対応させることが簡単です。

is_ampという関数でAMPページかどうかチェックするテーマが多いので、基本的には以下のコードをコピペするだけでOKです。

///////////////////////////////
//---Simple GA Ranking---/////
//////////////////////////////
//サムネイル登録
add_theme_support('post-thumbnails');
add_image_size('thumb100',100,75,true);
//サムネイル生成
function sga_ranking_thumb_4536($thumbnail, $id) {
 $post_url = get_permalink($id);
 $title = get_the_title($id);
 $thumbnail = '';
 if( has_post_thumbnail( $id ) ) {
 $post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $id ) , 'thumb100' );
 $post_thumb_url = $post_thumb[0];
 $post_thumb_width = $post_thumb[1];
 $post_thumb_height = $post_thumb[2];
 $img = '<img';
 if( function_exists('is_amp') && is_amp()) {
  $img = '<amp-img layout="responsive"';
 }
 $thumbnail = '<figure class="sga-ranking-thumb"><a href="'.$post_url.'" title="'.$title.'">'.$img.' src="'.$post_thumb_url.'" alt="'.$title.'" title="'.$title.'" width="'.$post_thumb_width.'" height="'.$post_thumb_height.'"></a></figure>';
 }
 return $thumbnail;
}
add_filter('sga_ranking_before_title', 'sga_ranking_thumb_4536', 10, 2);

これで上手くいかない場合、AMPページの判別方法を違う関数で行っている可能性が高いので、その関数を探して使うか、別記事で紹介している方法を試してみてください。

PHP（WordPress）でAMP対応ページかどうか判別する方法。 Fantastech!! もっと見る