WordPress サムネイル再作成はいつやるの

今ひとつわかりにくいWordPressのサムネイルについて、テーマを作成していてようやくわかってきたので整理しておきます

サムネイル作成

WordPressには、サムネイルの設定としてメディア設定があります

では、これらの設定を使ってサムネイル等の画像が生成されるのはいつなのでしょうか

答えは、画像ファイルがアップロードされた時です

画像ファイルは通常、投稿記事に紐付けられるので、記事作成画面の左上にある メディアを追加 ボタン、あるいは画面右の アイキャッチ画像を設定 をクリックすると表示されるメディアアップロードでファイルをアップロードした時に、指定されている設定値によって画像がリサイズされて生成されます

また、テーマ等で独自サイズのサムネイル設定が追加指定されている場合には、その独自サイズのサムネイルもアップロード時に作成されています

メディアアップローダ画面

アップロードされた画像はメディアライブラリに登録され、記事中での表示にどのサイズを使用するかを選択できるようになっています

※メディアライブラリでの表示からは元画像のデータしか見えていませんが、元画像をリサイズした画像は作られていますので、FTP等で確認すると確かに作られていることがわかると思います

また、アップロードしたファイルは、年月ベースのフォルダに整理 のチェックが入っていると

サイトアドレス/uploads/年/月フォルダに保存されます

ちなみにこの年月は記事の作成日が基準なので、後から記事を修正して画像を追加した時もその時に日付ではなく作成日の年月フォルダに保存されます

記事に添付されている画像（元画像）は、そのサイズのまま保存されますが、元画像よりより小さい画像サイズの設定がされていれば、そのサイズ条件でリサイズした画像が生成されます

アイキャッチとは

また、投稿記事には、アイキャッチ画像というのがあり、その記事をイメージする画像を登録することが出来ます。

このアイキャッチに登録されている画像をサムネイルサイズにリサイズしたものが、記事一覧等でのサムネイルとしてよく使われることもあり、アイキャッチとサムネイルを混同しやすい一因となっています

アイキャッチには、大きな画像サイズを登録出来ますし、サムネイルサイズ以外のアイキャッチ画像を表示するテーマもたくさんありますので、アイキャッチには中サイズ以上の画像を登録したほうが良いです

サムネイルの問題点

ここまで読んでいただくといろいろ不都合が見えてきます

サムネイルは、画像ファイルがアップロードされた時にしか作成されない

例えば、テーマを作成していて、サムネイル定義とは別に独自に 70×70 サイズの small サムネイルを定義して関連記事等で表示しようとした時に、プログラムから、過去に投稿した記事のアイキャッチには small サイズが存在しないので取得できません

代わりにサムネイルサイズを取得して表示することは可能ですが、画像のサイズが大きくなってしまうぶん転送するデータ量も増え、ブラウザでの表示時にも縮小して表示しなければなりません

また、サムネイルのサイズをちょっと変更したいとか、サムネイルの作成で、縮小か切り抜き(crop) を変更したいとかも、アップロードした時にしか作成されないと、ちょっとイメージが違ったからと後から簡単に変更することも出来ません

新しい投稿のみが対象のサイズ設定なんて意味ないじゃーんと思い調べてみると、サムネイルを再作成する為のプラグインがいろいろあるようです

サムネイルを再作成

サムネイルを再作成するには、regenerate-thumbnails 等のプラグインがあります

素直にこれらのプラグインを使用すれば良いのですが、サムネイルの再生成は、主に３つの関数を実行すれば出来るようなのでテーマに組み込んでみました

2014/11/19 追記

Celtis-one テーマに機能を持たせていたのですが、現在はプラグイン化して celtispack プラグインへ機能を移しています

プログラムも一部修正していますので参考程度で御覧ください

自動的にサムネイルを再作成

実装したサムネイルの再作成機能は、即座に再作成するわけではありません

ページ表示時にサムネイル画像の表示があった場合に実行条件を判断して行います

対象サイズの画像が存在するか
画像サイズ（幅、高さ、crop）が設定値と一致しているか

この条件をチェックして異なっていたら、再作成を行ってから表示します

これにより再作成は、知らないうちに自動的に行われて終了するって寸法です (^^)

また、調べている時に jpeg 画像のリサイズ時に画質を指定できる事がわかったので、これも合わせて設定できるようにしました

※実際に再作成が行われたタイミングでは、若干時間がかかり表示が遅くなるかも知れませんが、一度再作成された後は、表示が遅くなることはありません

気になるようでしたら、サイズ設定値変更後にアーカイブ表示等を行えば、どの程度の表示遅れが生じるか確認出来ると思います

regenerate-thumbnails 等のプラグインを使用する場合は、チェックを外して再生成をしないように出来ます

jpeg 画像をもっと圧縮したい

画像データのサイズを小さくするには、まずは、画像のアップロード前に行う画像処理です

PNG と jpeg 形式をきちんと使い分け、サイズや色数を調整します

一般的に jpeg 形式のほうがサイズを小さくしやすいので、写真は jpeg 形式（低画質にすると線や文字が判別しにくい）、イラストや文字等なら PNG 形式とします

また、PNG形式はフルカラーだとサイズが大きいので、大体は２５６色パレットで使用するのがベターです

jpeg 形式のリサイズ画像画質

記事に添付された jpeg 画像は、アップロード時に元画像の画質から、サムネイル、中、大サイズにかかわらず画質９０という値でリサイズされています

サムネイルや中サイズへのリサイズでは、もっと低画質でサイズを小さくして転送データを少なくしたい　ということで、サイズごとに画質を指定できるようにしました

画質は 0-100 までの間で指定するようですが、４０より小さくするとちょっと気になったので、以下の値を選択出来るようにしました

デフォルトモード画質 [90]
画質優先モード高画質 [100]
バランスモード画質 [70]
サイズ優先モード低画質 [40]

サムネイルや中サイズでは、低画質を選択しておけば少しでもデータサイズを小さくすることが出来ます

プログラムについて

ここからは、プログラムに興味がある方向けに少しだけ処理の内容について紹介します

アイキャッチの有効化とカスタムサイズの追加

// アイキャッチ画像 サムネイル画像サポートを有効化する
add_theme_support('post-thumbnails');
//関連/新着/更新記事用 (crop)
add_image_size('small', 70, 70, true );

function.php で呼び出します

これだけで、アイキャッチが使用できるようになります。また、add_image_size で独自のサイズのサムネイルを登録出来ます

このテーマでは 70×70 の small サムネイルを追加して、関連記事等で利用しています

サムネイル画像の再作成

$imgpath = get_attached_file( $attachment_id );
$metadata = wp_generate_attachment_metadata( $attachment_id, $imgpath );
if (!empty( $metadata ) && ! is_wp_error( $metadata ) ) {
    wp_update_attachment_metadata( $attachment_id, $metadata );
}

サムネイルの再作成は、これだけで出来ます

添付画像IDから元画像データファイルのパスを取得します
指定した元画像からサムネイル、中、大、独自追加サイズのリサイズ画像の生成と、元画像とリサイズ画像データのパス、幅、高さ、画像形式情報等のメタデータ生成
作成したメタデータを更新してデータベースへ保存します

テーマ内では、画像サイズに違いがないか、事前にメタデータと比較してサムネイルを作成するか判断したりというような処理もいろいろ必要です　(^^)

指定 jpeg 画質での保存

function celtisone_update_jpeg_quality($meta_id, $attach_id, $meta_key, $attach_meta) {
    global $celtisone_options;

    if ($meta_key == '_wp_attachment_metadata') {

        $post = get_post($attach_id);
        if ($post->post_mime_type == 'image/jpeg' && !empty($attach_meta['sizes'])) {

            $pathinfo = pathinfo($attach_meta['file']);
            $uploads = wp_upload_dir();
            $dir = $uploads['basedir'] . '/' . $pathinfo['dirname'];

            foreach ($attach_meta['sizes'] as $size => $value) {

                $image = $dir . '/' . $value['file'];
                    
                $resource = imagecreatefromjpeg($image);

                if ($size === 'large') {
                    imagejpeg($resource, $image, (int)$celtisone_options['jpeg-large']);
                } elseif ($size === 'medium') {
                    imagejpeg($resource, $image, (int)$celtisone_options['jpeg-medium']);
                } elseif ($size === 'thumbnail') {
                    imagejpeg($resource, $image, (int)$celtisone_options['jpeg-thumb']);
                } elseif ($size === 'small') {
                    imagejpeg($resource, $image, (int)$celtisone_options['jpeg-thumb']);
                }
                imagedestroy($resource);
            }
        }
    }
}
add_action('added_post_meta', 'celtisone_update_jpeg_quality', 10, 4);
add_action('updated_post_meta', 'celtisone_update_jpeg_quality', 10, 4);

メタデータの作成、更新後にフックして、フックしたメタデータから画像データの情報を取得して、jpeg 形式なら画像イメージを読み込んで、オプションで指定された画質データで再度保存し直しています

リサイズ時にフックして圧縮率を変更する手段はないようです　(^_^;)

また、メタデータに変化がない場合はこの処理は、呼び出されません
既にメタデータがある場合は、サムネイル画像を再作成する前にメタデータの元画像データ以外のデータを一度消してからメータデータを更新しておけば、サムネイル再作成後に呼び出されるようになります

参照：Set JPEG compression for specific custom image sizes

以上、Celtis-one テーマで実装したサムネイル再作成処理の紹介でした (^^)

2014/11/19 追記

ここで紹介しているプログラムは一部修正してプラグイン化しています

プログラムは、WordPress Plugin : Celtispack ページからダウンロードすることが出来ますので、modules/thumb-optimize/thumb-optimize.php ファイルを参照して下さい

次回は、外部サイトにある画像のサムネールを生成する方法について紹介する予定です

Program Tipsadded_post_meta, jpeg, wp_generate_attachment_metadata, wp_update_attachment_metadata, サムネイル作成, 画質