【html css】WordPress Popular Postsのランキングを設定

ワードプレスのプラグインWordPress Popular Postsはランキングを付ける機能は無いようです。
phpを使ってランクを付けたいところですが自作であれば、どうにか出来そうですがプラグインですので勝手にいじるわけにも行かずCSSを使ってランク付けをしたいと思います。
やり方としてはいくつか思いつきますが、最初:nth-of-type()を使って予め順番を登録しとこうかと思いましたが、counterを使った方が自動化されて良さそうです。

CSS自動ナンバリング

CSSプロパティでエクセルの自動連番のような機能があります。
そのプロパティがcounterです。
「1」「2」「3」「4」のようなナンバリングをはじめ「第1位」「第2位」「第3位」というふうな付け方も出来ます。
使い方が特徴がありまして要素に対してではなく擬似要素の::beforeか::afterに設定しないといけません。

counterプロパティの使い方

WordPress Popular Postsをウィジェットに設定すると下記のタグ構造になります。

HTML

<ul class="wpp-list">
<li>
<a><img></a>
<a>text</a>
</li>
<li>
<a><img></a>
<a>text</a>
</li>
</ul>

構造としては最初にランキングを持ってきたいので
<li>に::beforeを設定してその中にcounterプロパティを割り当てます。

CSS

body{
counter-reset: number 0;
}

親要素にcounter-resetを使ってカウント値を初期化します。
値に変数としてnumberを定義してゼロにします。

CSS

.wpp-list li::before{
counter-increment: number 1;
content: counter(number) " ";
}

counter-incrementを使ってカウント値の増加数をセットします。
1をセットすると１ずつ増加します。
contentでランキングの数値が表示されます。
counter(number)で数値だけが表示されます。
content: “第” counter(number) “位”;と設定すると第１位で表示されます。

最終的なCSSです。

CSS

body{
  counter-reset: number 0;/* number のカウンタを 0 にセット */
}
.wpp-list > li{
  display: flex;
}
.wpp-list > li::before{
  counter-increment: number 1;/* number カウンタの増加数をセット */
  content: counter(number);/* 表示形式を指定 */
  font-size: 18px;
  font-weight: bold;
}