WordPressプラグイン「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; ?>

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

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

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