WordPress 編

Web Publishing Platform
Template:single-post.php

Advanced Custom Fields-フィールドタイプ

WordPress 標準のカスタムフィールドは、テキストでしか値を入力できません。一方、Advanced Custom Fields ではさまざまな種類の入力フォームが用意されています。この入力フォームの種類ことをフィールドタイプと呼びます。

Ver 3.5.1 から、フィールドを表示するかどうかの条件を指定するオプション Conditional Logic が追加されました。

フィールドタイプ

Advanced Custom Fields は、デフォルトで使える 15 個のフィールドタイプがあります。フィールドの繰り返しが必要な場合は、有料アドオン Repeater を購入してください。

カスタムフィールドを表示する基本的な関数は、

the_field( $field_name, $post_id );
echo get_field( $field_name, $post_id );
$field_name:フィールド名  $post_id:通常はポスト ID ですが、ポストID 以外の場合もあります

の2つです。その他にも、Repeater(有料オプション)用の関数やショートコードも用意されています。

フィールドタイプ 解説
Text

インデックスへ

Text Field は、単一行のテキストを入力できます。URL や E-mail かをチェックするバリデーション機能はありません。

フィールド定義時のオプション

フィールドの値に HTML を含むときの動作を指定できます。
・無:HTML タグとして認識せず、文字列としてそのまま吐き出します。
・HTML:HTML タグとして認識します。

フォーマット

フィールド入力

Text

フィールド出力
■ サンプル
〒<?php the_field('zip_code',$post->ID); ?>
Number

インデックスへ

Number Field は、単一行のテキストを入力できます。数字以外の入力があると、保存時にエラーも出さずに数字以外を無視して保存します。

フィールド入力

右側の▲/▼をクリックすると数値が 1 ずつ増減します。

Number Field

フィールド出力
■ サンプル
<?php
$uriage = get_field('uriage',$post->ID);
echo number_format($uriage); 
?> 
Textarea

インデックスへ

Textarea Field は、複数行のテキストを入力できます。

フィールド定義のオプション

改行の扱いはフィールド設定時に決めることができます。

フォーマット

フィールド入力

Text Area

フィールド出力
■ サンプル
<!-- 改行指定をしたとき -->
<p><?php the_field('memo',$post->ID); ?></p>

<!-- 改行指定をしなかったとき -->
<p><?php echo nl2br(get_field('memo',$post->ID)); ?></p>
Wysiwyg Editor

インデックスへ

Wysiwyg Editor Field は、TinyMCE でテキストを入力できます。

フィールド定義時のオプション

ツールバーの形態やアップロードボタンの有無を選択できます。

acf-wysiwyg

フィールド入力

フィールド出力
■ サンプル
<?php the_field('other',$post->ID); ?>
Image

インデックスへ

Image Field は、画像をアップロードできるインターフェイスを提供します。アップロードした画像は、ポストの添付画像として管理されます。

フィールド定義のオプション

カスタムフィールドに保存する値は、画像オブジェクト、画像 URL、画像 ID から選択できます。

acf-image-type

フィールド入力

Image Field

フィールド出力
■ サンプル
<!-- 画像オブジェクトを設定した場合 -->
<?php
$attachment_obj = get_field('photo',$post->ID);
echo wp_get_attachment_image( $attachment_obj->ID, "full" );
?>

<!-- 画像 URL を設定した場合 -->
<img src="<?php the_field( 'photo',$post->ID); ?>" alt="" />

<!-- 画像 ID を設定した場合 -->
<?php
$attachment_id = get_field('photo',$post->ID);
echo wp_get_attachment_image( $attachment_id, "full" );
?>
File

インデックスへ

File Field は、ファイルをアップロードできるインターフェイスを提供します。

フィールド定義時のオプション

カスタムフィールドとして保存する値は、ファイルオブジェクト / ファイルURL / ファイルID から選択できます。

acf-file

フィールド入力

File Field

フィールド出力
■ サンプル
<!-- URL を設定した場合 -->
<a href="<?php the_field('file',$post->ID); ?>">ダウンロード</a>
Select

インデックスへ

Select Field は、フィールド設定時に登録した項目をドロップダウンリストから選択できます。

フィールド定義時のオプション

選択オプションやデフォルト値の他に、単一選択か複数選択かを選べます。

acf-select

フィールド入力

select

フィールド出力
■ サンプル
<!-- 単一選択のとき -->
<p>都道府県:<?php the_field('prefecture',$post->ID); ?></p>

<!-- 複数選択のとき -->
<p>都道府県:<?php echo implode(', ', get_field('prefecture',$post->ID)); ?></p>

<p>都道府県:
<?php
$prefectures = get_field('nation',$post->ID);
$n = 0;
foreach ($prefectures as $prefecture) :
    if ($n==0) echo $prefecture;
    else       echo ', '.$prefecture;
    $n++;
endforeach;
?>
</p>

<!-- if 文 単一選択のとき -->
<?php
if(get_field('prefecture',$post->ID) == "東京都") :
    //...
endif;
?>
 
<!-- if 文 複数選択のとき --> 
<?php
if( in_array('北海道',get_field('prefecture',$post->ID))) :
    //...
endif;
?>
Checkbox

インデックスへ

Checkbox Field は、フィールド設定時に登録した項目を複数を選択できます。

フィールド定義時のオプション

選択肢を入力します。

acf-checkbox

フィールド入力

フィールド出力
■ サンプル
<!-- 日本にチェックがあるかの判断 --> 
<?php if (in_array('日本', get_field('nation',$post->ID))) : ?>
    <p>日本にチェックがあります。</p>
<?php endif; ?>

<!-- 日本とアメリカ合衆国の両方にチェックがあるかの判断 --> 
<?php 
$nations = get_field('nation',$post->ID);
if (in_array('日本', $nations) && in_array('アメリカ合衆国', $nations)) : 
?>
    <p>日本とアメリカ合衆国の両方にチェックがあります。</p>
<?php endif; ?>

<!-- カンマ区切りで出力 --> 
<p>国:<?php the_field('nation',$post->ID); ?></p>

<!-- カンマ区切り以外で出力 --> 
<p>国:<?php echo implode(' ', get_field('nation',$post->ID)); ?></p>

<p>国:
<?php
$nations = get_field('nation',$post->ID);
$n = 0;
foreach ($nations as $nation) :
    if ($n==0) echo $nation;
    else       echo ' '.$nation;
    $n++;
endforeach;
?>
</p>
True / False

インデックスへ

True/False Fieldは、一つだけのチェックボックスを作成します。ON = True , Off = false の値を持つ簡易版チェックボックスフィールドです。

フィールド定義時のオプション

tf-message

フィールド入力

true-false

フィールド出力
■ サンプル
<?php
if (get_field('company_info',$post->ID)==true) : // 会社データなし
    echo '<p>この会社の情報は登録されていません。</p>';
else :
    // 
    // 会社の情報を表示
    //
endif;
Radio

インデックスへ

Radio Field は、フィールド設定時に登録た項目を一つだけ選択することができます。

フィールド定義時のオプション

acf-radio

フィールド入力

Radio Button Field

フィールド出力
■ サンプル
<p>色:<?php the_field('color',$post->ID); ?></p>
Date Picker

インデックスへ

Date Picker Field は、日付をテキストかカレンダーで入力できるインターフェイスを提供します。

フィールド定義時のオプション

保存と表示のフォーマットを指定します。

acf-date

フィールド入力

Date Picker

フィールド出力
■ サンプル
<p>誕生日:<?php the_field('birthday',$post->ID); ?></p>
 
<?php
/*
*  Create PHP DateTime object from Date Piker Value
*  this example expects the value to be saved in the format: yy_mm_dd (JS) = Y_m_d (PHP)
*/
$date = DateTime::createFromFormat('Y_m_d', get_field('date_picker',$post->ID));
echo $date->format('d-m-Y');
?>
Color Picker

インデックスへ

Color Picker Field は、色をテキストかカラーピッカーで入力できるインターフェイスを提供します。

フィールド定義時のオプション

デフォルト色を設定できます。

acf-color

フィールド入力

Color Picker

フィールド出力
■ サンプル
<div id='box' style="background-color:<?php the_field('b_color',$post->ID); ?>">
    :
</div>
Relationship

インデックスへ

Relationship Field は、関連するポストをセレクションから複数選択できます。

フィールド定義時のオプション

フィールド入力画面で選択する関係ポストを、投稿タイプやタームで絞り込んでおくことができます。

ポストのフィルター

フィールド入力

選択したポスト(右側のポスト)は Drag & Drop で順序を決めることができます。

relationship

フィールド出力
■ サンプル
<?php
$my_posts = get_field('relationship',$post->ID);
if( $my_posts ): 
  echo "<ul>";
  foreach( $my_posts as $post) :
    setup_postdata($post);
?>
    <li>
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
<?php 
  endforeach;
  echo "</ul>";
  wp_reset_postdata();
endif;
?>
Post Object

インデックスへ

Relationship Field を使えば、Post Object Field は必要なし。

共通オプション

オプション 解説
フィールドの説明 ポスト編集画面のフィールドの説明として表示されます。
必須か? 必須入力のフィールドに指定します。
デフォルト値 フィールドの初期設定値を入力します。
Conditional Logic

フィールドを表示するかどうかの条件を指定します。条件は、同じフィールドグループ内で定義した

  • select
  • checkbox
  • radio
  • true / false

で指定できます。これらのフィールドの AND 演算 / OR 演算も指定できます。

フィールド定義時のオプション

例えば、「職業」を選択するラジオボタンがあり、「その他」を選択したときだけ「その他」の Text Field に職業を入力したいことはよくあります。

conditional

フィールド入力

Radio で「その他」以外の職業を選択した場合、Text Field「その他」は表示されません。

select-other

API 関数

get_field() , the_field() の他にも利用できる関数があります。

フィールドタイプ 解説
the_field()

WordPress 標準の the_****() と同じで、関数内で値を表示します。$post_id を省略するとグローバル変数 $post の ID の指定があったものとします。

■ サンプル
<?php
the_field($field_name, $post_id);

// $post_id は、ポストの ID とは限りません。
$post_id = null; // current post
$post_id = 1;
$post_id = "option";
$post_id = "options"; // same as above
$post_id = "category_2"; // save to a specific category
$post_id = "event_3"; // save to a specific taxonomy (this tax is called "event")
$post_id = "user_1"; // save to user (user id = 1)
?>
get_field()

これも WordPress 標準の get_****() と同じで、カスタムフィールドの値を返します。返ってくる値は、フィールドタイプの設定によりマチマチです。$post_id を省略するとグローバル変数 $post の ID の指定があったものとします。

■ サンプル
<?php
echo get_field($field_name, $post_id);

// $post_id は、ポストの ID とは限りません。
$post_id = null; // current post
$post_id = 1;
$post_id = "option";
$post_id = "options"; // same as above
$post_id = "category_2"; // save to a specific category
$post_id = "event_3"; // save to a specific taxonomy (this tax is called "event")
$post_id = "user_1"; // save to user (user id = 1)
?>
has_sub_field()

アドオン Repeater Field 用の関数

■ サンプル
<?php
if ( get_field('repeater') ):
  while( has_sub_field('repeater') ): 
?>
    <div>
    <img src="<?php the_sub_field('image'); ?>" alt="<?php the_sub_field('alt'); ?>" />
    <p><?php the_sub_field('content'); ?></p>
    </div>
  <?php endwhile; ?>
<?php endif;
the_sub_field()

アドオン Repeater Field 用の関数

■ サンプル
<?php 
the_sub_field($sub_field_name); 
?>
update_field()
// Field Name で更新
$field_name = "text_field";
$value = "some new string";
update_field( $field_name, $value );
 
// Field Key で更新
$field_key = "field_5039a99716d1d";
$value = "some new string";
update_field( $field_key, $value );
 
// 配列で更新
$field_key = "field_5039a9973jsd1d";
$value = array("red", "blue", "yellow");
$post_id = 123;
update_field( $field_key, $value, $post_id );
Hooks & Filters
Shortcode

ショートコードが利用できます。the_field() と同じ結果になります。

■ 記事欄
[acf field="field_name"]
[acf field="field_name" post_id="123"]

Advanced Custom Fields は「アドバンスド過ぎる」と思われた方には、Custom Field Suite という Advanced Custom Fields の簡易版(フォーク版)があります。簡易版といっても、フィールドタイプはひと通り揃っていて、有料オプション Repeater に相当するフィールドタイプが無料で使えます。

No Responses to “Advanced Custom Fields-フィールドタイプ”

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>