WordPress Popular Postsで人気記事ランキングの順位を色分け表示

WordPress Popular Postsで人気記事ランキングの順位を色分け表示

本日は、ブログの人気記事ランキングが表示できるプラグイン「WordPress Popular Posts」を紹介したいと思います。

人気記事ランキングは、ブログを始めたら絶対表示させたい仕組みの一つです。

特に日本人はなぜか「ランキング」というキーワードに弱いところがあり、ついつい目がいってしまうのです。

ブログ訪問者に少しでもたくさんの記事を読んでもらうために、人気記事ランキングを設置したいもの。

ブログに人気記事を表示する方法はいろいろとありますが、今回はWordPress人気記事表示系のプラグインの中でも最もポピュラーな「WordPress Popular Posts」を取り上げたいと思います。

人気記事ランキング

[adsense1]

WordPress Popular Postsのインストール

(1) WordPress管理画面 > プラグイン > 新規追加 をクリック

WordPress Popular Postsのインストール

(2) 「今すぐインストール」をクリック

プラグインを検索で「WordPress Popular Posts」を検索して「今すぐインストール」をクリック

WordPress Popular Postsを今すぐインストール

(3) 有効化をクリック

WordPress Popular Postsを有効化

ウィジェットを利用した表示方法

(1) WordPress管理画面 > 外観 > ウィジェットをクリック

(2) 利用できるウィジェットから「WordPress Popular Posts」をドラッグ&ドロップしてサイドバーウイジェットへ移動

WordPress Popular Postsをサイドバーウイジェットへ移動

WordPress Popular Postsの詳細設定

ウィジェットのWordPress Popular Postsのプルダウンボタンをクリックすると詳細設定ができる画面が開きます。

(1) タイトル 「人気記事」「今週の人気記事」等、表示させたいタイトル名を入力。
(2) 最大の表示数 表示させたい記事数を入力。
(3) ソート順 指標は「コメント数」「累積閲覧数」「1日の平均閲覧数」の3つから選択できます。
(1) コメント数:コメント数の多い記事の反響順に並べる
(2) 累積閲覧数:アクセス数で並べる
(3) 1日の平均閲覧数:1日平均で算出されたアクセス数順で並べる
当ブログでは、「累積閲覧数」を設定しています。
(4) 計測期間 ランキングの期間を4つから選択できます。
(1) 過去24時間
(2) 過去7日間
(3) 過去30日間
(4) 全期間
(5) 投稿タイプ ランキング・データを記録する対象となるページの設定
post(投稿ページ),page(固定ページ)
デフォルトでは投稿ページと固定ページが設定

WordPress Popular Postsの設定

(6) 除外する投稿 ID 人気記事欄で 非表示にしたい投稿ページのIDを入力
(7) カテゴリー ID 人気記事欄に表示させたい記事のカテゴリーIDを入力
(8) 投稿者 ID 人気記事に表示させたい記事を書いたユーザー(著者)の IDを入力
(9) 投稿設定 チェックを入れると下記を設定できる
「タイトルを短縮」「抜粋を表示」「アイキャッチ画像を表示」

当ブログでは、 アイキャッチ画像を表示のみチェックを入れ、70px × 70pxのサイズを手動で指定しています。

人気記事ランキングの順位をCSSで色分け表示

以下のコードをお使いのテーマにあるstyle.cssに貼り付けてください。


ul.wpp-list li {
  border-bottom: 1px dashed #bbb;
  counter-increment: wpp-count;
  position: relative;
}
ul.wpp-list li:before {
  display: block;
  padding: 1px 11px;
  color: #fff;
  background-color: #333;
  content: counter(wpp-count);
  position: absolute;
  opacity: 1;
  z-index: 10000;
  border-radius: 6px;
  top: 6px;
  left: 6px;
}
ul.wpp-list li:last-child {
  border-bottom: none;
}
ul.wpp-list li:nth-child(1):before{
  background-color: #FBCC54;
}
ul.wpp-list li:nth-child(2):before{
  background-color: #B7BFC1;
}
ul.wpp-list li:nth-child(3):before{
  background-color: #D47B16;
}
ul.wpp-list li img {
  margin: 5px 10px 5px 5px;
  padding: 3px;
  border: 1px solid #ddd;
}
ul.wpp-list li a.wpp-post-title {
  display: block;
  font-size: 14px;
  padding: 0 12px 12px;
  text-decoration: none;
  color: #333;
}

WordPressの始め方

いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方 (「いちばんやさしい教本」)
石川栄和, 大串 肇, 星野邦敏
インプレス
販売価格 ¥1,706(2017年8月11日8時33分時点の価格)
売上げランキング: 1434
小さなお店&会社の WordPress超入門 ―初めてでも安心! 思いどおりのホームページを作ろう!
星野 邦敏, 大胡 由紀, 吉田 裕介, 羽野 めぐみ, リブロワークス
技術評論社
販売価格 ¥2,138(2017年8月11日8時36分時点の価格)
売上げランキング: 17020