WordPress WP-PostViewsを使って人気記事をランキング表示する方法

早速「WP-PostViews」プラグインをインストールしましょう。Wordpress管理画面からプラグインを選択し「WP-PostViews」を検索してインストールします。

有効化したらすぐにページビューの統計がはじまります。投稿ページに行ってみましょう。投稿記事に「Views」という欄が増えています。

sidebar.phpに移動して、以下を記述します。

<ol class="views-ranking">
<?php $posts = get_posts(array(
    'posts_per_page' => 5,
    'meta_key' => 'views',
    'orderby' => 'meta_value_num',
)); ?>
<?php foreach($posts as $post) : ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ol>

それでは細かな説明をしていきます。

'meta_key' => 'views'

WP-PostViewsプラグインを有効化した時点から「views」という metaデータが付加されます。そのため、「meta_key」に「views」を指定してリストを取得します。

'posts_per_page' => 5,

ここではベスト５までランキング表示するため、「posts_per_page」を 5 と指定していますが、ベスト１０を出したい場合は 10 とすれば１０件取得できます。

<?php echo get_post_meta($post->ID, 'views', true); ?>

このサイトでは利用していませんが、上記を記述すると閲覧数を表示することもできます。

次に CSS を記述します。style.cssを開き、以下を記述します。

.views-ranking {
  counter-reset:wp-ranking;
  list-style:none;
  margin:0;
  padding:0;
  text-indent: -26px;
  padding-left: 26px;
}
.views-ranking li:before {
  color: navy;
  font-size: 12px;
  font-weight: bold;
  counter-increment: wp-ranking;
  content: counter(wp-ranking);
  background: url('画像パス') no-repeat;　/* 任意の画像を指定 */
  background-position: top center;
  background-size: 22px;
  width: 22px;
  height: 19px;
  display: inline-block;
  text-align: center;
  line-height: 17px;
  margin-right: 4px;
  text-indent: 0;
}
.views-ranking li a {
  font-size: 11px;
}

それでは細かな説明をしていきます。

counter-reset:wp-ranking;

「wp-ranking」はランキングを意味する変数です。「counter-reset」で初期化しています。変数名はなんでも構いませんので好きに変更してください。

counter-increment: wp-ranking;
content: counter(wp-ranking);

「counter-increment」で数字をインクリメントして表示します。「content」を記述しないとうまく動かないので必ず記述しましょう。幅や高さは画像に合わせて変更してみてくださいね。

記述したらサーバーにアップして確認してみましょう。「WP Super Cache」などをインストールしている場合、変更が確認できない場合がありますので、その場合はキャッシュをクリアするか、一度プラグインを停止するなどして確認しましょう。

WordPressでWP-PostViewsを使ってランキング表示する方法を紹介しました。

今回紹介した方法は「WP-PostViews」プラグインの機能を使うというより、閲覧数を保存するためだけに「WP-PostViews」プラグインを使うというのが正しいでしょうか。プラグインで記事ランキングを表示するのではなく、あくまでオリジナルの方法でテーマに記述するといった方法でした。

このサイトではこの方法でランキング表示していますが、もっといい方法もあると思いますので、色々試してみてくださいね。