WordPressでカスタムフィールドを使う方法（ACF入門）

はじめに：カスタムフィールドとは？

WordPressの「カスタムフィールド」とは、記事や固定ページに**追加情報（メタ情報）**を持たせるための機能です。
たとえば「店舗情報」ページに営業時間や住所を表示したい場合、タイトル・本文以外のデータをカスタムフィールドで管理できます。

WordPress標準のカスタムフィールドでも可能ですが、**Advanced Custom Fields（ACF）**プラグインを使うことで、GUIで簡単に扱えるようになります。

1. ACF（Advanced Custom Fields）のインストール方法

手順

1. 管理画面 → 「プラグイン」→「新規追加」
2. 検索欄に「Advanced Custom Fields」と入力
3. 「今すぐインストール」→「有効化」

これで準備完了です。

🔗 内部リンク：
WordPressプラグインのインストール方法（初心者向け）

2. フィールドグループの作成

有効化後、管理画面に「カスタムフィールド」メニューが追加されます。
ここで「新規追加」をクリックし、以下のように設定します。

作成後、「公開」をクリック。

💡フィールドタイプは、テキスト・画像・WYSIWYGエディタなど、20種類以上用意されています。

3. 投稿画面での入力

「店舗情報」固定ページを開くと、カスタムフィールド入力欄が表示されます。
たとえば以下のように入力します。

4. テンプレートで値を出力する

テーマファイル（例：page-shop.php）内で、ACFの値を出力します。

<?php
// 営業時間
$hours = get_field('営業時間');
if ($hours) :
?>
  <p class="shop__hours">営業時間：<?php echo esc_html($hours); ?></p>
<?php endif; ?>

複数のフィールドを出力する場合：

<p class="shop__address">住所：<?php the_field('住所'); ?></p>
<p class="shop__holiday">定休日：<?php the_field('定休日'); ?></p>

🔗 関連記事：
functions.phpの使い方と注意点【初心者向け】
WordPressで固定ページのURLを取得する方法

5. 画像フィールドを使う場合

画像をACFで設定した場合は、以下のように表示できます。

<?php
$image = get_field('店舗画像');
if (!empty($image)) :
?>
  <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
<?php endif; ?>

🔗 関連記事：
WordPressの画像最適化ガイド（EWWW Image Optimizer編）

6. Repeater（繰り返しフィールド）の基本

ACF Proでは「繰り返しフィールド（Repeater）」が利用できます。
複数店舗やサービス一覧など、同じ構造のデータを複数登録したい場合に便利です。

<?php if (have_rows('店舗一覧')) : ?>
  <ul class="shop-list">
  <?php while (have_rows('店舗一覧')) : the_row(); ?>
    <li>
      <h3><?php the_sub_field('店舗名'); ?></h3>
      <p><?php the_sub_field('住所'); ?></p>
    </li>
  <?php endwhile; ?>
  </ul>
<?php endif; ?>

7. OGP画像をACFで設定する方法（応用）

ブログ記事ごとに個別のOGP画像を設定したい場合、ACFを使うと便利です。
手順は以下の記事で詳しく解説しています。

🔗 関連記事：
ACFでOGP画像を記事ごとに設定する方法

8. 出力時の注意点とセキュリティ

• 値を直接出力する際は esc_html() や esc_url() を使ってエスケープ処理を行いましょう。
• フィールド名のスペルミスに注意（ACFは英数字のスラッグで管理しています）。

🔗 関連記事：
WordPressで安全に出力するためのエスケープ関数まとめ

9. まとめ

✅ 関連記事まとめ
・is_page()の使い方と具体例
・WordPressでテンプレート階層を理解しよう
・wp_head()とwp_footer()の実装方法

この記事を読んだあとのおすすめ

• WordPress初心者でも安心！functions.phpの使い方と注意点
• All in One SEO / Yoast SEO の設定手順と使い分け
• BackWPupでWordPressサイトをバックアップする方法