更新しても追従！WordPressで常に最新の記事トップ画像をサムネイル表示する方法。

料理メニューをWordPress記事のサムネイルインデックスで構築した時にうまくいかなかったので、解決法のメモです。

Auto Thumbnailプラグインは、一度アイキャッチ画像を作成すると更新されない

当初はAuto Thumbnailでアイキャッチ画像に自動割り当てし、インデックスページで各記事のアイキャッチ画像を表示しようと思ったのですが、一度アイキャッチ画像に割当られた画像は、トップ画像が更新されてもアイキャッチ画像は変更されないようです。

最初の1枚目の画像を取得する方法に変更

さらに今回はアイキャッチ画像の編集ができないスマートフォンのアプリ版WordPressからの更新する必要があったので、記事の一番最初の画像ファイル名を取得する方法に変更しました。

参考記事：
WordPressの投稿記事内の画像の最初の1枚をサムネイルとして表示する方法
http://memocarilog.info/wordpress/theme-custom/3554

上記サイトで紹介されているコードで、最初の1枚の画像URLを取得します。

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

if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}

function catch_that_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

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

$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image

$first_img = "/images/default.jpg";

}

return $first_img;

}

目当ての画像の自動縮小されたURLを取得

上記のコードはフルサイズの画像を取得しているので、WordPress「設定＞メディア設定＞画像サイズ」の中サイズに、今回必要な画像サイズを設定し、をjpg拡張子を省いた文字列を返し、WordPressのテンプレートで中サイズのファイル名を表示するすように書き換えました。

return $first_img;を下記に書き換え

$first_filename = str_replace(".jpg","",$first_img);
return $first_filename;

1 2	$first_filename = str_replace(".jpg","",$first_img); return $first_filename;

WordPressのテンプレートでimgのsrcにこの関数の後に続けて、中サイズのサムネイルを表示するURLに。

<img src="<?php echo catch_that_image(); ?>-medium.jpg" />

1	<img src="<?php echo catch_that_image(); ?>-medium.jpg" />

【2014.5.6追記】テーマTwenty Thirteenをベースにしている場合、サムネイルのファイル名にピクセル数が付加される設計になっているので、Thumbnail Changer Pluginを使用して、○○-thumbnail.jpg、○○-medium.jpg、○○-large.jpgのように決まった名前で生成します。

プラグイン配布サイト：

https://github.com/creatorish/thumbnail-filename-changer

これでアプリ版WordPressでトップ画像を差し替えても、サムネイルも連動して変更されるようになります。