カスタマイズ ブログ

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

2016/07/08

239736

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

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

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

 

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

今回は、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管理人

 


スポンサーリンク
スポンサーリンク

この記事がよかったら
いいね!しよう

新着記事を呆然と配信中

呆然としたい人はTwitterで回転オトエフミを…

↓ついでに回転オトエフミ制作の…

紅葉葉 秀秀逸プロフィール

 ●紅葉葉 秀秀逸
 ブログ管理人。90分の自主映画を作り、音楽も全編作曲する程の創作好きです。
 趣味:筆記体を投げ倒す、座右の銘:「ラー油の上」、年齢:鳥


        

真面目なプロフィール・お問い合わせ

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


関連記事


おすすめ記事

1
【マリオ雑学】スーパーマリオUSAはなぜUSA?→夢工場ドキドキパニックが元だった

知らない人はいない赤帽子、それはマリオ。緑帽子ならゼルダですね。 そんなマリオは ...

2
ドラクエ5パパスの「ぬわーーっっ!!」がリメイク版でしれっと激しくなってた件を徹底考察

「ぬわー」 これを聞けば全日本人の70%は一瞬でなんのことかわかるだろう。 &n ...

3
自主制作映画の作り方!役立つ記事総まとめ【無料素材・編集ソフト・ロケ地…】

上の画像は、”本で空を飛ぶヒーロー”の写真です。なんだそりゃ、と思うでしょう。は ...