WordPress Popular Postsに順位を表示させる方法【CSS3で実装】

2016/05/13 2017/04/11Author:BOR

費用：5分　時間：10分

WordPress Popular Postsといえば、Wordpressユーザーなら6割くらい使ってるんじゃないかな？根拠はないけど…

そして、Wordpress Popular Postsを使っているサイトは大体、順位を表示させてるんだよね|ω・)

どうやるんや！と思ったら、CSS3のcountプロパティというやつがあることを発見しました。

ということで解説していきます。

順位を表示させる方法

wordpress管理画面＞＞外観＞＞テーマの編集　にて、style.cssを編集していきましょう。

.wpp-list {
counter-reset: posts-rank;
}
.wpp-list li:before {
counter-increment: posts-rank;
content: counter(posts-rank); 
}

をコードの最後に書き加えましょう。そのままコピペしてください。counter-reset(意味：初期化)の位置が変わると、順位がすべて１になったりします。

すると、以下のように表示されます（もともとカスタマイズしているので、多少の違いがあります。）

第一段階

これでランキングを表示させることはできます。

デザイン編集

このままでは、細い線で画像の上にチョコンと表示されるだけなので、色々と個人個人でカスタマイズしていきましょう。

俺の場合は、他のサイトのようにサムネイルの上に一部的にランキングが重なるようにレイアウトして、ランキング表示をポストイット的にデザインします。

前に書いたランキング表示のためのコードと一緒に書くと以下のようなコードになります。

スラッシュ2本より右部分のコメントは削除してかまいません（スラッシュを含む）

.wpp-list {
 counter-reset: posts-rank;
}
.wpp-list li {
 position: relative;
 padding:12px 0 12px 5px; //順位表示の位置関係。まあ好みによります。
}
.wpp-list li:before {
 content: counter(posts-rank);
 counter-increment: posts-rank;
 position: absolute;
 z-index: 1;
 background:#ff0000; //背景色なので好きに変えよう
 color: #ffffff; //文字色なので好きに変えよう
 font-size: 14px;
 line-height: 1;
 padding: 5.4px 8px;
 left: 0; //画像との位置関係を示す
 top: 0;  //画像との位置関係を示す
}

いかがでしょうか！

ランキング

うまい具合にできたね！

ちなみに・・・。

1~3位まで色を金銀銅の色にする方法は

.wpp-list li:nth-child(1):before {
 background: #ffd700;
}
.wpp-list li:nth-child(2):before {
 background: #c0c0c0;
}
.wpp-list li:nth-child(3):before {
 background: #c47222;
}

を書き足すと金銀銅の色に変わりますよ。4位の色も変えたい場合は、child()のカッコ内の数字を４にすれば4番目のカラーが変わりますよ。それ以降も同様。

みなさんもPopular Postsを使ってランキングを表示してみては？