[WordPress]カスタムフィールド画像からオリジナルサムネイルを生成して表示させる

WordPress

2013.04.02

イメージ

知人にエイプリルフールネタを言った所、一切のツッコミもなく終わってしまった可哀想な私、Latinです。

さて今回ですが、WordPressのカスタマイズ要件でもよくあるサムネイル周りの取り扱いについて。
オリジナルのサムネイルサイズを定義する事自体は割と簡単なんですが、カスタムフィールド絡んで来ると結構、「訳わからん･･･」みたいな状態になったりします。
え？私だけ？
とりあえず、フロントエンドで表示する所までをまとめてみようかと思います。

元々WordPressでは、画像フィールドに画像を入れ込むと、
管理画面の「メディア設定」で設定したサイズを元にサムネイルが自動生成されますが、これらの設定とは別に、オリジナルのサイズを定義したいケースがあるかと思います。

例えば、既にこれらの設定を使用している状態で、さらに別のサイズのサムネイルを作成・表示させたい場合などです。

functions.php にオリジナルサイズを定義

/* オリジナル画像サムネイルサイズの指定 */

add_theme_support('post-thumbnails');    // アイキャッチ画像を追加
set_post_thumbnail_size(150, 150, true); // 通常の投稿サムネイル

add_image_size('thumbnailSmall' ,100, 100 ,true ); // オリジナルサムネイルサイズ 小
add_image_size('thumbnailMidium',250, 250 ,true ); // オリジナルサムネイルサイズ 中
add_image_size('thumbnailBig'  ,500, 500 ,true ); // オリジナルサムネイルサイズ 大

functions.phpで add_theme_support('post-thumbnails') を呼び出す事により、テーマ内でアイキャッチ画像（投稿サムネイル）がサポートされるようになります。
（WordPress v2.9以上）

関数リファレンス/add theme support （WordPress Codex 日本語版）

続いて add_image_size でオリジナルサイズを定義。
add_image_size の引数は以下の通り。

add_image_size( $name,   $width, $height, $crop );
add_image_size( $定義名, $幅, $高さ, $切抜き );

$crop の引数では写真の「切り抜き」を定義します。
「切り抜く」なら true、「切り抜かない」なら false です。

今回は正方形で切り抜きたいので true にしてみます。

関数リファレンス/add image size （WordPress Codex）

サムネイルの表示テスト single.php

ここからは実際に生成されたサムネイルの表示確認をしてみます。
ここで注意ですが、上で定義した関数はアップロード時に走る処理なので、
既に投稿された記事のサムネイルサイズは当然の事ながら"変わる事はありません"。
必ず画像をアップロードしなおしてから確認してください。

ちなみにテンプレートファイルへの記述は以下のようなコードで表示確認できます。

<?php while ( have_posts() ) : the_post(); ?>

◆オリジナルサイズ―大
<?php echo wp_get_attachment_image(get_post_meta($post->ID, 'フィールド名', true),'thumbnailBig'); ?>

◆オリジナルサイズ―中
<?php echo wp_get_attachment_image(get_post_meta($post->ID, 'フィールド名', true),'thumbnailMidium'); ?>

◆オリジナルサイズ―小
<?php echo wp_get_attachment_image(get_post_meta($post->ID, 'フィールド名', true),'thumbnailSmall'); ?>

<?php endwhile; // end of the loop. ?>