WordPress プラグイン Advanced custom field の出力方法

Last update 
/ Posted by Takumi Hirashima

WordPress プラグイン Advanced custom field の出力方法

WordPress で柔軟なカスタムフィールドを制作できるプラグイン Advanced custom field (以下 ACF)の出力方法を紹介します。このプラグインは投稿に柔軟なカスタムフィールドを追加したいときに本領を発揮します! まずは基本的な出力方法から、出力時に注意したい点や少し高度な出力方法などを紹介していきます。

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

1.基本的な出力方法と注意点

まずは基本的な出力方法と、出力時に間違いやすい点や出力されない時の対処方法を紹介します。

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

現在の投稿に入力されているフィールドを表示する場合はこちら。

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

かっこ内の text_field は、管理画面で設定したフィールド名を指定してください。

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

例えば、固定ページで親ページに入力されているフィールドを表示したい場合は、フィールド名の指定の後にページIDを指定してすることで、その投稿からフィールドを表示することができます。

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

親ページのIDの取得方法は、WordPress 直上の親ページのIDやスラッグを取得を御覧ください。

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

ACF のアドオン Options Page(オプションページ)を使ってフィールドを表示する場合は、次のコードを追加します。
オプションページの詳しい内容はAdvanced Custom Feld のアドオン Options Page の出力方法を紹介を御覧ください。

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

または

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

ACF のアドオン Options Page(オプションページ)を使用する場合は option(または options)を追加します。
これが意外と忘れがちなので気をつけましょう。

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; ?>

シンプルにするならこんな書き方もあります。

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

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

ACF の有料アドオン Repeater Field(繰り返しフィールド)を使う場合は the_sub_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_field” と “get_field” の使い所を間違えている
  • リピーターフィールドの出力で “the_sub_field” と “the_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)

<?php if( get_field('image') ): ?>
  <img src="<?php the_field('image'); ?>" />
<?php endif; ?>

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

チェックボックスやラジオボタンフィールドの出力はちょっと癖があります。
シンプルに、チェックした項目をリストにして出力するならこちら。

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

値が一つの場合

フィールドネームが「checkbox_field_name」。登録している値が「red : 赤」の単一チェックの場合はこちら。

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

値が複数ある場合

フィールドネームが「checkbox_field_name」。登録している値が「red : 赤」「blue : 青」「green : 緑」の場合。

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

5.セレクタフィールドの出力

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

値が一つの場合

登録した値が一つの場合はこちら。
フィールドネームが「selector」、登録している値が「red : 赤」だけの場合に、格納されている値が red の場合 red を出力します。

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

値が複数の場合

フィールドネームが「selector」。登録している値が「red : 赤」「blue : 青」「green : 緑」の場合。

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

フィールドネームが「selector」。「red : 赤」の登録があるかどうかを判別して出力する場合

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

ラベルを取得する場合

セレクトフィールドのラベルを取得したい場合はこちら。

<?php 
  $field = get_field_object('selector');
  $value = get_field('selector');
  $label = $field['choices'][ $value ];
?>
<?php echo $label; ?>

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

<?php 
  $field = get_sub_field_object('selector');
  $value = get_sub_field('selector');
  $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
週の開始
週を開始する曜日を指定します

まとめ

比較的簡単な出力から試してみて、徐々に使い方に慣れていきましょう。

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

スポンサーリンク