WordPressでブログを運営している人は恐らく一度は耳にしたことがあるプラグイン「WordPress Popular Post」。

本日はカスタマイズ方法とウィジェット経由ではなく任意の場所に表示させる方法をご紹介したいと思います。

そろそろGoogle Analyticsを使用した人気記事表示にしようと思っているのですが、その前にこのプラグインを弄りたくなったので備忘録兼ねて書いておきます。

ご興味のある方は色々とオリジナルの表示を楽しんでみてください。

WordPress Popular Posts

本日ご紹介するプラグインは「WordPress Popular Posts」というものです。

→ WordPress Popular Posts

人気記事をブログのサイドバーやコンテンツ下に誰でも簡単に表示させることのできるプラグインで、現在も根強い人気を誇っています。

「ブログ歴◯年の私が使っているプラグイン厳選○」とかそういう系の記事に大抵入っているプラグインですね。

プラグインを有効化すれば「外観」からウィジェットを経由して表示させることができるのですが、PHPを使い慣れている人からするとむしろウィジェットではなくファイルに直書きしたいという人も出てくるでしょう。

今回は「任意の場所に表示させるコード」と「カスタマイズの方法」の2点をまとめてご紹介したいと思います。

任意の場所に表示させるコード

single.phpやsidebar.phpなど表示させたい位置のPHPに以下のコードを貼り付けるだけで表示させることができます。

<? wpp_get_mostpopular(); ?>

たったこれだけです。

けれども、このやり方だけだと不必要な情報が表示されたり反対に表示して欲しいのにされていない場合があります。

こうしたことがないようにオリジナリティ溢れた見せ方にするカスタマイズの方法を次にご紹介します。

使用できるパラメータの確認方法

Popular Postsには既に使用できるパラメータが用意されています。

上記に表示している画像はほんの一例で実際に用意されているパラメータはWordPressのダッシュボードにある「設定」→「WordPress Popular Posts」を選び、「よくある質問」のタブ内に全て表示されています。

パラメータを使ってみる！

用意されているパラメータを実際に使ってみましょう。

パラメータを「&」で繋いでいくことが基本で、ページ内で見せ方を変えることを想定してidで「popularPostsList」を指定しています。

idの代わりにclassを使用、「popularPostsList」を自分がわかりやすい名前に変更することは問題ありません。ご自由に変更してください。

<div id="popularPostsList">
<? wpp_get_mostpopular('
order_by="views"&
limit=15&
post_type=post&
range="weekly"&
thumbnail_width=90&
thumbnail_height=90&
stats_comments=0&
wpp_start="<ol>"&
wpp_end="</ol>"
'); ?>
</div>

上記に書いたコードを日本語で説明すると…

・ページビュー数を基準

・15記事表示

・post（記事）を対象

・期間は1週間

・サムネイルサイズは縦横90px

・コメントの表示はなし

・リストをolタグで囲む

これらを条件とした人気記事（ランキング）を作成することができます。

カスタマイズの補足

パラメータや任意の場所に表示させる方法をマスターすれば、サイドバーでは今週1週間の人気記事を表示、コンテンツ下では記事と同じカテゴリーの人気記事を表示するなど同一ページ内で見せ方を変えることができます。

divで括ることで人気記事の見せ方を個別にCSSで指定することが可能になり、表現が非常に楽しくなるプラグインの1つかなと思います。

実際にPC版のサイドバーには「WordPress Popular Post」で作成した人気記事を表示しています。（2015年6月現在）

「WordPress Popular Post」は多くの人が使用しているプラグインなので、何かの参考になればと思い書いてみました。今更でしたかね。

(｡-∀-) 移行前の備忘録なのでご勘弁を…。

管理人のひとこと

このカスタマイズで私がハマったのは「wpp_start="<ol>"」にidを指定したら全く動かなくなってしまったことです。

divではなくolにIDを振ることでコードをなるべく少なくするという考えが甘かったようでした。私と同じようなハマり方をしないようにご注意ください。

上記問題は解決いたしました。以下に掲載した追記部分を参考ください。

その他、便利な見せ方や使い方、またご指摘などお気軽にご連絡ください。

おしまい！

追記（2015.6.25）olのID問題解決

「wpp_start=」を利用してIDがふれない問題ですが、ご指摘をいただき解決いたしました。

原因：引用符、二重引用符の使い分け

解決方法：wpp_start=\'<ol class="hogehoge">\'&

最後の「&」はwpp_startを入れる場所に合わせてご利用ください。

参考：コピペでOK！ブログ記事の上にカテゴリー別ランキングを表示する方法 | MasaLog

• [Å] スマホ版デザイン ヘッダーとアイキャッチを意識してデザイン変更をしたご報告とその理由
• [Å] WordPressの管理画面で文字（アイコン）が四角になったときの修正方法
• [Å] Like Boxはもう古い！Facebook 新仕様「Page Plugin」をブログに設定・設置する方法

＼ この情報を周りの人にも教える ／

[Å]「WordPress Popular Post」をカスタマイズして任意の場所に表示させる方法（備忘録）

この記事が気に入った方はいいね！で
更新情報を受け取る！