WordPress のプラグイン Advanced custom field の表示方法を紹介します。
Advanced custom field(以下ACF)は WordPress で柔軟なカスタムフィールドを制作できる便利なプラグインです。
この投稿では、基本的な表示方法から取得の際の注意点や、表示されない時の対処方法などを紹介していきます。
1.基本的な表示方法と注意点
まずは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 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'); ?>
または
<?php the_field('text_field','options'); ?>
ACF のアドオンオプションページを使用する場合は option
または options
を追加します。
オプションページから値の取得がうまくいかない場合はこの項目を確認しましょう。
オプションページの詳しい表示方法は、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('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'); ?>
代入演算子を使う場合は get_sub_field()
を使います。
<?php $sub_field_name = get_sub_field('sub_field_name'); ?>
リピーターフィールドの取得がうまくいかない場合は the_sub_field()
や get_sub_field()
になっていることを確認しましょう。
注意点
ACF を使う上での注意点をリストアップしました。
フィールド値が表示されない場合は次の点を確認してみましょう。
the_field
と get_field
の使い所を間違えている
- リピーターフィールドの表示で
the_field
と the_sub_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'];
$title = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];
$description = $image['description'];
$size = 'thumbnail';
$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';
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('colors') == 'red') { echo 'red'; } ?>
ラベルを取得する場合
ラジオボタンフィールドでラベルを取得して表示する方法を紹介します。
次のコードは、フィールド名が 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 if(get_field('colors') == 'red') { echo 'red'; } ?>
次のコードは、値が複数の場合の表示方法です。
<?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);
$image = wp_get_attachment_image_src($thumbnail_id,'full');
$src = $image[0];
$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);
<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
週の開始
- 週を開始する曜日を指定します