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
)を保存しておき、それに応じたサイズを動的に登録します。
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マーケティングなどのサービスをご紹介しています。