エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します！

Advanced Custom Fieldsの全項目解説・公開側表示編集編

Advanced Custom Fieldsの全項目解説・公開側表示編集編

      2017/03/08

Advanced Custom Fieldsの機能の全て・公開側表示編集編

　

Advanced Custom Fieldsとは

　
Advanced Custom Fieldsは、WordPressのカスタムフィールドを便利に使えるようにするプラグインです。
　
WordPressのカスタムフィールドは、WordPressを CMSとして使う場合には欠かせないものなのですが、標準機能のままでは使いにくいため、何かしらのプラグインを利用することが一般的です。
　
ということで、「Advanced Custom Fields」がオススメなので紹介しているのですが、Advanced Custom Fieldsはあまりにも多機能すぎて 1つの記事だけでは紹介しきれませんでした。
　
Advanced Custom Fieldsの基本的な機能の紹介や、管理画面の機能については、下記に記事を書いていますので、そちらも参考にしてください。
　カスタムフィールド決定版！Advanced Custom Fields全項目完全解説・管理画面編
　
　
こちらの記事では、Advanced Custom Fieldsを使って投稿画面から入力した値を、一覧ページ（archive.php）や投稿ページ（single.php）、固定ページ（page.php）に編集する方法を解説していきます。
　
　
　

Advanced Custom Fieldsの機能の全て・目次

　

Advanced Custom Fieldsの機能の全て・公開側表示・目次

　
Advanced Custom Fieldsの公開側の方法取得関数
　　カスタムフィールドの値を取得する方法
　　Advanced Custom Fieldsの入力値を取得する関数
　　Advanced Custom Fieldsの入力値を取得する関数
Advanced Custom Fieldsの公開側のフィールドタイプごとの取得例
　　フィールドタイプ・テキスト
　　フィールドタイプ・テキストエリア
　　フィールドタイプ・数値
　　フィールドタイプ・メール
　　フィールドタイプ・Wysiwygエディタ
　　フィールドタイプ・画像
　　フィールドタイプ・ファイル
　　フィールドタイプ・セレクトボックス
　　フィールドタイプ・チェックボックス
　　フィールドタイプ・ラジオボタン
　　フィールドタイプ・真／偽
　　フィールドタイプ・ページリンク
　　フィールドタイプ・投稿オブジェクト
　　フィールドタイプ・関連
　　フィールドタイプ・タクソノミー
　　フィールドタイプ・ユーザー
　　フィールドタイプ・Google Map
　　フィールドタイプ・デイトピッカー
　　フィールドタイプ・カラーピッカー
Advanced Custom Fieldsの公開側の関数
　　カスタムフィールドの値をすべて取得する関数・get_field_objects()
　
　

Advanced Custom Fieldsの機能の全て・関連記事

　
Advanced Custom Fields管理画面の全項目完全解説・カスタムフィールド決定版！
Advanced Custom Fieldsの全項目解説・公開側表示編集編
WordPressのカテゴリやタクソノミーにカスタムフィールド項目を追加する方法
Advanced Custom Fieldsの関数の全部の使い方を調べてみた
Advanced Custom Fields（ACF）のアドオン・ギャラリーの使い方解説
Advanced Custom Fields（ACF）のアドオン・繰り返しフィールドの使い方解説
WordPressのカスタムフィールド、カスタム投稿、カスタムタクソノミーとは？
Advanced Custom Fieldsのカスタムフィールドの登録上限が max_input_varsに影響する問題の対処方法
Advanced custom Fieldsのフィールドグループを簡単に複製する方法
Advanced custom Fieldsの条件判定活用方法・フィールドグループ複製より便利
　
　

小さなお店&会社の WordPress超入門 ―初めてでも安心! 思いどおりのホームページを作ろう!

　

Advanced Custom Fieldsの公開側の方法取得関数

　

カスタムフィールドの値を取得する方法

　
Advanced Custom Fieldsに限らず、カスタムフィールドの値を取得する WordPressの標準機能での基本形は、以下のようになります。
　

// 【基本形】
$string = post_custom ( $field_name );

// 【具体例】
$s_text = post_custom ( "s-text" );
echo $s_text;

　
Advanced Custom Fieldsもカスタムフィールドを利用するプラグインですので、上記のようにカスタムフィールドの値を取得する「post_custom()」関数で取り出すことができます。
　
これまでもカスタムフィールドを使ったことがあり、こちらに慣れている方はこの方法で問題ありません。
　
ですが、Advanced Custom Fieldsには専用の関数も用意されていますので、ここでは Advanced Custom Fields専用の関数を解説していきます。
　
　
　

Advanced Custom Fieldsの入力値を取得する関数

　
Advanced Custom Fieldsには、WordPressの標準関数とは別のカスタムフィールドの情報を取得する関数が用意されています。
　

// 【基本形】
// 変数として取得する場合
$field = get_field ( $field_name, $post_id, $format_value );
echo $s_text;

// 値を取得して表示する場合
the_field ( $field_name, $post_id );

// 【具体例】
// 変数として取得する場合
$s_text = get_field ( "s-text" );
echo $s_text;

// 値を取得して表示する場合
the_field ( "s-text" );

　
取得する方法は「get_field()」と「the_field()」とあり、「get_field()」は変数として取得することができ、「the_field()」は表示の処理まで実行してくれます。
　
テンプレートに埋め込んで表示させるだけなら「the_field()」関数を使って編集する方が楽ですね。
　
引数として設定される項目は以下の通りとなります。
　
$field_name
表示させるフィールド名を編集します。
Advanced Custom Fieldsの管理画面で入力した「フィールド名」の値になります。
そのため「フィールド名」は半角英数で設定しておく方がいいのです。
　
$post_id
表示する投稿の IDを編集します。
特定の投稿の情報を取得する場合は編集する必要がありますが、投稿ページ（single.php）、固定ページ（page.php）などでは省略することができます。省略すると表示されている投稿の IDが編集されたものと見なされます。
また、オプションやタクソノミー、ユーザなども設定することができます。
　
$format_value
取得した値をフォーマット対応するか、否かを設定します。trueか falseが設定でき、省略した場合は trueになります。
フィールドタイプが「テキストエリア」などで wpautop()や nl2br()などでフォーマットするかどうかを指定する項目で、trueの場合はフォーマットが適用されます。
　
　
基本的に、「get_field()」も「the_field()」も似たような記述で処理できますが、「get_field()」の方が設定できる引数が多いことと、単純なテキストタイプ以外では編集として取得した後に処理をする必要がありますので、ここでは「get_field()」で解説していきます。
　
　
　

Advanced Custom Fieldsの入力値を取得する関数

　
ほとんどのことは「get_field()」関数で処理を行うことが可能です。
　
ですが、選択肢系のフィールドタイプ「セレクトボックス」「チェックボックス」「ラジオボタン」で、「選択し」の項目で「キー」と「値」を別々にした場合はそれだけでは足りませんので、「get_field_object()」関数を使う必要があります。
（「キー」と「値」を同じにした場合は使う機会がないでしょう。）
　
「get_field()」関数は、投稿画面から入力した値（value）のみ取得する関数ですが、「get_field_object()」関数は、入力した値も含めカスタムフィールドの項目全体の値を取得することができる関数です。
　

// 【基本形】
// 変数として取得する場合
$field = get_field_object ( $field_key, $post_id, $options );
echo $s_text;

// 【具体例】
// 変数として取得する場合
$s_text = get_field_object ( "s-text" );
echo $s_text;

　
引数として設定される項目は以下の通りとなります。
　
$field_key
表示させるフィールド名を編集します。
「get_field()」関数では「$field_name」となっていた値です。
　
$post_id
表示する投稿の IDを編集します。
　
$options
投稿画面での入力値がない場合にデフォルト値を設定するか、否かを設定します。trueか falseが設定でき、trueの場合にデフォルト値を設定します。$optionsを省略した場合は trueが設定されます。
　
　

エンジニアのためのWordPress開発入門 (Engineer's Library)

　

Advanced Custom Fieldsの公開側のフィールドタイプごとの取得例

　

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

フィールドタイプ「テキスト」です。
管理画面から登録する際も基本形は「テキスト」ですが、公開側で取得する場合も「テキスト」は基本形で、入力した情報をそのままテキストとして簡単に取り出せます。
取得される値に「Prepend（接頭辞）」「Append（接尾辞）」は含まれませんので、編集するテンプレートに直接記述しましょう。
　

echo "<b>【テキスト】</b><br>";
$s_text = get_field ( "s-text" );
echo $s_text;

　
　
　

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

フィールドタイプ「テキストエリア」もテキストと同様そのまま取り出せます。
　

echo "<b>【テキストエリア】</b><br>";
$s_textarea = get_field ( "s-textarea" );
echo $s_textarea;

　
フォーマットの処理を自分で対応したい場合は、3つ目の引数に falseを指定し、wpautop()や nl2br()などで処理を行います。
　

$s_textarea = get_field ( "s-textarea", false, false );
echo wpautop($s_textarea) . "<br>";
echo nl2br($s_textarea);

　
第3引数に「false」を指定する場合で、第2引数を指定せず現在のページの POST IDを指定したい場合は、第 2引数には「false」を指定します。
（マニュアル上は「false」を指定するようにと書いてあります。ただ、「””」「null」でも正常に動くようです。2015.09.14　訂正）
　
　
　

フィールドタイプ・数値

フィールドタイプ「数値」もテキスト同様そのまま取り出せます。
3桁ごとの区切りのカンマを編集したい場合は「number_format()」が便利ですね。
　

echo "<b>【数値】</b><br>";
$s_number = get_field ( "s-number" );
echo $s_number . "<br>";
echo number_format ( $s_number );

　
　
　

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

フィールドタイプ「メール」もテキスト同様そのまま取り出せます。
　

echo "<b>【メール】</b><br>";
$s_e_mail = get_field ( "s-e-mail" );
echo $s_e_mail;

　
　
　

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

フィールドタイプ「Wysiwygエディタ」もテキスト同様そのまま取り出せます。
テキストエリア同様、3つ目の引数に falseを指定してフォーマットを設定し直すこともできます。
　

echo "<b>【Wysiwygエディタ】</b><br>";
$s_wysiwyg = get_field ( "s-wysiwyg" );
echo $s_wysiwyg;

　
　
　

フィールドタイプ・画像

フィールドタイプ「画像」は、画像の情報が取得できますが、「返り値」で設定した選択肢によって取得できる値が違います。
取得した値によって画像を表示させる方法が違ってきますので下記を参考にして最適なものを設定してください。
とは言え、処理の自由度を考えると「画像オブジェクト」を選択しておく方がよさそうですね。
　

画像オブジェクト

返り値「画像オブジェクト」の場合です。
　

echo "<b>【画像・オブジェクト】</b><br>";
$s_image_object = get_field ( "s-image-object" );
print_r($s_image_object);

　
返り値は下記のように配列として画像に関する各種情報が取得できますので、それを使って自由な編集が可能です。
「alt」「title」「caption」「description」は、メディアの編集画面などから入力をすると追加されます。
　

Array (
    [id] => 118
    [alt] => だいたいてきすと
    [title] => たいとる
    [caption] => きゃぷしょん
    [description] => せつめい
    [mime_type] => image/gif
    [url] => http://localhost/wp-content/uploads/2015/09/2.gif
    [width] => 100
    [height] => 100
    [sizes] => Array
        (   [thumbnail] => http://localhost/wp-content/uploads/2015/09/2.gif
            [thumbnail-width] => 100
            [thumbnail-height] => 100
            [medium] => http://localhost/wp-content/uploads/2015/09/2.gif
            [medium-width] => 100
            [medium-height] => 100
            [large] => http://localhost/wp-content/uploads/2015/09/2.gif
            [large-width] => 100
            [large-height] => 100
            [thumb100] => http://localhost/wp-content/uploads/2015/09/2.gif
            [thumb100-width] => 100
            [thumb100-height] => 100
            [thumb150] => http://localhost/wp-content/uploads/2015/09/2.gif
            [thumb150-width] => 100
            [thumb150-height] => 100
        ) )

　
この配列から必要な値を取得して編集をしていきます。
下記の例は、アップロードした画像のうち「Large」サイズの URLが取得できます。
　

echo $s_image_object[sizes][large];

　
これを応用して、サムネイル「100」の画像を編集し、画像をクリックするとアップロードした画像を表示する場合の設定をする場合は以下のようになります。
　

echo '<a href="' . $s_image_object[url] . '">';
echo '<img src="' . $s_image_object[sizes][thumb100] . '" width="' . $s_image_object[sizes][thumb100-width] . '" height="' . $s_image_object[sizes][thumb100-height] . '" alt="' . $s_image_object[alt] . '">';
echo '</a>';

　
また、下記のように画像オブジェクトを取得する際に第 3引数に「false」を設定した場合は、画像の IDだけが取得できます。
　

echo "<b>【画像・オブジェクト2】</b><br>";
$s_image_object = get_field ( "s-image-object", false, false );
echo $s_image_object;

　

画像URL

返り値「画像URL」の場合です。
返り値は URLが返ってきます。
「画像オブジェクト」の配列の中の値でいうと「$s_image_object[url]」が取得できます。
　

echo "<b>【画像・URL】</b><br>";
$s_image_url = get_field ( "s-image-url" );
echo $s_image_url;

　
この場合は、下記の様に URLをクリックすると画像を表示する、といった場合に便利です。
　

echo '<a href="' . $s_image_object[url] . '">' . $s_image_object[url] . '</a>';

　
　

画像ID

返り値「画像ID」の場合です。
返り値は IDが返ってきます。
「画像オブジェクト」の配列の中の値でいうと「$s_image_object[id]」が取得できます。
　

echo "<b>【画像・ID】</b><br>";
$s_image_id = get_field ( "s-image-id" );
echo $s_image_id;

　
画像 IDが分かっている場合は、画像 IDから画像の URLなどを取得する「wp_get_attachment_image_src()」関数を使って下記の様に編集をします。
　

$image_attributes       = wp_get_attachment_image_src( $s_image_id, 'thumb100' );
$image_attributes_large = wp_get_attachment_image_src( $s_image_id, 'large' );
if( $image_attributes ) {
  echo '<img src="' . $image_attributes[0] . '">';
}

　
また、オブジェクトの説明で編集したように大きなサイズの画像にリンクを貼ったり、width、heightを設定する場合は下記の様になります。
　

$image_attributes       = wp_get_attachment_image_src( $s_image_id, 'thumb100' );
$image_attributes_large = wp_get_attachment_image_src( $s_image_id, 'large' );
if( $image_attributes ) {
  echo '<a href="' . $image_attributes_large[0] . '">';
  echo '<img src="' . $image_attributes[0] . '" width="' . $image_attributes[1] . '" height="' . $image_attributes[2] . '">';
  echo '</a>';
}

　
ただ、上記のようにサムネイルと大きなサイズの 2つ URLを使うような編集の場合は wp_get_attachment_image_src()関数を 2回使うことになりますし、altの値は取得できませんので、最初から「画像オブジェクト」で関連する情報を取得できる「返り値」を設定しておく方が使い勝手がいいでしょう。
　
「wp_get_attachment_image_src()」関数に関しては下記参照
http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_attachment_image_src
　
　
　

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

フィールドタイプ「ファイル」はファイルの情報が取得できますが、「画像」と同じく「返り値」で設定した選択肢によって取得できる値が違います。
取得した値によってファイルを表示させる方法が違ってきますので下記を参考にして最適なものを設定してください。
ただ、画像と同じく処理の自由度を考えると「ファイルオブジェクト」を選択しておく方がよさそうですね。ファイルの場合は、URLでもよさそうですが。
　
　

ファイルオブジェクト

返り値「ファイルオブジェクト」の場合です。
　

echo "<b>【ファイル・オブジェクト】</b><br>";
$s_file_object = get_field ( "s-file-object" );
print_r($s_file_object);

　
返り値は下記のように配列としてファイルに関する各種情報が取得できますので、それを使って自由な編集が可能です。
「title」「caption」「description」は、メディアの編集画面などから入力をすると追加されます。
　

Array (
    [id] => 122
    [alt] => 
    [title] => たいとる
    [caption] => きゃぷしょん
    [description] => せつめい
    [mime_type] => application/pdf
    [url] => http://localhost/wp-content/uploads/2015/09/dummy.pdf
)

　
この配列から値を取得する場合は、下記の様に記述します。
下記の例は、アップロードしたファイルの URLが取得できます。
　

echo $s_file_object[url];

　
これをもとにして、タイトルにファイルのリンクを設定する処理の場合は以下のようになります。
　

echo '<a href="' . $s_file_object[url] . '" target="_blank">';
echo $s_file_object[title];
echo '</a>';

　
また、$s_file_object[mime_type] では、「Mime Type」が取得できますので、PDFや Excelなどのファイルの種類に合わせてアイコン画像を出すといった処置も考えられますね。
　
　

ファイルURL

返り値「ファイルURL」の場合です。
返り値は URLが返ってきます。
「ファイルオブジェクト」の配列の中の値でいうと「$s_file_object[url]」の値になります。
　

echo "<b>【ファイル・URL】</b><br>";
$s_file_url = get_field ( "s-file-url" );
echo $s_file_url;

　
ファイルの場合で、リンクはファイルのタイトルなどを編集せず、URLだけあればいいということであれば、「ファイルURL」選ぶことで下記の様にすっきりとした表現ができるようになります。
　

echo '<a href="' . $s_file_url . '">' . $s_file_url . '</a>';

　
　

ファイルID

返り値「ファイルID」の場合です。
返り値は IDが返ってきます。
「ファイルオブジェクト」の配列の中の値でいうと「$s_file_object[id]」の値になります。
　

echo "<b>【ファイル・ID】</b><br>";
$s_file_id = get_field ( "s-file-id" );
echo $s_file_id;

　
この場合は、ファイル IDからファイルの URLを取得する「wp_get_attachment_url()」関数を使って下記の様に編集をします。
　

$file_attributes       = wp_get_attachment_url( $s_image_id );
if( $file_attributes ) {
  echo '<a href="' . $file_attributes . '">' . $file_attributes . '</a>';
}

　
ただ、わざわざ wp_get_attachment_url()関数などを利用して URLを取得する必要があり、何か明確な目的がない限りファイル IDを取得する方法はメリットがなさそうです。
　
「wp get attachment url()」関数に関しては下記参照。
http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_attachment_url
　
　
　

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

フィールドタイプ「セレクトボックス」は、選択された「選択し」の情報が取得できます。
「選択し」でキーと値が同じものとして登録した場合と違うものを登録した場合と、「複数の値を選択できるか?」で「はい」と「いいえ」を選んだ場合で値の取得の仕方が違ってきます。
「選択し」でキーと値が違う場合は値を取得する方法が面倒なので、特殊な理由がない限りキーと値を同じにしておく方が無難でしょう。
※「選択し」の「キー」と「値」とは、「選択し」の設定のところで入力した選択肢で、「キー : 値」として入力したものです。
　
　

セレクトボックス・シングル・キーと値が同じ

セレクトボックスの「複数の値を選択できるか？」で「いいえ」を選択し、「選択し」の設定でキーと値が同じ場合は、フィールドタイプ「テキスト」と同じで簡単に値を取得できます。
　

echo "<b>【セレクトボックス・シングル】</b><br>";
$s_select_single = get_field ( "s-select-single" );
echo $s_select_single;

　
※ここで実際に取得しているテキストは、「選択し」の「キー」に当たるテキストですが、「キー」と「値」が同じであればこれで全く問題ありません。
　
　

セレクトボックス・シングル・キーと値が違う

上記の項目と違って、「選択し」の設定でキーと値が違う場合の値の取得方法です。
選択肢のリストを取得するひと手間が増えます。
　

$s_select_single_object = get_field_object ( "s-select-single" );
echo $s_select_single_object['value'] . "<br>";
echo $s_select_single_object['choices'][$s_select_single_object['value']];

　
これまでは「get_field()」関数で情報を取得していましたが、ここでは「get_field_object()」関数で取得します。
　
取得できる情報は配列で、選択された「キー」は「$s_select_single_object[‘value’]」で取得することができます。
また、選択肢全体が「$s_select_single_object[‘choices’]」で取得することができますので、「キー」に対する「値」を取得する場合は、「$s_select_single_object[‘choices’][$s_select_single_object[‘value’]]」と記述します。
　
　
ちなみに、「get_field_object ( “s-select-single” );」で取得できる配列は以下のようになっています。
　

Array (
    [key] => field_55e7ac94daaaa
    [label] => セレクトボックス・シングル
    [name] => s-select-single
    [_name] => s-select-single
    [type] => select
    [order_no] => 12
    [instructions] => セレクトボックスを編集してください。
    [required] => 0
    [id] => acf-field-s-select-single
    [class] => select
    [conditional_logic] => Array (
            [status] => 0
            [rules] => Array (
                    [0] => Array (
                            [field] => field_55e7accbdaaaa
                            [operator] => ==
                            [value] => red
                        )
                )
            [allorany] => all
        )
    [choices] => Array (
            [red] => 赤
            [blue] => 青
            [green] => 緑
        )
    [default_value] => 
    [allow_null] => 1
    [multiple] => 0
    [field_group] => 114
    [value] => blue
)

　
　

セレクトボックス・マルチ・キーと値が同じ

セレクトボックスの「複数の値を選択できるか？」で「はい」を選択し、「選択し」の設定でキーと値が同じ場合です。
得られる値は配列ですが、配列の扱いが分かっていれば簡単です。
　

echo "<b>【セレクトボックス・マルチ】</b><br>";
$s_select_multi = get_field ( "s-select-multi" );
foreach ( $s_select_multi as $val ) {
  echo $val . "<br>";
}

　
　

セレクトボックス・マルチ・キーと値が違う

上記の項目と違って、「選択し」の設定でキーと値が違う場合の値の取得方法です。
1つ上の項目と 2つ上の項目を足し合わせた感じの処理になります。
　

$s_select_multi_object = get_field_object ( "s-select-multi" );
foreach ( $s_select_multi_object['value'] as $val ) {
  echo $s_select_multi_object['choices'][$val] . "<br>";
}

　
「get_field_object ( “s-select-multi” )」で得られる値の「シングル」と「マルチ」での違いは「$s_select_multi_object[‘value’]」の値が配列か否かの違いだけです。
　
　
　

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

フィールドタイプ「チェックボックス」は、セレクトボックス・マルチと同じ処理で値を取得できます。
　

echo "<b>【チェックボックス】</b><br>";
// キーと値が同じ場合
$s_checkbox = get_field ( "s-checkbox" );
foreach ( $s_checkbox as $val ) {
  echo $val . "<br>";
}
echo "　<br>";

// キーと値が違う場合
$s_checkbox_object = get_field_object ( "s-checkbox" );
foreach ( $s_checkbox_object['value'] as $val ) {
  echo $s_checkbox_object['choices'][$val] . "<br>";
}

　
「get_field_object()」で取得できる値も下記の通りセレクトボックスとほぼ同じです。違いは、そもそもの設定できる項目の違いの部分です。
　

Array (
    [key] => field_55e7accbdaaaa
    [label] => チェックボックス
    [name] => s-checkbox
    [_name] => s-checkbox
    [type] => checkbox
    [order_no] => 14
    [instructions] => チェックボックスを編集してください。
    [required] => 0
    [id] => acf-field-s-checkbox
    [class] => checkbox
    [conditional_logic] => Array (
            [status] => 0
            [rules] => Array (
                    [0] => Array (
                            [field] => field_55e7ac94daaaa
                            [operator] => ==
                            [value] => red
                        )
                )
            [allorany] => all
        )
    [choices] => Array (
            [red] => 赤
            [blue] => 青
            [green] => 緑
        )
    [default_value] => 
    [layout] => horizontal
    [field_group] => 114
    [value] => Array (
            [0] => red
            [1] => green
        )
)

　
　
　

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

フィールドタイプ「ラジオボタン」は、セレクトボックスのシングルと同じ処理で値を取得できます。
　

echo "<b>【ラジオボタン】</b><br>";
// キーと値が同じ場合
$s_radiobutton = get_field ( "s-radiobutton" );
echo $s_radiobutton . "<br>";
echo "　<br>";

// キーと値が違う場合
$s_radiobutton_object = get_field_object ( "s-radiobutton" );
echo $s_radiobutton_object['choices'][$s_radiobutton_object['value']];

　
　
　

フィールドタイプ・真／偽

フィールドタイプ「真／偽」はテキスト同様そのまま取り出せます。
ただし、普通に出力すると「真：1」「偽：0」として表示されます。
　

echo "<b>【真／偽】</b><br>";
$s_boolean = get_field ( "s-boolean" );
echo $s_boolean;

　
真／偽で分岐処理を作るならば下記のような感じでしょうか。
　

if ( $s_boolean ) {
  echo "true";
} else {
  echo "false";
}

　
　
　

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

フィールドタイプ「ページリンク」は選択したページの URLが配列として取得できます。
　

echo "<b>【ページリンク】</b><br>";
$s_pagelink = get_field ( "s-pagelink" );
foreach ( $s_pagelink as $val ) {
  echo '<a href="' . $val . '" target="_blank">' . $val . '</a><br>';
}

　
　
　

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

フィールドタイプ「投稿オブジェクト」は、選択したページのオブジェクト全体が取得できます。
「ページリンク」では URLだけでしたので、「関連ページ」といったコンテンツを追加する場合には「投稿オブジェクト」の方が便利な方法です。
　

echo "<b>【投稿オブジェクト】</b><br>";
$s_object = get_field ( "s-object" );
foreach ( $s_object as $val ) {
  echo '<a href="' . $val->guid . '" target="_blank">' . $val->post_title . '</a><br>';
}

　
配列の場合は「$val[‘guid’]」のような感じで取得しますが、オブジェクトなので「$val->guid」で取得します。
　
　
ちなみに、「get_field ( “s-object” );」で取得できる値は以下のようになっています。

Array (
    [0] => WP_Post Object (
            [ID] => 20
            [post_author] => 1
            [post_date] => 2015-09-06 19:10:10
            [post_date_gmt] => 2015-09-06 10:10:10
            [post_content] => カスタムフィールドの入力のテストです。
            [post_title] => カスタムフィールドてすと
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => open
            [ping_status] => open
            [post_password] => 
            [post_name] => post-20
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2015-09-06 19:10:10
            [post_modified_gmt] => 2015-09-06 10:10:10
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => http://localhost/?p=20
            [menu_order] => 0
            [post_type] => post
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )
    [1] => WP_Post Object (
            [ID] => 115
            [post_author] => 1
            [post_date] => 2015-09-06 19:11:10
            [post_date_gmt] => 2015-09-06 11:10:10
            [post_content] => 
            [post_title] => カスタムフィールドテスト２
            [post_excerpt] => 
            [post_status] => publish
            [comment_status] => open
            [ping_status] => open
            [post_password] => 
            [post_name] => post-115
            [to_ping] => 
            [pinged] => 
            [post_modified] => 2015-09-06 19:11:10
            [post_modified_gmt] => 2015-09-06 11:10:10
            [post_content_filtered] => 
            [post_parent] => 0
            [guid] => http://localhost/?p=115
            [menu_order] => 0
            [post_type] => post
            [post_mime_type] => 
            [comment_count] => 0
            [filter] => raw
        )
)

　
　
　

フィールドタイプ・関連

フィールドタイプ「関連」は、「ページリンク」と「投稿オブジェクト」を足して便利にしたようなフィールドタイプです。
取得できる値は、「Return Format」が「Post Objects」の場合は「投稿オブジェクト」とまったく同じで、「Post IDs」の場合は選択した投稿の IDになります。
　
　

関連・オブジェクト

取得できる情報が「投稿オブジェクト」と全く同じですので、編集の方法も同じです。
　

echo "<b>【関連・オブジェクト】</b><br>";
$s_relation_object = get_field ( "s-relation-object" );
foreach ( $s_relation_object as $val ) {
  echo '<a href="' . $val->guid . '" target="_blank">' . $val->post_title . '</a><br>';
}

　
　

関連・ID

取得できる情報が「ID」だけですので、「get_permalink()」関数や、「get_post()」関数でページの情報を取得してリンクの処理を行う必要が出てきます。
　

echo "<b>【関連・ID】</b><br>";
$s_relation_id = get_field ( "s-relation-id" );
foreach ( $s_relation_id as $val ) {
  $post_val = get_post($val);
  echo '<a href="' . $post_val->guid . '" target="_blank">' . $post_val->post_title . '</a><br>';
}

　
ただ、わざわざ get_post()関数などを利用して各種情報を取得する必要があり、何か明確な目的がない限りオブジェクトタイプで情報を取得する方がいいでしょう。
　
　
　

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

フィールドタイプ「タクソノミー」は、選択したタクソノミー（カテゴリ）の情報が取得できます。
　

タクソノミー・オブジェクト

「返り値」で「Term Object」を選択すると、投稿画面で選択したタクソノミー（カテゴリ）の情報がオブジェクトとして取得できます。
　

echo "<b>【タクソノミー・オブジェクト】</b><br>";
$s_taxonomy_object = get_field ( "s-taxonomy-object" );
foreach ( $s_taxonomy_object as $val ) {
  echo '<a href="' . site_url() . '/?cat=' . $val->term_id . '" target="_blank">' . $val->name . '</a><br>';
}

　
上記は、単純にカテゴリページにリンクをさせているだけの仕組みです。
ですが、カスタムタクソノミーの設定を行うことで、オリジナルのカスタムタクソノミーのページへのリンクを設定することなども可能になります。
使い方次第で非常に汎用性が広がる仕組みです。
　
また、任意のカテゴリの一覧を作る仕組みについては、下記に記事を書いていますのこちらも参考にしてみてください。
　ショートコードで簡単解決！WordPress固定ページにカテゴリ一覧を編集する方法
　ショートコードで簡単解決！カスタムフィールドでソート、抽出条件設定方法
　
　
ちなみに、「get_field ( “s-taxonomy-object” );」で取得できる値は以下のようになっています。
　

Array (
    [0] => stdClass Object (
            [term_id] => 5
            [name] => カレー
            [slug] => curry
            [term_group] => 0
            [term_taxonomy_id] => 5
            [taxonomy] => category
            [description] => 
            [parent] => 0
            [count] => 1
            [object_id] => 115
            [filter] => raw
        )
    [1] => stdClass Object (
            [term_id] => 6
            [name] => ラーメン
            [slug] => ramen
            [term_group] => 0
            [term_taxonomy_id] => 6
            [taxonomy] => category
            [description] => 
            [parent] => 0
            [count] => 2
            [object_id] => 115
            [filter] => raw
        )
    [2] => stdClass Object (
            [term_id] => 7
            [name] => 豚骨
            [slug] => tonkotsu
            [term_group] => 0
            [term_taxonomy_id] => 7
            [taxonomy] => category
            [description] => 
            [parent] => 6
            [count] => 1
            [object_id] => 115
            [filter] => raw
        )
)

　

タクソノミー・ID

「返り値」で「タームID」を選択すると、投稿画面で選択したタクソノミー（カテゴリ）の IDを取得できます。
　

echo "<b>【タクソノミー・ID】</b><br>";
$s_taxonomy_id_nonrelation = get_field ( "s-taxonomy-id-nonrelation" );
foreach ( $s_taxonomy_id_nonrelation as $val ) {
  echo '<a href="' . site_url() . '/?cat=' . $val . '" target="_blank">' . $val . '</a><br>';
}

　
上記のように IDだけ分かれば問題ない処理であればいいのですが、オブジェクトとして取得しておく方が利用できる内容は広がっていくでしょう。
　
　

タクソノミー・「投稿のタームに基づいて値を読み込み、投稿のタームを更新する」の有無

「タームの読み込み／保存」の項目は、カスタムフィールドの項目と右ナビゲーションの中にある「タクソノミー（カテゴリ）」と連動する項目にするか、しないかの設定なのです。
そこで、「投稿のタームに基づいて値を読み込み、投稿のタームを更新する」にチェックを付けたり外したりして取得できる値を比較しましたが、取得できる情報の違いは見られませんでした。
　
取得できる値に違いがありませんでしたので、編集する方法も同じになります。
　
　
　

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

フィールドタイプ「ユーザー」は、選択したユーザーの情報を配列として取得できます。
　
ユーザの選択する「フィールドタイプ」を「セレクトボックス」と「Multi Select」とで取得できる配列の階層が 1階層違いますので、編集する方法も変ってきます。
　
　

ユーザ選択タイプのフィールドタイプ・セレクトボックス

「セレクトボックス」の場合は 1つだけの選択ですので選択したユーザの情報が配列として取得できます。
　

echo "<b>【ユーザー・セレクトボックス】</b><br>";
$s_user_select = get_field ( "s-user-select" );
echo '<a href="' . get_author_posts_url ( $s_user_select['ID'] ) . '">' . $s_user_select['nickname'] . '</a><br/>';

　
　

ユーザ選択タイプのフィールドタイプ・Multi Select

「Multi Select」の場合は複数選択形式になりますので、取得できる値もユーザ情報も階層化された配列で取得できます。
　

echo "<b>【ユーザー・Multi Select】</b><br>";
$s_user_multiselect = get_field ( "s-user-multiselect" );
foreach ( $s_user_multiselect as $val ) {
  echo '<a href="' . get_author_posts_url ( $val['ID'] ) . '">' . $val['nickname'] . '</a><br/>';
}

　
　
ちなみに、「get_field ( “s-user-multiselect” );」で取得できる値は以下のようになっています。
　

Array (
    [0] => Array (
            [ID] => 1
            [user_firstname] => 
            [user_lastname] => 
            [nickname] => admin
            [user_nicename] => admin
            [display_name] => admin
            [user_email] => aaa@example.com
            [user_url] => 
            [user_registered] => 2015-09-06 19:10:10
            [user_description] => 
            [user_avatar] => <img alt='' src='http://0.gravatar.com/avatar/aaaaaaaaaa?s=11od=mm&' srcset='http://0.gravatar.com/avatar/aaaaaaaaaa?s=111&d=mm&r=g 2x' class='avatar avatar-96 photo' height='96' width='96' />
        )
    [1] => Array (
            [ID] => 2
            [user_firstname] => 
            [user_lastname] => 
            [nickname] => operator
            [user_nicename] => operator
            [display_name] => operator
            [user_email] => bbb@example.com
            [user_url] => 
            [user_registered] => 2015-09-06 19:11:11
            [user_description] => 
            [user_avatar] => <img alt='' src='http://0.gravatar.com/avatar/bbbbbbbbbb?s=22Þd=mm&' srcset='http://0.gravatar.com/avatar/bbbbbbbbbb?s=222&d=mm&r=g 2x' class='avatar avatar-96 photo' height='96' width='96' />
        ) )

　
　
　

フィールドタイプ・Google Map

フィールドタイプ「Google Map」で指定した場所の情報が取得できます。
取得できる情報は、配列として「住所」「緯度」「経度」となります。
　

echo "<b>【Google Map】</b><br>";
$s_googlemap = get_field ( "s-googlemap" );
print_r ( $s_googlemap );

　
これで取得される値は下記になります。
下記は住所を選択する際に「東京駅」で検索しましたので、「address」が「東京駅」になっていますが、ここには住所が編集されます。
　

Array (
    [address] => 日本東京都東京駅
    [lat] => 35.681382
    [lng] => 139.76608399999998
)

　
この情報を元に Google地図を編集する一例としては下記の様になります。
　

echo '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>';
echo '<div id="map" style="width: 440px; height: 200px;"></div>';
echo '<span itemprop="hasMap"><script type="text/javascript">';
echo '  google.maps.event.addDomListener(window,"load",function(){';
echo '    var mapdiv=document.getElementById("map");';
echo '    var myOptions={zoom:17,center:new google.maps.LatLng(' . $s_googlemap[lat] . ',' . $s_googlemap[lng] . '),mapTypeId:google.maps.MapTypeId.ROADMAP,scaleControl:true};';
echo '    var map=new google.maps.Map(mapdiv,myOptions);';
echo '    var marker=[];';
echo '    var infowindow=[];';
echo '        marker[0]=new google.maps.Marker({icon:"http://maps.google.co.jp/mapfiles/ms/icons/blue-pushpin.png",position:new google.maps.LatLng(' . $s_googlemap[lat] . ',' . $s_googlemap[lng] . '),map:map,title:"' . $s_googlemap[address] . '"});';
echo '        var markerCluster=new MarkerClusterer(map,marker);';
echo '    });';
echo '</script></span>';

　
　
1行目で Google Mapの APIを呼び出しています。
これは通常は HTMLの <head>タグのすぐ下あたりに編集します。
　
2行目の Divタグで地図のサイズを指定して、6行目で zoomの値と地図の中心部になる緯度、経度を指定します（ここで投稿画面で入力された緯度、経度を編集しています）。
　
10行目がピンを立てる場所（緯度、経度、タイトル（上記の例では住所））を指定します。
一覧ページなどで複数のピンを立てる場合は、この 10行目をピンの数だけ増やせば OKです。
※10行目の「marker[0]」の部分を「marker[1]」「marker[2]」．．．と数値も増やしていくのもお忘れなく。
　
　
　

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

フィールドタイプ「デイトピッカー」は、テキスト同様そのまま取り出せます。
「フォーマットを保存する」で指定した形式で取得できます。
「/」で区切られていれば、必要に応じて「年月日」表記に変更することも簡単です。
　

echo "<b>【デイトピッカー】</b><br>";
$s_datepicker = get_field ( "s-datepicker" );
echo $s_datepicker . "<br>";
$s_datepicker_array = explode ( "/", $s_datepicker );
echo $s_datepicker_array[0] . "年" . $s_datepicker_array[1] . "月" . $s_datepicker_array[2] . "日";

　
　
　

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

フィールドタイプ「カラーピッカー」は、テキスト同様そのまま取り出せます。
　

echo "<b>【カラーピッカー】</b><br>";
$s_colorpicker = get_field ( "s-colorpicker" );
echo $s_colorpicker;

　
　

一歩先にいくWordPressのカスタマイズがわかる本

　
　

Advanced Custom Fieldsの公開側の関数

　

カスタムフィールドの値をすべて取得する関数・get_field_objects()

　
Advanced Custom Fieldsには、オリジナルの関数が多数用意されています。
ここで紹介していない関数は今後紹介していく予定ですが、最後に「get_field_objects()」関数を紹介します。
　
「get_field_objects()」は「Advanced Custom Fieldsの入力値を取得する関数」で紹介した「get_field_object()」関数と間違えそうですが、ここで紹介するのは「objects」が複数形の関数です。
　

// 【基本形】
$field_objects = get_field_objects ( $post_id );

// 【具体例】
$field_objects = get_field_objects ( );
print_r( $field_objects );

　
引数として設定される項目は以下の通りとなります。
　
$post_id
表示する投稿の IDを編集します。
　
　
投稿ページで使う場合は、投稿 IDを指定せずに「get_field_objects ()」だけで値が取得できるのですが、該当ページの投稿内容のすべてを配列として取得できます。
　
そのため、各項目ごとに関数を使って都度取得するのではなく、「get_field_objects ()」で最初に取得しておき、それを項目ごとに配列を指定していくといった方法を採ることもできます。
　
Advanced Custom Fieldsは、管理画面の機能だけではなく、公開側も多様な選択肢があります。
まずは、オーソドックスな方法で運用しつつ、他の方法についても試してみるといいでしょう。
　
　

カスタムフィールドの値をすべて取得する関数・get_fields()　2015.09.15追記

　
上記の「get_field_objects()」関数は、カスタムフィールドに絡むすべてのオブジェクトを取得する関数のため、非常に煩雑な情報を取得してしまいます。
そのため、カスタムフィールドの値（value）だけを取得する場合は、「get_fields()」関数の方がよさそうです。

 - WordPress

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです！

Comment

  1. dwc より:
    2016年6月21日 12:06 PM

    とても参考になります。

    もしよろしければ教えていただきたいのですが、「フィールドタイプ・Google Map」のマーカーに「新しいタブで開くリンクurl」を指定する方法はありますでしょうか？

    返信
    • エス技研 より:
      2016年6月21日 9:36 PM

      dwcさん、コメントありがとうございます。
      　
      本文にも書いていますが、Advanced Custom Fieldsの Googleマップタイプから取得できる値は、住所、緯度、経度のみですね。
      で、それに対して、どんなマーカーを出すとか、吹き出し式のマーカーを出して、そこに店舗の名称を出すとか、その辺りの設定は、Googleマップの APIの仕様になりますね。
      なので、「Googleマップ API 仕様」みたいな感じのキーワードで探していただいて、Googleマップ APIの仕様を調べてもらいつつ、カスタマイズをしていく感じになりますね。

      返信

Message

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

WordPressでダブルクォートなどの文字が自動変換？原因と対処方法

ダブルクォート、シングルクォート、HTMLタグなどが自動変換関数によって入力と違う形で表示されます。原因を2つの関数ごとに説明し、対応方法を3パターン提示します。

Unveil Lazy LoadでWordPressを高速化！SEO効果絶大でPVもアップ！

WordPressの表示を高速化するUnveil Lazy Loadの紹介。利用するJSを見直し高速化を徹底的に追求したプラグイン。入れるだけで高速化するので使わない手はない！

Rich ReviewsでWordPressに口コミサイトを簡単に構築する方法

口コミサイトに必要なレビュー投稿機能を提供するプラグインです。独自のフォームをショートコードで編集する自由度が高い設計で、平均点の表示も用意されています。

WordPressプログラム全体で定数や変数を利用する場合の設定方法

WordPressで関数を追加するときなど、全体で同じ変数を使いたいと思う場面の対処方法です。変数を記述する関数はfunctions.php、wp-config.phpのいずれか。

Comment Rating FieldでWordPressのコメントに口コミサイト機能を追加

口コミサイトを構築するためのプラグイン。評価点を投票する仕組みをコメント投稿機能に追加する方法で実現。口コミサイトを構築するには十分な機能を提供。

Advanced custom Fieldsのフィールドグループを簡単に複製する方法

Advanced custom Fieldsのフィールドグループの複製の方法の解説。XMLのExport、インポートする機能を利用して複製します。

WordPressのメディアの設定解説・uploadsフォルダの変更方法

メディアの設定に関する解説。管理画面から変更できなくなったuploadsフォルダの変更方法についても解説。

WordPressで ¥円マークが \ バックスラッシュになる原因と対処方法

円マークがバックスラッシュに変換される。その原因と対処方法を解説します。原因はCSSでのフォント指定に欧文フォントも含まれるため欧文フォントで表示されること。

ショートコードで簡単解決！WordPress固定ページにカテゴリ一覧を編集する方法

ショートコードを使って固定ページや投稿に特定のカテゴリ一覧を編集する処理を作りました。プラグインなしで30行くらいのソースコピペで実現できます！

WordPressのサイドバー（サイドナビ）はウィジェットで編集

サイドバー（サイドナビ）を編集するウィジェットの利用方法の解説です。カテゴリ一覧、アーカイブ、リンク集などを設定する方法を解説しています。

PREV
Advanced Custom Fields管理画面の全項目完全解説・カスタムフィールド決定版！
NEXT
WordPressのカテゴリやタクソノミーにカスタムフィールド項目を追加する方法

Warning: Trying to access array offset on null in /home/ss-giken/s-giken.net/public_html/blog/wp-content/plugins/amazonjs/amazonjs.php on line 637

Warning: Trying to access array offset on null in /home/ss-giken/s-giken.net/public_html/blog/wp-content/plugins/amazonjs/amazonjs.php on line 637

Warning: Trying to access array offset on null in /home/ss-giken/s-giken.net/public_html/blog/wp-content/plugins/amazonjs/amazonjs.php on line 637