Advanced Custom Fields の取得と表示方法

最終更新日 2024.10.16 - 公開日 2015.01.16

by Takumi Hirashima

WordPress のプラグイン Advanced Custom Fields を使ったカスタムフィールド値の取得と表示方法を紹介します。
値の取得方法と合わせて、表示されない時の注意点や対処方法も紹介します。

基本的な表示方法と注意点
テキストフィールドの表示
画像フィールドの表示
チェックボックス・ラジオボタンフィールドの表示
セレクタフィールドの表示
関連（投稿）オブジェクトの表示
タクソノミーオブジェクトの表示
1. タクソノミーのタームオブジェクトが一つの場合
2. タクソノミーのタームオブジェクトが複数の場合
日付（デイトピッカー）の表示
ギャラリーフィールドの表示
ファイルフィールドの表示方法
グループフィールドの表示方法

1.基本的な表示方法と注意点

Advanced Custom Fields（以下ACF）は、WordPress で柔軟なカスタムフィールドを制作できる便利なプラグインです。
まずは ACF の基本的な表示方法と、表示されない時の注意点や対処方法を紹介します。

投稿のフィールド値の取得と表示方法

投稿に入力されているカスタムフィールド値を「表示」する場合は the_field() を使用します。

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

フィールド名を変更する場合は the_field('text_field') 内のフィールド名 text_field を変更します。

カスタムフィールド値を取得したい場合

投稿に入力されているカスタムフィールド値を「取得」したい場合は get_field() を使用します。

<?php $text_field = get_field('text_field'); ?>

取得した値を表示したいときは echo を使います。

<?php $text_field = get_field('text_field'); ?>

<?php echo $text_field; ?>

別の投稿のカスタムフィールド値を表示

別の投稿のカスタムフィールド値を取得する場合はフィールド名の後にポストIDを指定することでフィールド値を取得できます。
例えば、特定の固定ページに入力されているフィールド値を表示したい場合は、フィールド名の指定の後に該当ページのページIDを指定します。
次コードは、ページIDが 123 の場合の表示方法です。

<?php the_field('text_field',123); ?>

現在表示しているページの親ページIDを取得するには WordPress 直上の親ページのIDやスラッグを取得をご覧ください。

オプションページからカスタムフィールド値を取得

ACF のアドオン Options Page（オプションページ）を使ってカスタムフィールド値を取得して表示する場合は、フィールド名の後に option を追加します。

<?php the_field('text_field','option'); ?>

ACF のアドオンオプションページを使用する場合はパラメーターに option を追加します。
オプションページの値の取得がうまくいかないときは、 option が抜けていることが多いので気をつけましょう。
オプションページの詳しい表示方法は、Advanced Custom Feld のアドオン Options Page の表示方法をご覧ください。

条件分岐を使った表示方法

条件分岐を使った表示方法を紹介します。
次のコードは、if 構文を使った場合の表示方法です。

<?php if(get_field('text_field')): ?>

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

<?php endif; ?>

if 構文の時には代入演算子を使うと便利です。
代入演算子を使う場合は必ず get_field() を使います。

<?php $text = get_field('sample'); if( $text ): ?>

<?php echo $text; ?>

<?php endif; ?>

if 構文をシンプルにするなら次のような方法もあります。

<?php $text = get_field('sample'); if( $text ){ echo $text; }?>

Repeater Field のカスタムフィールド値を表示

ACF の有料機能リピーターフィールド（繰り返しフィールド）を使う場合は the_sub_field() を使います。
次のコードをリーピーターフィールドのループ内に追加してください。

<?php the_sub_field('sub_field_name'); ?>

代入演算子を使う場合は get_sub_field() を使います。

<?php $sub_field_name = get_sub_field('sub_field_name'); ?>

リピーターフィールドの取得がうまくいかない場合は the_sub_field() や get_sub_field() になっていることを確認しましょう。
Repeater Field については、Advanced Custom Feld のアドオン Repeater Field の表示方法で詳しく紹介しています。

注意点

ACF を使う上での注意点をリストアップしました。
フィールド値が表示されない場合は次の点を確認してみましょう。

the_field と get_field の使い所を間違えている
リピーターフィールドの表示で the_field と the_sub_field の使い所を間違えている
オプションフィールドの表示で option を書き忘れてしまう
そもそも指定しているフィールド名が合っていない
画像オブジェクトの返り値の指定が表示の指定と合っていない

などなど

リピーターフィールドや柔軟コンテンツ内で、フィールド値を取得や表示する場合は the_sub_field になります。
これを間違えて「あぁ、表示されない！」ってことがよくあるので気をつけましょう。
次は実践的な表示方法を紹介していきます。

2.テキストフィールドの表示

フィールドタイプ「テキスト」「テキストエリア」「数値」「メール」「パスワード」の表示方法を紹介します。
このフィールドタイプは単一の文字列値を格納するのに適しています。

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

if 構文の時に代入演算子を使う場合は get_field() を使います。
リピーターフィールドの場合は get_sub_field() になります。

<?php $text = get_field('text'); if( $text ): ?>

<?php echo $text; ?>

<?php endif; ?>

if 構文でシンプルに値を表示するならこんな方法も。

<?php $text = get_field('text'); if( $text ){ echo $text; }?>

3.画像フィールドの表示

画像フィールドの表示方法を紹介します。
テキストフィールドと同じくらい頻繁に使うのが画像フィールドです。
フィールドの表示と取得方法が何通りかあるので、使用する場面を見て使い分けていきましょう。

画像の表示（返り値：オブジェクト）

<?php $image = get_field('image'); if( !empty($image) ): ?>

<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />

<?php endif; ?>

画像の登録が絶対にあるならシンプルにこんな書き方もできます。

<img src="<?php $image = get_field('image'); echo $image['sizes']['medium']; ?>" />

画像の URL やタイトルなどを個別に取り出す場合はこちら。

<?php

  $image = get_field('image');

  if( !empty($image) ):

  // 画像から各種値を取り出す

  $url = $image['url']; // URL

  $title = $image['title']; // タイトル

  $alt = $image['alt']; // 代替テキスト

  $caption = $image['caption']; // キャプション

  $description = $image['description']; // 説明

  // thumbnail

  $size = 'thumbnail'; // 画像サイズ thumbnail（サムネイル）, medium（中サイズ）, large（大サイズ）, full（元画像）

  $thumb = $image['sizes'][ $size ]; // 指定したサイズのサムネイルのURL

  $width = $image['sizes'][ $size . '-width' ]; // 横幅

  $height = $image['sizes'][ $size . '-height' ]; // 高さ

?>

<a href="<?php echo $url; ?>" title="<?php echo $title; ?>">

  <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" />

</a>

<p>

<?php echo $caption; ?>

<?php echo $description; ?>

</p>

<?php endif; ?>

※画像サイズで full が選べない場合があります。表示されない場合は、画像配列を print_r() で出力して、希望する値を持っているかを確認してください。

画像の表示（返り値：URL）

次のコードは、画像の返り値がURLの場合の表示方法です。

<?php if( get_field('image') ): ?>

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

<?php endif; ?>

画像の表示（返り値：ID）

次のコードは、画像の返り値がIDの場合の表示方法です。

<?php

  $image = get_field('image');

  $size = 'full'; // (thumbnail, medium, large, full or custom size)

  if( $image ) {

    echo wp_get_attachment_image( $image, $size );

  }

?>

画像の登録が絶対にあるならシンプルにこんな書き方もできます。

<?php echo wp_get_attachment_image(the_field('image'),'large'); ?>

4.チェックボックス・ラジオボタンフィールドの表示

チェックボックスフィールドとラジオボタンフィールドの表示方法を紹介します。

値が一つの場合

チェックボックスフィールドとラジオボタンフィールドで値が一つの場合の表示方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合に値 red を表示します。

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

値が複数の場合

チェックボックスフィールドで登録した値が複数の場合の表示方法です。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 blue:青 green:緑 の場合に red,blue,green, を表示します。

<?php

  $colors = get_field('colors'); // 値の代入

  if( $colors ){

    echo implode(', ', $colors); // 配列要素を文字列「, 」で連結して表示

  }

?>

値をタグなどで囲む場合は次のような方法があります。
次のコードは、フィールド名が colors の場合に項目をリストにして表示する方法です。

<?php $field = get_field('colors'); if ($field): ?>

<ul>

<?php foreach( $field as $value ): ?>

  <li>

<?php echo $value; ?>

  </li>

<?php endforeach; ?>

</ul>

<?php endif; ?>

条件付きで表示する場合

チェックボックスフィールドとラジオボタンフィールドで値を条件付きで表示する方法を紹介します。
フィールド名が colors 登録している値が red:赤 の登録があるかどうかを判別して表示する方法です。

<?php

  if( get_field('color') == 'red' ){

    echo '赤があります！';

  }

?>

ラベルを取得する場合

ラジオボタンフィールドでラベルを取得して表示する方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合にラベル赤を表示します。

<?php

  $field = get_field_object('colors');

  $value = $field['value'];

  $label = $field['choices'][ $value ]; // ラベルを取得

  echo $label; // ラベルを表示

?>

チェックボックスフィールドでラベルを取得して表示する方法を紹介します。
次のコードは、フィールド名が colors 登録している値が red：赤 の場合にラベル（赤）を表示します。

<?php

  $field = get_field_object('colors');

  $colors = $field['value'];

  if( $colors ){

    foreach( $colors as $color ){

      echo $field['choices'][ $color ];

    }

  }

?>

5.セレクタフィールドの表示

セレクタフィールドの表示方法を紹介します。
セレクターフィールドはチェックボックスとラジオボタンに似た表示方法になります。

値が一つの場合

セレクターフィールドで値が一つ場合の表示方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合に red を表示します。

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

値が複数の場合

セレクターフィールドで登録した値が複数の場合の表示方法です。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 blue:青 green:緑 の場合に red,blue,green, を表示します。

<?php

  $colors = get_field('colors'); // 値の代入

  if( $colors ){

    echo implode(', ', $colors); // 配列要素を文字列「, 」で連結して表示

  }

?>

条件付きで表示する場合

セレクターフィールドで値を条件付きで表示する方法を紹介します。
フィールド名が colors 登録している値が red:赤 の登録があるかどうかを判別して表示する方法です。

<?php

  $colors = get_field('colors');

  if( $colors && in_array('red', $colors)){

    echo '赤があります！';

  }

?>

次のコードは、値が複数の場合の表示方法です。

<?php

  if(in_array('red', get_field('colors'))) {

    echo '選択したのは red です';

  } elseif(in_array('blue', get_field('colors'))) {

    echo '選択したのは blue です';

  }

?>

ラベルを取得する場合

セレクトフィールドのラベルを取得して表示する方法を紹介します。
次のコードは、フィールド名が colors 登録している値とラベルが red:赤 の場合にラベル赤を表示します。

<?php

  $field = get_field_object('colors');

  $value = $field['value'];

  $label = $field['choices'][ $value ]; // ラベルの取得

  echo $label; // ラベルを表示

?>

6.関連（投稿）オブジェクトの表示

関連（投稿）オブジェクトを表示する方法を紹介します。

投稿オブジェクトが一つの場合

次のコードは、フィールド名が post_objects の場合に、投稿のタイトル・リンク・アイキャッチ画像を表示します。

<?php $post_objects = get_field('post_objects'); if( $post_objects ): // 投稿オブジェクトの取得 ?>

<a href="<?php echo get_permalink($post_objects->ID); // ID指定でリンクを取得 ?>">

<?php if ( has_post_thumbnail($post_objects->ID)): //アイキャッチ画像があれば ?>

<?php //アイキャッチ画像の取得

  $thumbnail_id = get_post_thumbnail_id($post_objects->ID); // アタッチメントIDの取得

  $image = wp_get_attachment_image_src($thumbnail_id,'full'); //「full」サイズのアイキャッチの情報を取得

  $src = $image[0];    // URL

  $width = $image[1];  // 横幅

  $height = $image[2]; // 高さ

  echo '<img src="'.$src.'" width="'.$width.'" height="'.$height.'" />';

?>

<?php else: //画像がない場合 ?>

<img src="<?php echo get_template_directory_uri(); ?>/img/nowprinting.png" alt="nowprinting" />

<?php endif; ?>

<?php echo get_the_title($post_objects->ID); //タイトルの取得 ?>

</a>

<?php endif; ?>

投稿オブジェクトが複数の場合（グローバル変数へセットする場合）

グローバル変数へセットすることで、通常の投稿と同じような関数で値を取得することができます。
ここで重要なのは、グローバル変数へセットした時は必ずポストオブジェクトをリセットすることです。
ここでポストオブジェックトをリセットしないと、ページの残りの部分が正常に動作しない場合があります。

<?php $acf_post_objects = get_field('post_objects'); if( $acf_post_objects ): ?>

<ul>

<?php foreach( $acf_post_objects as $post): // ループの開始 ?>

<?php setup_postdata($post); // 重要！ setup_postdata でポストオブジェクトを呼び出します ?>

  <li>

    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

    <span>カスタムフィールド<?php the_field('field_name'); ?></span>

  </li>

<?php endforeach; // ループの終了 ?>

</ul>

<?php wp_reset_postdata(); // ページの残りの部分は正常に動作するように、ポストオブジェクトをリセットします ?>

<?php endif; ?>

同じ投稿が繰り返される場合の対処方法

表示される投稿のデータが最初の一件を繰り返してしまう場合は、global $post; を追加して $post>ID;
などで取得できるか試してみてください。

--- 省略 ---

<?php foreach( $acf_post_objects as $post): // ループの開始 ?>

global $post;

<?php setup_postdata($post);

--- 省略 ---

投稿オブジェクトが複数の場合（グローバル変数へセットしない場合）

グローバル変数へセットしない場合は投稿IDから各種値を取得します。

<?php $acf_post_objects = get_field('post_objects'); if( $acf_post_objects ): ?>

<ul>

<?php foreach( $acf_post_objects as $acf_post_object): // ループの開始 ?>

  <li>

    <a href="<?php echo get_permalink($acf_post_object->ID); ?>"><?php echo get_the_title($acf_post_object->ID); ?></a>

    <span>カスタムフィールド：<?php the_field('field_name', $acf_post_object->ID); ?></span>

  </li>

<?php endforeach; // ループの終了 ?>

</ul>

<?php endif;?>

7.タクソノミーオブジェクトの表示

タクソノミーのタームオブジェクトを表示する方法を紹介します。

タクソノミーのタームオブジェクトが一つの場合

フィールド名が「taxonomy_field_name」の場合に、選択したタームオブジェクトが単一の場合は、次のコードを追加します。

<?php

  $acf_term = get_field('taxonomy_field_name');

  if( $acf_term ):

?>

  <h2><?php echo esc_html( $acf_term->name ); ?></h2>

  <p><?php echo esc_html( $acf_term->description ); ?></p>

<?php endif; ?>

タクソノミーのタームオブジェクトが複数の場合

フィールド名が「taxonomy_field_name」の場合に、選択したタームオブジェクトが複数の場合。
例えば、選択されたタームのリンク一覧を表示したい場合は、次のコードを追加します。

<?php

  $acf_terms = get_field('taxonomy_field_name');

  if( $acf_terms ):

?>

  <ul>

<?php foreach( $acf_terms as $acf_term ): ?>

    <a href="<?php echo esc_url( get_term_link( $acf_term ) ); ?>"><?php echo esc_html( $acf_term->name ); ?></a>

<?php endforeach; ?>

  </ul>

<?php endif; ?>

8.日付（デイトピッカー）の表示

デイトピッカーフィールド（日付）の表示方法を紹介します。

基本の表示

次のコードは、フィールド名が date の場合の表示方法です。

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

高度な表示（英語表記にしたい）

英語表記で出力したつもりが日本語で表示されてしまう場合は、表示される日付の値を次のように調整することで対応が可能です。
次のコードは YYYYMMDD の形式で保存された生の値を取得し、それを修正するために数値を変換する方法です。

<?php

  $date = get_field('date', false, false); //値の取得

  $date = new DateTime($date); //日付オブジェクトの作成

  echo $date->format('j M Y'); //日付の表示

?>

その他

その他に、直接日本語表記に変更したい場合は、管理画面で以下のフィールドの設定を任意で変更してみましょう。

Display Format 表示フォーマット: 管理画面に表示されるときの日付形式を入力します。年月日を入れて値を返したい場合は「yy年m月d日」とするのがよいでしょう。

Return format フォーマットを保存する: 表示される値の日付形式を入力します。値は常にDBでYYYYMMDDとして保存されることに注意してください。年月日を入れて値を返したい場合は「yy年m月d日」とするのがよいでしょう。

Week Starts On 週の開始: 週を開始する曜日を指定します

9.ギャラリーフィールドの表示

ギャラリーフィールドの表示方法を紹介します。
次のコードは、フィールド名が gallery の場合の表示方法です。

<?php

  $images = get_field('gallery'); // 値の取得

  if($images): // 値があれば表示

?>

<ul>

<?php foreach( $images as $image ): // 値のループ ?>

<li><img src="<?php echo $image['sizes']['large']; ?>" alt="<?php echo $image['alt']; ?>" /></li>

<?php endforeach; ?>

</ul>

<?php endif; ?>

ギャラリーフィールドの詳しい表示方法はAdvanced Custom Fields のアドオン Gallery Field の表示方法をご覧ください。

10.ファイルフィールドの表示方法

ファイルフィールドの表示方法を紹介します。
次のコードは、フィールド名が file で返り値がファイル配列の場合、ファイルのパスをファイル名のテキストリンクで表示する方法です。

<?php // ファイル名のテキストリンクを表示

  $file = get_field('file');

  if($file){

    echo '<a href="'.$file['url'].'">'.$file['filename'].'</a>';

  }

?>

ファイルの名前やファイルの絶対パスを取得する方法

ファイルの配列からは次の値が取得できます。

<?php // ファイルの表示

  $file = get_field('file'); // フィールド名を指定

  if($file){

    echo $file['id']; // ファイルの ID を表示

    echo $file['title']; // ファイルのタイトルを表示

    echo $file['filename']; // 拡張子を含むファイル名を表示

    echo $file['url']; // ファイルの URL を表示

    echo $file['alt']; // ファイルの alt を表示

    echo $file['author']; // ファイルの管理者IDを表示

    echo $file['description']; // ファイルのディスクリプションを表示

    echo $file['caption']; // ファイルのキャプションを表示

    echo $file['name']; // 拡張子を除いたファイル名を表示

    echo $file['date']; // ファイルの登録日を表示 20XX-08-08 08:08:08

    echo $file['modified']; // ファイルの最終更新日を表示 20XX-08-08 08:08:08

    echo $file['mime_type']; // MIME タイプ、PDFであれば application/pdf を返します

    echo $file['type']; // ファイルタイプ、PDFであれば application を返します

    echo $file['icon']; // WordPress 共通のファイルアイコンのパス

  }

?>

ファイルサイズを取得したい場合はWordPress メディアのファイルサイズを表示する方法をご覧ください。

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

グループフィールドの表示方法を紹介します。
次のコードは、グループフィールド名が グループ の場合の表示方法です。
グループ内のフィールドはグループにフィールド名を指定することで取得することができます。

<?php $group = get_field('グループ'); if( $group ): ?>

<?php

  $group_value = esc_attr($group['値']);

  if($group_value){

    echo $group_value;

  }

?>

<?php endif; ?>

まとめ

WordPress のプラグイン Advanced Custom Fields を使ったカスタムフィールド値の取得と表示方法を紹介しました。
プラグインの使い方に慣れるまで苦労しますが、慣れてしまえば様々な案件に対応できる便利なプラグインなので、使い方をぜひマスターしましょう！

1.基本的な表示方法と注意点

投稿のフィールド値の取得と表示方法

カスタムフィールド値を取得したい場合

別の投稿のカスタムフィールド値を表示

オプションページからカスタムフィールド値を取得

条件分岐を使った表示方法

Repeater Field のカスタムフィールド値を表示

注意点

2.テキストフ​​ィールドの表示

3.画像フィールドの表示

画像の表示（返り値：オブジェクト）

画像の表示（返り値：URL）

画像の表示（返り値：ID）

4.チェックボックス・ラジオボタンフィールドの表示

値が一つの場合

値が複数の場合

条件付きで表示する場合

ラベルを取得する場合

5.セレクタフィールドの表示

値が一つの場合

値が複数の場合

条件付きで表示する場合

ラベルを取得する場合

6.関連（投稿）オブジェクトの表示

投稿オブジェクトが一つの場合

投稿オブジェクトが複数の場合（グローバル変数へセットする場合）

同じ投稿が繰り返される場合の対処方法

投稿オブジェクトが複数の場合（グローバル変数へセットしない場合）

7.タクソノミーオブジェクトの表示

タクソノミーのタームオブジェクトが一つの場合

タクソノミーのタームオブジェクトが複数の場合

8.日付（デイトピッカー）の表示

基本の表示

高度な表示（英語表記にしたい）

その他

9.ギャラリーフィールドの表示

10.ファイルフィールドの表示方法

ファイルの名前やファイルの絶対パスを取得する方法

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

まとめ

2.テキストフィールドの表示