Advanced Custom Fieldsを取得して表示する方法

25719 Views
2017年10月17日 WordPressPHPAdvanced Custom Fields

前回の記事でAdvanced Custom Fieldsの設定方法をご紹介したので、今回はその設定したカスタムフィールドを取得して表示（出力）する方法をご紹介したいと思います！

前回の記事
Advanced Custom Fieldsを使いこなそう

投稿以外のカスタムフィールドを取得する方法をご紹介

SNSでシェア♪

コピペ用コードまとめ

説明不要！
カスタムフィールドの呼び出し方忘れちゃった！
って方用のコピペ用コードです。

基本的な出力方法

Advanced Custom Fieldsには出力方法が2つあり、

<?php
//echoを使わずにHTMLに表示する方法
the_field("フィールド名", $post_id);


//変数に格納してからHTMLに表示する方法
$text = get_field("フィールド名", $post_id, $format_value);
echo $text;

<?php

//echoを使わずにHTMLに表示する方法

the_field("フィールド名", $post_id);

//変数に格納してからHTMLに表示する方法

$text = get_field("フィールド名", $post_id, $format_value);

echo $text;

となります。

ここで注意点として、
・投稿
・固定ページ
・カスタム投稿
で「the_field()」「get_field()」をhave_posts()のループないで使う場合は「$post_id」は不要です。
※$post_idを入れても動きます

私は変数に格納して使うことが多いですが、特にその変数を他で使う予定がないのであれば変数に格納せずに出力しても問題なと思います！

以下「get_field()」を使った方法でご紹介したいと思います。

フィールドタイプ：テキスト

テキストの表示はシンプルです。

<?php
$text = get_field('text');
if (!empty($text)) echo "<p>お名前：{$text}</p>";
?>

出力例）
<p>お名前：テスト太郎</p>

<?php

$text = get_field('text');

if (!empty($text)) echo "お名前：{$text}";

出力例）

お名前：テスト太郎

で表示が可能です。

「empty()」関数は、変数の文字が空かどうかを判定します・
今回は変数内に文字列があれば表示するという判定になります。

フィールドタイプ：テキストエリア

こちらは「テキスト」と同様の方法で出力されます。
改行が自動で含まれて表示されます。

<?php
$textarea = get_field('textarea');
if (!empty($textarea)) echo "<p>紹介：{$textarea}</p>";
?>

出力例）
<p>紹介：今年で社会人4年目<br>好きな言語はPHPとJavaScript<br>覚えたい言語はLISPです。</p>

<?php

$textarea = get_field('textarea');

if (!empty($textarea)) echo "紹介：{$textarea}";

出力例）

紹介：今年で社会人4年目 好きな言語はPHPとJavaScript 覚えたい言語はLISPです。

となります。

フィールドタイプ：数値

こちらは「テキスト」と同様の方法で出力されます。

<?php
$number = get_field('number');
if (!empty($number)) echo "<p>年齢：{$number}歳</p>";
?>

出力例）
<p>年齢：24歳</p>

<?php

$number = get_field('number');

if (!empty($number)) echo "年齢：{$number}歳";

出力例）

年齢：24歳

となります。

フィールドタイプ：メール

こちらは「テキスト」と同様の方法で出力されます。

<?php
$mail = get_field('mail');
if (!empty($mail)) echo "<p>メールアドレス：{$mail}</p>";
?>

出力例）
<p>メールアドレス：hogehoge@futaego.com</p>

<?php

$mail = get_field('mail');

if (!empty($mail)) echo "メールアドレス：{$mail}";

出力例）

メールアドレス：hogehoge@futaego.com

となります。

フィールドタイプ：パスワード

こちらは「テキスト」と同様の方法で出力されます。

<?php
$password = get_field('password');
if (!empty($password)) echo "<p>パスワード：{$password}</p>";
?>

出力例）
<p>パスワード：password</p>

<?php

$password = get_field('password');

if (!empty($password)) echo "パスワード：{$password}";

出力例）

パスワード：password

これ、入力したパスワードが文字列として表示れます。
使い所が思い浮かびません、、、

フィールドタイプ：Wysiwygエディタ

こちらは「テキスト」と同様の方法で出力されます。

<?php
$wysiwyg_editor = get_field('wysiwyg_editor');
if (!empty($wysiwyg_editor)) echo "<div>本文：{$wysiwyg_editor}</div>";
?>

出力例）
<div><p>なんでも入力できちゃうよ！</p>
<p><span style="font-size: 24pt;">文字サイズ</span>や<span style="color: #ff6600;">色</span>などWordみたいに編集できるよ！</p></div>

<?php

$wysiwyg_editor = get_field('wysiwyg_editor');

if (!empty($wysiwyg_editor)) echo "<div>本文：{$wysiwyg_editor}</div>";

出力例）

<div>なんでも入力できちゃうよ！

文字サイズや色などWordみたいに編集できるよ！</div>

となります。

フィールドタイプ：画像

こちらは「テキスト」とは出力方法が変わります。

<?php
$img = get_field('img');

//自分で追加した「add_image_size()」のサイズで出力したい場合
if (isset($img['sizes']['サイズの名前']) && !empty($img['sizes']['サイズの名前'])) {
	$src = $img['sizes']['サイズの名前'];
	echo "<img src=\"{$src}\" alt=\"\">";
}

//アップされている画像のフルサイズを出力したい場合
if (isset($img['url']) && !empty($img['url'])) {
	$src = $img['url'];
	echo "<img src=\"{$src}\" alt=\"\">";
}
?>

出力例）
<img src="https://www.futaego.com/uploads/hogehoge-300x300.jpg" alt="">

<img src="https://www.futaego.com/uploads/hogehoge" alt="">

<?php

$img = get_field('img');

//自分で追加した「add_image_size()」のサイズで出力したい場合

if (isset($img['sizes']['サイズの名前']) && !empty($img['sizes']['サイズの名前'])) {

$src = $img['sizes']['サイズの名前'];

echo "<img src=\"{$src}\" alt=\"\">";

}

//アップされている画像のフルサイズを出力したい場合

if (isset($img['url']) && !empty($img['url'])) {

$src = $img['url'];

echo "<img src=\"{$src}\" alt=\"\">";

}

出力例）

となります。

「isset()」で指定した「サイズの名前」の画像が実際に生成されているかをチェックしています
これをしたいとエラーが表示されることがあります。

変数「$img」をvar_dumpすると取得してきた情報が一覧で表示されるので使用したい項目を抽出して利用できます。

上記はカスタムフィールドの返り値を「画像オブジェクト」に設定している時の使い方
返り値を「画像URL」の場合はそのままechoできます。

フィールドタイプ：ファイル

こちらは「テキスト」とは出力方法が変わります。

<?php
$file = get_field('file');

if (!empty($file['url'])) {
	$href = $file['url'];
	echo "<p style=\"text-align: right;\"><a href=\"{$href}\" target=\"_blank\">PDFはこちら</a></p>";
}
?>

出力例）
<p style="text-align: right;"><a href="https://www.futaego.com/uploads/sample.pdf" target="_blank">PDFはこちら</p>

<?php

$file = get_field('file');

if (!empty($file['url'])) {

$href = $file['url'];

echo "<a href=\"{$href}\" target=\"_blank\">PDFはこちら</a>";

}

出力例）

<a href="https://www.futaego.com/uploads/sample.pdf" target="_blank">PDFはこちら

となります。

変数「$file」をvar_dumpすると取得してきた情報が一覧で表示されるので使用したい項目を抽出して利用できます。

フィールドタイプ：セレクトボックス

こちらは「テキスト」と同様の方法で出力されます。

<?php
$select = get_field('select');
if (!empty($select)) echo "<p>選択内容：{$select}</p>";
?>

出力例）
<p>選択内容：男性</p>

<?php

$select = get_field('select');

if (!empty($select)) echo "選択内容：{$select}";

出力例）

選択内容：男性

となります。

マルチタイプにすることで複数選択させることもできますが、その場合は出力方法が異なります。
そのため、マルチタイプを利用したい場合は次に出てくる「チェックボックス」の方も検討してみてください。
※確認していませんが、記憶上チェックボックスと同じ方法でマルチタイプを出力できた気もします

フィールドタイプ：チェックボックス

こちらは「テキスト」とは出力方法が変わります。

<?php
$checkbox = get_field('checkbox');
if (count($checkbox) > 0) {
	echo "<ul>";
	foreach ($checkbox as $value) {
		echo "<li>{$value}</li>";
	}
	echo "</ul>";
}
?>

出力例）
<ul><li>ラーメン</li><li>とんかつ</li><li>餃子</li></ul>

<?php

$checkbox = get_field('checkbox');

if (count($checkbox) > 0) {

echo "<ul>";

foreach ($checkbox as $value) {

echo "<li>{$value}</li>";

}

echo "</ul>";

}

出力例）

となります。

3行目で取得してきた変数「$checkbox」内に配列が存在するかどうかを「count()」でチェックしています。

フィールドタイプ：ラジオボタン

こちらは「テキスト」と同様の方法で出力されます。

<?php
$radio = get_field('radio');
if (!empty($radio)) echo "<p>選択内容：{$radio}</p>";
?>

出力例）
<p>選択内容：未婚</p>

<?php

$radio = get_field('radio');

if (!empty($radio)) echo "選択内容：{$radio}";

出力例）

選択内容：未婚

となります。

フィールドタイプ：真/偽

こちらは「テキスト」とは出力方法が変わります。

<?php
$boolean = get_field('boolean');
if ($boolean) {
	echo "<p>チェックボックスが選択されてるよ！</p>";
} else {
	echo "<p>チェックボックスは選択されていません。</p>";
}
?>

出力例）
<p>チェックボックスが選択されてるよ！</p>

<?php

$boolean = get_field('boolean');

if ($boolean) {

echo "チェックボックスが選択されてるよ！";

} else {

echo "チェックボックスは選択されていません。";

}

出力例）

チェックボックスが選択されてるよ！

となります。

これはそのまま表示するというよりは、条件分岐に使用されることが多いと思います。

フィールドタイプ：ページリンク

こちらは「テキスト」とは出力方法が変わります。

<?php
$page_link = get_field('page_link');
if (count($page_link) > 0) {
	echo "<ul>";
	foreach ($page_link as $value) {
		echo "<li><a href=\"{$value}\">{$value}</a></li>";
	}
	echo "</ul>";
}
?>

出力例）
<ul><li><a href="/sample-page/">サンプルページ</a></li></ul>

<?php

$page_link = get_field('page_link');

if (count($page_link) > 0) {

echo "<ul>";

foreach ($page_link as $value) {

echo "<li><a href=\"{$value}\">{$value}</a></li>";

}

echo "</ul>";

}

出力例）

<ul><li><a href="/sample-page/">サンプルページ</a></li></ul>

となります。

設定時にページリンクを複数する予定がなくても「複数の値を選択できるか？」を「はい」にしておくことで、出力がしやすくなります。
※URLのみしか取得できないので、タイトルも取得したい場合はフィールドタイプ：投稿オブジェクトを利用します

フィールドタイプ：投稿オブジェクト

こちらは「テキスト」とは出力方法が変わります。

<?php
$post_object = get_field('post_object');
if (count($post_object) > 0) {
	if (count($post_object) > 0) {
		echo "<ul>";
		foreach ($post_object as $value) {
			echo "<li><a href=\"/{$value->post_name}/\">{$value->post_title}</a></li>";
		}
		echo "</ul>";
	}
}
?>

出力例）
<ul><li><a href="/sample-page/">サンプルページ</a></li></ul>

<?php

$post_object = get_field('post_object');

if (count($post_object) > 0) {

echo "<ul>";

foreach ($post_object as $value) {

echo "<li><a href=\"/{$value->post_name}/\">{$value->post_title}</a></li>";

}

echo "</ul>";

}

出力例）

<ul><li><a href="/sample-page/">サンプルページ</a></li></ul>

となります。

設定時に投稿オブジェクトを複数する予定がなくても「複数の値を選択できるか？」を「はい」にしておくことで、出力がしやすくなります。

フィールドタイプ：関連

こちらは「テキスト」とは出力方法が変わります。

<?php
$relation = get_field('relation');
if (count($relation) > 0) {
	echo "<ul>";
	foreach ($relation as $value) {
		echo "<li><a href=\"/{$value->post_name}/\">{$value->post_title}</a></li>";
	}
	echo "</ul>";
}
?>

出力例）
<ul><li><a href="/sample-page/">サンプルページ</a></li></ul>

<?php

$relation = get_field('relation');

if (count($relation) > 0) {

echo "<ul>";

foreach ($relation as $value) {

echo "<li><a href=\"/{$value->post_name}/\">{$value->post_title}</a></li>";

}

echo "</ul>";

}

出力例）

<ul><li><a href="/sample-page/">サンプルページ</a></li></ul>

となります。

フィールドタイプ：タクソノミー

こちらは「テキスト」とは出力方法が変わります。

<?php
$taxonomy = get_field('taxonomy');
if (count($taxonomy) > 0) {
	echo "<ul>";
	foreach ($taxonomy as $value) {
		$term      = get_term_by("id", $value, "タクソノミー名");
		$term_id   = $value;
		$term_name = $term->name;
		$term_slug = $term->slug;

		echo "<li><a href=\"/タクソノミー名/{$term_slug}/\">{$term_name}</a></li>";
		var_dump($term);
	}
	echo "</ul>";
}

<?php

$taxonomy = get_field('taxonomy');

if (count($taxonomy) > 0) {

echo "<ul>";

foreach ($taxonomy as $value) {

$term = get_term_by("id", $value, "タクソノミー名");

$term_id = $value;

$term_name = $term->name;

$term_slug = $term->slug;

echo "<li><a href=\"/タクソノミー名/{$term_slug}/\">{$term_name}</a></li>";

var_dump($term);

}

echo "</ul>";

}

となります。

フィールドタイプ：ユーザー

こちらは「テキスト」とは出力方法が変わります。

<?php
$user = get_field('user');
if (count($user) > 0) {
	echo "<p>投稿者：";
	foreach ($user as $key=>$value) {
		if ($key > 0) echo "、";
		echo $value['nickname'];
	}
	echo "</p>";
}
?>

出力例）
<p>投稿者：管理人、ふたえご</p>

<?php

$user = get_field('user');

if (count($user) > 0) {

echo "投稿者：";

foreach ($user as $key=>$value) {

if ($key > 0) echo "、";

echo $value['nickname'];

}

echo "";

}

出力例）

投稿者：管理人、ふたえご

となります。

設定時にユーザーを複数する予定がなくても「フィールドタイプ」を「Multi Select」にしておくことで、出力がしやすくなります。

フィールドタイプ：Google Map

こちらは「テキスト」とは出力方法が変わります。

<?php
$google_map = get_field('google_map');
if (
	isset($google_map['lat']) && !empty($google_map['lat']) &&
	isset($google_map['lng']) && !empty($google_map['lng'])
) {
	echo "
		<p>場所：{$google_map['address']}</p>
		<div class=\"map\">
			<iframe src=\"http://maps.google.co.jp/maps?ll={$google_map['lat']},{$google_map['lng']}&q={$google_map['address']}&output=embed&t=m&z=15\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>
		</div>
		<p>地図は<a href=\"https://www.google.co.jp/maps/@{$google_map['lat']},{$google_map['lng']},15z\" target=\"_blank\">こちら</a></p>
	";
}
?>

出力例）
<p>場所：東京駅</p>
<div class="map">
	<iframe src="http://maps.google.co.jp/maps?ll=35.680864550649304,139.76746559143066&q=東京駅&output=embed&t=m&z=15" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<p>地図は<a href="https://www.google.co.jp/maps/@35.680864550649304,139.76746559143066,15z">こちら</a></p>

<?php

$google_map = get_field('google_map');

if (

isset($google_map['lat']) && !empty($google_map['lat']) &&

isset($google_map['lng']) && !empty($google_map['lng'])

) {

echo "

場所：{$google_map['address']}

</div>

地図は<a href=\"https://www.google.co.jp/maps/@{$google_map['lat']},{$google_map['lng']},15z\" target=\"_blank\">こちら</a>

}

出力例）

場所：東京駅

</div>

地図は<a href="https://www.google.co.jp/maps/@35.680864550649304,139.76746559143066,15z">こちら</a>

となります。

フィールドタイプ：デイピッカー

こちらは「テキスト」と同様の方法で出力されます。

<?php
$date = get_field('date');
if (!empty($number)) echo "<p>登録日：{$date}</p>";
?>

出力例）
<p>登録日：2017年10月17日</p>

<?php

$date = get_field('date');

if (!empty($number)) echo "登録日：{$date}";

出力例）

登録日：2017年10月17日

となります。

出力される文字列は設定時の「フォーマットを保存する」の内容が表示されます。

フィールドタイプ：カラーピッカー

こちらは「テキスト」と同様の方法で出力されます。

<?php
$color = get_field('color');
if (!empty($number)) echo "<p style=\"color: {$color}\">インラインスタイルにカラーを設定して使用するといいよ</p>";
?>

出力例）
<p style="color: #ff0000">インラインスタイルにカラーを設定して使用するといいよ</p>

<?php

$color = get_field('color');

if (!empty($number)) echo "インラインスタイルにカラーを設定して使用するといいよ";

出力例）

インラインスタイルにカラーを設定して使用するといいよ

となります。

まとめ

基本的には「get_field()」をechoするだけで使えますが、
・画像
・ファイル
・チェックボックス
・真/偽
・ページリンク
・投稿オブジェクト
・関連
・タクソノミー
・ユーザー
・Google Map
だけは変数格納後にオブジェクトなり配列はループで回してechoする必要があります。

困った時は変数を「var_dump()」すれば何が取れるのかわかるので焦らず一つ一つ分解していきましょう！

P.S.
~~気が向いたらタクソノミーやユーザーに設定したカスタムフィールドの取得方法も記事にしたいと思います。~~

「カテゴリーやカスタムタクソノミーのカスタムフィールドを取得して表示する方法」の記事を書きました。

SNSでシェア♪

Advanced Custom Fieldsを取得して表示する方法

コピペ用コードまとめ

基本的な出力方法

フィールドタイプ：テキスト

フィールドタイプ：テキストエリア

フィールドタイプ：数値

フィールドタイプ：メール

フィールドタイプ：パスワード

フィールドタイプ：Wysiwygエディタ

フィールドタイプ：画像

フィールドタイプ：ファイル

フィールドタイプ：セレクトボックス

フィールドタイプ：チェックボックス

フィールドタイプ：ラジオボタン

フィールドタイプ：真/偽

フィールドタイプ：ページリンク

フィールドタイプ：投稿オブジェクト

フィールドタイプ：関連

フィールドタイプ：タクソノミー

フィールドタイプ：ユーザー

フィールドタイプ：Google Map

フィールドタイプ：デイピッカー

フィールドタイプ：カラーピッカー

まとめ

関連記事