最新記事をサイドバーでも紹介できる便利なWordPressプラグイン

こん＊＊は、@latexcatsuitです。珍しく二日連続でのアップですｗ

WordPressを使っているブログのトップページから見に来てくれる方はいいんですが、各記事へ直接飛んできてくれるビジターの方に他の最新記事を紹介したいなと思うことありますよね。

そんな時は今村さんがリリースされているNew Post Catchが便利です。
このプラグイン、「最近の投稿（新着記事）」にアイキャッチ（サムネイル）を表示できる優れ物でして、
ウィジェットが使用出来るテンプレートのサイドバーにドラッグ＆ドロップし、基本的に5箇所の設定のみで使用出来ます。

CSSでの整形にも対応していることもあり、こちらのページにも紹介されている通り、
newpost-catch.cssを使用しているテンプレートのcss用フォルダに格納するだけ。

便利ですよね。

ただ、アイキャッチの縦横比とNew Post Catchで表示する画像の縦横比を同じにしておかないと、
縦横比の狂ったビミョーな画像表示になってしまいます。

ではどうすればいいのか。

そこで便利なのが、画像のURLを渡すだけで好みの大きさに切り分けることが可能なtimthumb.phpです。
※timthumbには脆弱性の問題がありますので、こちらのプラグインを使用するなどして常に最新版にしておきましょう。

そのtimthumbを使用できるようにNew Post Catchを改造する方法をご紹介します。
※改変については自己責任でお願いします。

1.New Post Catchプラグインをこちらのページからダウンロードし、zipファイルを解凍する
2.New Post Catchフォルダにtimthumb.phpをコピー
3.New Post Catchフォルダにあるclass.phpの以下の箇所を改変
88〜90行目

<img src="<?php echo esc_attr( $thumb_url ); ?>" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>"  />
<?php } else { ?>
<img src="<?php echo esc_attr( no_thumb_image() ); ?>&w=50&h=50&zc=1"  width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>" />

これを

<img src="[timthumbへのパス]/timthumb.php?src=<?php echo esc_attr( $thumb_url ); ?>" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>"  />
<?php } else { ?>
<img src="[timthumbへのパス]/timthumb.php?src=<?php echo esc_attr( no_thumb_image() ); ?>"  width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>" />

とします。
4.FTPでNew Post Catchフォルダごとプラグインフォルダへアップロード
5.New Post Catchプラグインを有効化し、お好みの場所へウィジェットを追加、設定を行う

以上です。あとはCSSを弄るなりして、好みのスタイルへと変更すれば終了です。

簡単でしょ？

上記の改変方法ですと縦横100pxの正方形画像が生成されるのですが、改変時に

<img src="[timthumbへのパス]/timthumb.php?src=<?php echo esc_attr( $thumb_url ); ?>&w=50&h=50&zc=1" width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>"  />
<?php } else { ?>
<img src="[timthumbへのパス]/timthumb.php?src=<?php echo esc_attr( no_thumb_image() ); ?>&w=50&h=50&zc=1"  width="<?php echo esc_attr( $width ); ?>" height="<?php echo esc_attr( $height ); ?>" alt="<?php esc_attr( the_title() ); ?>" title="<?php esc_attr( the_title() ); ?>" />

などとすることで縦横サイズまで指定することが可能です。
（wが幅、hが高さとなります）

縦横比の狂ったビミョーなアイキャッチ画像表示が気になっていた方、これで解決を図ってみてはいかがでしょう？

なお、言うまでもありませんが、プラグインのアップデートをすることでこの改変がリセットされてしまいますので、ご注意ください。