Advanced Custom Fieldsの全項目解説・公開側表示編集編
2015/12/27
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全項目完全解説・管理画面編
WordPressのカテゴリやタクソノミーにカスタムフィールド項目を追加する方法
Advanced Custom Fieldsの関数の全部の使い方を調べてみた
Advanced Custom Fields(ACF)のアドオン・ギャラリーの使い方解説
Advanced Custom Fields(ACF)のアドオン・繰り返しフィールドの使い方解説
WordPressのカスタムフィールド、カスタム投稿、カスタムタクソノミーとは?
Advanced Custom Fieldsの公開側の方法取得関数
カスタムフィールドの値を取得する方法
Advanced Custom Fieldsに限らず、カスタムフィールドの値を取得する WordPressの標準機能での基本形は、以下のようになります。
1 2 3 4 5 6 |
// 【基本形】 $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の標準関数とは別のカスタムフィールドの情報を取得する関数が用意されています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 【基本形】 // 変数として取得する場合 $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()」関数は、入力した値も含めカスタムフィールドの項目全体の値を取得することができる関数です。
1 2 3 4 5 6 7 8 9 |
// 【基本形】 // 変数として取得する場合 $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が設定されます。
Advanced Custom Fieldsの公開側のフィールドタイプごとの取得例
フィールドタイプ・テキスト
フィールドタイプ「テキスト」です。
管理画面から登録する際も基本形は「テキスト」ですが、公開側で取得する場合も「テキスト」は基本形で、入力した情報をそのままテキストとして簡単に取り出せます。
取得される値に「Prepend(接頭辞)」「Append(接尾辞)」は含まれませんので、編集するテンプレートに直接記述しましょう。
1 2 3 |
echo "<b>【テキスト】</b><br>"; $s_text = get_field ( "s-text" ); echo $s_text; |
フィールドタイプ・テキストエリア
フィールドタイプ「テキストエリア」もテキストと同様そのまま取り出せます。
1 2 3 |
echo "<b>【テキストエリア】</b><br>"; $s_textarea = get_field ( "s-textarea" ); echo $s_textarea; |
フォーマットの処理を自分で対応したい場合は、3つ目の引数に falseを指定し、wpautop()や nl2br()などで処理を行います。
1 2 3 |
$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()」が便利ですね。
1 2 3 4 |
echo "<b>【数値】</b><br>"; $s_number = get_field ( "s-number" ); echo $s_number . "<br>"; echo number_format ( $s_number ); |
フィールドタイプ・メール
フィールドタイプ「メール」もテキスト同様そのまま取り出せます。
1 2 3 |
echo "<b>【メール】</b><br>"; $s_e_mail = get_field ( "s-e-mail" ); echo $s_e_mail; |
フィールドタイプ・Wysiwygエディタ
フィールドタイプ「Wysiwygエディタ」もテキスト同様そのまま取り出せます。
テキストエリア同様、3つ目の引数に falseを指定してフォーマットを設定し直すこともできます。
1 2 3 |
echo "<b>【Wysiwygエディタ】</b><br>"; $s_wysiwyg = get_field ( "s-wysiwyg" ); echo $s_wysiwyg; |
フィールドタイプ・画像
フィールドタイプ「画像」は、画像の情報が取得できますが、「返り値」で設定した選択肢によって取得できる値が違います。
取得した値によって画像を表示させる方法が違ってきますので下記を参考にして最適なものを設定してください。
とは言え、処理の自由度を考えると「画像オブジェクト」を選択しておく方がよさそうですね。
画像オブジェクト
返り値「画像オブジェクト」の場合です。
1 2 3 |
echo "<b>【画像・オブジェクト】</b><br>"; $s_image_object = get_field ( "s-image-object" ); print_r($s_image_object); |
返り値は下記のように配列として画像に関する各種情報が取得できますので、それを使って自由な編集が可能です。
「alt」「title」「caption」「description」は、メディアの編集画面などから入力をすると追加されます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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が取得できます。
1 |
echo $s_image_object[sizes][large]; |
これを応用して、サムネイル「100」の画像を編集し、画像をクリックするとアップロードした画像を表示する場合の設定をする場合は以下のようになります。
1 2 3 |
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だけが取得できます。
1 2 3 |
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]」が取得できます。
1 2 3 |
echo "<b>【画像・URL】</b><br>"; $s_image_url = get_field ( "s-image-url" ); echo $s_image_url; |
この場合は、下記の様に URLをクリックすると画像を表示する、といった場合に便利です。
1 |
echo '<a href="' . $s_image_object[url] . '">' . $s_image_object[url] . '</a>'; |
画像ID
返り値「画像ID」の場合です。
返り値は IDが返ってきます。
「画像オブジェクト」の配列の中の値でいうと「$s_image_object[id]」が取得できます。
1 2 3 |
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()」関数を使って下記の様に編集をします。
1 2 3 4 5 |
$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を設定する場合は下記の様になります。
1 2 3 4 5 6 7 |
$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でもよさそうですが。
ファイルオブジェクト
返り値「ファイルオブジェクト」の場合です。
1 2 3 |
echo "<b>【ファイル・オブジェクト】</b><br>"; $s_file_object = get_field ( "s-file-object" ); print_r($s_file_object); |
返り値は下記のように配列としてファイルに関する各種情報が取得できますので、それを使って自由な編集が可能です。
「title」「caption」「description」は、メディアの編集画面などから入力をすると追加されます。
1 2 3 4 5 6 7 8 9 |
Array ( [id] => 122 [alt] => [title] => たいとる [caption] => きゃぷしょん [description] => せつめい [mime_type] => application/pdf [url] => http://localhost/wp-content/uploads/2015/09/dummy.pdf ) |
この配列から値を取得する場合は、下記の様に記述します。
下記の例は、アップロードしたファイルの URLが取得できます。
1 |
echo $s_file_object[url]; |
これをもとにして、タイトルにファイルのリンクを設定する処理の場合は以下のようになります。
1 2 3 |
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]」の値になります。
1 2 3 |
echo "<b>【ファイル・URL】</b><br>"; $s_file_url = get_field ( "s-file-url" ); echo $s_file_url; |
ファイルの場合で、リンクはファイルのタイトルなどを編集せず、URLだけあればいいということであれば、「ファイルURL」選ぶことで下記の様にすっきりとした表現ができるようになります。
1 |
echo '<a href="' . $s_file_url . '">' . $s_file_url . '</a>'; |
ファイルID
返り値「ファイルID」の場合です。
返り値は IDが返ってきます。
「ファイルオブジェクト」の配列の中の値でいうと「$s_file_object[id]」の値になります。
1 2 3 |
echo "<b>【ファイル・ID】</b><br>"; $s_file_id = get_field ( "s-file-id" ); echo $s_file_id; |
この場合は、ファイル IDからファイルの URLを取得する「wp_get_attachment_url()」関数を使って下記の様に編集をします。
1 2 3 4 |
$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
フィールドタイプ・セレクトボックス
フィールドタイプ「セレクトボックス」は、選択された「選択し」の情報が取得できます。
「選択し」でキーと値が同じものとして登録した場合と違うものを登録した場合と、「複数の値を選択できるか?」で「はい」と「いいえ」を選んだ場合で値の取得の仕方が違ってきます。
「選択し」でキーと値が違う場合は値を取得する方法が面倒なので、特殊な理由がない限りキーと値を同じにしておく方が無難でしょう。
※「選択し」の「キー」と「値」とは、「選択し」の設定のところで入力した選択肢で、「キー : 値」として入力したものです。
セレクトボックス・シングル・キーと値が同じ
セレクトボックスの「複数の値を選択できるか?」で「いいえ」を選択し、「選択し」の設定でキーと値が同じ場合は、フィールドタイプ「テキスト」と同じで簡単に値を取得できます。
1 2 3 |
echo "<b>【セレクトボックス・シングル】</b><br>"; $s_select_single = get_field ( "s-select-single" ); echo $s_select_single; |
※ここで実際に取得しているテキストは、「選択し」の「キー」に当たるテキストですが、「キー」と「値」が同じであればこれで全く問題ありません。
セレクトボックス・シングル・キーと値が違う
上記の項目と違って、「選択し」の設定でキーと値が違う場合の値の取得方法です。
選択肢のリストを取得するひと手間が増えます。
1 2 3 |
$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” );」で取得できる配列は以下のようになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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 ) |
セレクトボックス・マルチ・キーと値が同じ
セレクトボックスの「複数の値を選択できるか?」で「はい」を選択し、「選択し」の設定でキーと値が同じ場合です。
得られる値は配列ですが、配列の扱いが分かっていれば簡単です。
1 2 3 4 5 |
echo "<b>【セレクトボックス・マルチ】</b><br>"; $s_select_multi = get_field ( "s-select-multi" ); foreach ( $s_select_multi as $val ) { echo $val . "<br>"; } |
セレクトボックス・マルチ・キーと値が違う
上記の項目と違って、「選択し」の設定でキーと値が違う場合の値の取得方法です。
1つ上の項目と 2つ上の項目を足し合わせた感じの処理になります。
1 2 3 4 |
$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’]」の値が配列か否かの違いだけです。
フィールドタイプ・チェックボックス
フィールドタイプ「チェックボックス」は、セレクトボックス・マルチと同じ処理で値を取得できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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()」で取得できる値も下記の通りセレクトボックスとほぼ同じです。違いは、そもそもの設定できる項目の違いの部分です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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 ) ) |
フィールドタイプ・ラジオボタン
フィールドタイプ「ラジオボタン」は、セレクトボックスのシングルと同じ処理で値を取得できます。
1 2 3 4 5 6 7 8 9 |
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」として表示されます。
1 2 3 |
echo "<b>【真/偽】</b><br>"; $s_boolean = get_field ( "s-boolean" ); echo $s_boolean; |
真/偽で分岐処理を作るならば下記のような感じでしょうか。
1 2 3 4 5 |
if ( $s_boolean ) { echo "true"; } else { echo "false"; } |
フィールドタイプ・ページリンク
フィールドタイプ「ページリンク」は選択したページの URLが配列として取得できます。
1 2 3 4 5 |
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だけでしたので、「関連ページ」といったコンテンツを追加する場合には「投稿オブジェクト」の方が便利な方法です。
1 2 3 4 5 |
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” );」で取得できる値は以下のようになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
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] => カスタムフィールドテスト2 [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になります。
関連・オブジェクト
取得できる情報が「投稿オブジェクト」と全く同じですので、編集の方法も同じです。
1 2 3 4 5 |
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()」関数でページの情報を取得してリンクの処理を行う必要が出てきます。
1 2 3 4 5 6 |
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」を選択すると、投稿画面で選択したタクソノミー(カテゴリ)の情報がオブジェクトとして取得できます。
1 2 3 4 5 |
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” );」で取得できる値は以下のようになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
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を取得できます。
1 2 3 4 5 |
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つだけの選択ですので選択したユーザの情報が配列として取得できます。
1 2 3 |
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」の場合は複数選択形式になりますので、取得できる値もユーザ情報も階層化された配列で取得できます。
1 2 3 4 5 |
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” );」で取得できる値は以下のようになっています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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」で指定した場所の情報が取得できます。
取得できる情報は、配列として「住所」「緯度」「経度」となります。
1 2 3 |
echo "<b>【Google Map】</b><br>"; $s_googlemap = get_field ( "s-googlemap" ); print_r ( $s_googlemap ); |
これで取得される値は下記になります。
下記は住所を選択する際に「東京駅」で検索しましたので、「address」が「東京駅」になっていますが、ここには住所が編集されます。
1 2 3 4 5 |
Array ( [address] => 日本東京都東京駅 [lat] => 35.681382 [lng] => 139.76608399999998 ) |
この情報を元に Google地図を編集する一例としては下記の様になります。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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]」...と数値も増やしていくのもお忘れなく。
フィールドタイプ・デイトピッカー
フィールドタイプ「デイトピッカー」は、テキスト同様そのまま取り出せます。
「フォーマットを保存する」で指定した形式で取得できます。
「/」で区切られていれば、必要に応じて「年月日」表記に変更することも簡単です。
1 2 3 4 5 |
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] . "日"; |
フィールドタイプ・カラーピッカー
フィールドタイプ「カラーピッカー」は、テキスト同様そのまま取り出せます。
1 2 3 |
echo "<b>【カラーピッカー】</b><br>"; $s_colorpicker = get_field ( "s-colorpicker" ); echo $s_colorpicker; |
Advanced Custom Fieldsの公開側の関数
カスタムフィールドの値をすべて取得する関数・get_field_objects()
Advanced Custom Fieldsには、オリジナルの関数が多数用意されています。
ここで紹介していない関数は今後紹介していく予定ですが、最後に「get_field_objects()」関数を紹介します。
「get_field_objects()」は「Advanced Custom Fieldsの入力値を取得する関数」で紹介した「get_field_object()」関数と間違えそうですが、ここで紹介するのは「objects」が複数形の関数です。
1 2 3 4 5 6 |
// 【基本形】 $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()」関数の方がよさそうです。
GoogleAdwords
GoogleAdwords
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!
関連記事
-
WordPressで口コミサイト構築ならMulti Ratingがおススメ
口コミの評価点を投稿する機能に特化。評価点を複数設定することができ、投稿後の評価点を編集することができる数少ないプラグイン。日本語にも対応。おススメ。
-
Rating-Widgetは超簡単設定のWordPress口コミサイト構築プラグイン
口コミの評価点を投稿する機能に特化したプラグインで、多様なイメージの投稿方法や一覧ページ、コメントなどにも投稿機能を追加することができます。
-
Autoptimizeで簡単設定!HTML、JS、cssを圧縮しWordPress高速化!
Autoptimizeを使って簡単にHTML、JavaScript、CSSを圧縮しサイトの表示を高速化しよう!基本設定、拡張設定とあり柔軟な設定で多彩な環境に対応出来ます。
-
WP Multibyte PatchでWordPressの管理画面のイタリック体を解消
管理画面の一部の文字がイタリック(斜体)になっているのはプラグイン「WP Multibyte Patch」が有効になっていないためです。日本語を使うには必ず有効化しましょう。
-
評価点投票プラグイン10個を比較!WordPressで口コミサイトを構築
口コミサイトを作るために必要な評価点、レビューを投稿できるプラグインを探して評価。10プラグインをチェックし、8プラグインは詳細解説付き。
-
WordPressで WPtouchを入れてモバイルテーマを「OFF」にしたら元に戻れなくなった
WPtouchを入れてモバイルテーマを「OFF」にしたら元に戻れなくなった。これは「wp_footer」の設定に問題があるからだった。
-
WordPressのカテゴリやタクソノミーにカスタムフィールド項目を追加する方法
WordPressのカテゴリやタクソノミーに編集する項目を追加する方法の解説。Advanced Custom Fieldsを使うと簡単。テンプレートに記述する方法も解説。
-
WordPressのデータベース管理プラグインの決定版!Adminer
データベース管理プラグインはAdminerがあれば他に必要ありません。なぜならDB管理ツールAdminerと同じものをプラグインとして提供しているからです。
-
表示スピードアップに貢献!P3(Plugin Performance Profiler)で負荷が高いプラグインを調査
まずは正確に現状把握を!P3(Plugin Performance Profiler)を使ってプラグインの処理時間を確認!簡単操作で対応すべきプラグインが一目瞭然になります!
-
Author hReviewでWordPressに構造化されたレビューサイトを構築
レビューサイトを構築するためのプラグイン。レビューの入力とレビュー対象のアイテムの情報を構造化データにするHTMLを編集する機能を提供します。