アイキャッチが設定されていない時に、記事中のリンク元画像からリサイズしてサムネイルを生成、使用する方法を紹介します
アイキャッチ以外の画像をサムネイルで使用する時の注意点
よくアイキャッチが設定されていなくても、記事内の最初の画像をを使ってサムネイルを表示する方法が紹介されていますが、記事内の画像なのでほとんどの場合は大きな画像を img タグで width, height を使って縮小表示させているものだと思います
記事中から img タグの画像のURLを取得するのはいいのですが、その後の一工夫が大切です
その画像がサイトにアップロードされているものであれば、既にサムネイルが生成されているはずなので、サムネイルサイズの画像を使うようにします
また、img タグが、FlickerやPicasa 等の外部サイトの画像へのリンクの場合は、サムネイルサイズの画像は、サイト内に存在しませんので、サムネイルを作成してキャッシュとして保存します
リンク画像のサムネイル作成
Flicker や Picasa ならいろいろ便利なプラグインがあるかも知れませんが、ここでは単に外部サイトのリンク画像に対し、サムネイルの生成、保存、読み出しを行う方法を紹介します
WordPress では、画像をアップロードした時に元の画像から大、中、サムネイルサイズにリサイズしてイメージを保存する機能を持っています
外部サイトにある画像に対しても、その処理と同等のことをやってあげれば、サムネイルを生成することが出来ます
最初にプログラムを見て頂いただければ、意外と簡単にサムネイルを作成して利用出来ることがわかると思います
2014/11/19 追記
Celtis-one テーマに機能を持たせていたのですが、現在はプラグイン化して celtispack プラグインへ機能を移しています
プログラムも一部修正していますので参考程度で御覧ください
プログラムは、WordPress Plugin : Celtispack ページからダウンロードすることが出来ますので、modules/thumb-optimize/thumb-optimize.php ファイルを参照して下さい
/**
* urlリンク画像の指定サイズのサムネイルを自サイトの uploads フォルダにキャッシュとして生成
* また、そのサムネイルの url, width, height 情報を取得する
*
* $imageurl urlリンク画像
* $atrsize urlリンク画像に指定されていた width, height 属性値
* $size メディア設定の画像サイズ選択：文字列のみ thumbnail / medium / large / small(custom)
*
* 戻り値：サムネイル画像情報 array('url', 'width', 'height')
* false の時はサムネイル作成なし（元画像リンクデータを使用）
*/
public static function getmake_thumbnail_size( $imageurl, $atrsize, $size) {
global $celtisone_options;
$upload = wp_upload_dir();
$keyid = md5( $size . '_' . $imageurl); //40文字以下
$info = pathinfo( $imageurl );
$ext = (empty($info['extension']))? '' : $info['extension'];
$fname = $upload['basedir'] . '/celtisone/thumbnail/' . "{$keyid}.{$ext}";
$opsize = CeltisoneLib::get_thumbnail_optionsetsize($size);
$value = get_transient( $keyid );
if (false !== $value) {
if ( ! file_exists( $fname )) { //サムネイルファイル存在するか？
delete_transient( $keyid );
$value = false;
}
else if(!empty($celtisone_options['thumb-optchk'])) {
//現在のサムネイルサイズ設定値と登録サイズ値があっているか照合
$dims = image_resize_dimensions( $value['srcwidth'], $value['srcheight'], $opsize['width'], $opsize['height'], $opsize['crop'] );
if(!empty($dims)){
if($value['width'] !== $dims[4] || $value['height'] !== $dims[5]){
unlink($fname);
$value = false;
}
}
}
}
if (false === $value) { // transient ないか有効期限切れ
$newsize = false;
if ( file_exists( $fname )) { //サムネイルファイル存在するならデータ再生成
$getsize = getimagesize( $imageurl );
if(!empty($getsize)){
$srcsize['width'] = $getsize[0];
$srcsize['height'] = $getsize[1];
$getsize = getimagesize( $fname );
$newsize['width'] = $getsize[0];
$newsize['height'] = $getsize[1];
$imageurl = $upload['baseurl'] . '/celtisone/thumbnail/' . "{$keyid}.{$ext}";
}
}
else if($atrsize['width'] !== 0){ //指定サイズが元サイズより小さければ元のリンク画像からサムネイル作成
if( $atrsize['width'] > $opsize['width'] || $atrsize['height'] > $opsize['height']) {
$imgedit = wp_get_image_editor( esc_url($imageurl) );
if ( ! is_wp_error( $imgedit ) ){
$srcsize = $imgedit->get_size(); //ソース画像サイズ
$resize = $imgedit->resize( $opsize['width'], $opsize['height'], $opsize['crop'] );
if ($resize !== FALSE) {
if ($size === 'large') {
$imgedit->set_quality((int)$celtisone_options['jpeg-large']);
} elseif ($size === 'medium') {
$imgedit->set_quality((int)$celtisone_options['jpeg-medium']);
} elseif ($size === 'thumbnail') {
$imgedit->set_quality((int)$celtisone_options['jpeg-thumb']);
} elseif ($size === 'small') {
$imgedit->set_quality((int)$celtisone_options['jpeg-thumb']);
}
$newsize = $imgedit->get_size(); //サムネイルサイズ取得
$imageurl = $upload['baseurl'] . '/celtisone/thumbnail/' . "{$keyid}.{$ext}";
$imgedit->save($fname);
}
}
}
}
if($newsize !== false) {
$value = array('url' => $imageurl, 'width' => $newsize['width'], 'height' => $newsize['height'], 'srcwidth' => $srcsize['width'], 'srcheight' => $srcsize['height']);
set_transient( $keyid, $value, DAY_IN_SECONDS);
}
}
else { // transient 有効期限更新
set_transient( $keyid, $value, DAY_IN_SECONDS);
}
return( $value );
}
この関数は、img タグで指定されていたリンク画像のソースURLと width, height の属性値、及び取得したいリサイズ後の画像サイズ（thumbnail / medium / large）を指定すると、指定された画像サイズのキャッシュファイルのURL、width, height 値を返します
いくつかポイントを説明します
サムネイル保存場所
このテーマ独自の機能なので、アップロードフォルダにテーマ名の celtisone フォルダを作り thumbnail フォルダ下に保存していきます
サイトアドレス/uploads/celtisone/thumbnail/
サムネイルファイル名
リサイズしたサムネイル画像はキャッシュファイルとして同じフォルダに生成されるので、ファイル名が重複しないように指定サイズ名と元画像のURLを使いMD5というハッシュ値を生成してファイル名として利用します
また、生成したハッシュ値はこの後キーデータとしても使用します
サムネイル情報（メタデータ）保存場所
WordPress には transient API という有効期限付きのデータを保存する機能があるので、この機能を使用して、 キーデータに関連付けて、サムネイル画像のURL、width, height 等のデータをメタ情報として保存します
有効期限は、とりあえず２４時間としていますが、この関数が呼び出される毎に更新しているのと、万一、期限切れとなった場合でも、サムネイル画像のキャッシュファイルは残っているので、getimagesize( )関数を使い width, height 情報を取得してメタ情報を再生成しまので、実質的に無期限と同等です
サムネイル画像生成処理
指定サイズのサムネイル情報（メタデータ）が存在しない場合は、元画像データを読み込んでリサイズ処理をします（指定サイズが元画像より小さい場合のみ）
この処理は、 WordPress 内で定義されている関数をいくつか呼び出すだけなので簡単に行うことが出来ます
リサイズしたサムネイル画像を保存したら、同時にメタデータの保存も行います
| 1 | 画像データ読み込み | wp_get_image_editor( $url ) |
| 2 | リサイズ | resize( $width, $height, $crop ) |
| 3 | jpeg 用画質指定 | set_quality( $quality ) |
| 4 | リサイズ画像保存 | save($fname) |
| 5 | meta データ保存 | set_transient( $keyid, $meta, $time) |
WordPressの画像処理に関しては、次のサイトで、wp_image_editor を使用した画像のリサイズ、回転、反転、切り抜き等の処理が紹介されているので参考になります
WordPress Image Editing Tutorial (WP_Image_Editor Class Examples)
サムネイル情報取得
元画像のURLと画像サイズから生成したキーデータからサムネイルの meta データを取得します
meta データ取得 get_transient( $keyid )
サムネイル画像のURL,width,height 情報を取得できれば、あとは、この値を使って img タグを生成して、サムネイル画像を表示します
これで、外部サイトのリンク画像のサムネイルもサクサク表示できるようになります (^^)