【WordPress】人気記事のランキングプラグイン「Simple GA Ranking」をArkheで導入する方法

WordPress

WordPressの話題です。人気記事を表示したい時には、プラグインを使うのが一般的です。

しかし、WordPress Popular Postというプラグインはすごく重くサーバーに負担がかかるそうです。

同じ人気記事を表示する目的で使えるのが、Simple GA Rankingです。

これは、Googleのアナリティクスからデータを引っ張ってくるので動きが軽くて済みます。

そこで、ArkheにSimple GA Rankingを使って人気記事を表示する方法を記載します。

Googleアナリティクスの設定

最初に、Googleアナリティクスの設定を、以下のサイト様のように、G-の番号の解析タグのほかに従来のどおりのUA-で始まる解析タグも作成します。

Simple GA Rankingの導入方法

こちらのサイト様を参考にして、Simple GA Rankingを導入します。(参考になりました!)

新着記事にサムネイルを付けて表示されるようにコードを追記する

それから、人気記事にサムネイルを表示したいので以下のコードをArkheの子テーマfunctions.phpまたは、MyArkheプラグインに記載します。

add_filter('sga_ranking_before_title', 'showRankingImage', 10, 3);
function showRankingImage($ret, $id, $cnt) {
    $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( 75, 75 ) );
        $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;

このコードはこちらのサイト様のものを使わせていただきました。本当に助かります。ありがとうございます。

後は人気記事を表示したいウィジットなどにショートコードを書きます。

[sga_ranking period=”10″ display_count=”5″]

などと記載すれば、人気記事が5件表示されます。

カッコは全角になっているので、半角に直してお使いください。ショートコードのパラメータはSimple GA Rankingの公式サイトに載っています。

最後にCSSで形を整える

あとは、CSSで見た目を調整します。

1から3までは順位に色を付ける設定にしました。

/*Ranking*/
.sga-ranking img {
  border: medium none;
  display: inline;
  float: left;
  width: 75px;
  height: 75px;
  margin-top: 3px;
  margin-right: 5px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
}
.sga-ranking a {
  text-decoration: none;
  color: #111;
}
.sga-ranking li {
  overflow: hidden;
}
.widget_simple_ga_ranking ol li {
  clear: left;
  float: none;
  margin-bottom: 10px;
}
li.sga-ranking-list {
  position: relative;
}
ol.sga-ranking {
  counter-reset: popular-ranking;
}
li.sga-ranking-list:before {
  background: none repeat scroll 0 0 #666;
  color: #fff;
  content: counter(popular-ranking, decimal);
  counter-increment: popular-ranking;
  font-size: 75%;
  left: 0;
  top: 3px;
  line-height: 1;
  padding: 4px 7px;
  position: absolute;
  z-index: 1;
  opacity: 0.9;
  border-radius: 2px;
  font-family: Arial;
}
li.sga-ranking-list:nth-child(1):before {
  background: #fdd35c;
}
li.sga-ranking-list:nth-child(2):before {
  background: #a0a0a0;
}
li.sga-ranking-list:nth-child(3):before {
  background: #bf783e;
}
li.sga-ranking-list:nth-child(10):before {
  background: #fdd35c;
}
#sidebar .widget_simple_ga_ranking ol {
  padding-left: 0;
  list-style: none;
}

CSSはお好みで調整してみてください。

以上です、お疲れさまでした。

\シェアしてくれると嬉しいです/