ゆるくはじめるWordPress.

CSSでWordPress Popular Postsに順位を表示!

wpp-ranking-top

ブログ記事の閲覧数を集計してランキング表示してくれる便利なプラグイン『Wordpress Popular Posts』。それをさらにランキングらしくするためにCSSで順位表示ができるようにしてみました。少しCSSを書き足すだけで簡単に実装できるので、よければ参考にどうぞ~。

完成サンプルイメージ

人気記事ランキングサンプル

こんな感じでリストに番号を付けて順位表示します。
リスト以外の要素にもナンバリングできるCSSプロパティを利用するので、Wordpress Popular Posts以外でも色々と応用できそうです。


設置と準備

WordPress Popular Postsプラグインをインストール後サイトに設置します。
今回の例ではプラグインの設定でデフォルトのスタイルシートを読み込まないよう設定し、wp-content/plugins/wordpress-popular-posts/style内にあるスタイルシートから必要な部分をコピーしてきてそれをベースにカスタマイズしました。

wpp設定

使用するCSSプロパティ

counter-reset カウントをリセットします。まずリセットしておかないと正しくカウントされないので入れておきます。
counter-increment 指定したカウンターの値を+1します。
content counter()で指定したカウンターの値を表示します。

CSS:例

counter-reset: ranking;
counter-increment: ranking;
content: counter(ranking);

この3つを1セットで、好きな名前を付けて使います。今回はrankingと名前を付けました。


CSSを使って順位を表示

人気記事ランキング順位表示

CSS

.wpp-list {
  counter-reset: ranking;
  list-style-type: none;
}
.wpp-list li {
  clear: both;
  position: relative;
  overflow: hidden;
  margin-bottom: 15px;
  font-weight: bold;
}
.wpp-list li::before {
  counter-increment: ranking;
  content: counter(ranking);
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
  text-align: center;
  width: 1.5em;
  height: 1.5em;
  color: #fff;
  line-height: 1.5em;
  font-size: 14px;
}
.wpp-thumbnail {
  display: inline;
  float: left;
  margin: 0 10px 0 0;
}

::beforeに表示させたカウントをpositionで左上に固定しています。
装飾部分はお好みで変更してください。


さらにカスタマイズ

ランキングらしく1、2、3位にそれぞれ金銀銅のカラーを付けてみます。

CSS

.wpp-list li:nth-child(1)::before {
  background-color: rgba(230,180,34,0.8);
}
.wpp-list li:nth-child(2)::before {
  background-color: rgba(192,192,192,0.8);
}
.wpp-list li:nth-child(3)::before {
  background-color: rgba(196,112,34,0.8);
}
人気記事ランキングサンプル

CSS

.wpp-list li::before {
  border-radius: 0 0 5px 0;
  box-shadow: 2px 2px 2px 1px rgba(0,0,0,0.3);
}

見やすく影を付けたり、角を丸くしてみたりとこのようにCSSを追加するとサンプルイメージのような見た目になります。
サイトに合わせて色々とカスタマイズして使ってみてください~。


スポンサーリンク

公開日: