WordPress Popular Posts アクセスランキングにPHPを使わずCSSで順位の数字をつける方法

前回WordPress Popular Posts を週間・月間・全期間 PHPで吐き出す方法】の記事を作成しました。

これで人気の記事を【週間】【月間】【全期間】の三種類表示できるようになりました。

今回はこのランキングをもっと解りやすくする変更をしていきます。

このPopular Postsのソート順はViewsになっていますのでアクセス数の多い順になっています。

これにランキングの数字をPHPではなく、CSSで追加します。

このサイトのサイドバーに実装したランキングがありますので参考にして頂ければと思います。

CSSに追加
参考にしたサイト

CSSに追加



#popular-post {
    counter-reset: wpp-ranking;
}

.wpp-list li {
    position: relative;
    list-style-type: none;
    padding-top: 5px;
    padding-left: 5px;
}

#popular-post ul li:before {
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
}

.wpp-list li:before {
    background: rgba(94, 185, 77, 0.9);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    padding: 4px 8px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.wpp-list li:nth-child(1):before {
    background: rgba(255, 88, 196, 0.9);
}
.wpp-list li:nth-child(2):before {
    background: rgba(245, 171, 31, 0.9);
}
.wpp-list li:nth-child(3):before {
    background: rgba(255, 121, 37, 0.9);
}

以上です。

あっけにとられるくらい簡単でした。