WordPress Popular Postsでウィジェットを使わずに人気記事をアイキャッチ(サムネイル画像)付きで表示する方法

読了時間:約 7分44秒
Wordpress Popular Postsでウィジェットを使わずに人気記事をアイキャッチ(サムネイル画像)付きで表示する方法

このブログも少しずつ記事が増えてきましたので、人気記事ランキングを表示することにしました。

 

WordPressで人気記事を表示するプラグインWordPress Popular Postsは、ウィジェットを使って気軽に導入することもできますし、テンプレートタグを使って思い通りにカスタマイズすることも可能です。

 

(2012/11/20 追記:timthumb.phpの脆弱性対応しました。記事の最後に追記しました。)

ウィジェットを使わずに導入してみる

今回このブログでは、ウィジェットを使わずに導入してみましたのでその手順を公開します。

 

まず、『wordpress popular posts』をインストールして有効化したら、人気記事ランキングを表示したい場所(sidebar.phpの中など)に下記のダグを記入します。

<?php get_mostpopular(); ?>

ただし、このままではデフォルト表示になってしまうため、ちょこっとカスタマイズします。

カスタマイズした例が下記のコードです。

<?php get_mostpopular('range=weekly&order_by=views&limit=5&stats_comments=0&pages=0&thumbnail_width=64&thumbnail_height=64&thumbnail_selection=usergenerated'); ?>

上記のコードの場合、
「週間の閲覧数順に、上位5つを表示する。コメント数は表示せず、固定ページはランキングに含めない。サムネイルを64✕64ピクセルで表示する。」
というルールになります。

  • range=weekly で週間を指定しています。(他に、daily、monthly、allを指定できます。)
  • order_by=views で閲覧数順を指定しています。(他に、comments、avgを指定できます。)
  • limit=5 で表示する記事数を指定しています。
  • stats_comments=0 で、コメント数を表示しない、としています。(表示する場合は 0 を 1 に変更。)
  • pages=0 で、ランキングに固定ページを含めない、としています。(含める場合は 0 を 1 に変更。)
  • thumbnail_width=64 で、サムネイルの横幅をピクセルで指定しています。(この場合は64ピクセル。)
  • thumbnail_height=64 で、サムネイルの高さをピクセルで指定しています。(この場合は64ピクセル。)
  • thumbnail_selection=usergenerated で、サムネイルを表示する、としています。

 

このカスタマイズコードの場合、下記のHTMLが生成されます。

<ul>
  <li>
    <a title="記事のタイトル" href="パーマリンク"><img width="64" height="64" title="記事のタイトル" alt="記事のタイトル" class="wpp-thumbnail wp-post-image" src="サムネイルのパス"></a>
    <a title="記事のタイトル" href="パーマリンク"><span class="wpp-post-title">記事のタイトル</span></a>
  </li>
  <li> ・・・(略)・・・ </li>
  <li> ・・・(略)・・・ </li>
  <li> ・・・(略)・・・ </li>
  <li> ・・・(略)・・・ </li>
</ul>

表示サンプルは、このページの右側の『人気記事』をご覧ください。

HTMLがわかる方は、ウィジェットを使わなくても上記のようにテンプレートファイルに記述すれば思い通りに表示できますよ!

 

 

2012/11/20 追記:

WordPress Popular Postsのサムネイルを表示させるのに使う timthumb.php に脆弱性が見つかりました。

セキュリティ対策のため、このファイルは削除したほうがいいです。

 

timthumb.php を使わずにサムネイルを表示させる方法は下記です。

(参考:WordPress Popular Postsでサムネイルを表示している方は要注意! | PLUS

 

wp-content/plugins/wordpress-popular-posts/wordpress-popular-posts.phpの1078行目辺りにある

$thumb .= "<img src=\"". $this->pluginDir ."/timthumb.php?src={$path}&amp;h={$tbHeight}&amp;w={$tbWidth}\" width=\"{$tbWidth}\" height=\"{$tbHeight}\" alt=\"{$title}\" border=\"0\" class=\"wpp-thumbnail wpp_fi\" />";

$thumb .= "<img src=\"{$path}\" width=\"64\" height=\"64\" alt=\"{$title}\" border=\"0\" />";

に書き換えます。

(widthとheightはご自分のサイズに書き換えて下さい。)

 

サムネイルを表示することができたら、timthumb.php を放置するのは危険なので削除しておきましょう。

 

この記事が、WordPressサイト構築の参考になれば幸いです。

RSSフィードを購読する

ITポケットでは、ビジネスや生活が向上するTipsを発信しています。
よろしければRSSフィードをご購読ください。

シェアする

このエントリーをはてなブックマークに追加
Clip to Evernote

関連記事

コメント

お仕事のご依頼について

コーポレートサイト、ECサイト、CMS、ブログなど、あらゆるWebサイトの制作をお手伝いいたします。

企画からデザイン、その後の運営や保守まで対応することが可能です。

自らECサイト運営を行っていることもあり、顧客目線でのサイトづくりが得意です。

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

ECサイト(EC-CUBE / Zen Cart / カラーミーショップ)

各ブログのカスタマイズ

 

クライアントのご要望にお答えし、予算やケースにあった選択で、臨機応変に対応いたします。

ご相談・ご質問や、お見積もりのご依頼など、お気軽にお問い合わせください。

プロフィール

菊地翼

菊地翼(きくちつばさ)
WEBクリエイター。株式会社ウイングフォレスト代表取締役。マカー歴16年。IT・ガジェット・ライフハックと甘いものが大好き!

詳しくはこちら 

サイト内検索

Facebookページ

Twitter