ブログをしばらく書いていると人気記事ランキングを入れてみたくなるのが人情というものです（僕は７記事目くらいで入れました…）。

僕はSimplicityというテーマを使っていますが、Simplicityの場合は人気記事ランキングの設定がしやすく、更にちょっとした便利な機能がついています。

今回はSimplicityに人気記事ランキングを導入して、ついでに順位ごとに数字の色を変えるカスタマイズ方法をご紹介します。 すでに導入済みの場合は３つ目の項目「カスタマイズ」の部分から読んでいただければと思います。

※現在、テーマをオリジナルのものに変更しています。

目次

プラグイン「WordPress Popular Posts」の導入

人気記事ランキングを導入するには、WordPress Popular Postsというプラグインを使います。 ダッシュボードから、「プラグイン」→「新規追加」と進み、右上の「キーワード」のところに「WordPress Popular Posts」と入力します。同じような名前で別のプラグインがあるので間違えないようにしてください。

画像ではすでに「有効」となっていますが、「インストール」→「有効化」とクリックしましょう。

WordPress Popular Postsの設定

プラグインでの設定

まずはプラグインの方から設定していきます。 ダッシュボードから、「プラグイン」→「インストール済みプラグイン」→「WordPress Popular Posts」の「Settings」をクリックします。

PV数でランキング付けしたい場合が多いかと思いますので、「Stats」タブの一番左側の欄で「Order by views」を選択しておきましょう。

変更したら、右側の「Apply」をクリックして保存します。

次に、ひとつ右の「Tools」タブをクリックします。 DataのLog views fromをVisitors onlyにしておきましょう。設定を変更したら、左下の「Apply」をクリックして保存します。

アクセスが少ないうちは、全ての訪問者数をカウントしても良いかもしれませんが、カスマイズなどをしていると何度も自分でアクセスして見た目を確かめたりしてしまうことがあります。 自分のアクセスが混じっていると正しいランキングにはならないので、「訪問者のみ」にしておいた方が良いでしょう。 他のテーマを使っている場合は、他の項目もここで設定しなければなりませんが、Simplicityの場合はウィジェットから日本語で設定することができます。

ウィジェットでの設定

ここではサイドバーに人気記事ランキングを設置する前提で説明します。 「外観」→「ウィジェット」と進み、左側の「利用できるウィジェット」という部分から、「人気記事」というものを探し、右側の「サイドバーウィジェット」にドラッグ＆ドロップします。

ご自身の置きたい順番で設置したら、右の方にある▼マークをクリックします。 設定項目が現れますので、ひとつずつ設定していきます。

表示モード

全ページで同じランキングを表示するか、同じカテゴリ内の人気記事を表示するか選べます。まだ記事が少ないうちは、「全ての人気記事」で良いかと思います。

人気記事のタイトル

ランキングのタイトルとして表示されます。

表示数

デフォルトは５記事となっています。5～20くらいが良いのではないでしょうか。

表示タイプ

僕は「デフォルト」にしています。

固定ページの表示

プロフィールやお問い合わせなどの、記事以外のページをランキングに表示させたくなければ、こちらのチェックは外しておきましょう。

集計単位

こちらはお好みで。アクセス数が少ないうちは、「全期間」が良いかと思います。

集計期間の表示

こちらもお好みで。

閲覧数の表示

こちらにチェックを入れるとPV数が表示されるようになります。

ランキング順位の表示

今回は順位表示のカスタマイズをしていきますので、チェックを入れておきます。

除外する投稿ID

ランキングに表示させたくない記事があれば、「投稿一覧」からIDを探して入力します。

  設定が完了したら、右下の「保存」をクリックします。

管理者のみにPVを表示させる

こちらはSimplicityのみの便利な機能です。 WordPress Popular Postsを使って、記事一覧ページで自分だけにページごとのPVを表示させることができます。

わざわざアナリティクスを見に行かなくてもページごとのPVがすぐにわかりますし、表示も速いので設定しておくことをおすすめします。 モチベーションの維持にもつながりますしね。（あまりに読まれてなくて落ち込むこともありますが…笑） ダッシュボード左側のメニューから、「外観」→「カスタマイズ」→「管理者機能」と進み、「管理者用PV表示」の「WordPress Popular Postsで表示」にチェックを入れます。

これで基本的な設定は終わりです。 最初は「No data,so far.」と表示されますが、しばらくするとランキングが表示されるようになります。

数字の位置をずらす＆順位ごとに色を変えるカスタマイズ

この記事のアイキャッチ画像のようにカスタマイズしていきます。 今回は表示タイプが「デフォルト」の場合のカスタマイズ方法をご紹介しますが、基本的にはどの表示タイプでもやり方は同じです。

数字の位置を左上にずらす

^{※ずらしたくない場合は読み飛ばしてください}

実は、数字の位置を左上にずらそうとすると、サイドバーの端に引っかかって左側が切れてしまいます。 そこで、発想を変えて、サムネイル部分を右下にずらします。 こちらのコードを「外観」→「テーマの編集」の「スタイルシート（style.css）」に追記してください。 （※テーマの編集はSimplicity2の子テーマをダウンロードしてからやることをおすすめします。）

/*サムネイルを右下にずらす*/
.widget_new_popular ul li img,
.widget_popular_ranking ul li img {
  margin-top: 8px;
  margin-left: 5px;
}

これで良い感じに左上にずれて見えます。 pxはお好みで調整してください。

順位ごとに色を変える

順位ごとに色を変えるには、擬似クラスのnth-childを使います。 １～３位を金・銀・銅、４位以下をグレーっぽい色にします。

/*人気記事のスタイル*/
.ranking_list ul li:nth-child(1):before {
 background-color: #d0ac56;
 font-weight: 700;
}
.ranking_list ul li:nth-child(2):before {
 background-color: #a5a5a5;
 font-weight: 700;
}
.ranking_list ul li:nth-child(3):before {
 background-color: #88672d;
 font-weight: 700;
}
.ranking_list ul li:nth-child(n+4):before {
 background-color: #b2b2b2;
 opacity: 0.85;
}

４位以下をn+４とすることで、数字の数を増やしてもそのまま対応できるようにしています。 別の色に変えたい場合は、backgroud-colorの後ろの部分を変えてみてください。 細かいところですが、１～３位を目立たせたかったので、font-weightを700にして若干太くしています。 あと、デフォルトだとopacityが0.9になっているのですが、4位以下は0.85にして微妙に薄くしています（細かい笑）。

また、僕は角が微妙に丸い四角にしています（デフォルトのまま）ですが、 border-radius: 2px; というコードをそれぞれ追記し、2pxとなっている部分の数字を変えれば、丸み具合を変えることができます。 50px又は50%とすると、真ん丸になります。

/*数字を真ん丸にする場合*/
.ranking_list ul li:nth-child(1):before {
 background-color: #d0ac56;
 font-weight: 700;
 border-radius: 50px;
}
.ranking_list ul li:nth-child(2):before {
 background-color: #a5a5a5;
 font-weight: 700;
 border-radius: 50px;
}
.ranking_list ul li:nth-child(3):before {
 background-color: #88672d;
 font-weight: 700;
 border-radius: 50px;
}
.ranking_list ul li:nth-child(n+4):before {
 background-color: #b2b2b2;
 opacity: 0.85;
 border-radius: 50px;
}

数字自体も色を変えたり、サムネイルを丸っこくすることもできます。（新着記事のサムネイルにも角丸をつけたい場合は、テーマカスタマイザーから設定した方が良いかもしれません。）

/*サムネイルも角丸をつけて数字の色も変える場合*/
.widget_popular_ranking ul li img {
    border-radius: 10px;/*サムネイルに角丸*/
}
.ranking_list ul li:nth-child(1):before {
 background-color: #d0ac56;
 font-weight: 700;
 border-radius: 50px;
 color: bisque;
}
.ranking_list ul li:nth-child(2):before {
 background-color: #a5a5a5;
 font-weight: 700;
 border-radius: 50px;
 color: darkslategray;
}
.ranking_list ul li:nth-child(3):before {
 background-color: #88672d;
 font-weight: 700;
 border-radius: 50px;
 color:/*お好きな色に*/;
}
.ranking_list ul li:nth-child(n+4):before {
 background-color: #b2b2b2;
 opacity: 0.85;
 border-radius: 50px;
 color:/*お好きな色に*/;
}

こんな感じになります。

追記：丸いアイコンのカスタマイズ例

いつもTwitterでも仲良くさせていただいている、べるださん（@verdad0619）がこの記事を見てさっそく人気記事ランキングをカスタマイズしてくださいました！ すごく可愛くてサイトの雰囲気にぴったりなので、丸いアイコンにしてみたい方は是非チェックしてみてください。 僕の上の画像よりずっとイメージが湧くと思います（笑）

https://mattarilog.com/ranking/ べるださん、ありがとうございました！

追記：アイコンを丸に＆ホバー時カード化

数字部分のアイコンは丸いほうがメダルっぽくていいなーと思い、結局僕も丸くしてしまいました笑。 さらに、数字部分のフォントを変更してイタリックにしました。 アイコンは半透明にしない方が数字が見やすいと思ったのでopacityを1に変更しています。

また、ホバー時にじんわり影がついてカードっぽくなるようにカスタマイズしています。 こちらの記事を参考にさせていただきました。

参考WordPress+Simplicityの人気記事一覧をカード化する | 出不精の横好き

/*人気記事のスタイル*/
.ranking_list ul li:before {
 font-family: 'Didot', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, serif;
 font-style: italic;
 padding: 0;
 display: inline-block;
}
.ranking_list ul li:nth-child(1):before {
 background-color: #d0ac56;
 font-weight: 700;
 border-radius: 50%;
 opacity: 1;
 text-align: center;
 vertical-align: middle;
 width: 20px;
 height: 20px;
 line-height: 20px;
}
.ranking_list ul li:nth-child(2):before {
 background-color: #a5a5a5;
 font-weight: 700;
 border-radius: 50%;
 opacity: 1;
 text-align: center;
 vertical-align: middle;
 width: 20px;
 height: 20px;
 line-height: 20px;
}
.ranking_list ul li:nth-child(3):before {
 background-color: #88672d;
 font-weight: 700;
 border-radius: 50%;
 opacity: 1;
 text-align: center;
 vertical-align: middle;
 width: 20px;
 height: 20px;
 line-height: 20px;
}
.ranking_list ul li:nth-child(n+4):before {
 background-color: #b2b2b2;
 border-radius: 50%;
 opacity: 1;
 text-align: center;
 vertical-align: middle;
 width: 20px;
 height: 20px;
 line-height: 20px;
}

/* カード化 */
.widget_popular_ranking ul li,.widget_new_entries ul li {
overflow: hidden;
background: #fff;
transition: .4s;
}

/* ホバー時 */
.widget_popular_ranking ul li:hover,.widget_new_entries ul li:hover {
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* サムネイル */
.widget_popular_ranking ul li img,.widget_new_entries ul li img {
display:-ms-flexbox;
display: flex;
height: 85px;
width: 85px;
margin: 0px;
}

まとめ

Simplicityで、人気記事ランキングの数字を順位ごとに色を変えている人はあまりみかけなかったので記事にしてみました。 人気記事ランキングの導入・カスタマイズは比較的簡単にできますので、是非チャレンジしてみてください。