WordPress で「カスタム投稿タイプ（Custom Post Type）」と「ACF（Advanced Custom Fields）」を使うと、非常に柔軟なコンテンツ管理が可能になります。

ACFでカスタム投稿にフィールドを追加する

ACF（Advanced Custom Fields）

ACFでカスタムフィールドグループを作成し、商品情報を追加する

• フィールド名
  • タイトル：コレクション（collection）
  • タイトル：カラー（color）
  • タイトル：サイズ（size）
  • タイトル：商品画像（product-img）

「ルール」で「投稿タイプが（product）に等しい」と設定する

テンプレートでACFの画像を表示する

カスタム投稿タイプ：商品（product）の場合

画像の ACF フィールド設定で「画像 ID を返す」にしている場合

画像の ACF フィールド設定で「画像 ID を返す」にしている場合、wp_get_attachment_image_src() が使えます。

single-product.php

  <h1><?php the_title(); ?></h1>

  <?php
$image = wp_get_attachment_image_src(get_field('product-img', $tax_post->ID), 'full');
?>
<?php if ($image): ?>
  <div class="photo">
    <img src="<?php echo esc_url($image[0]); ?>" alt="<?php echo esc_attr(get_the_title($tax_post->ID)); ?>">
  </div>
<?php endif; ?>

<p><strong>コレクション：</strong> <?php the_field('collection', $tax_post->ID); ?></p>
<p><strong>カラー：</strong> <?php the_field('color', $tax_post->ID); ?></p>
<p><strong>サイズ：</strong> <?php the_field('size', $tax_post->ID); ?></p>

  <div class="product-content">
    <?php the_content(); ?>
  </div>

値が存在する場合のみ出力され、空欄表示を防止する条件付き出力（if文）の書き方

 <h1><?php the_title(); ?></h1>

<?php
// ACF フィールドの取得
$image_id   = get_field('product-img'); // IDで取得（第2引数は省略：現在の投稿）
$image      = wp_get_attachment_image_src($image_id, 'full');
$collection = get_field('collection');
$color      = get_field('color');
$size       = get_field('size');
?>

<?php if ($image): ?>
    <div class="photo">
        <img src="<?php echo esc_url($image[0]); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
    </div>
<?php endif; ?>

<?php if ($collection): ?>
    <p><strong>コレクション：</strong> <?php echo esc_html($collection); ?></p>
<?php endif; ?>

<?php if ($color): ?>
    <p><strong>カラー：</strong> <?php echo esc_html($color); ?></p>
<?php endif; ?>

<?php if ($size): ?>
    <p><strong>サイズ：</strong> <?php echo esc_html($size); ?></p>
<?php endif; ?>

<div class="product-content">
    <?php the_content(); ?>
</div>

画像の ACF フィールド設定で「画像オブジェクトを返す」にしている場合

画像の ACF フィールド設定で「画像オブジェクトを返す」にしている場合、get_field() は画像情報を含む**連想配列（配列オブジェクト）**を返します。

$image = get_field( ‘product-img‘ );

取得できる配列

array(
  [ID] => 123,
  [url] => 'https://example.com/wp-content/uploads/2024/06/image.jpg',
  [alt] => '画像の説明文',
  [title] => '画像タイトル',
  [caption] => '',
  [description] => '',
  [sizes] => array(
    [thumbnail] => '...',
    [medium] => '...',
    [large] => '...',
    ...
  )
)

表示コード

<h1><?php the_title(); ?></h1>

<?php
// ACF フィールドの取得
$image      = get_field('product-img');
$collection = get_field('collection');
$color      = get_field('color');
$size       = get_field('size');
?>

<?php if ($image): ?>
    <div class="photo">
        <img src="<?php echo esc_url($image[0]); ?>" alt="<?php echo esc_attr(get_the_title()); ?>">
    </div>
<?php endif; ?>

<?php if ($collection): ?>
    <p><strong>コレクション：</strong> <?php echo esc_html($collection); ?></p>
<?php endif; ?>

<?php if ($color): ?>
    <p><strong>カラー：</strong> <?php echo esc_html($color); ?></p>
<?php endif; ?>

<?php if ($size): ?>
    <p><strong>サイズ：</strong> <?php echo esc_html($size); ?></p>
<?php endif; ?>

<div class="product-content">
    <?php the_content(); ?>
</div>

画像フィールドの「戻り値」は、取得できる情報が豊富な「画像オブジェクト」がオススメです。