Wordpressプラグイン 「Custom Field Suite」使い方まとめ

Wordpressプラグイン「Custom Field Suite」の使い方についてまとめています。

仕事上、Wordpressでサイト構築をする事が割と頻繁にあるのですがほぼ必須のプラグインとなっています。

このプラグインについてまとめているサイトは多いですが、私が使用したい情報が1つのサイトにまとまっていないため出来る限り1つのサイトで解決出来るようにまとめページを作ってみました。

Custom Field Suite 公式ページ

Wordpress公式プラグインページ
ja.wordpress.org


公式ドキュメント
Getting Started - Custom Field Suite
※2017/04/19確認 プラグインページからのリンクは切れていました。

フィールドタイプの種類

フィールドタイプ 詳細
単一行テキスト 1行テキスト(改行不可)
テキストエリア 複数行テキスト(改行可)
リッチエディタ リッチエディタ(Wysiwyg
ハイパーリンク URLとテキストを個別に設定可能。
リンク先の設定(target)として下記を設定可能。
None(指定なし)
_blank
_self
_top
日付 カレンダーから日付を選択
カラーピッカー カラーピッカーを利用可能
真/偽(簡易チェックボックス チェックボックスを利用可能
セレクト(ドロップダウンリスト) セレクトボックスを利用可能
関連ポスト 「投稿タイプ」と最小、最大件数を指定して関連する記事を選択可能
利用可能な種類は下記
投稿(post)
固定ページ(page)
添付ファイル(attachment)
任意のカスタムポストタイプ
Term 最小、最大件数を指定して下記を選択して関連付ける事が可能
category
post_tag
post_format
カスタムポストタイプ
ユーザー 最小、最大件数を指定して現在作成されているユーザーを選択可能
ファイルを選択 ファイルを追加する事が可能(リッチエディタの「メディアを追加」とほぼ同義)
ループ(複製フィールド) ループの中に任意のフィールドタイプを選択して追加するとループが可能
タブ タブが作成される。
タブフィールドを複数設定するとタブが横に追加される。
ただし、タブを作成するとそれ以降の全てがタブ内に収まってしまうので要注意。

テンプレートからの呼び出し

テンプレートから呼び出す時はフィールドごとに異なります。

テキストフィールドの呼び出し
<?php echo CFS()->get( 'first_name' ); ?>
テキストエリアフィールドの呼び出し
<?php echo CFS()->get( 'first_name' ); ?>
リッチエディタフィールドの呼び出し
<?php echo CFS()->get( 'first_name' ); ?>
ハイパーリンクフィールドの呼び出し
<?php echo CFS()->get( 'the_hyperlink' ); ?>
日付フィールドの呼び出し
<?php echo CFS()->get( 'my_date' ); ?>
表示例:2015-10-31

<?php echo date( 'F j, Y', strtotime( CFS()->get( 'my_date' ) ) ); ?>
表示例:October 31, 2015
カラーピッカーフィールドの呼び出し
<?php echo CFS()->get( 'my_color' ); ?>
真/偽(簡易チェックボックス)フィールドの呼び出し
<?php echo CFS()->get( 'checkbox' ); ?>

真偽値を使った判別をする場合は下記。

<?php if ( get_post_meta($post->ID, 'checkbox' ,TRUE) ): ?>
  <div>チェックが入っている場合はこの文章が表示されます</div>
<?php else: ?>
  <div>チェックが入っていない場合はこの文章が表示されます</div>
<?php endif; ?>
セレクト(ドロップダウンリスト)フィールドの呼び出し
<?php
$values = CFS()->get( 'my_select' );
foreach ( $values as $key => $label ) {
  echo $label;
} ?>
関連ポストフィールドの呼び出し
<?php
$values = CFS()->get( 'related_posts' );
foreach ( $values as $post_id ) {
  $the_post = get_post( $post_id );
  echo $the_post->post_title;
} ?>
Termフィールドの呼び出し
<?php
$values = CFS()->get( 'field_terms' );
foreach ( $values as $term_id ) {
    $the_term = get_term($term_id);
    echo $the_term->name;
} ?>
ユーザーフィールドの呼び出し
<?php
$values = CFS()->get( 'field_users' );
foreach ( $values as $user_id ) {
    $the_user = get_user_by( 'id', $user_id );
    echo $the_user->user_login;
} ?>
ファイルのアップロードフィールドの呼び出し
<?php echo CFS()->get( 'my_file' ); ?>

画像の場合はIDが出力されるので、下記のように画像IDからURLを取り出す必要があります。

<?php $fieldName = get_post_meta($post->ID, 'cfs_image', true); ?>
<?php $fieldName = wp_get_attachment_image_src($fieldName, 'full'); ?>
<img src="<?php echo $fieldName[0]; ?>" alt="Image alt">

wp_get_attachment_image_src の使い方は下記からご確認ください。
関数リファレンス/wp get attachment image src - WordPress Codex 日本語版

ループフィールドの呼び出し
<?php
$fields = CFS()->get( 'loop' );
foreach ( $fields as $field ) {
  echo $field['content1'];
  echo $field['content2'];
    $fields = $field['loop_child'];
    foreach ((array)$fields as $field):
  ?>
    <div><?php echo $field['field_name']; ?></div>

  <?php endforeach;
} ?>

※2019/10/1 コメントにてご指摘頂きましたが、表記が一部間違っていたため修正しました。
「loop_child」の部分は子ループです。ループの中でループを回す場合に必要です。
なお、子ループでforeachの中で(array)を使用している理由は、

Warning: Invalid argument supplied for foreach() in [path]

というエラーが出てしまうためです。
詳細は下記のサイトを参考にしてください。
kotori-blog.com