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で見た目を調整します。
１から３までは順位に色を付ける設定にしました。
/*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はお好みで調整してみてください。
以上です、お疲れさまでした。