LAST UPDATE   | Posted by Takumi Hirashima

Advanced custom field の表示方法

Advanced custom field の表示方法

WordPress のプラグイン Advanced custom field の表示方法を紹介します。
Advanced custom field(以下ACF)は WordPress で柔軟なカスタムフィールドを制作できる便利なプラグインです。
この投稿では基本的な表示方法から、表示されない時の対処方法や注意点などを紹介していきます。

  1. 基本的な表示方法と注意点
    1. 現在の投稿のフィールド値を表示
    2. 別の投稿のフィールド値を表示
    3. オプションページからフィールド値を取得
    4. if 構文や代入演算子を使う場合
    5. 注意点
  2. テキストフ​​ィールドの表示
  3. 画像フィールドの表示
    1. 画像の表示(返り値:オブジェクト)
    2. 画像の表示(返り値:URL)
    3. 画像の表示(返り値:ID)
  4. チェックボックスフィールドの表示
  5. セレクタフィールドの表示
  6. 投稿オブジェクトの表示
    1. 投稿オブジェクトが一つの場合
    2. 投稿オブジェクトが複数の場合(グローバル変数へセットする場合)
    3. 投稿オブジェクトが複数の場合(グローバル変数へセットしない場合)
  7. デイトピッカーの表示

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

まずは基本的な表示方法と、表示されない時の対処方法や注意点などを紹介します。

現在の投稿のフィールド値を表示

現在表示している投稿に入力されているフィールド値を表示する場合は the_field() を使用します。

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

フィールド名を変更する場合は the_field('text_field') 内の text_field を、管理画面で設定したフィールド名に変更してください。
値を取得したい場合は get_field() を使用します。

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

別の投稿のフィールド値を表示

別の投稿のフィールド値を表示する方法を紹介します。
例えば、特定の固定ページに入力されているフィールド値を表示したい場合は、フィールド名の指定の後に該当ページのページIDを指定します。次コードは、ページIDが 123 の表示方法です。

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

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

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

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

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

または

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

ACF のアドオン Options Page(オプションページ)を使用する場合は option(または options)を追加します。
これが意外と忘れがちなので気をつけましょう。
オプションページの詳しい表示方法は、Advanced Custom Feld のアドオン Options Page の表示方法を、ご覧ください。

if 構文や代入演算子を使う場合

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

<?php if(get_field('text_field')): ?>
<p><?php the_field('text_field'); ?></p>
<?php endif; ?>

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

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

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

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

Repeater Field のフィールド値を表示

ACF の有料アドオン Repeater Field(繰り返しフィールド)を使う場合は the_sub_field を使います。
Repeater Fieldの詳細は、Advanced Custom Feld のアドオン Repeater Field の表示方法を、合わせてご覧ください。

<?php the_sub_field($sub_field_name); ?>

値を代入したり if 文を使う場合は get_sub_field を使います。

<?php get_sub_field($sub_field_name); ?>

注意点

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

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

など…

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

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

フィールドタイプ「テキスト、テキストエリア、数値、メール、パスワード」の表示はこちらになります。

<?php the_field('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 ];
  $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; ?>

画像の表示(返り値: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.チェックボックス・ラジオボタンフィールドの表示

チェックボックスとラジオボタンフィールドの表示方法を紹介します。
この表示はちょっと癖があります。
次のコードは、フィールドネームが color の場合に、チェックした項目をリストにして表示する方法です。

<?php $field = get_field('color'); if ($field): ?>
<ul>
<?php foreach( $field as $value ): ?>
  <li>
<?php echo $value; ?>
  </li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

値が一つの場合

セレクターフィールドの表示方法を紹介します。
次のコードは、フィールドネームが color 登録している値が red:赤 の場合に red を表示します。

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

値が複数の場合

登録した値が複数の場合の表示方法です。
次のコードは、フィールドネームが color 登録している値が red:赤 blue:青 green:緑 の場合に red,blue,green, を表示します。

<?php
  $colors = get_field('color'); // 値の代入
  if( $colors ){
    echo implode(', ', $colors); // 配列要素を文字列(, )により連結して表示
  }
?>

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

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

値が一つの場合

セレクターフィールドの表示方法を紹介します。
次のコードは、フィールドネームが color 登録している値が red:赤 の場合に red を表示します。

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

値が複数の場合

登録した値が複数の場合の表示方法です。
次のコードは、フィールドネームが color 登録している値が red:赤 blue:青 green:緑 の場合に red,blue,green, を表示します。

<?php
  $colors = get_field('color'); // 値の代入
  if( $colors ){
    echo implode(', ', $colors); // 配列要素を文字列(, )により連結して表示
  }
?>

条件付きで表示する場合

条件付きで表示する方法を紹介します。
フィールドネームが color 登録している値が red:赤 の登録があるかどうかを判別して表示する場合

<?php if(get_field('color') == "red") { echo 'red'; } ?>

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

<?php 
  if(in_array('red', get_field('color'))) {
    echo '選択したのは red です';
  } elseif(in_array('blue', get_field('color'))) {
    echo '選択したのは blue です';
  }
?>

ラベルを取得する場合

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

<?php 
  $field = get_field_object('color');
  $value = get_field('color');
  $label = $field['choices'][ $value ]; // ラベルの取得
  echo $label; // ラベルを表示
?>

ACF の有料アドオン Repeater Field 内で値を取得する場合は、get_fieldget_sub_field に変更します。

<?php 
  $field = get_sub_field_object('color');
  $value = get_sub_field('color');
  $label = $field['choices'][ $value ];
?>
<?php 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; ?>

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

グローバル変数へセットしない場合は投稿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.デイトピッカーの表示

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

基本の表示

次のコードは、フィールド名が 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
週の開始
週を開始する曜日を指定します

まとめ

WordPress のプラグイン Advanced custom field の表示方法を紹介しました。
使い方に慣れるまでは苦労しますが、慣れてしまえば様々な案件に対応できるので、WordPress の中でも頼りになるプラグインの一つじゃないでしょうか。

私が続けて読みたい関連記事

スポンサーリンク