「Custom Field Suite(カスタムフィールドスイート)」の使い方と表示方法

2015/9/30

2021/10/7

51943 views

「Custom Field Suite(カスタムフィールドスイート)」

今回は、WPプラグイン「Custom Field Suite(カスタムフィールドスイート)」を解説していきます。
カスタムフィールドをとっても簡単に作成できるおすすめのワードプレスプラグインです。

Custom Field Suite

Custom Field Suiteとは?

Custom Field Suiteは、ワードプレスにてカスタムフィールドを作成できるプラグインです。
とても直感的に、簡単に、操作できるのが特徴です。
日本語対応にもなっているのでとっつきやすく、数あるカスタムフィールド用プラグインの中では、初級者の方でも非常に使いやすいプラグインといえます。

Custom Field Suiteの使い方

1. 管理画面のプラグインの新規追加

まずは、管理画面のプラグインの新規追加から「Custom Field Suite」を検索し、有効化します。

2. フィールドグループと、フィールドの新規作成

「設定」>「Custom Field Suite」へ進み「新規作成」からフィールドグループとフィールドをそれぞれ作成していきます。
フィールドタイプと、詳細設定については下記の表に解説しています。

フィールドタイプの種類と説明

単一行テキスト 単一行の文字
テキストエリア 改行も含められる文字
リッチエディタ ビジュアルエディタ
ハイパーリンク リンク文字
日付フォーマット 日付
カラーピッカー 選択した色のカラーコード
真/偽(簡易チェックボックス) チェックがあるかないか(1or0を返す)
セレクト(ドロップダウンリスト) 選択項目(行づつの「値 : ラベル」の値を返す ※例「バナナ : banana」)
関連ポスト選択 関連記事の選択(カスタム投稿の選択可)
ユーザー ユーザーの選択
ファイルのアップロード アップファイル(URLかIDを返す)
ループ(複製フィールド) 複数項目の作成が可に(ループ項目に入れるにはドラッグ&ドロップで)
タブ(※編集画面用のもの) 並び順の下の項目をタブ分けできる(※項目が多いときなど編集画面を整理できる)

フィールドの詳細設定項目(代表的なもの)

ラベル 編集画面の表記ラベル(日本語でOK)
名前 カスタムフィールドの項目名(半角英数字)
フィールドタイプ カスタムフィールドの種類
デフォルト値 デフォルトで入力したい値
フォーマット 改行のタグ化を選択
バリデーション チェックで入力必須項目にできます
概要 説明分が表示できます(クライアントや編集者などのために使えます)

3. 配置ルール、エクストラの設定

配置ルールでは、条件に適した編集画面にのみ作成したカスタムフィールドグループを表示させるか選択することができます。
これにより、不要な固定ページや投稿には表示されないので管理しやすくなります。
エクストラでは、編集画面にどの順番や位置に表示するか設定できます。
また、「コンテンツエディタ隠す」にチェックするとデフォルトエディタを非常にでき、これが意外と便利です。

配置ルールの項目と説明

投稿タイプ 投稿(post)や固定ページ(page)などを選択できます。
ユーザー権限グループ ユーザー権限によって選択できます。
投稿 カスタム投稿などを選択できます。
分類 投稿カテゴリーで選択できます。
固定ページテンプレート 固定ページテンプレートで選択できます。

※ちなみに固定ページをテンプレートでなく、特定のページで選択することは残念ながらできないようです・・・。

3. 管理画面でカスタムフィールドに値を入力

では次はさっそく、固定ページや投稿に設定したカスタムフィールドに値を入力していきます。
作成したはずのカスタムフィールドが表示されていなら配置ルールに間違いが、もしくは表示オプションで非表示になってると思うので確認ください。
入力が終われば、いつものように「更新」で保存します。

4. 入力したカスタムフィールドの値を取得し表示させる

いよいよ、実際に入力したカスタムフィールドの値を取得し表示させてみましょう。
それぞれのカスタムフィールドの種類でPHPコードを記載しています。
以下では、カスタムフィールドの名前を”sample”としています。

「単一行テキスト」/「テキストエリア」/「カラーピッカー」/「真偽(簡易チェックボックス)」/「ファイルのアップロード」の場合

これらは基本となるシンプルなコードで取得できます。

<?php echo $cfs->get('sample'); ?>

※「$cfs」を「CFS()」に換えても機能します

「日付フォーマット」の場合

日付はいろんな表示のさせ方ができます。

<?php
echo $cfs->get('sample');
echo date('F j, Y', strtotime($cfs->get('sample')));
echo date('Y', strtotime($cfs->get('sample')));
?>

※「$cfs」を「CFS()」に換えても機能します

「セレクト(ドロップダウンリスト)」の場合

セレクトはループさせる必要があります。

<?php
$values = $cfs->get('sample');
foreach ($values as $value => $label) {
echo $value; echo $label ;
 }; ?>

※「$cfs」を「CFS()」に換えても機能します

「ユーザー」の場合

ユーザーもループが必要です。

<?php $values = $cfs->get('sample');
foreach ($values as $user_id) { $the_user = get_user_by('id', $user_id);
echo $the_user->user_login ;
}; ?>

※「$cfs」を「CFS()」に換えても機能します

「関連ポスト選択」の場合

<?php
$values = $cfs->get('sample');
foreach ($values as $post_id) { $the_post = get_post($post_id);
echo $the_post->ID;//ID
echo $the_post->post_title;//タイトル
echo $the_post->post_name;//スラッグ
echo get_permalink($the_post->ID);//パーマリンク
echo get_the_post_thumbnail_url($the_post->ID,'large');//アイキャッチ画像のURL
};?>

※「$cfs」を「CFS()」に換えても機能します

「ループ」の場合

ループは、ループさせて中のカスタムフィールドを記述します。

<?php
$fields = $cfs->get('sampleloop');
foreach ($fields as $field) {
echo $field['sample1'];
echo $field['sample2'];};
?>

※「$cfs」を「CFS()」に換えても機能します

「ループ」の中に「ループ」がある場合

<?php
$fields = $cfs->get('sampleloop');
foreach ($fields as $field) {
echo $field['sample1'];
$fieldloops = $field['samplelooploop'];
foreach ($fieldloops as $fieldloop) {
echo $fieldloop['sample2'];};};
?>

※「$cfs」を「CFS()」に換えても機能します

記述例

実際にカスタムフィールドを表示させるときのHTMLやPHPの記載例を解説しておきます。

1. アップロード画像を表示させる

アップロード画像を表示させたい場合は下記のように記述します。

○返り値をファイルURLにした場合

<img src="<?php echo $cfs->get('sample'); ?>" alt="<?php the_title(); ?>" width="auto" height="auto" />

○返り値を添付IDにした場合

<?php $fieldname = get_post_meta($post->ID, 'sample', true); ?>
<?php $fieldname = wp_get_attachment_image_src($fieldname, 'large'); ?>
<img src="<?php echo $fieldname[0]; ?>">

2. 関連ポストで記事のリンクを作成する

おすすめ記事を紹介するときなどに使える関連ポストカスタムフィールドで画像付きリンクを表示したい場合は以下のHTMLを記述します。

<?php
$values = $cfs->get('sample');
foreach ($values as $post_id) { $the_post = get_post($post_id);
$posttitle = $the_post->post_title;//タイトル
$postlink = get_permalink($the_post->ID);//パーマリンク
$postimageurl = get_the_post_thumbnail_url($the_post->ID,'large');//アイキャッチ画像のURL
};?>
<div>
<p><img src="<?php echo $postimageurl ;?>" alt="<?php echo $posttitle ;?>"></p>
<p><a href="<?php echo $postlink ;?>"><?php echo $posttitle ;?></a></p>
</div>

応用編

ここでは、Custom Field Suiteの実践的に求められるような応用的な使い方をご紹介していきます。

1. 値が空の場合で条件分岐させる

値が未入力で空の場合、出力コードを書いているとエラーが出てしまいます。
以下の方法で、値を変数として定義して条件分岐をさせましょう。

<?php $sample = $cfs->get('sample') ;?>
<?php if(!$sample == ''):?>
<?php echo $sample ;?>
<?php else :?>
値が無い場合です
<?php endif ;?>

2. 他のページのカスタムフィールドの値を取得する

これも、けっこう必要な場面もあると思います。
以下の方法で取得することができます。

<?php echo get_post_meta(取得したいページID , 'フィールド名' ,true); ?>

※ループの場合はどうやって取得するか分からないのです><;
分かる人がいたら教えてください・・

3. header.phpやfooter.phpで使いたい場合

たとえば、メタのキーワードやディスクリプションで使いたい場合はheader.phpに記述することになりますが、グローバル変数として宣言しないとエラーになります。
その場合は<head>上部に下記のように記述してグローバル変数を宣言しましょう。

<?php global $cfs ;?>

まとめ

以上、Custom Field Suite(カスタムフィールドスイート)の使い方と表示方法の解説になります。
カスタムフィールドを使いこなせれば、ぐんと凝ったサイト作成が可能になるので是非挑戦してみてください。
もしうまくいかなかったり、分からないことがあれば気軽にコメントして下さいね。

この記事へのコメント

  • 匿名 より:

    CustomFieldSuiteを試しているのですが、うまくいかないのでお聞きしたいです。
    カスタム投稿で作成した記事の設定にCustomFieldSuiteを使用しており
    archive.phpでは表示できますが、page.phpではエラーが出ます。
    使用するphpによって記述を変える必要があるのでしょうか。

  • ZIGZOW より:

    大変お返事遅くなりました。
    どういうエラーでしょうか?

  • mi より:

    「固定ページをテンプレートでなく、特定のページで選択することは残念ながらできないようです・・・。」
    とありますが、配置ルール(投稿)に直接スラッグを書き込めばOKです^^

  • ZIGZOW より:

    miさん、コメントありがとうございます!
    配置ルール(投稿)に直接スラッグを書き込めば、特定の投稿が選択でき驚きました!
    しかし、固定ページのスラッグを入力してもNo matches foundとなりうまくいきません・・・。特定の固定ページを指定することもできるでしょうか??

コメントを残す



関連記事

ページの先頭に戻る