2015/9/30

2021/10/18

83920 views

今回は、カスタムフィールドをとっても簡単に作成できるワードプレスプラグインの「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）などを選択できます。
ユーザー権限グループ	ユーザー権限によって選択できます。
投稿	カスタム投稿などを選択できます。
分類	投稿カテゴリーで選択できます。
固定ページテンプレート	固定ページテンプレートで選択できます。

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

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

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

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

いよいよ、実際に入力したカスタムフィールドの値を取得し表示させてみましょう。
それぞれのカスタムフィールドの種類で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（カスタムフィールドスイート）の使い方と表示方法の解説になります。
カスタムフィールドを使いこなせれば、ぐんと凝ったサイト作成が可能になるので是非挑戦してみてください。
もしうまくいかなかったり、分からないことがあれば気軽にコメントして下さいね。