cssコピペで、固定ページで
サムネイル付きカテゴリ一覧をつくる

システムエンジニア（SE）のかっきーです。

皆さんも人気記事を表示させたくて「WordPress Popular Posts」のプラグインを使用していることではないでしょうか。

しかし、このプラグインはとても便利なのですが、サイドバーのみしか簡単に表示させることができません。
投稿記事内やトップページ表示させたけど、英語ばかりだし、カスタマイズの方法が良くわからない！
といって断念したことはありませんか。

今回は、「WordPress Popular Posts」の人気記事を記事内に表示させるやり方を3つ教えます。

WordPress Popular Postsの表示サンプル

今日のPVランキング

• 
  HTML・CSSコピペで簡単！多階層のドロップダウンメニュー作成■68ビュー
  .
• 
  WEBライターでも原稿の校正・校閲時に使う校正記号は覚えよう■31ビュー
  .
• 
  リスク有り！2016年9月よりグーグルアドセンスが4つ以上掲載可能に■23ビュー
  .
• 
  Headroom.jsでメニューをスッキリ【オススメのjQueryプラグイン&使い方】■18ビュー
  .
• 
  サイトをセンスアップ！オシャンなHTMLカラーコード表一覧■16ビュー
  .

こんな感じにプラグインが集計したPVによって上位5記事が表示されるようにしています。

WordPress Popular Postsの応用方法（１）
関数「wpp_get_mostpopular」の使用

任意の記事内に表示させるにはすでにプラグイン側で用意してある[wpp_get_mostpopular()]関数を使用します。

wpp_get_mostpopular()

phpを使用するため、以前ご紹介したプラグイン[Exec-php]を入れといてください。

こちらの関数に様々なパラメータを付与してあげることにより、
表示させることが可能です。

パラメータ一覧

 
こちらの表示させたい項目の値をプラグインに渡してあげます。

それでは実際に表示させてみます。
実際のコードを記載いたします。

<?php
if (function_exists('wpp_get_mostpopular')) {
 $arg = array(
 'header' => '今日のPVランキング',
 'header_start' => "<h3 style='margin:0px 50px;font-size:18px;line-height:1.5em;font-weight: bold;color:#000;text-decoration:none;border:none;'>", //見出しの前に挿入するHTMLタグ
 'header_end' => '</h3>', //見出しの後に挿入するHTMLタグ
 'limit' => 5, //表示させる数
 'range' => 'daily', //集計する期間（daily,weekly monthly,all）
 'order_by' => 'views', //集計の基準（comments,views,avg）
 'post_type' => 'post', //ポストタイプを指定（post,page,カスタムポスト名）
 'title_length' => 25, //タイトルの文字数を指定
 'thumbnail_width' => 50, //サムネイルの幅
 'thumbnail_height' => 50, //サムネイルの高さ
 'stats_views' => 1, //アクセス数を表示（1,0）
 'wpp_start' => '<ul>', //リストの出力の前に挿入するHTMLタグ
 'wpp_end' => '</ul>', //リストの出力の後に挿入するHTMLタグ
 'post_html' => "
 <li style='padding: 5px;margin: 5px;background: #DDE7C7;border: 1px solid #98C9A3;border-radius: 3px;-moz-border-radius: 3px;-webkit-borde-radius: 3px;'>
 <div style='position:relative;height: 50px;overflow: hidden;'>
 <span style='margin: 0 10px 0 0;max-width: 50px;max-height: 50px;'>{thumb_img}</span>
 <span style='position:absolute;top:0;left:60px;height:50px;font-size:12px;line-height:1.5em;font-weight: normal;color:#000;text-decoration:none;'>{text_title}■{stats}</span>
 <span><a href='{url}' style='display: block;position: absolute;left: 0;top: 0;height: 100%;width: 100%;text-indent: -999px;'>.</a></span>
 </div>
 </li>
 " //表示するHTMLの設定
 );
 wpp_get_mostpopular($arg);
}?>

このようにwpp_get_mostpopularを実行し、変数の配列の中に各パラメータの値を記載していきます。
そうすることで、簡単に人気記事を記事内表示させることが可能に！

また、phpで記載しているため簡単にcssでデザイン回りもカスタマイズすることができるのも利点です。。

WordPress Popular Postsの応用方法（２）
ショートコードの使用

今説明したwpp_get_mostpopular関数を用いるやり方が良くわからないという方のために、WordPress Popular Postsではショートコードが用意されています。

それが「wpp」です。
wppタグを使い下記のようにパラメータ渡してあげることにより、簡単に表示させることが出来ます。
※実際使用する場合「【】」→「[]」に変更してください。

【wpp limit=5 range=weekly stats_views=1 order_by=view】

• HTML・CSSコピペで簡単！多階層のドロップダウ... 28ビュー
• WEBライターでも原稿の校正・校閲時に使う校正記号... 9ビュー
• リスク有り！2016年9月よりグーグルアドセンスが... 3ビュー
• HTML・CSSコピペで簡単！facebookなどSNSフォローボタンの実装 3ビュー
• Headroom.jsでメニューをスッキリ【オスス... 2ビュー

こちらはさらに簡単に表示させることができ、cssを使用しデザインもお好みのに修正できます。

WordPress Popular Postsの応用方法（３）
さらに上級編「wpp_custom_html」

もっとコテコテにカスタムしたいという方にぴったり。

ここから、
プラグインのドキュメントを見ることができます。
wpp_custom_htmlの関数を使用にもっと柔軟にカスタマイズすることが可能です。

私のもうひとつのサイトでは、プラグインを入れただけでトップページの人気記事が表示されるようにカスタムしちゃいました。
皆さんもいろいろ試してみてください。

（ icon-star 前回の記事も見る）