カスタム投稿タイプって何？（その２）

日々の学習お疲れ様です！
今回はカスタム投稿タイプと相性抜群のプラグイン「ACF（Advanced Custom Fields）」についてご紹介します。

---

1. はじめに：投稿タイプだけでは足りない？

カスタム投稿タイプを導入すると、情報の整理はしやすくなりますが、
入力フィールドが「タイトル＋本文」だけでは物足りない…という場面も出てきます。

そこで活用したいのがACFです。

---

2. ACF（Advanced Custom Fields）とは？

ACFは、投稿画面に自由な入力欄（フィールド）を追加できるプラグインです。

• テキスト
• 画像
• セレクト（選択肢）
• チェックボックス
• 繰り返しフィールド（PRO版）

---

3. ACF導入のメリット

• 知識のない方が運用更新できるよう、入力個所を設けられる。
• テーマの表示も整いやすく、保守性UP

---

5. フィールドの作成

管理画面左メニュー「ACF」→「フィールドグループ」→「新規追加」

以下に飲食店サイトを例とした場合の作成方法を記述します。

同様に、商品画像・説明文・金額のフィールドも作成しました。

• フィールドタイプ：画像、フィールドラベル：商品画像を選択、フィールド名：seasonMenu_img
• フィールドタイプ：テキストエリア、フィールドラベル：メニューの詳細や説明を入力、フィールド名：seasonMenu_detail
• フィールドタイプ：テキスト、フィールドラベル：金額を半角数字で入力、フィールド名：seasonMenu_price

変更内容を保存すると、投稿編集ページに入力エリアが出現します。▼

ですが！！
ここに値を入力しただけでは、プレビューには何も表示されません。

---

6. 出力する方法

ここでコードスニペット系のプラグインを使用します。
私は最近、「WPCode Lite」を使用しています。

<?php get_field('seasonMenu_img');?>
<?php the_field('seasonMenu_name');?>

このような記述で、フィールドに入力された値を呼び出す必要があります。

呼び出した値をどこに表示させたいのか指定し、HTMLの形式で出力するためには、PHPで下記のように記述します。
あくまで一例です。（今回使用しているテーマは「Astra」です。）

// 本文の末尾に ACF の値を差し込む
add_filter( 'the_content', function( $content ) {

  // 単一投稿本文／メインクエリのみ
  if ( ! is_singular('post') || ! in_the_loop() || ! is_main_query() ) {
    return $content;
  }

  // ACFの取得
  $name   = get_field('seasonMenu_name');
  $price  = get_field('seasonMenu_price');
  $img    = get_field('seasonMenu_img');
  $detail = get_field('seasonMenu_detail');

  // 何もなければそのまま返す
  if ( ! $name && ! $price && ! $img && ! $detail ) {
    return $content;
  }

  // 出力HTML（必要に応じてマークアップ調整）
  ob_start(); ?>
  <section class="season-menu mt-6">
    <?php if ($name): ?>
      <h3 class="season-menu__title"><?php echo esc_html($name); ?></h3>
    <?php endif; ?>

    <?php if ($price): ?>
      <p class="season-menu__price"><?php echo esc_html( $price ); ?>円</p>
    <?php endif; ?>

    <?php if ($img): ?>
      <?php echo wp_get_attachment_image( $img['ID'], 'large', false, [ 'alt' => $img['alt'] ] ); ?>
    <?php endif; ?>

    <?php if ($detail): ?>
      <div class="season-menu__detail"><?php echo wpautop( esc_html($detail) ); ?></div>
    <?php endif; ?>
  </section>
  <?php
  $acf_html = ob_get_clean();

  // 末尾に追加（先頭に出したい場合は $acf_html . $content にする）
  return $content . $acf_html;
});

ではあらためて、投稿編集ページに値を入力、プレビューで確認してみましょう。

7. まとめ

もちろんCSSを使って見た目を整えることができます。
これで、メニュー紹介ページのテンプレートができました。

このようにテンプレート化して納品すれば、クライアントでも簡単に記事更新できるつくりになります。
カスタム投稿タイプと併用することで、カスタム投稿タイプごとにテンプレートの作成も可能！
是非活用してください！！