add_image_size() を活用!投稿タイプ・テンプレート・ACFで WordPress の画像サイズを自由にコントロール | 大阪 ホームページ制作 株式会社TREVOの技術ブログ

技術ブログ

add_image_size() を活用!投稿タイプ・テンプレート・ACFで WordPress の画像サイズを自由にコントロール

2025.01.23.

WordPress

ACF

初期設定

X Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

WordPressでは「サムネイル」や「中サイズ」「大サイズ」など、デフォルトでいくつかの画像サイズが用意されています。しかし、プロジェクトによっては「特定の投稿タイプのみ別のサイズがほしい」「あるページでだけ横幅を変えたい」「カスタムフィールドの値によって画像サイズを切り替えたい」といった要望が出てくる場合があります。

そこで今回は、投稿タイプ、テンプレート、カスタムフィールドなどの条件に応じて WordPress の画像サイズをカスタマイズする方法を具体的なコード例とともに解説します。

画像サイズの定義方法

WordPress で新しい画像サイズを追加する場合は、functions.php などで add_image_size() 関数を使います。

add_image_size( 'スラッグ名', 幅, 高さ, トリミング );
  • スラッグ名:テーマ内で画像サイズを呼び出すためのキー
  • 幅・高さ:ピクセル指定(例:600, 400 など)
  • トリミングtrue で指定した縦横比に切り抜き、falseでアスペクト比を保持
// 例:
add_image_size( 'my-custom-image', 600, 400, true );

また、こうして登録したサイズで画像を出力したい場合は、the_post_thumbnail( 'my-custom-image' )wp_get_attachment_image_src( $id, 'my-custom-image' ) といった形で呼び出します。

特定の投稿タイプのサムネイル画像に限定する

投稿タイプごとに異なる画像サイズが必要な場合には、以下のようにすると便利です。たとえばカスタム投稿タイプ “work” を例に、サムネイルサポートがある場合だけカスタムサイズを追加します。

// 特定の投稿タイプに限定する例
add_action( 'init', 'set_image_size_for_work' );
function set_image_size_for_work() {
    if ( post_type_supports( 'work', 'thumbnail' ) ) {
        add_image_size( 'work-scroll-pic', 1054, 1054, true );
    }
}

解説と注意点

  • post_type_supports( 'work', 'thumbnail' ) で、対象の投稿タイプがサムネイル機能をサポートしているかを確認しています。サポートしていない場合はエラーや警告が出る可能性があるためです。
  • add_action() のフックは init で十分ですが、テーマやプラグインの実装状況によっては、さらに遅いフック(after_setup_themeなど)で行う場合もあります。

特定の投稿タイプの画像を対象に変更

add_action( 'init', 'set_image_size_for_work' );
function set_image_size_for_work() {
    // 'work' 投稿タイプが存在するか確認
    if ( post_type_exists( 'work' ) ) {
        // カスタム画像サイズを登録
        add_image_size( 'work-scroll-pic', 1054, 1054, true );

        // 画像のリサイズを適用するフックを追加
        add_filter( 'wp_generate_attachment_metadata', 'resize_images_for_work' );
    }
}

// 'work' 投稿タイプにアップロードされた画像にカスタムサイズを適用
function resize_images_for_work( $metadata ) {
    // 現在の投稿の投稿タイプを取得
    $attachment_id = get_post_field( 'post_parent', $metadata['file'] );
    $post_type = get_post_type( $attachment_id );

    // 投稿タイプが 'work' の場合にのみカスタムサイズを生成
    if ( $post_type === 'work' ) {
        $upload_dir = wp_upload_dir();
        $file_path = trailingslashit( $upload_dir['basedir'] ) . $metadata['file'];

        // 追加したカスタム画像サイズを生成
        $sizes = array( 'work-scroll-pic' );
        foreach ( $sizes as $size ) {
            if ( function_exists( 'image_make_intermediate_size' ) ) {
                $resized = image_make_intermediate_size( $file_path, 1054, 1054, true );
                if ( $resized ) {
                    $metadata['sizes'][$size] = $resized;
                }
            }
        }
    }

    return $metadata;
}

解説と注意点

  • post_type_exists の使用
    投稿タイプ work が存在するか確認しています。
  • カスタム画像サイズの登録
    add_image_size を使って、カスタムサイズを追加。
  • アップロード画像にカスタムサイズを適用
    wp_generate_attachment_metadata フィルターフックを使い、work 投稿タイプにアップロードされた画像にカスタムサイズを生成。
  • すべての画像を対象に変更
    投稿タイプ work に属するすべての画像(アイキャッチ画像に限らず)が対象となります。

特定のテンプレートに限定する

ページIDやアーカイブ・シングルページなどの条件によって、画像サイズを動的に切り替えたいケースもあります。以下の例では、ページIDが 123 の「お問い合わせページ」に対してだけ add_image_size() を追加し、それ以外では投稿ページや特定のアーカイブページに別サイズを定義しています。

function set_image_size_for_specific_template() {
    // 特定のページID (例: お問い合わせページ)
    $contact_page_id = 123;

    if ( is_page( $contact_page_id ) ) {
        add_image_size( 'contact-page-image', 800, 600, true );
    } elseif ( is_singular( 'post' ) ) {
        // 投稿ページの画像サイズ
        add_image_size( 'post-image', 600, 400, true );
    } elseif ( is_archive( 'product' ) ) {
        // 商品アーカイブページの画像サイズ
        add_image_size( 'product-archive-image', 300, 300, true );
    }
}
add_action( 'init', 'set_image_size_for_specific_template' );

解説と注意点

  • is_page( $contact_page_id ) のようにページIDをチェックすることが可能です。ほかにもテンプレート階層の関数(is_home(), is_search(), is_404() など)を応用できます。
  • テンプレートごとに画像サイズを分岐定義する場合、キャッシュ系プラグインなどとの兼ね合いに注意が必要です。条件により細かく分けすぎると管理が複雑になるため、メンテナンスしやすい範囲で実装しましょう。

カスタムフィールドを利用する

投稿やページごとにカスタムフィールドで画像サイズを指定したい場合の例です。たとえばカスタムフィールド image_size に任意のキー(例:my-custom-size)を保存しておき、それに応じたサイズを動的に登録します。

function set_image_size_by_custom_field() {
    global $post;

    // カスタムフィールドのキー
    $image_size_field = 'image_size';

    if ( has_post_thumbnail() && get_post_meta( $post->ID, $image_size_field, true ) ) {
        $custom_size = get_post_meta( $post->ID, $image_size_field, true );
        add_image_size( $custom_size, 800, 600, true ); // カスタムサイズで定義
    }
}
add_action( 'init', 'set_image_size_by_custom_field' );

解説と注意点

  • has_post_thumbnail() を条件分岐に加えているため、サムネイルがない投稿では無駄な処理を走らせないようにしています。
  • このように動的に add_image_size() をする場合、画像サイズ名が都度変化するため、管理画面からサムネイル再生成(Regenerate Thumbnails等)を行うときに取りこぼす可能性もあります。
  • カスタムサイズが増えすぎると、サーバー上に生成される画像も増え続ける点には注意しましょう。

Advanced Custom Fields (ACF) の繰り返しフィールドでの画像表示例

ACF等を使用して複数画像を繰り返し登録し、それぞれに異なる画像サイズの指定を持たせたい場合があります。たとえば繰り返しフィールドに「画像ファイル」と「画像サイズのキー」を登録しておき、取得した値を出力時に利用する方法です。

<?php
// ACFのフィールド名
$image_field = 'image';
$image_size_field = 'image_size';

if( have_rows('image_repeater') ):
    while( have_rows('image_repeater') ): the_row();
        $image = get_sub_field($image_field);
        $image_size = get_sub_field($image_size_field);

        if( !empty($image) ): ?>
            <img src="<?php echo esc_url( $image['url'] ); ?>" 
                 alt="<?php echo esc_attr( $image['alt'] ); ?>" 
                 size="<?php echo esc_attr( $image_size ); ?>">
        <?php endif;
    endwhile;
else :
    // 繰り返しフィールドにデータがない場合の処理
endif;
?>

解説と注意点

  • the_row() で一行分の繰り返しフィールドデータを取得し、get_sub_field() でサブフィールドを呼び出しています。
  • $image_size に応じて <img> タグの属性を切り替えていますが、実際は wp_get_attachment_image() を使って、size 引数を add_image_size() で定義したサイズ名に渡すとよりWordPressらしい書き方になります。
  • ACFで画像サイズを切り替えたい場合、事前にその画像サイズをadd_image_size() で定義しておく必要があります。繰り返しフィールドに入力するサイズ名と実際の定義名が一致するように気をつけましょう。

運用時の注意点

  • 画像サイズの増やしすぎ注意
    add_image_size() でサイズを増やすほど、サーバー内に自動生成される画像ファイルも増えます。必要最小限に抑え、定期的に見直しましょう。
  • 再生成のタイミング
    すでにアップロード済みの画像は、サイズを新規追加しただけでは適用されません。プラグイン(Regenerate Thumbnailsなど)でサムネイルを再生成する必要があります。
  • 条件分岐の使いすぎ注意
    テンプレートやカスタムフィールドで条件を増やすとコードが複雑になります。メンテナンス性を考えて整理しながら実装してください。
  • テーマ切り替え時の対応
    テーマのfunctions.phpに定義した場合、テーマ変更で設定が失われる可能性があります。子テーマを使用するか、独自プラグインとして管理するなどで対策すると安心です。

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

板浪雅樹 のアバター

経歴: 映像制作の専門学校を卒業後、映像制作(編集・撮影)でのアシスタント、カーナビゲーション用の3DCG制作、PS2用の3DCGゲーム背景制作、16ミリフィルムのデジタル変換業務等を経てWEB制作部門のある会社に就職。株式会社TREVOでディレクション、SEO対策、CMS開発、3DCG制作、映像制作を担当

X Facebook Pocket LINE はてブ
WEB無料相談