私が愛してやまない、Advanced Custom Fields の使い方を詳細解説[ 出力編 ]

投稿日時:2014年9月3日 カテゴリー:WordPress

前回の記事で、「Advanced Custom Fields」の設定方法を紹介しました。
今回は、ユーザーが入力した情報を出力する方法を紹介します。
PHP のコードがメインになってきます。

目次

基本的な関数は3つ

the_field

カスタムフィールドを表示させる関数です。ほとんどの場合これでことが足ります。
ちなみに、echo を付けずとも表示できます。

<?php the_field($field_name, $post_id); ?>

$field_name

入力フィールドの設定で「フィールド名」です。
フィールド名は日本語でもOKですが、できるだけ半角英数を使いましょう。

$post_id

指定したポストID の情報を取得します。

get_field

get_field は値を変数に格納したい場合に使います。

<?php $field = get_field($field_name, $post_id, $format_value); ?>

$field_name

入力フィールドの設定で「フィールド名」です。
フィールド名は日本語でもOKですが、できるだけ半角英数を使いましょう。

$post_id

指定したポストID の情報を取得します。

$format_value

Wysiwyg エディタなど勝手に<p></p>タグを挿入するような定型フォーマットを生成するかを選択します。
false を選択すると DB の情報がそのまま出力されます。
デフォルト:ture

get_field_object

カスタムフィールドで設定した値やユーザーが入力値などを配列で取得します。
主に、カスタムフィールドで設定した値を取得し詳細な設定を行う場合に使用します。

<?php get_field_object($field_key, $post_id, $options); ?>

$field_name

入力フィールドの設定で「フィールド名」です。
フィールド名は日本語でもOKですが、できるだけ半角英数を使いましょう。

$post_id

指定したポストID の情報を取得します。

$options

カスタムフィールの編集画面で値を省略した場合、省略項目のデフォルト値を取得するかを設定できます。
false を指定するとデフォルト値が空になります。
デフォルト:ture

基本的な表示コード

基本的には、「the_field('field_name')」で表示する場合が多いです。

テキスト、テキストエリア、数値、メール、パスワード、Wysiwyg エディタ

the_field('field_name')で表示できます。
ちなみに echo を付ける必要はありません。

イメージの場合

イメージはフィールド編集画面で取得方法を設定できます。

画像 URL にチェックを入れておけば、以下の簡単なプログラムで画像を表示できます。

Advanced Custom Fields画像 URL 取得

<?php if( get_field('image') ): ?>

	<img src="<?php the_field('image'); ?>" />

<?php endif; ?>

※フィールド名(image)は適切に変更してください。

ファイルの場合

ファイル URL にチェックを入れておけば、簡単なプログラムでファイルにリンクを設定できます。

Advanced Custom Fieldsファイル URL 取得

<?php if( get_field('field_name') ): ?>

<a href="<?php the_field('field_name'); ?>" >ファイルをダウンロードする。</a>

<?php endif; ?>

ページリンクの場合

「the_field('field_name')」で URL を取得できます。

<a href="<?php the_field(' field_name '); ?>">リンクを表示</a>

デイトピッカー

「the_field('field_name')」で日付を表示します。

出力形式は、カスタムフィールドの設定項目「フォーマットを保存する」(デフォルト:yymmdd)で出力します。
後は、PHP 等で好みのフォーマットに変更しましょう。

カラーピッカー

「the_field('field_name')」でウェブカラー(#FFFFFF等)形式を出力します。

<div style="background-color:<?php the_field(' field_name '); ?>">ここにコンテンツが入ります。</div>

選択肢の表示コード

選択肢は以下が設定されているものとして説明してきます。

test1 : Test1
test2 : Test2
test3 : Test3

セレクトボタン、ラジオボタン

基本的には複数選択されないため、「the_field('field_name')」で選択したものを表示できます。

選択された項目に対して、何らかの処理をしたい場合は、以下のように記載します。

if(get_field(' field_name ') == " test1")
{
    //test1 の処理
}

チェックボックス

チェックボックスの場合は複数選択される場合があります。

「the_field('field_name')」で表示した場合はコンマで区切られて表示します。

the_field('チェックボックス');
//echo : test1, test2

選択された項目に対して処理を行いたい場合は以下のようになります。

if(get_field('field_name'))
{

	if( in_array( 'test1', get_field('field_name') ) )
	{
	    //test1 の場合の処理...
	}

}

真偽

if( get_field('field_name') )
{
    //真の場合の処理
}
else
{
    //偽の場合の処理
}

オブジェクトや配列を利用する表示コード

投稿オブジェクト

選択された投稿の、オブジェクト(WP_Post)を取得します。

$obj=get_field('field_name');
if($obj){
	echo $obj->post_title;//タイトルを表示
	echo $obj->post_content;//記事を表示
}

WP_Post で取得できる値を一つ一つ説明するとそれだけで1ページ使えそうなので、詳細は以下の記事をご確認ください。

WP_Post

関連

関連は複数の投稿記事やメディアを指定できます。
選択した投稿記事やメディアは順番が変更でき、昇順で配列に格納されます。

$obj=get_field('field_name');
echo $obj[0]->ID;// 1番上にある記事の ID を表示

Google Map

Google Map の場合は Google Map API を使わなければ表示できません。
Google Map API を使ったことない方は以下に公開されているコードをコピペで OK です。

本家サイト Google Map 説明

Google Map API を扱える方は下記の情報を元に自分で詳細な設定を行うことも可能です。

$map = get_field_object('google_map');
print_r($map);

/* 変数 $map に格納される配列
Array
(
    [key] => field_54015970d737d
    [label] => Google Map
    [name] => google_map
    [_name] => google_map
    [type] => google_map
    [order_no] => 16
    [instructions] => 
    [required] => 0
    [id] => acf-field-google_map
    [class] => google_map
    [conditional_logic] => Array
        (
            [status] => 0
            [rules] => Array
                (
                    [0] => Array
                        (
                            [field] => field_540032fd536af
                            [operator] => ==
                            [value] => test1
                        )

                )

            [allorany] => all
        )

    [center_lat] => 
    [center_lng] => 
    [zoom] => 15
    [height] => 599
    [field_group] => 1076
    [value] => Array
        (
            [address] => 1328 Nishino, Konan Ward, Niigata, Niigata, Japan
            [lat] => 37.89436302930203
            [lng] => 139.119873046875
        )

)
*/

// for example
$map[value][lat];//緯度の取得
$map[value][lng];//経度の取得


コメントを残す