まえがき

この記事ではWordPressのカスタムフィールド系プラグイン『Advanced Custom Fields』の出力にスポットを当てて解説していきたいと思います。
出力タグがAdvanced Custom Fieldsのオリジナルなので初めての人は迷うと思いますがこの記事を読めば大丈夫です。

↓出力じゃなくて『Advanced Custom Fields』の使い方等の解説はこの記事を見てね

『Advanced Custom Fields』の使い方

コピペ用『Advanced Custom Fields』出力タグ

とりあえず説明は要らないって人のためにコピペできる形でコード書いときます。
使ってね☆

<?  
//テキスト
$txt = get_field('txt');
if($txt){ ?><p>テキスト：<? echo $txt; ?></p>
<? }

//テキストエリア
$area = get_field('area');
if($area){ ?><p>テキストエリア：<? echo $area; ?></p>
<? }

//数値
$num = get_field('num');
if($num){ ?><p>数値：<? echo $num; ?></p>
<? }

//メール
$mail = get_field('mail'); 
if($mail){ ?><p>メール：<? echo $mail; ?></p><? }

//パスワード
$passwd = get_field('passwd');
if($passwd){ ?><p>パスワード：<? echo $passwd; ?></p>
<? }

//Wysiwyg エディタ
$editor = get_field('editor'); 
if($editor){ ?><p>Wysiwyg エディタ：<? echo $editor; ?></p>
<? }

//画像(返り値は「画像ID」)
$img = get_field('img');
$imgurl = wp_get_attachment_image_src($img, 'full'); //サイズは自由に変更してね
if($imgurl){ ?><img src="<? echo $imgurl[0]; ?>" alt=""></p>
<? }

//ファイル(返り値は「ファイルURL」)
$file = get_field('file');
if($file){ ?><a href="<? echo $file; ?>" target="_blank">ファイル</a></p>
<? }
 
//セレクトボックス
$select = get_field('select');
if($select){ ?><p>セレクトボックス：<? echo $select; ?></p>
<? }

//チェックボックス
$check = get_field('check');
if($check){
	foreach((array)$check as $value) {
		echo "セレクトボックス：".$value;
	}
}

//ラジオボタン
$radio = get_field('radio'); 
if($radio){ ?><p>ラジオボタン：<? echo $radio; ?></p>
<? }

//真/偽
$singi = get_field('singi'); 
if($singi){ ?><p>真/偽：<? echo $singi; ?></p>
<? }

//ページリンク
$pagelink = get_field('pagelink');
if($pagelink){ 
	foreach((array)$pagelink as $value) {
		echo "ページリンク：".$value;
	}
}

//投稿オブジェクト
$object = get_field('object'); 
if($object){ ?><p>投稿オブジェクト：<? echo $object->post_title; ?></p>
<? }

//関連(返り値は「Post Objects」)
$kanren = get_field('kanren');
if($kanren){ ?>
<p>関連：<? foreach((array)$kanren as $value) {
	echo '<a href="'.get_the_permalink($value->ID).'">'.$value->post_title.'</a>';
	if ($value !== end($kanren)) {
		echo ", ";
	}
} ?></p><? }

//タクソノミー(返り値は「Term Object」)
$taxo = get_field('taxo'); 
if($taxo){ ?><p>タクソノミー：<? 
foreach((array)$taxo as $value) {
	echo '<a href="http://kotori-blog.com/taxonomy/'.$value->slug.'">'.$value->name.'</a>';
	if ($value !== end($taxo)) {
		echo ", ";
	}
} ?></p><? }

//ユーザー(フィールドタイプは「セレクトボックス」)
$user = get_field('user');
if($user){ ?><p>ユーザー：<?
	echo '<a href="http://kotori-blog.com/anthor/'.$user['user_nicename'].'">'.$user['nickname'].'</a>';
?></p><? }

//ユーザー(フィールドタイプは「Multi Select」)
$user = get_field('user');
if($user){ ?><p>ユーザー：<?
foreach((array)$user as $value) {
	echo '<a href="http://kotori-blog.com/anthor/'.$value['user_nicename'].'">'.$value['nickname'].'</a>';
	if ($value !== end($user)) {
		echo ", ";
	}
} ?></p><? }

//Google Map
$googlemap = get_field('googlemap'); 
if($googlemap){ ?><p>Google Map：<? echo $googlemap['address']; ?> lat:<? echo $googlemap['lat']; ?> lng:<? echo $googlemap['lng']; ?></p><? }

//デイトピッカー
$datepicker = get_field('datepicker'); 
if($datepicker){ ?><p>デイトピッカー：<? echo $datepicker; ?></p>
<? }

//カラーピッカー
$color = get_field('color');
if($color){ ?><p>カラーピッカー：<? echo $color; ?></p>
<? } ?>

『Advanced Custom Fields』の出力の基本

『Advanced Custom Fields』の出力タグは基本こんな感じ！

<?php 
//普通に表示する場合
the_field($field_name, $post_id); ?>

<?php 
//変数に格納する場合
$field = get_field($field_name, $post_id, $format_value); ?>

$field_name	表示したいフィールドのフィールド名を入れます。もちろんダブルクォーテーションで囲みます。
$post_id	投稿IDを入れます。省略時は現在の投稿となります。
$format_value	指定できる値はtrueかfalse。フィールドタイプ「Wysiwyg エディタ」等で値をwpautop()やnl2br()等でフォーマットするかどうかの指定です。falseにするとフォーマット無しで値を取得できます。

KoToRiは変数に格納してゴニョゴニョしたいタイプなので、基本get_field()で解説していきます。

フィールドタイプ「テキスト」の出力

これはそんなに問題ないでしょう。

<?  
//テキスト
$txt = get_field('txt');
if($txt){ ?><p>テキスト：<? echo $txt; ?></p>
<? } ?>

まんまです。「Prepend」や「Append」が指定されていれば前後にこの文字列が入った状態で値が返ってきます。

フィールドタイプ「テキストエリア」の出力

これも問題ないでしょう。まんま出力でちゃんと改行が入ります。

<?  
//テキスト
$area = get_field('area');
if($area){ ?><p>テキストエリア：<? echo $area; ?></p>
<? } ?>

フィールドタイプ「数値」の出力

これもそのまま出力です。

<?  
//数値
$num = get_field('num');
if($num){ ?><p>数値：<? echo $num; ?></p>
<? } ?>

フィールドタイプ「メール」の出力

これもそのまま出力です。

<?  
//メール
$mail = get_field('mail'); 
if($mail){ ?><p>メール：<? echo $mail; ?></p>
<? } ?>

フィールドタイプ「パスワード」の出力

これもそのまま出力です。テキスト系のフィールドはそのまんま出力すれば問題ないのです。

<?  
//パスワード
$passwd = get_field('passwd');
if($passwd){ ?><p>パスワード：<? echo $passwd; ?></p>
<? } ?>

フィールドタイプ「Wysiwyg エディタ」の出力

そのまま出力するとwpautop()でフォーマットされます。

<?  
//Wysiwyg エディタ
$editor = get_field('editor'); 
if($editor){ ?><p>Wysiwyg エディタ：<? echo $editor; ?></p>
<? } ?>

フィールドタイプ「画像」の出力

画像は返り値を「画像ID」にして↓のように出力するのが吉です。

<?  
//画像(返り値は「画像ID」)
$img = get_field('img');
$imgurl = wp_get_attachment_image_src($img, 'full'); //サイズは自由に変更してね
if($imgurl){ ?><img src="<? echo $imgurl[0]; ?>" alt=""></p>
<? } ?>

そしてサイズはこの記事を参考に自由に設定してください。
メディアのサイズを追加する[WordPress]

フィールドタイプ「ファイル」の出力

ファイルは基本直リンクだとおもうので返り値を「ファイル URL」にして↓のように出力するのが吉です。

<?  
//ファイル(返り値は「ファイルURL」)
$file = get_field('file');
if($file){ ?><a href="<? echo $file; ?>" target="_blank">ファイル</a></p>
<? } ?>

フィールドタイプ「セレクトボックス」の出力

セレクトボックスの出力はこんな感じ。

<?  
$select = get_field('select');
if($select){ ?><p>セレクトボックス：<? echo $select; ?></p>
<? } ?>

もし「複数の値を選択できるか?」の値を「はい」にしたら値が配列で返ってきます。
その場合は「チェックボックス」の出力コードを参考にしてください。

フィールドタイプ「チェックボックス」の出力

チェックボックスは値が配列で返ってくるのでこんな感じのコードになります。

<?  
$check = get_field('check');
if($check){
	foreach((array)$check as $value) {
		echo "セレクトボックス：".$value;
	}
} ?>

フィールドタイプ「ラジオボタン」の出力

ラジオボタンは単一選択なのでそのまま出力です。

<?  
$radio = get_field('radio'); 
if($radio){ ?><p>ラジオボタン：<? echo $radio; ?></p>
<? } ?>

フィールドタイプ「真/偽」の出力

真/偽をそのまま出力はあんまりしないですが、出力コードはこんな感じです。

<?  
$singi = get_field('singi'); 
if($singi){ ?><p>真/偽：<? echo $singi; ?></p>
<? } ?>

フィールドタイプ「ページリンク」の出力

指定したページのリンクが配列で返ってきます。

<?  
$pagelink = get_field('pagelink');
if($pagelink){ 
	foreach((array)$pagelink as $value) {
		echo "ページリンク：".$value;
	}
} ?>

フィールドタイプ「投稿オブジェクト」の出力

指定したページの情報が$postのようなオブジェクト型で返ってきます。
この例はタイトルを表示してるけどパーマリンクとかIDとかも取ってこれるので便利です。

<?  
$object = get_field('object'); 
if($object){ ?><p>投稿オブジェクト：<? echo $object->post_title; ?></p>
<? } ?>

「投稿オブジェクト」は「複数の値を選択できるか?」を「はい」にすると複数選択できるようになって、値が配列で返ってきますがそれをするくらいなら次に紹介する「関連」をつかいましょう。

フィールドタイプ「関連」の出力

返り値を「Post Objects」にして↓のコードのように出力するのをオススメします。
返り値を「Post Objects」にすると値が$postのようなオブジェクト型で返ってきます。
ただ、この関連は複数選択可なので値が配列になっています。
出力コードはこんな感じです。

<?  
//関連(返り値は「Post Objects」)
$kanren = get_field('kanren');
if($kanren){ ?>
<p>関連：<? foreach((array)$kanren as $value) {
	echo '<a href="'.get_the_permalink($value->ID).'">'.$value->post_title.'</a>';
	if ($value !== end($kanren)) {
		echo ", ";
	}
} ?></p><? } ?>

フィールドタイプ「タクソノミー」の出力

関連と同じように返り値を「Term Object」にして↓のコードのように出力するのをオススメします。
返り値を「Term Object」にすると$get_termのようなオブジェクト型で返ってきます。
ただ、複数選択可なので値が配列になっています。

<?  
//タクソノミー(返り値は「Term Object」)
$taxo = get_field('taxo'); 
if($taxo){ ?><p>タクソノミー：<? 
foreach((array)$taxo as $value) {
	echo '<a href="http://kotori-blog.com/taxonomy/'.$value->slug.'">'.$value->name.'</a>';
	if ($value !== end($taxo)) {
		echo ", ";
	}
} ?></p><? } ?>

フィールドタイプ「ユーザー」の出力

ユーザーはフィールドタイプを「セレクトボックス」にするか「Multi Select」にするかによって配列が多重になったりするので出力にも注意が必要です。

<?  
//ユーザー(フィールドタイプは「セレクトボックス」)
$user = get_field('user');
if($user){ ?><p>ユーザー：<?
	echo '<a href="http://kotori-blog.com/anthor/'.$user['user_nicename'].'">'.$user['nickname'].'</a>';
?></p><? }

//ユーザー(フィールドタイプは「Multi Select」)
$user = get_field('user');
if($user){ ?><p>ユーザー：<?
foreach((array)$user as $value) {
	echo '<a href="http://kotori-blog.com/anthor/'.$value['user_nicename'].'">'.$value['nickname'].'</a>';
	if ($value !== end($user)) {
		echo ", ";
	}
} ?></p><? } ?>

フィールドタイプ「Google Map」の出力

Google Mapは値が場所の名称と経度、緯度が配列になって返ってきます。
出力コードはこんな感じ。

<?  
//Google Map
$googlemap = get_field('googlemap'); 
if($googlemap){ ?><p>Google Map：<? echo $googlemap['address']; ?> lat:<? echo $googlemap['lat']; ?> lng:<? echo $googlemap['lng']; ?></p><? } ?>

フィールドタイプ「デイトピッカー」の出力

選択した日付が「表示フォーマット」で指定したフォーマットで出力されます。

<?  
//デイトピッカー
$datepicker = get_field('datepicker'); 
if($datepicker){ ?><p>デイトピッカー：<? echo $datepicker; ?></p>
<? } ?>

フィールドタイプ「カラーピッカー」の出力

選択した色が16進数で返ってきます。出力コードはそのまんまです。

<?  
//カラーピッカー
$color = get_field('color');
if($color){ ?><p>カラーピッカー：<? echo $color; ?></p>
<? } ?>

まとめ

『Advanced Custom Fields』の基本的な使い方等の説明は↓の記事を参考にしてね。
『Advanced Custom Fields』の使い方

この記事や↑の記事を書くために『Advanced Custom Fields』検証しまくりましたが改めてすごいプラグインだと思い知りました。
フィールドタイプ「関連」とか一回も使ったこと無かったけどめちゃくちゃ便利じゃん。
振り返ると使える機会めっちゃあります笑
今までスルーしていたなんて愚かでした＞＜

てか本当に
『Advanced Custom Fields』が多機能すぎて記事書くのがマジで大変でした。
もう一生やりたくありません笑

とはいえこの記事がみんなの役に立てばいいなと思っています。
コピペ用のコードとか使いづらかったら言って下さい。