Wordpressでサイト運営 コラム

WordPressで人気記事ランキングを表示する方法(プラグイン・テーマ他)

人気記事ランキング表示

制作と運営アドバイスを担当させていただいているヴィーガン子育てサイトに「人気レシピランキング」表示機能を追加しました。WordPressで人気記事を表示する方法をご紹介します。

記事ランキング表示方法は3つ

日本初の完全菜食による子育て情報サイト「ヴィーガン子育てサイト」で人気のヴィーガンレシピコーナーのランキングをサイドバーへ表示するように機能を追加しました。

記事ランキングの表示方法は、大きく3つ。

  1. テーマの機能を利用する
  2. プラグインを追加する
  3. 子テーマのfunctions.phpファイルにプログラムを追加する

上から導入が簡単な順に挙げてみました。

テーマの機能を利用する

有料テーマであれば、最初からテーマの機能にランキング表示ウィジットが備わっているものが主流になりつつあります。有料テーマの最大のメリットは、必要な機能があらかじめセットされているので、プラグインを選ぶ手間も導入に掛かる時間も節約できる点ですね。有料テーマを活用することで、サイト公開までの時間を大幅に短縮することができます。さらに、デザインも統一されているため、ユーザーに与える印象も良くなります。

例えば、公式サイトからインストール可能なCOLORMAGテーマの有料版なら、人気記事と最新記事を表示するウィジットが用意されています。
[blogcard url=”https://themegrill.com/themes/colormag/”]

日本語表示が美しく洗練されたデザインのisotypeのテーマなら、全てのテーマにランキング機能付きウィジットが備わっています。
[blogcard url=”https://isotype.blue/”]

日本で最も売れているTDCのWordPressテーマなら「Opinion」他ランキング機能が用意されているテーマもあります。
WordPressテーマ「Opinion (tcd018)」

少しでも公開までの時間、保守の時間を短縮したいのなら、有料テーマを選ぶことが近道かもしれません。

プラグインを追加する

人気記事を表示するプラグインで最も利用されているのは、WordPress Popular Postsプラグインでしょう。

[appbox wordpress appid=wordpress-popular-posts]

プラグインをインストールすると、ウィジットにwordpress popular postsが追加されます。ランキングの計測方法は、総閲覧数・1日の平均閲覧数・コメント数から選べ、計測期間も日・週・月・全期間・カスタム期間から選択可能です。

さらに、ランキングを特定のカテゴリー・タグ・カスタム投稿タイプに絞ることも簡単に実現できます。アイキャッチ画像も好きなサイズに設定ができるので、他のデザインとの調整もしやすく、HTMLマークアップ機能を使えば、自分のテーマに合わせたHTMLタグで囲むことまでできます。

機能も充実していて導入も簡単なので、もっとも人気のあるプラグインなのでしょう。ただ、PV数が多いサイトの場合、だんだん表示速度が重くなっていくという事例が多々見られます。
[blogcard url=”https://2017.l2tp.org/archives/496″]

月間PV数が多いサイトは、wordpress popular postsプラグインの設定を調整することで改善する場合があるので試してみてください。

  1. 閲覧を記録する対象者を訪問者に限定する
  2. ログ上限を31日へ変更
  3. WPP キャッシュ期限ポリシーを有効化
  4. データサンプリングを有効化し、サンプル率を100にする

閲覧を記録する対象者を訪問者に限定する

サイトの管理者の閲覧数は含めないように対象者を訪問者に限定しておきましょう。

ログ上限を31日へ変更

不必要なログを溜めないように設定しておきます。月間ランキングなら31日、週間ランキングなら7日を設定しておくと無駄なログを保存しません。

WPP キャッシュ期限ポリシーを有効化

キャッシュを有効にしておくと高速化になります。ただし設定した期間はランキング表示が変わりません。例えば、1時間に設定していたら1時間はランキングの表示が固定されます。

データサンプリングを有効化し、サンプル率を100にする

PV数の多いサイト(50万PV~)の場合、データサンプリングを有効化し、サンプル率の数値を上げることでデータベースへの書き込み回数が減るので高速化になります。

WordPress Popular PostsのCSSデザインを整える方法

ランキングを表示している部分のCSSコードは下のようになっています。

ul.wpp-list li.ranking {
    counter-increment: wpp-count;
    position: relative;
}
ul.wpp-list li.ranking::before{
  position: absolute;
   content: "";
   display: block;
   top: 5px;
   left: 5px;
   width: 0;
  height: 30px;
   border: 20px solid rgba(160, 213, 151, 0.79);
   border-bottom: 8px solid transparent;
   z-index: 1;
}
ul.wpp-list li.ranking::after{
  position: absolute;
  content: counter(wpp-count);
   font-size: 28px;
   color: #ffffff;
  top: 3px;
   left: 16px;
   z-index: 10;
   text-shadow: 1px 1px 1px #33322d;
}

そのままコピペして使用すると、ヴィーガン子育てサイトとおそろいのデザインになります。色から好きなように調整してみてください。

子テーマのfunctions.phpファイルにプログラムを追加する

最後は、自分で人気記事表示機能を作ってしまう方法です。子テーマのfunctions.phpファイルに関数を追加し、テーマ内のランキングを表示したい部分で呼び出します。サイドバーで表示したいならsidebar.phpで作成した関数を呼び出すとランキングが表示されます。

作成する関数の流れは次のような考え方になります。

  1. PV数を保存するカスタムフィールドを作成しPV数を+1する関数を作成(wpb_set_post_views)
  2. 記事が表示される度に1の関数を呼び出す関数を作成(wpb_track_post_views)
  3. 2のPV数を取得する関数を作成(wpb_get_post_views)

実際のプログラムは、HORNETさんの記事が解説付きでわかりやすいのでおススメです。このプログラムでは、全期間での計測となっているので、日・週・月単位のランキングにしたい時は、期間を限定するコードを追加していきましょう。
[blogcard url=”https://hombre-nuevo.com/wordpress/wordpress0032/”]

人気記事5件を表示したい部分(例えば、sidebar.php)に次のコードを記述すると、TOP5の記事が一覧表示されます。

<!-- 人気の記事を5記事表示 -->
<?php $popularpost = new WP_Query( array( 'posts_per_page' => 5, 'meta_key' => 'wpb_post_views_count', 'orderby' => 'meta_value_num', 'order' => 'DESC'  ) );	while ( $popularpost->have_posts() ) : $popularpost->the_post();?>	
  <?php if ( has_post_thumbnail() ) : ?>
    <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?> </a>
  <?php endif; ?> 

  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  <small><i class="fa fa-calendar" aria-hidden="true"></i><time datatime="<?php get_the_date(c); ?>"><?php echo get_the_date("Y/n/j"); ?></time></small>
<?php endwhile; ?>

複数の場所にランキングを表示したいなら、上のコードをショートコード化して呼び出しを簡単にしてもいいですね。

テーマ・プラグイン・テーマカスタマイズの3つの方法で、人気記事ランキングを表示する方法についてご紹介してみました。
「この部分の機能だけ追加したい」「ランキング部分のデザインだけ整えたい」など、細かなご希望にも対応できますので、お気軽にお問い合わせください

[blogcard url=”https://office-fitplus.com/info/vegan-kosodate-open/”]

この記事がお役に立てたら
いいね ! で最新情報を手に入れましょう

Previous Post Next Post

Related Posts