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

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

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

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

 

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

今回は、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 ;
}

 

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

カスタマイズポイント

33行目と34行目の「top」「left 」

この数値をいじると、ランキング順位の表示位置を変えられます。両方マイナスにすると更に左上にいき、サムネイルから少しはみ出すので、サムネイルを隠したくないという方はそうしてみてください。
「top」「left 」共に-5pxにすると、こんな感じになります。

43行目の「border-radius」

この値を大きくすると角の丸みが大きくなります。逆に、0にすると四角くなります。

56行目の「background-color」

これの設定を変えると、数字の背景の色を変更できます。色の指定は下記サイトが参考になります。

 

まとめ

どうでしょうか、これでパッと見でランキングだとわかるし、見た目も華やかになるのではないでしょうか。なると思います。

皆さんもこれを元にちょいちょい変えてみると面白いと思います。

では人気記事を増やすためにもブログ頑張りましょ～

 

by管理人

 

…ちなみにYouTubeで週2回くらいフリーBGMを投稿しています。



毎日深夜まで作曲がんばっているので、気に入ったら応援でチャンネル登録お願いします！




YouTubeを見る ＞

＼SNSでシェアする／

-カスタマイズ, ブログ   -カスタマイズ, ブログ

この記事も読まれています