［み］WordPressプラグインPopular Postsでアイキャッチ画像を表示する。

今回の記事は完全にみはら用のメモです。
みはら.comのサイドバーに表示している「人気の記事」はPopular Postsというプラグインを使っています。
「最新の記事」のように、記事のアイキャッチ画像を表示させたいと思ってGoogle先生に質問しまくった結果です。

Popular Postsをインストール

まずは、インストール。
ダッシュボードのプラグイン→新規追加→検索「Popular Posts」で。
Popular Postsを動かすには、Post Plug-in Libraryも必要なのでいっしょにインストール。

プラグインを弄る

弄るのはPost Plug-in Libraryの中のoutput_tags.php。
このファイルの中に以下を追加。

function otf_postthum($option_key, $result, $ext) {
	$post_id = $result->ID;

        if(has_post_thumbnail($post_id)){
		$str = get_the_post_thumbnail($post_id, 'post-thumbnail');
	}
	return $str;
}

追加するのはどこでもだいじょぶです。
プラグインを弄るのはこれでおしまい。

Output templateを弄る

最後に、どんなカンジに出力すんのよ？っていうOutput templateを弄る。
デフォルトでは

<li>
  {link}
</li>

ってなってます。

これを、

<li>
  {postthum}
  {link}
</li>

とすると、記事のアイキャッチ画像が出力されます。

さらに、テーマにあわせてCSSを弄ります。
いま使ってるSightっていうテーマは、デフォルトで「Sight Recent Posts」っていうウィジェットがあるんで、これに合わせていきます。
で、結果がこちら。

<li>
  <div class="rpthumb clear">
    <span  class="attachment-mini-thumbnail">{postthum}</span>
    <span class="rpthumb-title">{link}</span>
  </div>
</li>

そうです。
ただ単に、class名をそのまんまくっつけただけですね。

ひとつだけ困ったのが、アイキャッチ画像がどうしても縦にびろーーーーんとなってしまうところ。
ということで、CSSをいじります。

.rpthumb img {
	width: 50px;
	margin-right: 15px; 
	float: left;
}

ここに、

height: 50px;

を追加して完成です。

とは言え、テーマを変えたらまたいろいろ弄らないとダメですね。