jQueryで「WordPress Popular Posts」にナンバリングして順位を付ける

「WordPress Popular Posts」はデフォルトでは順位を出力する変数を持っていません。
CSSで実現する方法が色々でてきたのですが、今回はそうではなくjQueryを利用してナンバリングしたいと思います。

設定方法

jQueryを利用しているので予めjQueryファイルを読み込んでください。

  1. 「WordPress Popular Posts」ウィジェットで、「カスタムHTMLマークアップを使う」にチェックを入れます。
  2. 「Before / after Popular Posts: 」の前に<ul>後ろに</ul>を入れます。
  3. 「Post HTML Markup: 」を下記のようにします。
<li>
<span>{author}</span>{title}<span> {views} views</span>
</li>
  1. 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>

以上で自動で番号が出力されます。

参考:普通のリストに任意の文字列と番号を加える・改正