WordPress には、サムネイルを表示させるための「アイキャッチ機能」がありますが、今回はそのアイキャッチ機能もプラグインも使わずに、記事一覧のページなどにサムネイル画像を表示させる方法を紹介します。

そもそも WordPress のアイキャッチ機能は、投稿記事１つ１つに設定しなくてはいけないので少々面倒なんですよね。
そこで、この作業を省いて、投稿記事に挿入されている画像を自動的にサムネイルとして表示させようという魂胆です。
もちろん、記事に使われている画像のサイズはバラバラですから、サムネイル化するときに任意のサイズにトリミングさせることも重要です。

必要な処理は３段階。

  1. 投稿記事で最初に使われている画像を取得。
  2. 記事内で画像が使われていない場合は、あらかじめ用意しておいたサムネイル用の画像を使用する。
  3. 任意の大きさにトリミングしてサムネイルとして表示させる。

以上を１つずつ解決していきましょう。

functions.php の設定

まずは functions.php に以下のコードを追加します。

function my_thumbnail() {
	global $post;
	if ( preg_match_all( '//i', $post->post_content, $matches) ) {
		$first_img = $matches[1][0];
	} else {
		$first_img = false;
	}
if(empty($first_img)){ //Defines a default image
	$first_img = "/images/thumbnail.png";
	}
return $first_img;
}

/images/thumbnail.png の部分は記事内に画像がない場合に表示させるための、あらかじめ用意しておいたサムネイル画像へのパスになります。

この設定だけでも、必要な場所に <img src="<?php echo catch_that_image(); ?>" /> というコードを追加すればサムネイル画像を表示させることができます。
しかし、これだけだと画像がトリミングされていないため、記事によってサイズがバラバラのまま。
この問題を解決するために TimThumb というスクリプトを使います。

timthumb.php のダウンロード

「TimThumb」のダウンロードは以下より。

TimThumb（tmthumb.php）配布元：
https://code.google.com/p/timthumb/

直リンク：
https://code.google.com/archive/p/timthumb/

本体はわずか1ページのphpファイルになっています。

ちなみに「TimThumb」で検索すると、各サイトでセキュリティの脆弱性が指摘されていますが、ヴァージョン 2.0 以降では解決されていますのでご心配なく。

timthumb.php の設定

ダウンロードした timthumb.php はテーマファイルの中などにアップロードします。

ここまでで、すべての準備が整いました。
テーマファイルの中、サムネイルを表示させたい場所に以下のコードを記述しましょう。

<img src="/themes/timthumb.php?src=<?php echo my_thumbnail(); ?>&w=100&h=100&q=100" alt="サムネイル" width="100" height="100" />

１つめの src で指定している /themes/timthumb.php の部分はアップロードした timthumb.php へのパスになります。
２つめの src で、最初に設定した <?php echo my_thumbnail(); ?> を呼び出し、トリミングの処理をかけています。

以上で目的は達成されましたが、TimThumbにはあらかじめ用意された様々なパラメーターがあるので、その一部も合わせて紹介します。

TimThumb のパラメーター

画像の大きさ：

  • w：画像の幅を指定します。例［&w=200］デフォルト値：100
  • h：画像の高さを指定します。例［&h=200］デフォルト値:100
  • q：クオリティを指定します。例［&q=80］（0〜100で指定）デフォルト値：90

上記のデモ：http://www.binarymoon.co.uk/demo/timthumb-basic/（作者サイト）

ズーム＆クロップ：
画像サイズを変えて切り取るための設定です。

  • 0：切り取らずにサイズ調整だけで合わす。例［&zc=0］（変形の恐れあり）
  • 1：最も良いサイズにして切り取る。例［&zc=1］（デフォルト値）
  • 2：小さくするだけ。枠線追加可能。例［&zc=2］
  • 3：小さくするだけ。例［&zc=3］

上記のデモ：http://www.binarymoon.co.uk/demo/timthumb-zoom-crop/（作者サイト）

キャッシュについて

TimThumb は読み込んだ画像をサムネイル化して表示する際に、作った画像をキャッシュとして保存します。
この際に自動で「cache」という名のフォルダを生成するのですが、サーバーの設定によってはフォルダが生成されない場合もあります。
そのときは、アップロードした timthumb.php と同じディレクトリに手動でフォルダを作り、そのフォルダを「cache」と名称変更してください。

もし動かない場合の対処方法

もし TimThumb が動かなかった場合、以下の点を確認してみてください。

  1. src= に設定したパスは正しいか？
  2. timthumb.php へのパスは正しいか？
  3. cache ディレクトリのパーミッションはどうなっているか？

cache ディレクトリのパーミッションは「707」または「777」も試してみてください。

それでも動かない場合は…？
以下のコメント投稿フォームかお問い合わせフォームからご質問をどうぞ。

以上。アイキャッチ機能もプラグインも使わずにサムネイルを表示させる方法でした。

サムネイル表示にはもう１つ、TimThumb と似た機能を持つ phpThumb というスクリプトもあります。こちらも非常に便利なのですが、未だ脆弱性の問題が残っていて、開発も停滞しているようです。
もし phpThumb を使っている方がいらっしゃったら、この機会に TimThumb に乗り換えてみてはいかがでしょうか？

TimThumb – PHP Image Resizer
http://www.binarymoon.co.uk/projects/timthumb/