テストサイト_-_2014-12-22_15.43.17

人気記事の横に順位アイコンやランキングアイコンを表示したりしたいこともあると思いますが、下記の2つのサイトのサイトに詳しい方法が載っています。（※まとめ主さんありがとうございますm(__)m）

人気記事サムネイルに順位バッジ画像を付ける方法-WordPress Popular Postsカスタマイズ
http://chocobanditz.com/blog/wordpress_popular_posts_customize/

WordPress Popular Posts の人気記事サムネイルにランキングの順位をつける方法
http://calico.xyz/2014/09/18/wordpress-3/

ただ、私の環境では上手く行かなかったのと、少しアレンジしたので。上記の方法で上手くいかない方は、試してみてください。

まず、上記のページにある、順位を付けるためのスクリプトをfooter.phpに入れます。

<script>
$(function(){
    $('#popular-post dl dt').each(function(i){
        $(this).attr('class','number' + (i+1));
    });
});
</script>

CSSは

/* WordPress Popular Posts表示カスタマイズ */
#popular-post dl dt {
    position: relative;
}
#popular-post {
    counter-reset: wpp-ranking;
}
#popular-post dl dt:before{
    float:left;
}
#popular-post dl {
    border-bottom: 1px dotted #CCC;
    padding: 0px 0px 3px;
    margin: 10px 0px 7px;
    position: relative;
}
#popular-post dl:last-child {
    border-bottom: none;
}
#popular-post dl dd {
    margin-left: 50px;
}
#popular-post dl dt.number1:before{
    height: 40px;
    content: url(img/ranking_1.png);
}
#popular-post dl dt.number2:before{
    height: 40px;
    content: url(img/ranking_2.png);
}
#popular-post dl dt.number3:before{
    height: 40px;
    content: url(img/ranking_3.png);
}

こんな感じです。

そして、HTML Markup settingsは下記のように修正しました。

Before

<div id="popular-post">

After

</div>

後は、上記のページと一緒です。

※ P.S 追記 thumbnail なしで設定しました。

アイコンは下記のサイトのものを使わせて頂きました。

定番アイテムの王冠
http://kage-design.com/wp/?p=512

この他、たまたま毎日新聞のサイトにあったので拝借したのですが、数字でも良いですね。

毎日

色々ためしてみてください。