Advanced Custom Fieldsとは？使い方・表示方法・Pro版の違いを徹底解説

「WordPressでカスタムフィールドを使いたいけど、どうすればいいの？」…そんな悩みを持つ方におすすめなのが、Advanced Custom Fields（ACF）という人気プラグインです。

ACFを使えば、投稿や固定ページに自由な入力欄を追加できるため、商品ページや店舗紹介、ポートフォリオなど、あらゆるコンテンツを効率よく管理・表示できます。

この記事では、Advanced Custom Fieldsの基本的な使い方や表示方法から、Pro版の違い、よくある質問までをわかりやすく解説します。

Advanced Custom Fields（ACF）とは？

Advanced Custom Fields（略称：ACF）は、WordPressにカスタムフィールドを簡単に追加・管理できるプラグインです。

投稿や固定ページ、カスタム投稿タイプに自由な入力欄（フィールド）を作成し、コンテンツの構造化やレイアウトの柔軟なカスタマイズが可能になります。

ACFは直感的な操作と豊富なフィールドタイプ（テキスト、画像、チェックボックス、日付など）により、開発者だけでなくブロガーや制作者にも支持されています。

特に、テーマファイルに値を出力できるため、柔軟なサイト構築に欠かせないツールとなっています。

Advanced Custom Fields

主な機能とできること

• フィールドグループの作成：ACFのメイン機能で、複数のカスタムフィールドをセットで作成・管理できる
• カスタム投稿タイプの作成：「商品」や「お知らせ」など独自の投稿タイプを作成可能
• タクソノミーの作成：各投稿タイプにオリジナルのカテゴリ・タグを作成できる
• エクスポート：フィールドグループの設定をJSON形式で出力し、他サイトへ移行できる
• インポート：エクスポートしたJSONファイルを読み込み、別サイトで再利用できる

カスタムフィールドの種類

ACFでは以下のような多彩なフィールドを作成できます。

• テキスト / テキストエリア
• 画像 / ファイル
• セレクトボックス / チェックボックス / ラジオボタン
• 日付 / 時刻ピッカー
• リンク、Googleマップなど

たとえば、商品ページで「色」や「価格」をフィールドとして入力し、テーマファイルに表示させると、更新や管理が効率的になります。

ポートフォリオや店舗情報など、定型フォーマットが必要なサイトに最適です。

ACF Pro版との違いと機能比較

Advanced Custom Fieldsの有料版である「ACF Pro」は、よりプレミアムな機能が提供されています。料金は機能数ではなく、対応サイト数で料金が変動します。

• リピーターフィールド：同じフィールドを繰り返し追加できる機能。FAQやスタッフ紹介などの入力に便利
• ACFブロック：PHPベースでカスタムブロックを作成できる
• フレキシブルコンテンツ：レイアウト単位でサブフィールドを自由に並び替え・追加・削除できる
• オプションページ：サイト全体で共通して使う設定項目（例：ロゴ、SNSリンク）を管理画面に追加
• ギャラリーフィールド：複数の画像を一括でアップロード・編集・並び替えができるギャラリー機能
• クローンフィールド：既存のフィールドやグループを別の場所で再利用可能

WordPressのACF設定画面からライセンスキーを入力・有効化します。Pro機能の「新規作成や編集」が可能になり、プラグインの自動アップデートも有効化されます。

Advanced Custom Fieldsの使い方

インストール方法

WordPress管理画面から「プラグイン」＞「新規追加」で「Advanced Custom Fields」を検索し、インストール・有効化します。

以下の公式ページからファイルをダウンロードして、プラグインの画面からアップロードすることもできます。

Advanced Custom Fields

フィールドグループの作成手順

はじめに、「ACF」 ＞ 「フィールドグループ」 ＞ 「フィールドグループを追加する」をクリックします。

全般

フィールドタイプ・名前・ラベルなど、フィールドの基本情報を設定していきます。

• フィールドタイプ：入力形式を選ぶ（例：テキスト、画像、日付など）
• フィールドを見る：追加済みのフィールド一覧を確認・折りたたみできる
• フィールドラベル：編集画面で表示される項目名（例：「商品名」など）
• フィールド名：テンプレートで使う内部名、英数字・アンダースコア（_）・ダッシュ（–）のみ。※日本語は非推奨
• 初期値：未入力時に自動で入る初期データ

検証

必須入力の設定や、フィールドタイプごとの文字数・数値の制限も行えます。

• 必須項目：チェックを入れると「入力必須」に設定される
• フィールドタイプごとの設定項目：フィールドタイプがテキストなら文字数制限、画像ならアップロード可能サイズなどの項目を設定

プレゼンテーション

編集画面での表示方法や説明文などを設定できます。

• 手順：管理画面でフィールドの下に表示される説明文の入力
• Allow Access to Value in Editor UI：このフィールドの値を編集画面でも表示・利用可能にするオプション。ACFショートコードや「Block Bindings」による埋め込み表示を許可
• フィールドタイプごとの設定項目：プレースホルダーや表示位置など、フィールドタイプごとの項目を設定

条件判定

条件判定は、複数のフィールドを追加したときのみ操作できます。特定の条件を設定して、編集画面のフィールドグループの表示をコントロールできます。

• 条件判定：有効化・無効化の選択（初期設定では無効）
• このフィールドグループの表示条件：特定の投稿タイプやページでのみ、このフィールドグループを表示する条件を設定
• と（AND条件）：複数条件をすべて満たした場合のみ表示させる条件を追加
• または「ルールグループを追加」（OR条件）：いずれかの条件を満たせば表示されるグループを追加

フィールドの追加

フィールドを一つではなく追加したい場合は、それぞれの項目の末尾に以下のボタンも表示されます。

• フィールドを閉じる：編集中のフィールドを折りたたむ（削除ではない）
• Close and Add Field：現在のフィールドを折りたたんで、新しいフィールドの入力欄を表示
• ＋フィールドを追加：現在のフィールドの下に、新しいフィールドの入力欄を表示

設定

フィールドグループを下にスクロールすると「設定」項目が表示されます。

この設定では、投稿・固定ページ・カスタム投稿タイプの編集画面に、フィールドグループをどのように表示するかを設定できます。

• ロケーションルール：このフィールドグループをどこに表示するかを指定する。例：投稿タイプが「投稿」「ニュース」のときだけ表示など
• プレゼンテーション：編集画面での表示位置・スタイルを設定する。例：フィールドの位置（編集画面の上／下）、レイアウト（並列・ブロック）など
• グループ設定：フィールドグループ自体の内部設定を管理。例：表示順、非表示オプション、API経由の編集可否など

フィールドグループの表示方法

ACFで作成したカスタムフィールドグループは、投稿や固定ページ、カスタム投稿タイプの入力画面に表示され、必要な情報を簡単に追加できます。

しかし、Webページ上にその内容を表示するには、いくつかの方法があります。

1. ショートコードでの表示
2. PHPコードを記述
3. ACFブロック（Pro版）

子テーマの作成

フィールドの値をWebページ上に表示するには、テーマファイルにコードを記述する必要があります。

ただし、親テーマのファイルを直接編集するのは推奨されません。テーマのアップデートで変更が上書きされる可能性があるため、子テーマを作成し、そこでカスタマイズを行うのが安全です。

子テーマを使えば、テーマファイルへ自由にコードを記述できますので、作成方法については以下の記事をご参照ください。

ショートコードで表示する

ACFのデータは、[acf field="フィールド名"]という形式のショートコードで表示することが可能です。クラシックエディタやブロックエディタの「ショートコード」ブロックを使って、簡単に出力できます。

はじめに、functions.phpにACF指定のコードを記述する必要があります。サーバーのファイルマネージャーやFTPソフトから、以下の順でファイルを探します。

ドメイン名 ＞ wp-content ＞ themes ＞ テーマ名 ＞ functions.php

※ご利用のサーバーによって、格納されているフォルダが違う場合があります。

functions.phpの下部に、ACF指定のコード（ショートコード用）を記述し、保存します。

add_action('acf/init', 'set_acf_settings');
function set_acf_settings() {
    acf_update_setting('enable_shortcode', true);
}

WordPressの投稿画面を開き、ページ下部などに表示されるフィールドに入力します。

投稿画面からショートコードを入力します。ブロックエディタの場合は、行に「/ショートコード」と入力し、ショートコードブロック内に以下のようなコードを入力します。

[acf field="product_name"]

※事前に作成したフィールド名を、ダブルクォーテーション（”）の間に入力してください。

プレビューや公開をすると、以下のように表示されます。

そのままだと、余白や行間が詰まっています。調整したい場合は、以下のようなコードを追加してください。

▼HTMLの例

<div class="acf-shortcode-output">
[acf field="product_name"]
</div>

ブロックエディタの場合は、右上の「︙（三点リーダ）」＞「コードエディター」の画面からHTMLを編集できます。

▼CSSの例

.acf-shortcode-output {
margin-top: 20px !important; /* 上の余白を設定（強制適用） */
margin-bottom: 20px !important; /* 下の余白を設定（強制適用） */
line-height: 1.8em !important; /* 行間を設定（強制適用） */
}

CSSコードは、WordPressの「追加CSS」、TCDテーマをご利用の方は「カスタムCSS」の欄から入力できます。

PHPコードを記述して表示する

single.php（投稿）やpage.php（固定ページ）など、テーマのテンプレートファイル内で、PHPコードを使ってカスタムフィールドの値を表示することができます。

この方法は柔軟性が高く、複雑なレイアウトにも対応できます。ただし、PHPの基礎知識が必要になります。

はじめに、サーバーのファイルマネージャーや、FTPソフトからフィールドを表示したいファイル（single.phpなど）を探します。

※single.phpの場合

ドメイン名 ＞ wp-content ＞ themes ＞ テーマ名 ＞ single.php

※ご利用のサーバーによって、格納されているフォルダが違う場合があります。

そこに、コードを記述していきます。以下、コード例です。

▼ フィールドを表示する

<div><?php the_field('field_name'); ?></div>

※クラス指定をして調整したい場合は、<div class="〇〇">と記述して下さい。

▼ フィールドを変数として取得する

<?php
$variable = get_field('field_name');
// $variableを使って何かを行う
?>

※コード内に「商品名：」「色：」「価格：」「円」を追加しています。

その後、WordPressの投稿画面の表示されているフィールドグループに入力します。

投稿をプレビューや公開をすると、以下のように表示されます。

同様に余白や行間が詰まっていますので、<div>などにクラス指定をして任意のPHPファイルを編集してください。

CSSコードは、WordPressの「追加CSS」や、TCDテーマをご利用の方は「カスタムCSS」の欄から入力できます。

▼CSSの例

.acf-shortcode-output {
margin-top: 20px !important; /* 上の余白を設定（強制適用） */
margin-bottom: 20px !important; /* 下の余白を設定（強制適用） */
line-height: 1.8em !important; /* 行間を設定（強制適用） */
}

その他のコード例は、ACF公式ページなどでご確認ください。

• ACF | Code Examples
• ACF | the_field()

ACFブロックで表示する（Pro版）

ACF Proを利用している場合、ACFブロック機能を使って、オリジナルのブロックを作成・表示することが可能です。

これにより、ブロックエディタ上で視覚的にフィールドを配置でき、開発者だけでなく編集者にとっても使いやすい環境を構築できます。

ACFブロックを利用するには、functions.phpにコードを記述し、専用のテンプレートを作成する必要があります。詳細は、以下の公式ページからご確認ください。

参考：ACF | ACF Blocks

投稿タイプの作成方法

ACFの「投稿タイプ」とは、従来の「投稿」や「固定ページ」とは別に、カスタム投稿タイプ（例：お知らせ・商品など）を作成できる機能です。

※TCDテーマをインストールしてこの機能を試すと、エラーが出る場合があります。TCDテーマに付属のカスタム投稿タイプなど別の方法をご検討ください。

• 左メニューの「ACF」＞「投稿タイプ」をクリック
• 画面中央の「投稿タイプを追加する」ボタンをクリック

• 複数ラベル：投稿タイプ一覧などで表示される複数形の名前（例：Productsなど）
• 単数ラベル：個別投稿の作成・編集画面で表示される単数形の名前（例：Productなど）
• 投稿タイプキー：システム上の識別名（例：movie、product など）※英小文字、アンダースコア（_）、ダッシュ（-）のみ。最大20文字
• タクソノミー：この投稿タイプに関連付ける既存の分類（例：カテゴリー、タグ）を選択可能
• 一般公開：フロントエンド（サイト上）と管理画面でこの投稿タイプを表示
• 階層的：親子関係をもつ投稿が作成可能
• 高度な設定：作成した投稿タイプの詳細設定

「高度な設定」をONにすると、以下のような設定項目が表示されます。

• 全般：編集画面で利用できる機能の選択、管理用メモ、有効化
• ラベル：管理画面や編集画面に表示される各種ラベルのカスタマイズ
• 可視性：管理画面上の表示設定
• URL：URL構造（スラッグ、アーカイブ、RSS、ページ送りなど）を細かく設定
• パーミッション：投稿タイプの操作権限や削除・エクスポートに関する動作を設定
• REST API：外部アプリやブロックエディタから操作・取得できるようにする設定

※ブロックエディタや一部のプラグインが使えなくなる可能性がありますので、設定がご注意ください。

その後、画面右上の「変更内容を保存」をクリックすると、カスタム投稿タイプが作成されます。

タクソノミーの作成方法

ACFでは、カスタムのタクソノミー（カテゴリーやタグ）を作成することもできます。

WordPressの管理画面から「ACF」＞「タクソノミー」＞「新規タクソノミーを追加」の順でクリックします。

表示された入力欄を埋めていきます。

• 複数ラベル：タクソノミーの複数形の表示名（例：Productsなど）
• 単数ラベル：タクソノミーの単数形の表示名（例：Productなど）
• タクソノミーキー：識別用の内部名。英小文字・_・- のみ、最大32文字
• 投稿タイプ：適用対象の投稿タイプを選択（投稿、固定ページなど）
• 一般公開：ONで管理画面・サイトに表示されるようになる
• 階層的：OFFでタグと同様の扱い、ONでカテゴリーのように親子構造が使える
• 高度な設定：詳細オプションを表示する上級者向け設定（投稿タイプの「高度な設定」と類似した項目）

設定すると、通常のカテゴリーやタグ設定とほぼ同じ画面で操作できます。

エクスポート・インポート

ACFでは、フールドのエクスポート・インポート機能も提供しています。

エクスポート機能は、フィールドグループの構成をバックアップしたり、別サイトへコピーするために使います。以下2つの形式でエクスポートできます。

• JSON形式（推奨）：ACF専用の形式で、インポート時にそのまま読み込める
• PHPコード形式：functions.phpなどに貼り付けてフィールドグループを登録（表示用のPHPではない）

インポート機能は、別サイトやバックアップからエクスポートされたJSONファイルを読み込んで、フィールドグループを復元できます。

よくある質問（FAQ）

ACFに絞り込み検索機能はありますか？

ACF自体に「絞り込み検索」機能は標準装備されていません。

登録したカスタムフィールドの値をもとに、絞り込み検索ができるプラグインを併用したり、PHPで実装する必要があります。

ACFで入力した値が表示されないのは何故ですか？

以下の原因が考えられます。

• テンプレートに表示コードがない：テーマのPHPファイルを指定のコードを記述する必要あり
• フィールド名のミス：コードと管理画面のフィールド名が一致している確認
• 表示位置ルールの設定：フィールドが対象の投稿タイプに表示されていない
• ショートコードの記述ミス：[acf field="フィールド名"]を正しく記述
• キャッシュやテーマの影響：キャッシュの削除や、テーマファイルに問題がないか確認

ACFを使わなくても、TCDテーマで代替できますか？

一部のTCDテーマでは、投稿・固定ページに独自の入力項目（カスタムフィールドに相当する機能）が標準で備わっています。

また、複数のカスタム投稿タイプ、ギャラリー機能、絞り込み検索機能などが備わったテーマも提供しています。

そのため、目的によってはACFを使わなくても、TCDテーマの機能だけで十分対応可能な場合があります。

• TCDテーマ一覧
• TCDテーマの比較ナビ
• TCDテーマの人気ランキング

まとめ

Advanced Custom Fields（ACF）は、WordPressに柔軟なカスタムフィールドを追加できる強力なプラグインです。

テンプレートや他のプラグインと組み合わせることで、より自由度の高いサイト構築が実現でき、開発者や制作者にとって非常に有用なツールです。

よりユーザーに親切なWordPressサイトにしたい方は、ACFを試してみてください。