「WordPress Popular Posts」はデフォルトでは順位を出力する変数を持っていません。
CSSで実現する方法が色々でてきたのですが、今回はそうではなくjQueryを利用してナンバリングしたいと思います。
設定方法
jQueryを利用しているので予めjQueryファイルを読み込んでください。
- 「WordPress Popular Posts」ウィジェットで、「カスタムHTMLマークアップを使う」にチェックを入れます。
- 「Before / after Popular Posts: 」の前に
<ul>後ろに</ul>を入れます。 - 「Post HTML Markup: 」を下記のようにします。
<li>
<span>{author}</span>{title}<span> {views} views</span>
</li>
- jQueryを記述します。
<script type="text/javascript">
$('.popular-posts ul > li').each(function() {
$(this).addClass("rank_" + ($(this).index() +1));
$(this).prepend("<span class='rank'>" + ($(this).index() +1) + "</span>");
});
</script>
以上で自動で番号が出力されます。
