Jetpack(WordPress.com)の統計情報を使ってカスタマイズし放題な人気記事ランキングを表示する
記事も増えてきたのでそろそろブログにランキングを…
執筆：upshare
記事も増えてきたのでそろそろブログにランキングを表示させたいなと思い、色々なプラグインを試してみたのですが、どれもカスタマイズに限界があり断念。
人気記事の投稿IDだけ取得出来れば…と思っていたところ、Jetpackのstats_get_csv関数でやりたいことが実現できました。出力もデザインもカスタマイズし放題です。
今回は Ateitexe様 の記事を参考にカスタマイズしました。
Jetpack by WordPress.comの情報を取得して人気記事を表示する
http://ateitexe.com/jetpack-popular-post/
ランキングを表示するコード
[php]
$days = 7;
$limit = 10;
$args = array(
‘days’ => $days,
‘limit’ => $limit + 2
);
$ranking = stats_get_csv(‘postviews’, $args);
foreach($ranking as $post) {
if($post[‘post_id’] != 0 && $post[‘post_id’] != get_the_ID()) {
var_dump($post);
$i++;
if($i >= $limit) {
break;
}
}
}
[/php]
使うときは10行目「var_dump($post);」を削除して、お好みで書き変えてください。
下の方でそれぞれの行で何をしているのか解説しているので、ここから更にカスタマイズしたい方は是非参考にしてください。
サムネイル画像などの出し方については更に下の方で紹介しています。
それぞれの処理の解説
[php]
$days = 7;
$limit = 10;
[/php]
$days は閲覧数を取得する期間、$limit は表示させる件数です。
上記の場合は7日間のランキングを10位まで表示します。
[php firstline=”3″ classname=”break”]
$args = array(
‘days’ => $days,
‘limit’ => $limit + 2
);
$ranking = stats_get_csv(‘postviews’, $args);
[/php]
stats_get_csv関数で人気記事を取得します。
var_dumpすると分かりますが、トップページと現在のページも取得します。
9行目にトップページと現在のページを除外するif文が書いてあるので、最大2件が除外されることを考えて2件多めに記事を取得しています。
[php firstline=”8″ classname=”break”]
foreach($ranking as $post) {
if($post[‘post_id’] != 0 && $post[‘post_id’] != get_the_ID()) {
var_dump($post);
$i++;
if($i >= $limit) {
break;
}
}
}
[/php]
11行目で処理の回数(取得した記事の数)をカウントし、12～14行目のIF文で、指定した数($limit)を超えたら繰り返しの処理を抜けます。
カスタマイズする
よく使いそうなコードをまとめてみました。
日時のフォーマットや、アイキャッチ画像のサイズはお好みで変更してください。
[php]
// 投稿のID
echo $post[‘post_id’];
// 投稿のタイトル
echo $post[‘post_title’];
// 投稿のパーマリンク
echo $post[‘post_permalink’];
// 投稿の閲覧数
echo $post[‘views’];
// 投稿日時
echo get_the_time(‘Y/n/j A h:i’, $post[‘post_id’]);
// アイキャッチ画像
$img = wp_get_attachment_image_src(get_post_thumbnail_id($post[‘post_id’]), ‘thumbnail’);
echo ‘<img src=”‘.$img[0].'” width=”‘.$img[1].'” height=”‘.$img[2].'”>’;
[/php]
投稿IDが分かっていればいつもとあまり勝手が変わらないですよね。
カテゴリやタグや本文なども表示できますが今回はここまで。
最後にサムネイル画像とリンクとタイトルを表示させるコードをご紹介します。
コピペでそのまま使えるので、まずは試しに表示させたい位置に貼り付けてみてください。
[php]
echo ‘<ul class=”posts”>’.”\n”;
$days = 7;
$limit = 10;
$args = array(
‘days’ => $days,
‘limit’ => $limit + 2
);
$ranking = stats_get_csv(‘postviews’, $args);
foreach($ranking as $post) {
if($post[‘post_id’] != 0 && $post[‘post_id’] != get_the_ID()) {
$img = wp_get_attachment_image_src(get_post_thumbnail_id($post[‘post_id’]), ‘thumbnail’);
echo ‘ <li class=”post”>’.”\n”;
echo ‘ <p class=”post_image”><img src=”‘.$img[0].'” width=”‘.$img[1].'” height=”‘.$img[2].'”></p>’.”\n”;
echo ‘ <p class=”post_title”><a href=”‘.$post[‘post_permalink’].'”>’.$post[‘post_title’].'</a></p>’.”\n”;
echo ‘ </li>’.”\n”;
$i++;
if($i >= $limit) {
break;
}
}
}
echo ‘</ul>’.”\n”;
[/php]
参考になったら是非、TwitterやFacebookにシェアをお願いします～！WRITER
upshareアップシェアの現場で得た知識やノウハウをお届けします。
