LOADING

作業メモ:WordPress Popular Postsにランキングを付ける方法

WEB

wordpress-logo-stacked-rgb

 

 WordPress Popular Postsとは

 

久々に更新ですが、Web関連WordPress関連です。

WordPressにはさまざまなプラグインが用意されておりまして、そのなかでも多くのWordPressサイトで使われているのが「WordPress Popular Posts」っていうやつなんですね。

Daily、Weekly、あとなんかの区間でのアクセス数の多かった記事を上から表示してくれるというもの。

所謂アクセスランキングですね。

当サイトもご多分に漏れず採用しております。

右のサイドバーにありますね。

なぜだか、当サイトは新しいバージョンを入れるとカウントされないので古いままなのですが・・・

 

で、ですね。

このプラグインをさらにランキング感を出そうと、数字でカウントをしてみることにしました。

 

 

CSSだけで出来ちゃう!

 

ナンダカンダ調べてみると結構簡単に出来る模様。

CSSの「カウント」機能を使うみたいですね。

何か勉強した記憶はありますが、実務では全然使いません!

わからんことは調べて、それ流用して使えれば問題ないのです。

というわけで、コード取ってきてそれそのままclassやらidを己のサイトにあわせて改変するわけですが、、、

カウントは成功したのですが、カウントの幅分詰まってます。

ようするに他の要素より上に来ないと行けないわけですね。

と、考えてやるのはz-indexですが、これよりposition使う方が確実かと・・・

で、それをやってるサイトからまんま持ってきたのですが、なぜだか親要素に「relative」を振ってない・・・

そりゃちゃんとならんわけだ。

以下のコード入れたらちゃんと表示されるようになりました。

 

.popular-posts {
counter-reset: wpp-ranking;
}

.popular-posts ul li{
position:relative;
}

.popular-posts ul li:before {
color:#FFF;
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
text-align:center;
z-index:9999;
float:left;
line-height:30px;
width: 30px;
height: 30px;
background-color:#6495ED;
border-radius: 2px;
-moz-border-radius: 2px;
position: absolute;
top: 5px;
left: 5px;
}

これで問題なく表示されたでしょうか。

お好みにbackgroundの色を変えたり、border-radiusで円にしてもいいかも。

お試しあれ

 


コメントを残す

類似記事