Advanced Custom Fields（ACF）完全ガイド！初期設定、トラブル対処法など徹底解説！

2025年8月16日

「Advanced Custom Fields（ACF）を導入したいけど、何から手をつければいいの？」
「フィールドを作ったはずなのに投稿画面に表示されない……原因がわからない！」
「エラー画面が真っ白に…PHPの書き方が合っているか不安」
「無料版でどこまでできる？Pro版にアップグレードすべきか迷っている」

こんな疑問やお悩みを抱えていませんか？

WordPressの柔軟性をさらに高めるACFは、便利なプラグインですが、初期設定からフィールド作成、テンプレートへの組み込みまで一連の流れを押さえないと思わぬトラブルに直面しがちです。

本記事では、ACFの導入手順から代表的な設定ポイント、よくある障害と解決策までを一挙に解説。

手順どおりに進めるだけで、誰でもスムーズにカスタムフィールドを作成・運用できるようになります🎉

ACF（Advanced Custom Fields）入門

カスタムフィールドの必要性とACFを選ぶ理由

Webサイト制作において、投稿やページに独自の情報を持たせたい場面は多々あります。

たとえば、商品一覧ページで「価格」「在庫数」「利用可能カラー」など、標準の投稿にはない項目を追加したいときです。

カスタムフィールドはこのような用途にぴったりですが、WordPress標準機能には以下のような制約があります。

標準機能との違い

入力UIがシンプルすぎる
- 標準はテキスト入力のみ。選択肢やチェックボックス、画像アップロードは別途コードが必要。
管理画面の見た目が味気ない
- 項目名の説明や並び替えが自由にできず、ユーザーに優しい編集画面を作りにくい。
バリデーション機能がない
- 入力必須やフォーマットチェックを自前で実装する必要があるため、ミスが発生しやすい。

🎉 ACFを使うと

多彩なフィールドタイプ（テキスト、画像、セレクト、リレーションなど）
ドラッグ＆ドロップでフィールド順序の変更
入力必須設定や条件表示で編集ミスを事前に回避

これらの機能をノーコーディングで実現できるため、初心者はもちろん、開発効率を重視するプロにも支持されています。

無料版とPro版の特徴比較

ACFには無料版（Basic）と有料版（Pro）があり、用途に合わせて選択可能です。

下表は主要機能の違いをまとめたものです。

スクロールできます

機能	無料版（Basic）	Pro版
基本フィールドタイプ	✅ テキスト ✅ 画像 ✅ 数値	✅ 左記すべて
レイアウト系フィールド	❌	✅ リピーターフィールド ✅ ギャラリー
オプションページ	❌	✅ 作成可能
条件判定ルールの拡張	基本	✅ AND/OR複数ルール
フロントエンドフォーム作成	❌	✅ フォームの公開

👍 無料版で始め、まずは基本的なカスタムフィールドを体験してみましょう。
🎁 Pro版にアップグレードすると、繰り返しグループやオプションページなど、より高度なサイト制作が可能になります。

ACFプラグインの導入と初期設定

インストールから有効化まで

プラグインの追加方法

WordPress管理画面にログイン
左メニューの「プラグイン」→「新規追加」をクリック
検索ボックスに Advanced Custom Fields と入力
「今すぐインストール」を押し、その後「有効化」を選択 ✅
有効化後、左側メニューに 「Custom Fields」 が追加されていることを確認

📌 ポイント：同名の公式プラグイン以外にも類似のものがあるため、配布元が「Elliot Condon」であることをチェックしましょう。

ACF管理画面の項目構成

有効化すると、左側メニューに以下のような項目が現れます。

スクロールできます

メニュー	説明
Custom Fields	フィールドグループの一覧・作成画面
Field Groups	フィールドグループの管理（同上）
Tools	インポート／エクスポート機能
Add-ons (Pro版)	Pro版専用アドオンの設定
Settings (Pro版)	グローバルオプションページの設定

🎉 Tip: 管理画面の構成をざっと眺めるだけでも、どんな機能があるかイメージしやすくなります。

グローバル設定の調整

オプションページの有効化（Pro版）

Pro版では、サイト全体で共通して管理したい項目をまとめる「オプションページ」が作成可能です。

以下のコードをテーマの functions.php に追加すると、管理画面に「サイト設定」メニューが現れます。

if( function_exists('acf_add_options_page') ) {
  acf_add_options_page([
    'page_title'  => 'サイト設定',
    'menu_title'  => 'サイト設定',
    'menu_slug'   => 'site-general-settings',
    'capability'  => 'edit_posts',
    'redirect'    => false
  ]);
}

🔑 これで「Custom Fields」の下、または別階層に「サイト設定」が表示され、共通フィールドを一括管理できます。

バージョン情報の確認

プラグイン一覧画面で「Advanced Custom Fields」のバージョンをチェック
Custom Fields → Settings（Pro版のみ）のページでも詳細なバージョン情報が参照可能
アップデート通知が届いたら、必ずバックアップを取得してから実行しましょう 💾

フィールドグループとフィールドの作成

新規フィールドグループの登録

ラベル・名前・説明の入力

Custom Fields → Add New をクリック
「Field Group Title」に分かりやすい名称を入力
フィールドグループ名（field_group_name） はスラッグ形式で自動生成可
説明欄 に用途や注意点を記入しておくとチーム開発時に便利

🔍 ポイント：後から見返したときに何のためのグループかひと目でわかります！

表示条件（投稿タイプ・ページテンプレートなど）の指定

Location Rules（表示ルール） でフィールドを表示する場所を設定
- 投稿タイプ（Post, Page, カスタム投稿）
- ページテンプレートやカテゴリー
- ユーザー権限や言語（多言語サイトの場合）
AND／OR の組み合わせで複雑な条件指定も可能

スクロールできます

ルール種類	設定例
投稿タイプ	Post → 等しい → “製品レビュー”
ページテンプレート	Page Template → 等しい → “landing-page.php”
カテゴリー	Category → 等しい → “お知らせ”

フィールドタイプの追加

複数のフィールドを同一グループ内で自由に組み合わせます。

テキスト／テキストエリア／数値など基本系

Text：短文入力用
Textarea：複数行の本文や補足説明
Number：数値のみを許可、最小・最大値の設定も可

画像・ファイル・WYSIWYGエディタなどコンテンツ系

Image：メディアライブラリから選択／アップロード
File：PDFやZIPなど任意ファイルの添付
WYSIWYG Editor：リッチテキスト編集が必要な場合

セレクト・チェックボックス・ラジオボタンなど選択系

Select：ドロップダウンから単一選択
Checkbox：複数項目の同時選択
Radio Button：複数項目から単一選択

リレーション（投稿オブジェクト・タクソノミー・ユーザー）

Post Object：投稿やカスタム投稿を紐付け
Taxonomy：カテゴリーやタグを選択
User：ユーザーアカウントを関連付け

🎨 Tip: フィールドの順序はドラッグ＆ドロップで簡単に入れ替え可能です！

設定の微調整

項目ごとの追加設定で、より使いやすくカスタマイズします。

必須設定の有効化

各フィールドの Required オプションにチェック
入力漏れを防ぎ、サイトの品質を担保

プレゼンテーション（ラッパー属性・配置）のカスタマイズ

Wrapper Attributes で幅やCSSクラスを指定
ラベル配置（上／左）や説明文の表示位置を調整
Conditional Logic で「あるフィールドを選んだときのみ表示」など高度な制御

スクロールできます

設定項目	役割
Wrapper Width (%)	管理画面上でのフィールド幅を指定
CSS Class	独自スタイルを当てたいときに利用
Conditional Logic	他のフィールド値に応じた表示非表示制御

投稿画面への組み込みと入力

管理画面での表示確認

投稿画面を開く
- WordPressメニューから「投稿」→「新規追加」または既存投稿の編集画面へ。
フィールドグループの有無をチェック
- 画面下部またはサイドバーに、先ほど作成したフィールドグループ名が表示されているか確認。
入力UIの見た目を確認
- ラベル位置・説明文・必須マークなどが意図した通りにレイアウトされているかチェック。
デザイン調整
- 必要に応じて「Wrapper Attributes」で幅やクラスを調整し、編集画面の見た目を整えましょう。

スクロールできます

確認ポイント	チェック内容
表示場所	フィールドグループが正しいセクションにあるか
フィールド順序	ドラッグ＆ドロップの順序通りになっているか
説明文・ヒントテキスト	入力時にガイドが表示されているか

カスタム投稿タイプへの適用

表示ルールの見直し
- 「Location Rules」で対象を投稿からカスタム投稿タイプに変更。
編集画面の確認
- 対象のカスタム投稿（例：bookやproduct）の新規作成画面へ移動し、フィールドが表示されるかチェック。
複数の投稿タイプに適用
- AND/OR条件を組み合わせることで、複数の投稿タイプやテンプレートへ一括設定が可能。

🔄 複数のコンテンツタイプに同じフィールドを適用したい場合は、「OR」条件を活用すると効率的です。

入力テストとデータの保存

ダミーデータを入力
- テキストや数値、画像など、各フィールドに適当なサンプルを入力。
公開／更新ボタンをクリック
- 保存後、管理画面にエラーが出ないか確認。
フロントエンドでの表示確認
- 作成したテンプレートに the_field() または get_field() を配置し、正しく値が反映されているかチェック。
入力エラーの検証
- 必須設定をオンにしたフィールドをあえて空欄にし、編集画面でのエラー表示を確認。

🎯 Tip: 開発中はブラウザのインスペクターでデータ属性（data-field_keyなど）を見て、正しいフィールドが読み込まれているか調べるとトラブルシュートがスムーズになります。

テンプレートへの出力方法

基本の出力関数

get_field()：値の取得

get_field() はフィールドの値を変数として受け取りたいときに使用します。

<?php
// “price” フィールドの値を取得
$price = get_field('price');
if ( $price ) {
  echo '<p>価格：¥' . esc_html( $price ) . '</p>';
}
?>

メリット：条件分岐や整形処理を挟みやすい
注意点：値が null の場合は空文字が返るため、if チェックを忘れずに

the_field()：直接出力

the_field() は取得した値をそのまま画面に出力します。

<?php
// “description” フィールドをそのまま表示
the_field('description');
?>

メリット：シンプルで記述量が少ない
デメリット：前後にHTMLを挿入したい場合、コードの可読性が低下しやすい

スクロールできます

関数名	戻り値	用途
get_field()	文字列／配列	条件分岐や加工が必要な場合
the_field()	なし	シンプルに出力したいとき

応用的な扱い

画像フィールドのタグ生成

<?php
$image = get_field('header_image');
if ( $image ) {
  // 配列形式で返ってくる場合
  echo '<img src="' . esc_url($image['url']) . '" alt="' . esc_attr($image['alt']) . '">';
}
?>

📌 ポイント：返り値を配列で受け取れば url・alt・sizes 等が利用できる

複数値・配列形式の展開

<?php
$features = get_field('product_features'); // チェックボックスなど複数選択
if ( $features ) {
  echo '<ul>';
  foreach ( $features as $item ) {
    echo '<li>' . esc_html($item) . '</li>';
  }
  echo '</ul>';
}
?>

😊 Tip：implode() でカンマ区切りの文字列に変換するのも便利です

フィールド存在チェック

<?php
if ( get_field('special_note') ) {
  the_field('special_note');
} else {
  echo '<p>※特記事項はありません</p>';
}
?>

目的：必須ではないフィールドの有無を判定し、フォールバックを用意

ショートコードやビルダー連携

ACFショートコードでの埋め込み

投稿本文内やウィジェットで簡単に呼び出し可能です。

[acf field="contact_email"]

使いどころ：テーマPHPに触れられない、または非開発者向けの編集環境で

Elementor Proなど外部ツールへの統合

Elementor Pro：ACFウィジェットをドラッグ＆ドロップで配置
Beaver Builder／Gutenberg：専用のブロックでフィールドを選択して表示
利点：コードを書かずに自由なレイアウトが組める 🎉

スクロールできます

ツール名	連携方法	備考
Elementor Pro	ACFフィールドウィジェット	レイアウト調整が直感的
Beaver Builder	ACFモジュール	高度な条件表示にも対応
Gutenberg（コア）	ACFブロック	将来的な互換性が高い

以上で、フロントエンドにACFのデータを反映させる基本から応用、さらにコード不要の連携方法までを網羅しました。

✨ これであなたのWordPressテーマがさらに柔軟かつ強力になります！

表示制御と条件分岐

表示ルールの構築

ルール演算子（AND/OR）の設定

AND：複数の条件をすべて満たしたときに表示
- 例：投稿タイプが「製品」かつカテゴリーが「セール」の場合
OR：いずれかの条件を満たしたときに表示
- 例：投稿タイプが「製品」または「イベント」の場合

🔄 切り替え方
ルール行の左側プルダウンで AND / OR を選び、必要に応じて複数行を追加します。

ルール値の組み合わせ

投稿タイプ／ページテンプレート
- 投稿タイプ：Page、Post、カスタム投稿
- テンプレート：landing-page.php、single-product.php
カテゴリー／タクソノミー
- Category → 等しい → “お知らせ”
- Taxonomy → 含む → “ニュース”
ユーザー属性
- ロール：Administrator、Editor など
- ログイン状態：ログイン済みユーザーにのみ表示

スクロールできます

条件カテゴリ	設定例	AND/OR
投稿タイプ	等しい “製品”	AND
ページテンプレート	等しい “single-product.php”	AND
カテゴリー	等しい “セール”	OR
ユーザーロール	等しい “Editor”	OR

管理画面のスタイル調整

配置・ラベル・順序の指定

Wrapper Attributes で幅（%）や CSS クラスを指定
Label Placement
- 上配置（デフォルト）
- 左配置：ラベルと入力欄を横並びに
Field Order
- ドラッグ＆ドロップで直感的に並び替え
- 複数列レイアウトも可能 👍

隠し・表示切替

Active スイッチ：フィールドグループ全体の有効・無効化
Conditional Logic（条件分岐）
- 特定のフィールド値に応じて他のフィールドを隠す/表示
- 例：ラジオボタンで「カスタム設定」を選択したときのみ追加項目を表示

スクロールできます

機能	役割
Active	フィールドグループの一時停止／有効化
Conditional Logic	他フィールドの選択状態による表示制御
Wrapper Width	管理画面上での入力欄の幅を％単位で指定

🔧 Tip: 編集画面を見ながら設定をいじると、ユーザーが実際にどう見るかを把握しやすいです！

よくあるトラブルと対処法

コード記述の注意点

フィールド名の一致確認

スラッグ名の誤字に要注意！
- get_field('price') と書いたつもりが get_field('prcie') では常に空返り値。
キーとラベルは別物
- 管理画面で表示される「ラベル」と、テンプレートで使う「フィールド名（キー）」は別に設定可能。
- ラベルを変更しても、キーを変更しなければコードは動作し続けます。

PHP／HTML構文の整合性

PHPタグの開閉
- <?php … ?> を忘れると画面が真っ白に。
エスケープ関数の活用
- 出力時には必ず esc_html() や esc_url() を使い、XSS対策を行いましょう。
混在構文のチェック
- HTML内にPHPを埋め込む場合、シングルクォーテーション／ダブルクォーテーションの重複に注意。

スクロールできます

問題例	対処法
画面が真っ白になる	エラーログを確認。PHPタグの閉じ忘れやセミコロン漏れをチェック。
予期せぬ文字列が出力される	`echo` ではなく `esc_html()` など正しいエスケープ関数を使用。
画像フィールドの配列エラー	返り値が配列か文字列かを `var_dump()` で確認してからコードを修正。

表示されない場合のチェックポイント

プラグイン有効化状況

プラグイン一覧画面で「Active」になっているか確認。
マルチサイト環境では「ネットワーク有効化」も必要な場合があります。

テンプレート階層と読み込み順

適切なテンプレートファイルを編集しているか
- 例：single.php ではなく single-post.php を使っている場合、single.php の変更は反映されません。
子テーマ／親テーマの優先順位
- 同名ファイルが親テーマと子テーマにあると、子テーマ側が優先されます。
キャッシュの影響
- サイトキャッシュやブラウザキャッシュをクリアして最新の状態を確認しましょう。

🎯 一歩進んだ確認方法

テンプレートに <?php echo 'ACF test'; ?> を直接書いて表示されるかチェック
ACFのショートコード [acf field="テストフィールド"] を記事内に貼って動作確認

これらのポイントを順にチェックすれば、ほとんどのトラブルは迅速に解決できます。

エラー時は焦らず一つずつ原因を潰していきましょう！ 🚀

深堀り：全フィールドタイプガイド

基本フィールド一覧

投稿やページに汎用的な値を追加する際のフィールド群です。

スクロールできます

フィールド	説明	例
Text	単一行のテキスト入力用	商品名、キャッチコピー
Textarea	複数行のテキスト入力用	記事概要、備考
Number	数値のみを許可。最小・最大値の指定も可能	価格、在庫数
Range	スライダーで範囲を選択	評価レート（1〜5）
Email	メールアドレス形式チェック付き	お問い合わせフォームのメール欄
URL	URL形式チェック付き	ソーシャルリンク、外部リソースURL
Password	パスワード入力用。画面上は伏字表示	会員登録時のパスワード入力

✨ Tip: 基本系はほとんどのサイトで必須。入力必須設定やプレースホルダーでガイドを補うと親切です！

コンテンツ系フィールド一覧

画像やファイル、リッチテキストなどを扱うフィールドです。

スクロールできます

フィールド	説明	例
Image	画像をアップロード／選択	アイキャッチ、ロゴ
File	PDF・ZIPなど任意のファイルを添付	資料ダウンロードリンク
WYSIWYG Editor	見たまま編集できるリッチテキスト	詳細説明、長文コンテンツ
oEmbed	YouTube、Twitter埋め込みなど自動変換	動画プレーヤーやツイート表示

🎨 活用例:

Image と oEmbed を組み合わせて、動画サムネイルをクリックで埋め込み再生するUIを構築。

選択系フィールド一覧

事前定義した選択肢から値を選ぶ際に使います。

スクロールできます

フィールド	説明	例
Select	単一選択（ドロップダウン）	カテゴリー選択
Checkbox	複数選択（チェックボックス）	タグ、対応OS
Radio Button	複数選択肢から単一選択（ラジオボタン）	性別選択、配送方法
Button Group	ボタン形式で単一選択	色選択（赤／青／緑）、プラン選択
True / False	ON/OFF 二択	表示/非表示フラグ

✅ ポイント:

Checkbox は複数アイテムの同時選択に最適。
Button Group は視覚的に選びやすいUIを実現します。

リレーション系フィールド一覧

他の投稿やユーザー、タクソノミーと繋げたいときに使用します。

スクロールできます

フィールド	説明	例
Link	任意のURLまたは内部リンクを生成	関連記事リンク
Post Object	投稿やカスタム投稿タイプを紐付け	関連商品、おすすめ記事
Page Link	固定ページへのリンク	サイトマップ、問い合わせページへのリンク
Relationship	複数の投稿をリレーション形式で紐付け	ポートフォリオギャラリー
Taxonomy	カテゴリーやタグを選択	イベントタイプ、地域タグ
User	ユーザーアカウントを関連付け	著者プロフィール、担当者情報

🔗 活用例:

Post Object × Relationship で「関連投稿」を自動生成し、SEOを強化。

レイアウト＆ジャバスクリプト依存フィールド一覧

画面レイアウトや動的挙動を構築するための上級フィールドです。

スクロールできます

フィールド	説明	例
Message	説明文・見出し用の表示エリア	セクションのイントロダクション
Accordion	折りたたみ式コンテンツ	FAQセクション
Tab	タブ切り替え式のコンテンツ	商品スペック／レビュー切り替えタブ
Group	複数フィールドを論理的にまとめる	住所情報グループ（都道府県、市区町村、番地）
Repeater*	繰り返し可能なフィールドグループ	画像ギャラリー、特徴リスト
Gallery*	複数画像をサムネイル付きで表示	ポートフォリオ、スタッフ紹介ギャラリー
Flexible Content*	レイアウトブロックを自由に組み合わせ	LPのセクションビルダー
Date Picker	カレンダーUIで日付を選択	公開日、イベント開催日
Date Time Picker	日付と時間を同時に選択	セミナー開始日時
Time Picker	時間のみ選択	営業開始時間、予約時間
Color Picker	カラーパレットから色を選択	テーマカラー設定
Google Map	地図を表示し、ピンを配置	店舗所在地マップ