人気記事サムネイルにランキングの数字を表示する方法【WordPress Popular Posts】

2015年9月27日 2016年7月8日

こんにちは。私は寒いのがけっこう苦手です。

そんな私ですが、寒くて仕方がないとき…そしてその状態がこの後しばらく継続するとわかっているときは、一時的に寒さを好きになってあえて半袖になったりして乗り越えます。

どうも、ありがとうございました。

さてさて、本日はまたカスタマイズ系の記事です！

今回は、Wordpressのサイドバーにブログの人気記事を表示するプラグイン「WordPress Popular Posts」のカスタマイズです。

デフォルトの状態でも使い勝手はよく、設定項目も数多くある優れたプラグインですが、そのままだとサムネイルにランキングの数字を表示することはできません。そこがちょっとおしいところですよね。
キュレーションメディア・パイラルメディアのように、サムネイルの左上にランキングの数字を表示してみたいと思いませんか？私は思いました。

なので、その方法を紹介します！

人気記事サムネイルのランキングの数字を表示！

まず、WordPress Popular Postsを持っていない方はWordpress上でプラグインを検索し、インストールしてください。

このカスタマイズは、下記のキャリコさんの記事をかなり参考にしてします。ありがとうございます！
ただし、スクリプトの貼り付け位置や、CSSのデザインが若干違います。

http://calico.xyz/2014/09/18/wordpress-3/

ちなみに完成イメージはこちら。

色や数字の大きさ、角の丸みは自由に変えられるので、私はさらに少し改造しています。

カスタマイズ設定

まずはダッシュボードの外観からウィジェットを開き、WordPress Popular Postsの設定画面を開きます。もしくは、今インストールしたばかりの方は、サイドバーウィジェットに「WordPress Popular Posts」をドラッグアンドドロップして追加してください。

そうしたらサムネイルのサイズを設定します。私は参考ブログと同様に、スティンガー5の関連記事と同じサイズになるように、100×100に設定しています。

そうしたら、「HTML Markup settings」という欄にチェックを入れます。これでサムネイルなどのカスタマイズができるようになります。

次は「Before / after Popular Posts:」という欄に移ります。

左側の欄には下記を入力。

<div id="popular-post"><div>

右側の欄には下記を入力します。

</div></div>

スクリプトを記述

次は「Post HTML Markup:」という欄に、以下のコードを入力します。

<dl>
 <dt>{thumb}</dt>
 <dd style="overflow:hidden;"> {title} <br />{stats}</dd>
 <p class="clear"></p>
</dl>

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

先ほどの参考ブログ記事ではスクリプトがこの欄に保存できないと書いてあったのですが、私の場合は問題なく保存できたのでこのようにしています。スクリプトがこの欄に保存できないという方は先ほどの参考記事を参照してみるとよさそうです。

ちなみに、スティンガー5を使用している方は「<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>」の記述は削除しても問題ないはずです。

CSSの設定

さて、最後の仕上げ、CSSの設定です！

ダッシュボードの外観からテーマ編集を

選び、「style.css」を選択してください。そして、そこの最後に下記のスクリプトを貼り付けます。

/*---------------------------------------
Wordpress Popular Posts表示カスタマイズ
------------------------------------------*/
#popular-post a {
 font-weight : bold ;
 text-decoration : none ;
 font-size: 15px;
 color : #333333 ;
}
#popular-post a:hover {
 color: #3399ff ;
}
#popular-post dl {
 margin-bottom: 10px;
 padding: 5px;
 border-bottom-style: none;
 background-color: #ffffff;
}
#popular-post dl:last-child {
 border : none ;
}
#popular-post img {
 margin-right : 10px ;
}
#mybox #popular-post dl dt {
 position : relative ;
}
#popular-post {
 counter-reset : wpp-ranking ;
}
#popular-post dl dt:before {
 position : absolute ;
 top : 0px ;
 left : 0px ;
 color : #ffffff ;
 counter-increment : wpp-ranking ;
 text-align : center ;
 z-index : 9999 ;
 float : left ;
 line-height : 25px ;
 width : 25px ;
 height : 25px ;
 border-radius : 3px ;
}
#popular-post dl dt.number1:before,
#popular-post dl dt.number2:before,
#popular-post dl dt.number3:before,
#popular-post dl dt.number4:before,
#popular-post dl dt.number5:before,
#popular-post dl dt.number6:before,
#popular-post dl dt.number7:before,
#popular-post dl dt.number8:before,
#popular-post dl dt.number9:before,
#popular-post dl dt.number10:before {
 content : counter(wpp-ranking, decimal) ;
 background-color : #333333 ;
}

これで完成です！あとは、細かく調整して自分好みにしていただければと思います。（ちなみに私はあまり詳しくありません…）