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

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

Wordpress WP-PostViewsを使ってランキング表示する方法

WP-PostViews」プラグインを使うと、記事の閲覧回数を元にランキングをサイドバーに設置することができます。人気記事のランキングだけでなく、不人気記事のランキングも設置できます。(そんな使い方する人いるのかな・・^^;)

そのまま使ったのでは面白くないので「WP-PostViews」プラグインのウィジェットを設置してランキングを表示する機能は一切使わずオリジナルテーマに人気記事ランキングを表示する方法 を紹介したいと思います。

このサイトでも導入している方法ですので、皆さんも試してみてください。

テーマ変更により現在は停止しています。


WP-PostViewsプラグインをインストール

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

WP-PostViewsプラグインをインストール

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

投稿記事「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,

ここではベスト5までランキング表示するため、「posts_per_page」を 5 と指定していますが、ベスト10を出したい場合は 10 とすれば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」プラグインを使うというのが正しいでしょうか。プラグインで記事ランキングを表示するのではなく、あくまでオリジナルの方法でテーマに記述するといった方法でした。

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

おつかれさまでした。

この記事がお役に立ちましたら シェア をお願いいたします。