Advanced Custom Fieldsのフィールドタイプと表示方法のまとめ

2025.07.24
WordPress

WordPressのプラグインAdvanced Custom Fields（ACF）で作成できるカスタムフィールドと、各値を取得して表示するコードをまとめました。

ACFは、カスタムフィールドを簡単に作成できるWordPressのプラグインです。インストールから詳しい使用方法は、こちらの記事で紹介しています。

WordPressにACFでカスタムフィールドを作成する方法

WordPressの投稿ページや固定ページに、入力項目（カスタムフィールド）を追加できるプラグインAdvanced Custom Fields（ACF）の使い方の備忘録です。 ACFを利用することで、…

ACFでには多様なフィールドタイプが用意されており、種類によって書き出すコードが異なります。

基本

基本のフィールドタイプでは、テキストや数値、URLなどの入力フォームを作成することができます。

テキスト

テキストを入力するフィールドです。基本的な単一行の文字列を入力します。

テキストフィールドに入力された値は、the_field()を使用して表示します。

<p><?php the_field('custom_text'); ?></p>

「custom_text」部分に表示するテキストエリアのフィールド名を指定します。

テキストエリア

複数行のテキストを入力するフィールドです。段落をもつ文字列の入力が可能です。

テキストと同様にthe_field()を使用して出力します。

<p><?php the_field('custom_textarea'); ?></p>

そのままでは連結した文字列として表示されるため、入力された文章の改行を反映したい場合は、テキストエリアのプレゼンテーションタブから改行の設定を「自動的に<br>を追加」に変更します。

番号

数値を入力するフィールドです。半角の数値のみ入力が可能です。

数値は右側の三角アイコンから上下に調整もできます。

テキストと同様にthe_field()を使用して出力できます。

<p><?php the_field('custom_num'); ?></p>

金額を表示させたい場合など、数値をカンマ区切りにしたい場合はnumber_format()を使用します。

<?php $price = get_field('custom_num'); ?>
<p><?php echo number_format($price); ?></p>

get_field()で取得した数値をカンマ区切りにして出力しています。

範囲

スライダーで設定した範囲の数値を選択できるフィールドです。設定から「初期値」や、スライダーの「最小値」「最大値」を変更できます。

設定した数値は、番号フィールドと同様のコードで表示することができます。

<p><?php the_field('custom_range'); ?></p>

メール

メールアドレスを入力するフィールドです。「@」がない場合など、メールアドレス以外の文字列形式が入力された場合エラーが表示されます。

テキストと同様にthe_field()を使用して表示します。

<p><?php the_field('custom_mail'); ?></p>

URL

URLを入力するフィールドです。URL形式以外の文字列が入力された場合、エラーが表示されます。

テキストと同様にthe_field()を使用して出力します。

<a href="<?php the_field('custom_url'); ?>">リンクテキスト</a>

<a>タグに設定すれば、出力したURLへ遷移するリンクを実装できます。

パスワード

パスワードを入力するフィールドです。入力値は「*」になって表示されます。

テキストと同様にthe_field()を使用して出力できます。

<p><?php the_field('custom_password'); ?></p>

パスワードを入力して、一致した場合のみコンテンツを表示させる機能などに活用できます。

コンテンツ

コンテンツのフィールドタイプでは、画像などのファイルや動画の追加、エディタ機能を持ったカスタムフィールドを作成することができます。

画像

画像を追加するフィールドです。「画像を追加」をクリックすると、メディアライブラリが表示され、使用する画像を選択できます。

画像フィールドの戻り値は、「画像配列」、「画像 URL」、「画像 ID」の3つの形式が用意されています。

画像を表示させたいだけの場合は「画像 URL」を選択し、img要素に出力します。

<img src="<?php the_field('custom_image'); ?>">

src属性にthe_field()で画像URLを設定して画像を表示します。

ファイル

ファイルを追加するフィールドです。PDFファイルなど、画像以外のファイルも追加することができます。

フィールドの返り値には、「ファイル配列」、「ファイルの URL」、「ファイル ID」の3つの形式が用意されています。

the_field()で設定した返り値を取得できます。以下は、フィールドに設定した画像をダウンロードできるリンクのサンプルコードです。

<a href="<?php the_field('custom_file'); ?>" download>ダウンロード</a>

返り値を「ファイルの URL」に設定し、<a>タグにdownloadを追加することで取得したURLのファイルをダウンロードできます。

リッチエディター

デフォルトのエディタとは別に、カスタムフィールドとしてエディタを追加できるフィールドです。

タグを使用したテキストの入力や、画像の追加が可能です。

エディタの内容は、the_field()を使用してまとめて出力します。

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

oEmbed

oEmbed（オーエンブド）は、外部サイトのコンテンツを埋め込みできるフィールドです。

URLを設定してYouTubeなどの動画コンテンツを表示することができます。（コンテンツの種類によっては表示できない場合もあります。）

設定したコンテンツは、the_field()を使用して出力できます。

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

選択

選択のフィールドタイプでは、セレクトボックスやチェックボックスなど、選択肢を持つフィールドを作成することができます。

選択

設定した選択肢のセレクトボックスを追加するフィールドです。

選択肢の入力欄のあるフィールドタイプでは、改行で選択項目を設定します。

セレクトボックスで選択した値は、the_field()を使用して出力できます。

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

デフォルトの返り値では、選択したラベルの値が取得できます。

選択肢には、値とラベルの両方を「 : 」で区切って設定する方法があります。

値（red）とラベル（赤）の両方を入力して、戻り値は「両方 (配列)」を指定します。値とラベルの間は、半角コロンの前後に半角スペースを空けます。

セレクトボックスで選択した値とラベルは、get_field()を使用して配列で取得します。

<?php
  $field_array = get_field('custom_choice');
  $field_label = $field_array['label'];
  $field_value = $field_array['value'];
?>
<p class="<?php echo $field_value; ?>"><?php echo $field_label; ?></p>

サンプルでは、値をクラスに、ラベルをテキストとして出力しています。

その他、オプションで初期値や複数選択の有無を設定できます。

チェックボックス

設定した選択肢のチェックボックスを追加するフィールドです。

チェックボックスで選択した値は、get_field()を使用して配列で取得します。

<?php
  $field_array = get_field('custom_check');
  if( $field_array ){
    echo implode(', ', $field_array);
  }
?>

サンプルでは、取得した配列要素をimplode()で「, 」で連結した文字列として表示しています。

チェックボックスでも、値とラベルの両方の返り値を使用できます。

また、オプションの「レイアウト」では、縦並びのチェックボックスを横並びに変更できます。

ラジオボタン

設定した選択肢のラジオボタンを追加するフィールドです。

ラジオボタンで選択した値は、the_field()を使用して出力できます。

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

ラジオボタンでも、値とラベルの両方の返り値を使用できます。

ボタングループ

設定した値のボタンのグループを追加するフィールドです。

ラジオボタンと同様に選択した値をthe_field()を使用して出力できます。

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

値とラベルの両方の返り値を使用した場合、選択したボタンによって表示内容を分岐させることも可能です。

<?php
  $field_array = get_field('custom_buttong');
  $field_value = $field_array['value'];
?>
<?php if($field_value === 'red'): ?>
  <p>赤色を選択しています。</p>
<?php else: ?>
  <p>赤色以外を選択しています。</p>
<?php endif;?>

サンプルでは、取得した配列要素の値から条件分岐して表示するテキストを変更しています。配列を取得するために戻り値は「両方 (配列)」を選択します。

真/偽

チェックボックスを一つだけ追加するフィールドです。

チェックが入った場合、真偽値trueを取得できます。以下はチェックが入っていた時に、テキスト「真」を表示するサンプルです。

<?php
  if( get_field('custom_true') ) {
    echo '真';
  }
?>

真偽値を得ることで、条件分岐で表示を切り替えるなど表示内容の変更に応用できます。

関連

関連のフィールドタイプでは、WordPressの投稿や固定ページなどの情報を設定するフィールドを作成することができます。

リンク

リンクを選択するボタンを追加するフィールドです。

「リンクを選択」ボタンをクリックすると、リンクの追加が開きます。直接リンク先のURLを入力したり、WordPressで作成した投稿や固定ページの既存コンテンツを一覧から設定できます。

返り値は配列とURLのみから選択できます。配列の返り値はget_field()で取得して、リンクのコードに各値を出力します。

<?php 
  $link = get_field('custom_link');
  if( $link ):
    $link_url = $link['url'];
    $link_title = $link['title'];
    $link_target = $link['target'] ? $link['target'] : '_self';
?>
<a class="button" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>
<?php endif; ?>

「リンクを新しいタブで開く」にチェックが入っていない場合、条件演算子で$link['target']に「_self」を設定しています。

投稿オブジェクト

投稿や固定ページを選択できるセレクトボックスを追加するフィールドです。

セレクトボックスには、WordPress内の投稿や固定ページが一覧で表示されます。

一覧に表示するページは、フィールドの設定から投稿タイプやタクソノミーで絞り込みも可能です。

戻り値の形式は「投稿オブジェクト」と「投稿 ID」から選択できます。「投稿オブジェクト」を選択した場合は、配列の返り値をget_field()で取得して各値を出力します。

<?php
  $field_array = get_field('custom_post-object');
  $permalink = get_permalink( $field_array->ID );
  if( $field_array ):
?>
  <a href="<?php echo esc_html( $permalink ); ?>">
    <?php echo esc_html( $field_array->post_title ); ?>
  </a>
<?php endif; ?>

サンプルでは、取得した投稿IDを元に、get_permalink()でリンク先ページのURLを設定しています。

投稿オブジェクトで取得した配列には、選択した投稿や固定ページのIDだけではなく、タイトルなど投稿に関連する情報も含まれています。

ページリンク

投稿や固定ページを選択するセレクトボックスを追加するフィールドです。

上記の投稿オブジェクトでは、選択したページの投稿IDからリンク先のURLを取得していましたが、ページリンクでは選択したページのURLを直接取得できます。

<a href="<?php the_field('custom_page-link'); ?>">詳細はこちら</a>

選択したページのURLを、the_field()を使用して出力しています。

関係

複数の投稿や固定ページを項目から選択できるフィールドです。

フィールドの左側からページを選択しると、右側へ追加されていきます。右側のページの一覧はドラッグで並び替えも可能です。

関連フィールドは複数選択が可能なので、戻り値はget_field()で配列の形で取得します。

<?php
  $posts = get_field('custom_relationship');
  foreach( $posts as $post ):
?>
  <a href="<?php echo get_permalink( $post->ID ); ?>">
    <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) ); ?>">
    <?php echo get_the_title( $post->ID ); ?>
  </a>
<?php endforeach; ?>

上記のサンプルでは、受け取った配列をforeachでループさせ、リンクとアイキャッチ付きの一覧で表示しています。

タクソノミー

使用しているタクソノミーをチェックボックスで選択できるフィールドです。

フィールドの返り値には、「タームオブジェクト」、「ターム ID」が用意されています。「ターム ID」を選択した場合は、the_field()でIDをテキストで表示することができます。

カテゴリー名などを表示したい場合は「タームオブジェクト」を選択し、get_field()で配列の形で取得します。

<?php
  $terms = get_field('custom_taxonomy');
  foreach( $terms as $term ):
?>
    <?php echo $term->name; ?>
<?php endforeach; ?>

上記のサンプルでは、受け取った配列をforeachでループさせ、$term->nameで選択したタクソノミー名を表示しています。タクソノミー名の他にスラッグなども表示できます。

ユーザー

ユーザーをセレクトボックスから選択するフィールドを追加します。

セレクトボックスでは、WordPressに登録されているユーザーを選択できます。セレクトボックスに表示するユーザーは、オプションの設定から権限に応じて絞り込みが可能です。

戻り値の形式は「ユーザー配列」と「ユーザーオブジェクト」、「ユーザー ID」の３種類から選択できます。

「ユーザー配列」を選択した場合は、get_field()で配列を取得します。

<?php
  $field_array = get_field('custom_user');
?>
<p>ユーザー：<?php echo $field_array['display_name']; ?></p>

上記のサンプルでは、受け取った配列から「display_name」でユーザー名を表示しています。

高度

高度のフィールドタイプでは、Googleマップやカレンダーから日付を選択できるデイトピッカーなど特殊な入力方法が可能なフィールドを作成することができます。

Googleマップ

Googleマップから位置情報を設定できるフィールドです。

地図上のデフォルトの中心位置やズームレベル、地図の高さなどをカスタマイズできます。

Googleマップの仕様変更により、マップを表示するためにはAPIキーを適用させ、Javascriptコードの設定が必要です。

日付選択ツール

入力フォームからカレンダーで日付を設定できるフィールドです。

入力フォームに表示する日付と戻り値の形式はオプションで変更できます。

設定した日付は、the_field()を使用して出力します。

<time><?php the_field('custom_date'); ?></time>

選択にある形式以外で表示したい場合は、一度get_field()で取得した日付をdate()を使用して表示します。

<?php
  $date = get_field('custom_date');
?>
<time><?php echo date('Y年m月', strtotime($date)); ?></time>

date()内の「Y年m月」に設定した形で日付を表示できます。

日時選択ツール

日付選択ツール同様、入力フォームから日付と時刻を設定できるフィールドです。

カレンダーからの選択に加えて、時間を選択するフィールドが追加されています。

日付選択ツールと同様に、the_field()を使用して出力します。

<time><?php the_field('custom_date-time'); ?></time>

時間選択ツール

時間を選択できるフィールドです。

フィールドに時間、分、秒を設定できます。表示形式のカスタムも可能です。

日付選択ツールと同様に、the_field()を使用して出力します。

<time><?php the_field('custom_time'); ?></time>

カラーピッカー

色を選択できるフィールドです。

クリックするとカラースライダーが表示され、色の調整ができます。

オプションには、透明度の有効化があり、戻り値には「16進値文字列」「RGBA 配列」が選択できます。

カラーコードは、the_field()を使用して出力します。

<div style="background-color:<?php the_field('custom_color-picker'); ?>">
  <p>コンテンツの背景を変更</p>
</div>

上記のサンプルでは、「16進値文字列」で出力したカラーコードをスタイルに直接設定しています。

Icon Picker

アイコンを選択するフィールドです。アイコンピッカーに用意されているアイコンの中から、イメージやSVGのURLを設定できます。

Dashiconsタブから使用するアイコンを選択します。

戻り値の形式は「String」と「Array」から選択できます。シンプルにアイコンを表示するだけの場合は、文字列「String」を選択しておきます。

選択したアイコンは、the_field()を使用してクラスを設定することで表示します。

<i class="<?php the_field('custom_icon-picker'); ?>"></i>

アイコンが正常に表示されない場合は、CSSにfont-family: "dashicons";を追加します。