ACFの使い方｜カスタムフィールドの作成から表示まで

この記事でわかること
• 編集画面に、サイトに合わせた専用の入力欄を追加できる
• 入力した値を、テンプレートで安全に表示できる
• 入力欄や値が表示されないときに、原因を見つけて直せる

ACFを使うと、WordPressの編集画面に専用の入力欄を追加できます。入力する内容と表示するデザインを分けて管理できるため、更新しやすいサイトになります。この記事では、入力欄の作成からテンプレートでの表示までを順番に解説します。

ACFの使い方の全体像

ACFは「入れ物を作る→項目を決める→値の形を選ぶ→表示する」の順で進めると理解しやすいです。入れ物がなければ項目は作れません。値の形がわからなければ、正しく表示することもできません。

前の段階が次の段階の前提になっているので、初めての方は目次の順に読み進めてください。やりたいことが決まっている場合は、次の表から使うものと、解説しているSTEPを探してください。

準備：ACFとは？導入方法

まずは、ACFでできることと導入方法を確認します。すでにインストール済みの方は、STEP1から読み進めてください。

ACFでできること

ACF（Advanced Custom Fields）は、編集画面に追加の入力欄（カスタムフィールド）を作れるプラグインです。WordPress標準のカスタムフィールドより、入力しやすい画面を用意できます。

例えばトップページ用に「ヒーロー画像」の入力欄を作り、トップページの編集画面だけに表示できます。入力欄を追加できる場所は、次のとおりです。

• 投稿・固定ページ
• カスタム投稿タイプ
• ユーザー
• タクソノミーのターム
• メディア・コメント

無料版とPRO版の違い

基本的な機能は、無料版で十分に使えます。次の機能はPRO版のみなので、必要になったときに検討しましょう。

• リピーター
• 柔軟コンテンツ
• オプションページ
• ギャラリー
• クローン
• ACFブロック

インストール方法

動作要件は、WordPress 6.2以上・PHP 7.4以上です。2026年9月時点の最新版は6.8.10です。

1. 管理画面の「プラグイン」＞「新規追加」を開く
2. 「Advanced Custom Fields」または「ACF」で検索する
3. インストールして有効化する
4. メニューに追加された「ACF」から、フィールドグループを作成する

ACFの管理画面の表記は、言語設定やバージョンによって変わることがあります。この記事では「日本語（英語）」の形で両方を記載します。

STEP1：フィールドグループを作る

フィールドグループは、入力欄をまとめ、どの編集画面に出すかを決める単位です。タイトル・フィールド・位置ルール・表示設定の4つで構成されます。

フィールドグループを新規作成する

フィールドグループは、次の手順で作成します。

1. 管理画面の「ACF」＞「フィールドグループ（Field Groups）」＞「新規追加（Add New）」を開く
2. タイトルを入力する（例：「ホームページ」「イベント」）
3. 「フィールドを追加（Add Field）」で入力欄を追加する
4. フィールドタイプを、プルダウンまたは「フィールドを参照（Browse Fields）」から選ぶ
5. 「変更を保存（Save Changes）」で保存する

タイトルは、編集画面で入力欄を囲む枠の見出しとして表示されます。タイトルが空のままだと、保存ボタンが押せません。

追加したフィールドは、最初は「テキスト」タイプになっています。並び順は、番号部分をドラッグして入れ替えられます。

位置ルールで表示する画面を決める

フィールドグループ編集画面の下部には、タブ付きの設定パネルがあります。「位置（Location）」タブで、入力欄を出す画面を指定します。

ルールは、AND（かつ）とOR（または）で組み合わせられます。複数の条件を満たす画面だけに出すことも可能です。

表示やグループ全体の設定

位置以外のタブでは、編集画面での見え方やグループ全体の設定を変えられます。

1つの画面に複数のフィールドグループが出る場合、表示に関する設定は順番が先頭のグループのものが使われます。

STEP2：フィールドの基本設定を決める

入れ物ができたら、中に入れる入力欄を設定します。すべてのフィールドに共通する設定と、フィールド名の付け方を見ていきます。

すべてのフィールドに共通する設定

フィールドには、タイプに関係なく使える共通の設定があります。上の3つは必須項目です。

フィールドラベルは入力する人向けの名前なので、日本語やスペースも使えます。テンプレートでは使わないため、わかりやすさを優先して付けましょう。

筆者の環境では、「説明」欄は「プレゼンテーション」タブにありました。見当たらないときは、タブを切り替えて探してみてください。

フィールド名の付け方

フィールド名は、ラベルから自動で作られます。小文字の英数字で、スペースや特殊文字を使わずに付けましょう。アンダースコアとハイフンは使えます。

例えば「トップに表示」というラベルなら、case_show_topのような名前にします。

6.6.0以降、新しく作るフィールド名は小文字のみになりました。大文字を使いたい場合は、6.6.2で追加されたJSフィルターconvert_field_name_to_lowercaseで変更できます。

実務では、フィールド名の先頭を揃えるのがおすすめです。導入事例用ならcase_で始めるなど、用途ごとに揃えると名前の重複を防げます。

STEP3：フィールドタイプと返り値を理解する

返り値（Return Format）とは、get_field()で取り出したときの値の形です。DBに保存される値とは別で、取り出すときに設定に合わせて変換されます。

画像フィールドを表示する

画像（Image）フィールドの返り値は、「画像配列」「画像URL」「画像ID」から選べます。どれを選んでも、DBには画像IDが保存されます。

画像IDで表示する

返り値を「画像ID」にした場合は、wp_get_attachment_image()でimgタグを出力します。

<?php
$image = get_field( 'hero_image' );                // ①
if ( $image ) {
  echo wp_get_attachment_image( $image, 'full' );  // ②
}
?>

画像配列で表示する

返り値を「画像配列」にした場合は、配列からURLやaltを取り出して使います。キャプションやサイズ別のURLも取得できます。

<?php $image = get_field( 'hero_image' ); ?>            <!-- ① -->
<?php if ( $image ) : ?>
  <img src="<?php echo esc_url( $image['url'] ); ?>"
       alt="<?php echo esc_attr( $image['alt'] ); ?>">  <!-- ② -->
<?php endif; ?>

画像IDと画像配列の使い分け

関係フィールドの返り値

関係（Relationship）は、複数の投稿を選べるフィールドです。投稿タイプ・ステータス・タクソノミーで、選べる投稿を絞り込めます。

返り値は「投稿オブジェクト（WP_Post）」と「投稿ID（整数）」から選びます。どちらの場合も、選んだ投稿が配列で返ります。

DBに保存されるのは投稿IDのみです。投稿オブジェクトを選んだ場合も、取り出すときに変換されています。

真/偽・テキスト系のフィールド

単純な値を扱うフィールドは、返り値を意識せずに使えます。

例えば「トップに表示」のような、表示する・しないの切り替えには真/偽が便利です。

STEP4：テンプレートで値を表示する

ACFの値は、WordPressの投稿メタ（post_meta）として保存されます。get_post_meta()でも取得できますが、タイプに合わせて値を整えるget_field()を使うのがおすすめです。

get_field()とthe_field()で値を表示する

値を取り出すにはget_field()、そのまま出力するにはthe_field()を使います。

<?php $text = get_field( 'sub_heading' ); ?>  <!-- 値を変数に入れる -->
<?php the_field( 'sub_heading' ); ?>          <!-- 値をそのまま出力する -->

get_field()には、次の4つの引数を指定できます。

ループの外や、別の投稿の値を取り出すときは、$post_idに投稿IDを渡します。

2つの関数は、次のように使い分けます。the_field()は、6.2.7以降は自動でエスケープ※1されます。

※1：エスケープ…出力する値に含まれる悪意あるHTMLなどを、無害な状態にする処理のことです。

値があるときだけ表示する

入力が空のときに、見出しタグだけが残るのを防ぐ書き方です。ifで値の有無を確認してから出力します。

<?php if ( get_field( 'sub_heading' ) ) : ?>                      <!-- 値があるか確認 -->
  <h2><?php echo esc_html( get_field( 'sub_heading' ) ); ?></h2>  <!-- エスケープして出力 -->
<?php endif; ?>

出力時は必ずエスケープする

get_field()で取り出した値は、エスケープされません。出力するときは、値の種類に合わせて次の関数を使いましょう。

エスケープが必要な理由は、寄稿者以上のユーザーが、ACF以外の方法で悪意あるHTMLを入れられる可能性があるためです。

6.2.6以降は、get_field()の第4引数をtrueにすると、エスケープ済みの値が返ります。自分でエスケープ関数を書く代わりに使えます。

古い記事では「the_field()はHTMLをそのまま出力する」と説明されていることがあります。現在はscriptなどが除去されるため、HTMLを含むフィールドは表示が変わる可能性があります。

発展：もっと便利に使う

基本の流れに慣れたら、応用的な使い方も試してみましょう。入力欄の出し分け、投稿以外の値の取得、投稿タイプの登録を紹介します。

条件付きロジックで入力欄を出し分ける

条件付きロジックを使うと、他のフィールドの値に応じて入力欄を表示・非表示にできます。条件に使えるのは、セレクト・チェックボックス・真/偽・ラジオの4種類です。

例えば「トップに表示」（真/偽）がオンのときだけ、「表示順」と「トップ用コメント」を表示できます。条件グループを複数作れば、ANDとORを組み合わせることも可能です。

ユーザーやタームの値を取得する

投稿以外に保存した値は、get_field()の第2引数で取得先を指定して取り出します。the_field()も同じ指定方法です。

例えば投稿者のプロフィール画像を表示したい場合は、投稿者のユーザーIDを使って取得先を指定します。

$author_id = get_the_author_meta( 'ID' );           // 投稿者のユーザーIDを取得
get_field( 'author_badge', 'user_' . $author_id );  // そのユーザーの値を取得

ACFでカスタム投稿タイプを登録する

無料版でも、ACFの管理画面からカスタム投稿タイプとタクソノミーを登録できます。別のプラグインやコードを用意する必要はありません。

登録後は、位置ルールで「投稿タイプ ＝ 登録した投稿タイプ」を指定します。すると、その投稿タイプ専用の入力欄になります。

さいごに

まとめ

ACFは「フィールドグループを作る→フィールドを設定する→返り値を選ぶ→テンプレートで表示する」の順に進めると迷いません。まずは次の3つを押さえましょう。

• 位置ルールで、入力欄を出す画面を決める
• 画像フィールドは、返り値に合わせて表示方法を変える
• get_field()の値は、出力時にエスケープする

慣れてきたら、条件付きロジックや投稿以外の値の取得も試してみてください。

よくある質問

get_post_meta()で値を取得してもいい？

取得はできますが、get_field()を使うのがおすすめです。get_field()はフィールドタイプに合わせて、値を返り値の形に整えてくれます。

the_field()で出力していたHTMLが表示されなくなりました

6.2.7以降、the_field()は自動でエスケープされるようになりました。scriptなどが除去されるため、HTMLを含むフィールドは表示が変わる場合があります。

フィールド名に大文字が使えません

6.6.0以降、新しく作るフィールド名は小文字のみになりました。大文字が必要な場合は、JSフィルターconvert_field_name_to_lowercaseで変更できます。

ユーザーやタームに保存した値が取得できません

get_field()の第2引数で、取得先を指定しているか確認しましょう。ユーザーなら"user_2"、タームなら"term_123"の形で指定します。

リピーターやオプションページが見当たりません

リピーターとオプションページは、PRO版のみの機能です。無料版では使えないため、必要な場合はPRO版を検討してください。