wordpressで記事の下に人気記事を差し込む方法[Stingerカスタマイズ]

こんにちは、愛しさと切なさと心強さとdaiです。

ワードプレスでブログを書いている人はたくさんいます。このブログもそうです。
そしてサイドバー(左とか右の端にある細長い部分)にいろんなものを置いています。

例えばこのブログだったら、最新記事と人気記事とランダム記事ピックアップとカテゴリ一覧と月別アーカイブを置いています。

しかしですね。

で、どうやって表示させるんだい？

まあそう慌てなさんなって。ほしがりやさんだねぇ！

とは言っても難しいことは何もしていません。
人気記事を表示させる有名なプラグイン「Wordpress Popular posts」を利用して、cssを書いただけのこと。
ココらへんのカスタマイズは多くのブログ様がやってらっしゃるので真新しいものではございません。ございませんのよ。

完成図はこれです。

このブログのテーマはSEO効果が抜群のStingerを使わせてもらっています。

SEO効果が抜群のStingerを使わせてもらっています。

（だいぶ宣伝させてもらったのでそろそろ作者のENJIさんからお歳暮が送られてくるといいな！ハムとか、あとハムとか！）

※追記：なんとENJIさんから本当にハムが送られてきました→こちら

ということで、Stingerをお使いの方はバッチリ適応されると思います。
あとは好みに合わせてコードをいじって弄り倒せばいいんだよ。

single.phpに書くコード

※注意　プラグイン「Wordpress Popular Posts」をインストールしていることが前提です。

>> インストールはこちら <<

記事表示部分の直下にある「<?php get_template_part(‘sns’);?>」の下に書きましょう。

<div style="padding-top:8px;">
<h4>当ブログの人気エントリ一覧。おすすめです</h4>
<div class="ninki-post" align="center">
<?php if (function_exists('wpp_get_mostpopular')) wpp_get_mostpopular("range=monthly&limit=12&post_type=post&order_by=views&stats_comments=0&thumbnail_height=120&thumbnail_width=120&thumbnail_selection =usergenerated"); ?>
</div><!-- ninki post -->
</div>

数字や細かい設定は適宜変更してください。

range(範囲)の設定

today(今日),weekly(週間),monthly(月間),all(累計)　のいずれか。

limit(表示する数)の設定

このブログは12件表示させて、４×３（スマホでは２×６）の表示にしています。ここはお好みで。

order_by(並び替え)の設定

views(PV順)、comments(コメント順),avg(平均値)　のいずれか。

stats_comnents(コメント数を表示するか)の設定

コメント数を表示させたいなら0を1に変更。

thumbnail_selection(サムネイル)の設定

「usergenerated」にしておくとサムネイルが表示されます。この部分を消すと出ません。

ちょっと休憩じゃ。

では続いて。

cssの記述

style.cssとsmart.cssに同じものを書いてみよう。

.ninki-post ul.wpp-list{
margin: 0px;
padding: 0px;list-style-type: none;
width:100%;
}

.ninki-post ul.wpp-list li{
    vertical-align: top;
    list-style:none;float:left;
    line-height:150%;
    width:120px;
    font-size: 13px;
    min-height: 215px;
    text-align:left;
    margin: 0;
    padding-right: 8px;padding-left:8px;
    clear: none;
    }
  
.ninki-post ul.wpp-list li img{
      padding:2px;margin: 0;
      border: #ccc 1px solid;
      width:120px;height:120px;
}

もし完璧を求めるなら、スマホ用(smart.css)では
「padding-right: 8px;padding-left:8px;」の部分を
「padding-right: 10px;padding-left:15px;」とすると、iphoneでは左右が整って見えます。見えるに決まってます。見えなかったらごめん。

多分これだけでOKなはず。実際にブログを見て表示させて確かめてみましょう。

スマホで見たらこんな感じになっているはず。

ちょっと豆知識

なぜ記事の下に表示させる部分に「class=”ninki-post”」を設定しているのか？

それはね。

サイドバーの部分と記事下の部分は分けてcssを書かないと、デザインが統一されてしまって、
サイドバーの方の人気記事がおかしくなっちゃうからなんです。

ためになったねぇ～。

まとめ

ということで、Stingerテーマ寄りのカスタマイズになりましたが、参考になれば幸いです。

他のテーマを使ってらっしゃる方も、表示させたいところでwpp_get_mostpopularを使えば呼び出すことができるので、
「ワーシャッチョサーン、ワタシノーニンキキジーミテクダッサーイ」というところにどんどん表示させて、「ついで読み」を誘発させていきましょう。

正直、記事の下に別記事をこのように表示するようにしてから、直帰率がぐんと下がり、今は50％を切るようになりました。ついで読みバンザイ。

ところで、この記事を書いてる時に、”サイドバー”という単語を何回か書いたせいか、”バー”の部分が心にジャストミートして、
なぜかあずきバーが食べたくなってしまったので今から買ってきます。

では！

人気記事を記事の下にも置きたいよぉ！