【第４回】カスタム投稿ページのカスタマイズ（ACF入力フィールドの値を表示させる）｜WordPressで絞り込み検索機能を実装

｜WordPressで絞り込み検索機能を実装する｜

【第４回】カスタム投稿ページのカスタマイズ（ACF入力フィールドの値を表示させる）

カスタム投稿ページ（single.php)へACFフィールドの値を表示

ACFで作った各フィールドの値はこのままでは表示させる場所がない。
そこで第２回で作成したカスタム投稿用のページ（single-apparel.php）をカスタマイズする。
まずこのようなレイアウトを作成する。

get_field()の関数でACFのフィールドを記述

カスタム投稿用のページ（single-apparel.php）のソースコードにget_field()の関数を使って表示させる。

変数名 = get_field(‘フィールド名’); “フィールド名”には必ずACFで作成した時につけたフィールド名を記載する。

【実際のソースコード】
利用テーマ：lightning
ファイル名：single-apparel.php

<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":40,"sizeSlug":"full","linkDestination":"none"} -->
	<?php $image = get_field('img'); ?>

<figure class="wp-block-image size-full"><img src="<?php echo $image ?>" alt="" class="wp-image-40"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"spacing":{"padding":{"bottom":"0"}}}} -->
<p style="padding-bottom:0"><?php $brand = get_field('brand');
						if($brand): ?>
						<?php foreach( $brand as $brand ):?> 
						<?php echo $brand['label'];?>
						<?php endforeach; ?>
					<?php endif; ?></p>
<!-- /wp:paragraph -->


<?php $name = get_field('name'); ?>	
<h4 class="wp-block-heading" style="padding-top:0"><?php echo $name; ?></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
	<?php $price01 = get_field('price01'); ?>
<p><?php echo $price01; ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php $item = get_field('item');
	if($item):
	foreach( $item as $item ):
	echo $item['label'];
	endforeach;
	endif; ?>
	</p>
<!-- /wp:paragraph -->

</div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
</div>
複数選択肢がある場合のデータの出力方法

テキストフィールドの場合と異なり、複数の選択肢がある場合は単純に”echo”だけではデータが取れないので下記の方法でデータを取得する。

【ラジオやチェックボックスの場合for文で回す】

<p style="padding-bottom:0">
      <?php 
	$brand = get_field(‘brand’); //get_field()関数へACFで作成したフィールド名を格納				
	if($brand):					
	foreach( $brand as $brand ):				
	echo $brand[‘label’];//画面へ表示				
	endforeach;
	endif; 
      ?>
</p>

【真偽で表示／非表示を切り替える場合】

　例）セール対象商品のみ”セール対象”と表示する

<?php $sale = get_field(‘sale'); 
	if($sale=='1'){
	echo “<div>セール対象</div>";			
	}
?>

ここまででとりあえずACFで作成したフィールド入力だけでページの構成が可能となる。これであればWordpressの操作にあまり慣れていない人でもチェックボックスやラジオボタンの入力だけでページを作る事ができる様になる。