【WordPress】　ACF（Advanced Custom Fields）の使い方｜作成から表示、PHPコードの書き方まで解説

実際にACFを触った際、
「ACFって本当に必要？」
「設定方法や表示方法がよくわからない…」
「値を入れているのに表示されない」

と感じることがありました。

この記事では、初心者の方向けに
・ACFでできること
・カスタムフィールドの作成方法
・PHPでの表示方法
・表示されないときの原因

を、実際につまずいたポイントも含めて解説します。

最後に、金額のフィールドを作成します。

フィールドタイプ：番号
（使用用途：数値を入力したい場合。自動でカンマが付与されます）

フィールドラベル：値段を入力
（使用用途：固定ページや投稿ページの編集画面で表示される文言）

フィールド名：item-price
（使用用途：phpでデータを読み込む際に使用するデータの名前）

初期値：未記入
（あってもなくてもOK）

現時点で6つのフィールドができているはずです。
[カートに入れる]ボタンはどの服のページでも共有デザインのため、ACFでは作成しません。

フィールドの下に設定画面があります。

今回は新しく「ACF練習用」という固定ページを事前に新規作成しました。
その固定ページのみに表示したいため、「固定ページ　等しい　ACF練習用」　と指定します。
（すべての固定ページに反映したい場合は、「固定ページテンプレート　等しい　デフォルトテンプレート」　となります）

ここまでできたら、[変更内容を保存]ボタンを押して保存してください。

3-3．ACFの値をPHPで表示する方法

現時点では、固定ページを公開しても真っ白なページになってしまいます。
編集画面で入力したデータをPHPで表示させるようにします。

PHPと固定ページを紐づける方法はいくつかありますが、今回は特定のページにのみ独自のレイアウトを適用させるため、固定ページのスラッグを利用したテンプレート作成（page-{slug}.php）を採用します。

固定ページの右上、「スラッグ」を、今回は「acf-test」にします。
変更できたらページを公開しましょう。

使用しているテーマ（推奨：子テーマ）配下に「page-acf-test.php」を作成します。

（例えばスラッグを「abc」にしたら、php名は「page-abc.php」、
スラッグを「fashion」にしたら、php名は「page-fashion.php」となります。）

PHPのコード

<?php get_header(); ?>
<main id="content" class="site-content">
<?php if ( have_posts() ) : ?>
  <div class="item-list">
    <?php while ( have_posts() ) : the_post(); ?>
      <article class="item-card">

        <?php
        $img = get_field('item-image');
        if ($img) {
          echo '<img src="' . esc_url($img) . '" alt="">';
        }
        ?>

        <h3>商品名：<?php the_field('item-name'); ?></h3>

        <p>商品情報：<?php the_field('item-description'); ?></p>
        <p>カラー：<?php the_field('item-color'); ?></p>
        <p>サイズ：<?php the_field('item-size'); ?></p>

        <p style="text-align: right" class="price">
          税込 <?php echo number_format(get_field('item-price')); ?>円
        </p>

      </article>
    <?php endwhile; ?>
    <a href="" class="button">カートに入れる</a>
  </div>
<?php endif; ?>
</main>
<?php get_footer(); ?>

the_field() は「値を取得してそのまま表示する関数」
get_field() は「値を取得するだけ（表示はしない）関数」という違いがあります。

※ACFで使用する関数について、詳しくはこちらの記事でまとめています。

【WordPress】カスタムフィールドで使う関数一覧　使用例も紹介 Advanced Custom Fields

固定ページを読み込むと、データが表サイトに表示されました。
このままだと見にくいので、少しだけCSSも書いていきましょう。

.site-content{
	width: 100%;
}
.item-list{
	margin:5rem auto;
	display: flex;
  flex-direction: column;
  align-items: center;
}
.button {
  display       : inline-block;
  text-align    : center; 
  cursor        : pointer; 
  padding       : 20px 100px; 
	text-decoration :none;
  background    : #D9D9D9;
  color         : #000000;
  line-height   : 1em;
  transition    : .3s; 
	
}
.item-card{
  width: 40%;
}
.item-card img{
  width: 60%;
	margin:0 auto;
	display: block;
  margin: 0 auto;
}
.price{
	margin: 50px 0;
}
.site-header,
footer {
  display: none;
}

これで完成です！

４．ACFが表示されない原因

フィールド名のミス

ACFで設定したフィールド名は、PHPでデータを取得する際にそのまま使用します。

例えば：

• ACF側：item-image
• PHP側：item_image

このように、ハイフン（-）とアンダーバー（_）が異なるだけでも、データは取得できません。

私自身もここでつまずきました。
見た目が似ているため気づきにくく、原因特定に時間がかかりました。
フィールド名は完全一致が必須なので、コピーして使うのがおすすめです。

get_fieldとthe_fieldの違い

ACFで値が表示されない原因として、get_fieldとthe_fieldの使い分けミスもよくあります。

この2つは似ていますが、役割が異なります。

• the_field()：値をそのまま出力する
• get_field()：値を取得する（出力はしない）

この違いを理解していないと、「値は入っているのに表示されない」という状態になります。

条件分岐ミス

条件分岐の書き方によっても、ACFの値が表示されないことがあります。

• 値が空の場合
• 取得結果が想定と違う形式の場合（配列など）

特に画像フィールドは「戻り値の形式」によって挙動が変わります。

例えば：

• URL
• 配列
• ID

ACFの画像設定で「画像URL」を選択しているのに、PHP側でIDや配列として処理しようとすると、何も表示されないかエラーになります。設定とコードの「戻り値の形式」が一致しているか必ず確認しましょう。

【WordPress】ACF関数一覧と使い方まとめ（get_field / the_field / リピーター対応）

【ACF無料版】リピートフィールド代替方法！カスタム投稿タイプで代用する手順とPHPコード解説