y.o.designers-works

WordPressプラグイン「Advanced Custom Fields」の出力方法まとめ

WordPressでカスタム投稿タイプを作成した場合は多くのケースで「Advanced Custom Fields」を使用し、オリジナルの投稿画面を作成する事がありあます。
今回は「Advanced Custom Fields」での全フィールドタイプの出力方法をまとめました。

フィールドタイプ【基本】

テキスト

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

aタグやstrongタグ等のHTMLタグ形式でも出力できます。

テキストエリア

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

aタグやstrongタグ等のHTMLタグ形式で出力できません。

数値

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

数値専用のフィールドです。

メール

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

メールアドレス専用のフィールドです。入力内容がメールアドレスの形式になっていなかったら警告がでます。

パスワード

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

パスワード専用のフィールドです。入力内容が「●」で表示されます。

フィールドタイプ【content】

Wysiwygエディタ

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

記事編集画面でいうところの本文入力フィールドのようなツールバー付のテキストエリアになります。ショートコードを挿入したい場合に使用します。

画像(返り値が「画像ID」の場合)

<?php if(get_field('image_id')): ?>
	<?php $imgid = get_field('image_id');
		$img = wp_get_attachment_image_src( $imgid , 'full' ); ?>
	<img src="<?php echo $img[0]; ?>" width="<?php echo $img[1]; ?>" height="<?php echo $img[2]; ?>" alt="<?php the_title_attribute(); ?>">
<?php endif; ?>
    

ファイル(返り値が「ファイルURL」の場合)

<?php if(get_field('file')): ?>
	<a href="<?php the_field('file'); ?>" target="_blank">ファイル</a>
<?php endif; ?>

フィールドタイプ【選択肢】

セレクトボックス

<?php if(get_field('select')): ?>
	<p>セレクトボックス:<?php the_field('select'); ?></p>
<?php endif; ?>

チェックボックス

<?php if(get_field('check')): ?>
	<ul>
	<?php $check = get_field('check');
		foreach ( (array)$check as $value ) { ?>
		<li><?php echo $value; ?></li>
	<?php } ?>
	</ul>
<?php endif; ?>

ラジオボタン

<?php if(get_field('radio')): ?>
	<p>ラジオボタン:<?php the_field('radio'); ?></p>
<?php endif; ?>

真/偽

<?php if(get_field('boolean')): ?>
  真の場合
<?php else : ?>
  偽の場合 
<?php endif; ?>

フィールドタイプ「真/偽」は、チェックボックスにチェックを入れなかった場合(false)はget_field()で判定されません。 よって「false」のケースを出力したい場合は上記のようなコードで。

フィールドタイプ【選択肢】

ページリンク

<?php if(get_field('pagelink')): ?>

<?php $relational = get_field('pagelink');
	foreach( (array)$relational as $value) { ?>
		<p>ページリンク:<a href="<?php echo $value; ?>"><?php echo $value; ?></a></p>
<?php } ?>

<?php endif; ?>

「ページリンク」は選択したページのURLが配列として取得できます。

投稿オブジェクト

<?php if(get_field('post_object')): ?>
	<?php
		$post_object = get_field('post_object');
		foreach ( $post_object as $object ) { ?>
		<p>投稿オブジェクト:<a href="<?php echo $object->guid; ?>" target="_blank"><?php echo $object->post_title; ?></a></p>
	<?php } ?>
<?php endif; ?>

前項の「ページリンク」ではURLだけでしたが、「投稿オブジェクト」では選択したページのオブジェクト全体が取得できます。

タクソノミー(返り値が「Term Object」)の場合

<?php if(get_field('term')): ?>
	<?php $term = get_field('term'); ?>
	<p>タクソノミー:<?php 
	foreach((array)$term as $value) { ?>
		<a href="<?php echo get_bloginfo('url') . '/archives/category/' . $value->slug; ?>"><?php echo $value->name; ?></a>
		<?php if(next($term)!==FALSE){ echo ", ";} ?>
	<?php } ?>
	</p>
<?php endif; ?>

ユーザー

<?php if(get_field('user')): ?>
<?php $aID = get_the_author_meta('ID'); the_field('user', 'user_' . $aID); ?>
<?php endif; ?>

フィールドタイプ【jQuery】

Google Map


<?php
if( get_field('googlemap') ) { 
	$googlemap = get_field('googlemap'); ?>
<script src="//maps.google.com/maps/api/js"></script>
<div id="googlemaps" style="width:600px; height:400px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window,"load",function(){
	var mapdiv=document.getElementById("googlemaps");
	var myOptions = {
		zoom:17,
		center:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"),
		mapTypeId:google.maps.MapTypeId.ROADMAP,
		scaleControl:true
	};
	var map=new google.maps.Map(mapdiv,myOptions);
	var marker=[];
	var infowindow=[];
	marker[0]=new google.maps.Marker({
		position:new google.maps.LatLng("<?php echo $googlemap['lat']; ?>","<?php echo $googlemap['lng']; ?>"),
		map:map,
		title:"<?php echo $googlemap['address']; ?>"
	});
});
</script>
<?php } ?>

上記のコードでは最初にGoogle Maps APIを読み込んでいるので、コピペするだけで地図を表示することができます。

デイトピッカー


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

カラーピッカー

<?php if(get_field('colorpicker')): ?>
<p style="background-color:<?php the_field('colorpicker'); ?>">カラーピッカー:<?php the_field('colorpicker'); ?></p>
<?php endif; ?>

まとめ

「get_filed」でカスタムフィールドの値があるか調べ「the_filed」でカスタムフィールドの値を出力する形になります。
なので、項目名は「get_filed」の内側に記述し、値がない場合は項目ごと非表示という形にしておきましょう。

スポンサーリンク

他にオススメな記事