【WordPress】カスタムフィールドをかんたんに追加・管理する方法（Advanced Custom Fields）

カスタムフィールドをWordPressの投稿に追加したい！「価格」や「担当者名」みたいな入力欄を増やしたいのに、標準機能だと使いにくくて…

WordPressでカスタムフィールドを追加すると、投稿や固定ページに自由な入力欄を作れます。この記事では、Advanced Custom Fields（ACF）を使ったカスタムフィールドの追加・管理方法を、以下の3点を中心に解説します。

フィールドグループの作り方
フィールドの追加・表示位置の設定方法
入力した値をサイトに表示する方法

オンライン事業売買

WordPressサイト売買

ドメイン売買

データを読み込み中...

カスタムフィールドとは？Advanced Custom Fieldsでできること

そもそもカスタムフィールドって、WordPressに最初から付いてる機能じゃないの？わざわざプラグインを入れる必要があるのかな…

カスタムフィールドとは、投稿や固定ページに「本文」以外の入力項目を追加する仕組みです。たとえば「価格」「担当者名」「発売日」といった、決まった形式の情報を入力する欄を作れます。

WordPressにも標準のカスタムフィールド機能はあります。ただし入力欄は「キー」と「値」を手入力するシンプルな形式で、入力ミスが起きやすく、扱いにくいのが実情です。

そこで役立つのがAdvanced Custom Fields（WordPress.org公式）です。ACFを使うと、標準機能にはない次のようなメリットがあります。

フィールドタイプが豊富：テキスト・画像・日付・真偽値など30種類以上から選べます。
入力ミスを防げる：必須設定や選択肢を指定でき、入力する人が迷いません。
GUIで直感的に作れる：管理画面の操作だけでフィールドを組み立てられます。

まずはACFをインストールしましょう。管理画面の「プラグイン」→「新規プラグインを追加」を開き、検索欄に「Advanced Custom Fields」と入力します。検索結果のカードから「今すぐインストール」→「有効化」の順にクリックすると使えるようになります。下の画像は、インストール・有効化が完了した状態のカードです。

有効化すると、管理画面のメニューに「ACF」の項目が追加されます。ここからフィールドグループの作成に進みます。

MEMO

ACFの無料版では、投稿・固定ページ・ユーザー・タクソノミー項目・メディア・コメントへのフィールド追加や、カスタム投稿タイプ・タクソノミーの登録ができます。リピーターフィールドやACFブロックなど一部の高度な機能はPRO版限定ですが、基本的なカスタムフィールドの追加は無料版だけで完結します。

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

ACFでは、まず入力欄をまとめる「フィールドグループ」という箱を作ります。その中に個々の入力欄を追加していくイメージですね。

1. 「ACF」→「フィールドグループ」から新規作成する

フィールドグループは、カスタムフィールドをまとめる単位です。最初にこの箱を作らないと、個別のフィールドを追加できません。

管理画面のメニューから「ACF」→「フィールドグループ」を開き、「新規追加」をクリックします。

クリックすると、フィールドグループの編集画面が開きます。

2. フィールドグループの名前を設定する

次に、フィールドグループの名前を設定します。この名前は管理画面での識別に使うため、あとから見て分かりやすいものにしておきましょう。

画面上部のタイトル入力欄に、たとえば「商品情報」のような名前を入力します。ここが空欄のままだと保存できないため、必ず入力してください。

名前を入力したら、続けて同じ画面でフィールドを追加していきます。

STEP2：フィールドを追加する

1. フィールドタイプを選ぶ

フィールドタイプとは、その入力欄がどんな形式の値を受け取るかを決める設定です。テキストを入れる欄なのか、画像を選ぶ欄なのかで選ぶタイプが変わります。

「フィールドを追加」ボタンを押すと設定欄が開くので、「フィールドタイプ」の項目を確認します。テキスト・画像・日付など30種類以上の中から、作りたい入力欄に合ったものを選んでください。

ここでは例として「テキスト」を選んだ状態で進めます。

2. フィールド名・ラベル・必須設定を入力する

タイプを選んだら、フィールドの詳細を設定します。ここで入力する項目は、あとで値を呼び出すときにも使うため重要です。

主に設定するのは次の3点です。画面の各入力欄を確認しながら入力してください。

フィールドラベル：管理画面での表示名です（例：担当者名）。
フィールド名：テーマファイルで値を呼び出すときに使う名前です。英数字とアンダースコアのみで入力します（例：staff_name）。
必須項目：入力を必須にしたい場合はオンにします。空欄での保存を防げます。

ラベル・名前を入力すると、フィールド一覧にその2項目とタイプが1行で表示されます。

ラベルを入力すると、フィールド名は自動で入力される場合があります。テーマファイルで呼び出す名前になるため、内容を確認しておきましょう。必須項目のオン/オフは、この行を再度開いた設定画面から変更できます。

フィールド名は後から変えにくい

フィールド名は、表示用のコードで呼び出すときのキーになります。公開後に変更すると、すでに入力済みの値との紐付けが外れることがあります。最初に分かりやすい名前を決めておくのがおすすめです。

STEP3：表示する場所（ロケーションルール）を設定する

フィールドは作れたけど、これってどの投稿に表示されるの？全部の投稿に出ちゃうと困るんだけど…

1. 投稿タイプなどの条件を指定する

ロケーションルールとは、作成したフィールドグループを「どの編集画面に表示するか」を決める条件設定です。ここを設定しないと、意図しない画面に表示されたり、逆にどこにも出なかったりします。

編集画面の「設定」内にある「ロケーションルール」タブを開きます。「投稿タイプ」が「投稿」と等しい、のように条件を指定してください。

条件は「and」「or」で組み合わせられます。特定のカテゴリーの投稿だけに表示する、といった細かい指定も可能です。

投稿以外にも追加できる

ロケーションルールで「タクソノミー」や「ユーザー」を指定すれば、カテゴリー編集画面やユーザープロフィール画面にもカスタムフィールドを追加できます。投稿だけでなく、さまざまな画面に入力欄を用意できます。

2. フィールドグループを公開する

条件まで設定できたら、フィールドグループを保存して有効な状態にします。保存しないと、投稿編集画面には反映されません。

画面右上の「変更内容を保存」ボタンをクリックしてください。これでフィールドグループが有効になります。

保存後、実際に投稿編集画面を開いて、フィールドが表示されるか確認していきましょう。

STEP4：投稿編集画面でカスタムフィールドに値を入力する

ここまでで入力欄の準備は完了です。あとは実際の投稿にデータを入れていきますね。

フィールドグループを公開すると、条件に一致する投稿の編集画面に入力欄が追加されます。ここに実際の値を入力することで、投稿ごとにデータを持たせられます。

ロケーションルールで指定した投稿タイプの編集画面を開いてください。本文エリアの下などに、STEP2で作成したラベル名の入力欄が表示されます。実際に値を入力してみましょう。

値を入力したら、投稿を更新して保存します。ただし、この時点ではまだサイトの表示側（フロントエンド）には値が出てきません。表示するには次のステップの作業が必要です。

STEP5：カスタムフィールドの値をサイトに表示する

値は保存できたのに、サイトを見ても表示されない…どうすれば読者に見えるようになるの？

ACF無料版では、入力した値をフロントエンドに表示するために、テーマファイルへコードを追記する必要があります。コードを追記しない限り、値は保存されているだけで表示はされません。

注意

テーマファイルを直接編集すると、テーマのアップデート時に変更が上書きされて消えることがあります。編集は必ず子テーマで行うか、事前にバックアップを取ってから作業してください。記述ミスがあるとサイトが表示されなくなる場合もあります。

1. the_field()で値を出力する

値をそのまま表示したい場合は、the_field()という関数を使います。これは指定したフィールドの値を、その場に直接出力する関数です。

表示したいテンプレート（single.phpなど）の該当箇所に、次のように記述します。カッコ内にはSTEP2で決めたフィールド名を入れます。

<?php the_field('staff_name'); ?>

これで、投稿に入力した「staff_name」の値がその位置に表示されます。ラベル文字と組み合わせて、次のように書くこともできます。

<p>担当者：<?php the_field('staff_name'); ?></p>

2. get_field()で値を取得して条件分岐する

get_field()は、値を「取得」する関数です。the_field()が直接出力するのに対し、get_field()は値を変数として受け取れるため、値があるかどうかで表示を切り替えたいときに便利です。

the_field()はecho get_field()と同じ動きをします。そのため、値が空のときは何も表示しない、といった制御をしたい場合はget_field()を使って条件分岐するのが定石です。

<?php
$staff = get_field('staff_name');
if ( $staff ) {
  echo '<p>担当者：' . esc_html( $staff ) . '</p>';
}
?>

この書き方なら、値が入力されている投稿にだけ表示され、空の投稿では何も出ません。複数のフィールドをまとめて表示したい場合も同じ考え方で、フィールドごとにget_field()で値を取得し、まとめて1つのブロックとして出力するように書けます。次の例は、「商品名」「価格」「担当者名」の3つのフィールドを見出し付きのブロックとして本文に追加するコードです。

<?php
add_filter('the_content', function($content) {
  if (is_singular('post') && function_exists('get_field')) {
    $product_name = get_field('product_name');
    $price        = get_field('price');
    $staff        = get_field('staff_name');
    if ($product_name || $price || $staff) {
      $block  = '<h3>商品情報</h3><ul>';
      if ($product_name) $block .= '<li>商品名：' . esc_html($product_name) . '</li>';
      if ($price)        $block .= '<li>価格：' . esc_html($price) . '</li>';
      if ($staff)        $block .= '<li>担当者：' . esc_html($staff) . '</li>';
      $block .= '</ul>';
      $content .= $block;
    }
  }
  return $content;
});

このコードを追記して投稿ページを開くと、記事本文の末尾に「商品情報」の見出しとあわせて、次のように各フィールドの値がまとめて表示されます。

これでカスタムフィールドの追加から表示までが完成しました。フィールドを増やしたい場合は、STEP2〜STEP3を繰り返してフィールドグループを育てていけます。

PRO版でできること

ACFにはPRO版もあり、同じ項目を繰り返し入力できるリピーターフィールド、ブロックエディタで使えるACFブロック、フレキシブルコンテンツフィールド、オプションページ、ギャラリーフィールド、クローンフィールドなどが利用できます。基本的なカスタムフィールドの追加は無料版で完結するため、まずは無料版から始めるのがおすすめです。

よくある質問

Advanced Custom Fieldsは無料で使えますか？

無料版でも30種類以上のフィールドタイプが使え、カスタム投稿タイプやタクソノミーの登録機能も利用できます。投稿・固定ページ・ユーザーなどへのフィールド追加も無料版の範囲です。

リピーターフィールドやACFブロックといった一部の高度な機能はPRO版限定ですが、基本的なカスタムフィールドの追加・表示は無料版だけで完結します。

カスタムフィールドとカスタム投稿タイプの違いは何ですか？

カスタム投稿タイプは投稿の「種類」を追加する機能で、カスタムフィールドはその投稿に付ける「入力項目」を追加する機能です。たとえば「商品」というカスタム投稿タイプを作り、そこに「価格」というカスタムフィールドを追加する、というように組み合わせて使うことが多いです。

追加したカスタムフィールドが投稿画面や表示側に反映されないときは？

投稿編集画面に出ない場合は、ロケーションルールの条件が対象の投稿タイプと一致していない可能性があります。表示側（フロントエンド）に出ない場合は、テーマファイルに出力コードを追記していないことが主な原因です。あわせて、コード内のフィールド名の記述ミスがないかも確認してください。詳しくはSTEP3とSTEP5を見直しましょう。