WordPressの画像サイズ追加は新規アップロードと既存画像の再生成を分ける

WordPressへ独自の画像サイズを追加するときは、サイズの登録、画像ファイルの生成、テンプレートでの取得を分けます。add_image_size()を追加しただけでは、メディアライブラリにある既存画像のファイルは増えません。

新しくアップロードする画像は、登録済みのサイズを使って中間画像が作られます。既存画像にも同じサイズが必要なら、対象を決めて再生成し、添付ファイルのメタデータを更新します。

画像サイズの登録、生成、取得は別の処理である

似た名前の関数を一つの処理として考えると、画像が表示されても、期待した大きさのファイルが使われていないことがあります。

WordPress 3.8のadd_image_size()は、渡されたサイズ名、幅、高さ、切り抜きの指定を登録します。この関数の中には、既存の添付画像を探したり、画像ファイルを書き出したりする処理はありません。

画像をアップロードする前にサイズを登録する

テーマで横640ピクセル、縦360ピクセルのarticle-cardを使うなら、functions.phpで次のように登録します。

function satolab_register_image_sizes() {
    add_image_size( 'article-card', 640, 360, true );
}

add_action(
    'after_setup_theme',
    'satolab_register_image_sizes'
);

第四引数のtrueは、指定した縦横比へ合わせて切り抜く指定です。元画像の重要な部分が端にある場合は、必要な部分まで切れることがあります。表示枠の比率だけで決めず、実際に使う写真で確認します。

WordPress 3.8の読み込み処理では、テーマのfunctions.phpを読み込んだあとにafter_setup_themeが実行されます。どの管理画面から画像を追加しても同じサイズが登録されるよう、特定のテンプレートを表示したときだけ登録する書き方は避けます。

サイズ名はテンプレートと保存データを結ぶ識別子です。寸法を変えるときも、同じ名前を別の意味で使うのか、新しい名前へ分けるのかを決めます。制作会社へテーマ改修を委託する場合は、サイズ名、寸法、切り抜き、使うテンプレートをサイト側の記録へ残してください。

中間画像はアップロード時に生成される

WordPress 3.8のアップロード処理は、添付ファイルを登録したあと、wp_generate_attachment_metadata()で画像情報を作り、wp_update_attachment_metadata()で保存します。

画像情報を作る途中では、標準サイズとadd_image_size()で追加したサイズが集められます。画像生成処理は、その一覧をintermediate_image_sizes_advancedフィルターへ渡し、残ったサイズをまとめて生成します。

したがって、アップロード時にサイズが登録されていなければ、そのサイズの中間画像は生成対象に入りません。また、フィルターでサイズを外せば、登録済みでも、その処理で中間画像は作られません。

生成できるかどうかは、元画像の大きさ、画像編集機能、ファイルの書き込み権限にも左右されます。登録コードがあることだけで成功とせず、実際のファイルと添付メタデータを確認します。

wp_get_attachment_image()は画像を生成しない

テンプレートでは、登録したサイズ名をwp_get_attachment_image()へ渡します。

$attachment_id = get_post_thumbnail_id();

if ( $attachment_id ) {
    echo wp_get_attachment_image(
        $attachment_id,
        'article-card'
    );
}

この関数は、添付IDとサイズ名から画像情報を取得し、img要素を返します。呼び出した時点でarticle-cardの画像ファイルを新しく作る関数ではありません。

指定した中間画像がメタデータにない場合、元画像を指定寸法へ収めた情報が返ることがあります。画面上の幅と高さが合っていても、元画像の大きなファイルを読み込んでいる可能性があります。ブラウザーの開発者ツールでsrcを確認し、uploads内に対応する中間画像があるかを確かめます。

既存画像には再生成の作業が要る

すでに登録されている添付画像へarticle-cardを追加したい場合、add_image_size()の追加後に既存画像の再生成を行います。作業対象は、必要な記事と添付画像へ絞ります。

1. データベースとuploadsを復旧できる形で保存する
2. 画像サイズ名、寸法、切り抜きを確定する
3. 一枚だけ再生成し、中間画像ファイルと添付メタデータを確認する
4. 使われるsrc、画質、切り抜き位置を公開前の画面で確認する
5. 対象件数と実行単位を決めて、残りを再生成する
6. 失敗した添付IDと理由を記録する

再生成の処理では、元画像を読み、wp_generate_attachment_metadata()で各サイズを作り、wp_update_attachment_metadata()で結果を保存します。大量の画像を一度に処理すると、PHPの実行時間やメモリ、ディスク容量の制限に達することがあります。件数を区切り、途中から再開できるようにします。

また、テーマからサイズ登録を削除しても、生成済みのファイルが自動で消えるわけではありません。画像サイズの追加と削除は、テンプレートだけでなく、保存ファイル、添付メタデータ、バックアップ容量まで含めて管理します。

最初の一手は、追加したいサイズを一つだけ決め、名前、幅、高さ、切り抜き、使用箇所を表へ書くことです。登録後に新しい画像を一枚アップロードし、既存画像の再生成へ進む前に、ファイルと表示を確認してください。