● スプレッドIT!

WordPress://一覧ページに自動切り抜き&リサイズサムネイル画像を表示

spreads-wp-thumnail

WordPressにはアイキャッチ機能という、その記事に対してのキャッチ画像を設定でき、簡単に呼び出せる機能が備わっております。

ただ、使い方にもよりますが、いちいちアイキャッチ画像を用意するのが面倒くさかったりします。記事内に使ってる画像を自動的にサムネイルで表示してくれればいいのに!という要望は多いはずです。

しかし、記事内の画像を一覧ページにそのまま表示してしまうと、大き過ぎたりしてしまいますので、自動的にサムネイル画像のサイズを調整するようにしてみます。リサイズだけだと、使っている画像のサイズが記事毎に違ったりすると、一覧ページの画像サイズもバラバラになってしまい統一感が出ません。

そこで、リサイズしつつ、画像のサイズも切り抜いて全て同一サイズにしてしまえば、とても楽になり、かつデザイン性を損ないません。更に、画像が無い記事に対しては、ノーイメージ画像を表示するようにしておけば、完璧ですね!


まずは、functions.phpに下記コードを追記してください。

function my_thumbnail() {
	global $post;

	$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
	$first_img = $matches['1']['0'];

	if (empty($first_img)) $first_img = "/images/noimage.gif";
	return $first_img;
}

「/images/noimage.gif」のパスにノーイメージ用の画像を設置するか、パスを書き換えてください。

次に、archive.phpや、taxnomy.phpなどの一覧表示用テンプレートに、
サムネイル画像表示用のタグを設置するのですが、

<img src="<?php echo my_thumbnail(); ?>" />

と書いた場所にとりあえず画像は表示することは可能ですが、自動切り抜き&リサイズを行うために、下記の「tmthumb.php」というPHPスクリプトをダウンロードしてサーバー上の任意の場所に設置してください。


TimThumb配布元:
https://code.google.com/p/timthumb/

tmthumb.phpへの直リンク:
http://timthumb.googlecode.com/svn/trunk/timthumb.php


これで、

<img src="/timthumb.php?src=<?php echo my_thumbnail(); ?>&w=150&h=120&q=100" alt="" width="150" height="120" />
と任意の場所に書くことで、その場所に指定したw,widthとh,heightのサイズに切り抜きリサイズされた画像がqのクオリティで再圧縮されて表示されます。


「TimThumb」はセキュリティの脆弱性が指摘されていますが、2.0 以降では解決されていますのでご安心ください。


また、TimThumbには他にもパラメーターを設定することで、枠線を加えたり、切り抜かないでサイズだけ調整したり、画像生成をキャッシュしてくれたりもしてくれます。

書き込み権限にもよりますが、設置ディレクトリに「cache」というフォルダを自動的に作成し、キャッシュを蓄えます。

書き込み権限が無い場合は、手動でフォルダを作成し、パーミッションを707,777などに設定してください。


以下に簡単なパラメーターを紹介しておきますので、参考にしてみてください。

w:画像の幅を指定します。 デフォルト値:100 例[&w=150]
h:画像の高さを指定します。 デフォルト値:100 例[&h=120]
q:クオリティを指定します。 デフォルト値:90 例[&q=100](0〜100)
zc=0:切り取らずにサイズ調整だけで合わす。
zc=1:最も良いサイズにして切り取る。(デフォルト)
zc=2:小さくするだけ。枠線追加可能。
zc=3:小さくするだけ。

これで、よりWordPressでのホームページ制作が、楽しくなりますね!
このエントリーをはてなブックマークに追加