Advance Custom fields(ACF)の出力方法まとめ【個別・一括】

「Advance Custom fieldsって何?」という方は、下記記事をご確認ください。

出力方法一覧

基本の出力

テキスト系や画像(URLの場合)、選択肢で返り値が一つの場合などに使用できます。

<p><?php the_field('フイールド名'); ?></p>
<?php
//値が空の場合出力を除外する
$field = get_field('フイールド名');
if($field){echo '<p>'.$field.'</p>';}
?>
<?php
//ページ・カテゴリなど指定のフィールドを読み込みたい場合

//ページ
$page_field = get_field('フイールド名','ページID');
if($page_field){echo $page_field;}

//カテゴリ
$cat_field = get_field('フイールド名','category_カテゴリID');
if($cat_field){echo $cat_field;}

//タグ
$tag_field = get_field('フイールド名','post_tag_タグID');
if($tag_field){echo $tag_field;}

//ユーザー
$user_field = get_field('フイールド名','user_ユーザーID');
if($user_field){echo $user_field;}
?>

選択肢の場合

選択肢の返り値にbothを選択していたり、複数の値を選択するなどして、通常の出力で表示がArrayとなる場合に使用します。

<?php
$select = get_field('フイールド名');

if($select){
	//ラベルを出力
	echo $select['label'];

	//値を出力
	echo $select['value'];
}
?>

選択肢を複数指定している場合は、foreachで配列の数分出力します。

<?php
$select = get_field('フイールド名');

if($select){
	echo '<ul>';
	foreach($select as $child){
		echo '<li>';
		if(is_array($child)){
			//bothの場合、ラベルを出力
			echo $child['label'];
		}else{
			//単独の返り値の場合の出力
			echo $child;
		}
		echo '</li>';
	}
	echo '</ul>';
}
?>

画像の場合

画像フィールドで画像を出力したい場合、返り値の選択によって画像の表示方法が異なります。単純に画像だけ表示させたい場合は、画像URLを選ぶとシンプルな記載で出力できます。

画像配列の場合の出力

<?php
$images = get_field('フィールド名');
if($images){echo '<img src="'.$images[url].'">';}
?>

画像URLの場合の出力

<?php
$images = get_field('フィールド名');
if($images){echo '<img src="'.$images.'">';}
<?php endif; ?>

画像IDの場合の出力

<?php
$images = get_field('フィールド名');
if($images):
	//wp_get_attachment_image_src(画像ID, '画像サイズ')で画像情報を取得
	$src = wp_get_attachment_image_src($images, 'full');
	
	//画像URLは配列の[0]にあるので、それを利用して画像出力
	echo '<img src="'.$src[0].'">';
endif;
?>

グループの場合

一度グループ内に入力されているデータを配列に格納後、個別に[‘〜’]にてグループ内のフィールドを出力します。

<?php
//グループのデータを取得
$group = get_field('フィールド名');

if($group){
	//グループ内のフィールドを出力
	echo $group['グループ内のフィールド名'];
}
?>

繰り返しフィールドの場合(ACF pro)

Pro版で使用できる機能 繰り返しフィールドの場合、投稿画面からフィールドブロックを随時追加できるため、while分で追加したコンテンツ分の出力処理をします。
公式サイトでは、下記のような表記をしています。

<?php
if(have_rows('フィールド名')){
	while (have_rows('フィールド名')): the_row();
		the_sub_field('繰り返しフィールド内のフィールド名');
	endwhile;
}
?>

上記の表記以外でも、繰り返しフィールドで繰り返したコンテンツ数分の処理ができる表記であれば別の表記となっても出力されます。
特に、繰り返しフィールドの入れ子などがある場合などで、そのままの表記で使いにくい箇所などの場合、下記などのように出力させることも可能です。

<?php
$repeater = get_field('repeater');

$r = '0'; //繰り返しフィールドの配列一番最初の番号
$r_count = count($repeater); //繰り返しフィールドにある配列数

//繰り返しフィールド内に配列がある分繰り返し
while($r_count > $r){
	//$r番目の配列を取得
	$repeater_content = $repeater[$r];

	//繰り返しフィールド内の指定データを出力
	echo $repeater_content['繰り返しフィールド内のフィールド名'];

	$r++; //配列番号をプラス1(次の配列へ)
}
?>

テーブルの場合(Advanced Custom Fields: Table Field別途要インストール)

料金表などでテーブルを使いたい場合などに便利な、Advanced Custom Fields用の追加機能のプラグインがあります。
この場合は、テーブルのキャプション・thead部分・tbody部分がそれぞれ配列に格納されており、そのまま出力をしてもHTMLの<table>〜</table>の表記となりませんので、下記のように各データの処理を記載する必要があります。

<?php
//テーブルのデータを取得
$table = get_field('フィールド名');

if($table){
	//テーブルの各データを配列に分ける
	$caption = $table['caption'];
	$thead = $table['header'];
	$tbody = $table['body'];

	echo '<table>';

	if($caption){
		echo '<caption>'.$caption.'</caption>';
	}
	if($thead){
                echo '<thead><tr>';
                    foreach($thead as $thead_th){
                        echo '<th>'.$thead_th.'</th>';
                    }
                echo '</tr></thead>';
	}
	if($tbody){
		echo '<tbody>';
		foreach($tbody as $body_tr){
			echo '<tr>';
			foreach($tbody_tr as $tbody_td){
                            echo '<td>'.$tbody_td.'</td>';
			}
			echo '</tr>';
		}
		echo '</tbody>';
	}
	echo '</table>';
}
?>

上記の例以外にも、Advanced Custom Fields用の追加機能のプラグインが多数あります。出力できる機能を追加するもの・管理画面上でカスタムフィールドを作成する際に役立つもの・投稿者の権限によって入力できる欄を制限するもの などがあります。

追加プラグインによっては、基本の出力方法でそのまま表示されるものもあれば、Arrayになるものもあります。
Arrayが出力された場合は、print_r($〜)などでどこに必要な情報が入っているかなど確認が必要になります。

全項目一括して出力するには

Advanced Custom Fieldsでは、一項目ずつ個別に出力する他、一括して、データを取得・出力させることもできます。

項目を後で増減したりしたい場合など、一括してデータを取得・出力することで都度テンプレートへ読み込みの設定を追加する必要がなく、便利です。

<?php
// 配列に値を格納します
$fields = get_fields(); 
?>

上記のように記述すると、該当ページに設定したACFの値を一括して取得できます。また、個別の出力時のように()の中に指定したいページの値を設定することも可能です。

指定したページの値を読み込みたい場合
get_fields(‘ページID’);
指定したカテゴリの値を読み込みたい場合
get_fields(‘category_カテゴリID’);
指定したタグの値を読み込みたい場合
get_fields(‘post_tag_タグID’);
指定したユーザーの値を読み込みたい場合
get_fields(‘user_ユーザーID’);

このままechoで出力するとArrayで表示されますので、foreachなどで個別にデータを出力させる必要があります。

<?php
$fields = get_fields();

foreach($fields as $value){
	if(is_array($value)){
	//選択肢などの場合
	$value_count = count($value); //複数選択されているか配列数チェック
		if($value_count > 1){
		 //値が1以上(複数)だったら
			foreach($value as $child){
				if(is_array($child)){
					echo $child['label'];
				}else{
					echo $child;
				}
				if($child === reset($value)){
					//ループの最後以外に改行させる
					echo '<br />';
				}
			}
		}else{
		//値が1つで返り値bothだったら
			echo $value['label'];
		}
	}else{
	//その他の値出力
		echo $value;
	}
}
?>

このままでも出力はできますが、
・個別にクラスをあてたい
・どの項目か見出しをつけたい
などに対応できません。

そのため、下記のようにすることで、ラベルやタイプ別で出力方法を細かく設定できます。

一括出力サンプル

<?php
$fields = get_fields();
foreach($fields as $key => $value){
    if($value):
        //ラベルやタイプを取得
        $data = get_field_object($key);
        $label = $data['label'];
        $type = $data['type'];

        //出力のくくりにクラスを指定(フィールドキー)
        echo '<div class="'.$key.'">';

        //見出しにフィールドラベルを設定
        echo '<h3>'.$label.'</h3>';

        if($type == 'group'){
            //グループだったら
            foreach($value as $child_key => $child_value){
                $child_data = get_field_object($child_key);
                $child_label = $child_data['label'];
                echo '<div class="'.$child_key.'">';
                echo '<h4>'.$child_label.'</h4>';
                echo $child_value;
                echo '</div>';
            }
        }elseif($type == 'repeater'||$type == 'flexible_content'){
            //繰り返しフィールド または 柔軟コンテンツだったら
            $r = 0;
            while(has_sub_field($key)): 'the_row';
                $repeater = $value[$r]; //繰り返しフィールドの指定の配列番号の値を格納
                    foreach($repeater as $child_key => $child_value){
                        $child_data = get_field_object($child_key);
                        $child_label = $child_data['label'];

                        echo '<div class="'.$child_key.'">';
                        echo '<h4>'.$child_label.'</h4>';
                        echo $child_value;
                        echo '</div>';
                    }
                $r++; //次の配列番号へ
            endwhile;
        }elseif($type == 'image'){
            //画像だったら		
            if(is_array($value)){
                //配列だったら
                echo '<img src="'.$value['url'].'">';
            }elseif(is_numeric($value)){
                //IDだったら
                $images = wp_get_attachment_image_src($value, 'full');
                echo '<img src="'.$images[0].'">';
            }else{
                //URLだったら
                echo '<img src="'.$value.'">';
            }
        }elseif($type == 'table'){
            //追加プラグイン Table Field使用
            $caption = $value['caption'];
            $header = $value['header'];
            $body = $value['body'];

            echo '<table>';
            if($caption){echo '<caption>'.$caption.'</caption>';}
            if($header){
                echo '<thead><tr>';
                    foreach($header as $header_th){
                        echo '<th>'.$header_th.'</th>';
                    }
                echo '</tr></thead>';
            }
            if($body){
                echo '<tbody>';
                    foreach($body as $body_tr){
                        echo '<tr>';
                        foreach($body_tr as $body_td){
                            echo '<td>'.$body_td.'</td>';
                        }
                        echo '</tr>';
                    }
                echo '</tbody>';
            }
            echo '</table>';
        }elseif(is_array($value)){
            //選択肢などの場合(ラベルを出力)
            $value_count = count($value); //複数選択されているか配列数チェック
            if($value_count > 1){ 
                //値が1以上(複数)だったら
                foreach($value as $child){
                    if(is_array($child)){
                        echo $child['label'];
                    }else{
                        echo $child;
                    }
                    if($child === reset($value)){
                        //ループの最後以外に改行させる
                        echo '<br />';
                    }
                }
            }else{
                //値が1つで返り値bothだったら
                echo $value['label'];
            }
        }else{
            //その他の値出力
            echo $value;
        }

        echo '</div>';
    endif;
}
?>

上記表記に、グループや繰り返しフィールドを入れ子にする場合や、その中に選択肢を選択する場合は該当の欄に対応の処理を書いておく必要があります。

お問い合わせ

ガリレオ アンド ヴィーナス合同会社では、Wordpressを使用したコーポレートサイトなどの構築の他、カート機能のついたECショップなどのWEBサイト制作を行っております。

また、ご自身でサイト作成をされたい方向けにセミナー等も開催しております。

詳しくはお気軽にお問い合わせください。

    関連記事

    1. 15分でウェブショップ完成!無料&簡単なBASEを使ったウェブショップ…

    2. WordPressのテーマを自作する方法解説!必要なファイルとそれぞれ…

    3. Advanced Custom Fieldsの基本的な使い方!入力欄を…

    4. ブログなどの投稿記事で実際にWEBデザイナーがよく使用する HTML一…

    5. 病院の問診票などに!手書きするのが手間な用紙をWebサイト上で入力しそ…

    6. 2021年度版 ECサイト 出店費用など 比較まとめ