カスタムフィールドで商品情報を持たせる

商品ページには、本文の説明とは別に価格・サイズ・素材のような「決まった形のデータ」が必要です。これを本文に手書きすると、書式がバラバラになり、あとで一覧に価格だけ出したいときに困ります。そこで使うのがカスタムフィールド——記事に付ける「追加の入力欄」です。

カスタムフィールド＝記事のプロフィール欄

投稿・固定ページ・カスタム投稿タイプの記事には、本文のほかに名前と値のペアをいくつでも持たせられます。

商品「しまえながクッション」
├── 本文：ふわふわのまんまるフォルムが…（自由な文章）
├── price: 3300          ← カスタムフィールド
├── size: 直径30cm        ← カスタムフィールド
└── material: ポリエステル100%

自由な文章は本文、決まった形のデータはフィールド。この分担が、あとでデータを取り出しやすい構造を作ります。

標準機能で入力欄を出す

WordPress標準のカスタムフィールド欄は、ブロックエディタでは最初隠れています。表示手順：

1. 商品の編集画面で、右上の「⋮」（オプション）→「設定」を開く
2. 「パネル」の中の「カスタムフィールド」をオンにする（画面が再読みこみされます）
3. 編集画面の下に「カスタムフィールド」欄が出る

あとは「新規追加」から、名前price・値3300のように入力して「カスタムフィールドを追加」。size・materialも同じ要領です。

テンプレートで表示する：get_post_meta

保存したフィールドは、get_post_metaで取り出します。single-shohin.phpを商品らしく仕上げましょう。

<?php get_header(); ?>

<main class="section">
  <?php while (have_posts()) : the_post(); ?>
    <article>
      <?php the_post_thumbnail('large', ['class' => 'product-thumb']); ?>
      <h1 class="page-heading"><?php the_title(); ?></h1>

      <p class="price">
        ¥<?php echo number_format(get_post_meta(get_the_ID(), 'price', true)); ?>
        <small>（税込）</small>
      </p>

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

      <table class="spec">
        <tr>
          <th>サイズ</th>
          <td><?php echo esc_html(get_post_meta(get_the_ID(), 'size', true)); ?></td>
        </tr>
        <tr>
          <th>素材</th>
          <td><?php echo esc_html(get_post_meta(get_the_ID(), 'material', true)); ?></td>
        </tr>
      </table>
    </article>
  <?php endwhile; ?>
</main>

<?php get_footer(); ?>

get_post_meta(get_the_ID(), 'price', true)は「この記事のpriceの値を1つください」という意味。get_系なので、表示にはechoが要るのでした。

新顔のesc_html()は、値を表示するときの消毒です。入力欄由来のデータをそのまま出力すると、悪意あるコードが混ざるすき（セキュリティの穴）になるため、「取り出した値はエスケープして出す」が実務の鉄則。テーマの安全性はこの習慣で決まります。

.product-thumb {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.price {
  font-size: 24px;
  color: #c0562a;
  font-weight: bold;
  text-align: center;
}
.spec {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  margin: 24px auto 0;
}
.spec th, .spec td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
}
.spec th {
  background: #eaf4f6;
  color: #2a6f7c;
  width: 30%;
}

完成すると、商品詳細はこの姿になります。

実務ではACFが定番

標準のカスタムフィールド欄は、正直なところ入力画面が素っ気なく、記入ミスも起きやすい。そこで実務では、ACF（Advanced Custom Fields）というプラグインが定番です。

• 「価格（数値のみ）」「サイズ（テキスト）」のような専用の入力欄を設計して、編集画面に常設できる
• 画像・日付・選択式など、入力欄の種類が豊富
• テンプレート側はthe_field('price')のようなACFの関数で表示

考え方は今日学んだものと完全に同じ（名前と値のペア＋テンプレートで表示）。標準機能で仕組みを理解した今なら、ACFのドキュメントがすらすら読めるはずです。

このレッスンのまとめ

1. カスタムフィールド＝記事に持たせる「名前と値のペア」。自由な文章は本文、決まった形のデータはフィールドに分担
2. 表示はget_post_meta(get_the_ID(), '名前', true)＋echo——そして出力はesc_html()で消毒が鉄則
3. 実務の定番はACFプラグイン。仕組みは標準機能と同じなので、今日の理解がそのまま通用する