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

CSS

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

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

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

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

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

nissin_note___Study_is_Not_Study

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

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);
}

以上です。

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

参考にしたサイト

【WordPress】CSSでナンバリング!人気記事のランキング順位を表示する方法

コメント

タイトルとURLをコピーしました