【WordPress】Advanced Custom Fieldsの使い方【出力編】

設定編に続き、出力編となります。投稿テンプレートを作成するためには、テーマをカスタマイズしていく必要があります。WordPressテーマを編集することになりますが、コピペでできます。

今回は、「投稿テンプレートを作る」という目的で設定していきます。

関連

【WordPress】AdvancedCustom Fieldsの使い方【設定編】

出力タグ

基本

<?php if( get_field('フィールド名') ) { ?>
	<p><?php the_field('フィールド名'); ?></p>
<?php } ?>

基本的には、get_field(‘フィールド名’)　で出力できます。

前後をHTMLやCSSで装飾してやることで、それっぽくなります。

下に書いてくもの以外の時は、基本的にはこれでいけます。

画像(返り値が画像URL)

<?php if( get_field('フィールド名') ) { ?>
	<img src="<?php the_field('フィールド名'); ?>">
<?php } ?>

get_field(”)で、画像URLが返ってくるので、画像として表示させるには、周りを img src=” “で囲ってあげるだけです。

画像(返り値が画像ID)

<?php if( get_field('フィールド名') ) { ?>
	<?php $imgid = get_field('フィールド名');
		$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 } ?>

画像IDが返ってくるので、wp_get_attachment_image_src() で、IDに相当する「URL」「width」「height」を配列で取得し、<img>内にそれぞれ配置してやるだけです。画像サイズはお好みでどうぞ。(今回はfull)

チェックボックス(セレクトボックス 複数選択可 の時)

<?php if( get_field('フィールド名') ) { ?>
	<ul>
	<?php $check = get_field('フィールド名');
		foreach ( (array)$check as $value ) { ?>
		<li><?php echo $value; ?></li>
	<?php } ?>
	</ul>
<?php } ?>

セレクトボックスを複数選択可にした場合、チェックボックスと同じ、配列で出力されるので、 foreachを使います。

真/偽

<?php if( get_field('フィールド名') ) { ?>
<?php
	真の時表示されるもの;
	} else {
	偽の時表示されるもの;
?>
<?php } ?>

真/偽そのものを表示することはほとんど無いと思うので、上記のようになります。

ページリンク

<?php if( get_field('フィールド名') ) { ?>
<?php $pagelink = get_field('フィールド名');
	foreach( (array)$pagelink as $value) { ?>
		<p>ページリンク：<a href="<?php echo $value; ?>"><?php echo $value; ?></a></p>
	<?php } ?>
<?php } ?>

選択したページのURLが配列として取得できます。

投稿オブジェクト

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

選択したページのオブジェクト全体が取得できます。

タクソノミー(返り値がTerm Object)

<?php if( get_field('フィールド名') ) { ?>
	<?php $term = get_field('フィールド名'); ?>
	<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 } ?>

オブジェクト型で返ってきます。また、配列です。

ユーザー(セレクトボックス)

<?php
if( get_field('フィールド名') ) { 
	$user = get_field('フィールド名'); ?>
	<p>ユーザー：<a href="<?php echo get_bloginfo('url') . '/author/' . $user['user_nicename']; ?>"><?php echo $user['nickname']; ?></a></p>
<?php } ?>

マルチの場合は、配列処理となりますが、あまり使わないので割愛します。

Google Map

<?php
if( get_field('フィールド名') ) { 
	$googlemap = get_field('フィールド名'); ?>
<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 Mapの住所/経度/緯度を配列で取得できます。

それらを、GoogleMap APIと共に組み込むと、地図を表示させることが出来ます。

以上の出力タグを、それぞれを表示したい場所へ記述するだけです。

実際に出力してみる

前回の「せあせあ」を実際に出力してみようと思います。

関連

【WordPress】AdvancedCustom Fieldsの使い方【設定編】

目標: 「ペンギンさんの一言」の下に「せあせあ」を表示させる。

まずは、「外観」→「テーマの編集」に行きましょう。

そして、個別投稿(single.php)にいきます。(右の一覧から探してください)

テーマは、「Simplicity2」を利用させていただいています。

「Simplicity2」では、「entry-body.php」内に記述しているようなので、「entry-body.php」に行きます。

(ご自分の利用されているテーマ内で表示したい場所を探してください。)

【豆知識】Google Chromeを使って、相当する場所を簡単に探す

調べたいページを開いて、「調べたい要素」を右クリックして「検証」をすると、デベロッパーツールが起動し、相当する場所のHTMLを表示してくれます。

「ペンギンさんの一言」の場合、「main」→「post」→「article」→「footer」内にあるということがわかりますね!

関連

初心者でもWeb制作が簡単に! GoogleChrome デベロッパーツールのススメ

「entry-body.php」に来ました。

赤枠で囲ってある場所が、記事本文を表示させている場所です。

そして、青枠が「footer」その下に「ペンギンさんの一言」があります。

Google Chromeで確認したとおりの順番になっていますね。

では、その下にコードを書いていきましょう。

<?php if( get_field('seasea') ) { ?>
<h4>せあせあ</h4>
<div id="seasea">
	<?php the_field('seasea'); ?>
</div>
<?php } ?>

こんな感じですね。if で囲うことで未入力時には<h4>せあせあ</h4>を表示しないようにしています。

また、<div id=”seasea”></div>で囲うことで、cssを後々編集できるようにしています。

表示を確認してみましょう。しっかりと表示したい場所に表示できていますね。

このような感じで、出力コードを記載していきます。

周りを他のコードで囲んでやることで、簡単にいろいろなものを実装できますね!

このプラグインだけで本当にいろんな事ができそうです。