Smart Custom Fields(SCF)でカスタムフィールドを作成する

  • 記事のタイトルとURLをコピー

WordPressのプラグインSmart Custom Fieldsでカスタムフィールドを作成します。

スポンサーリンク

Smart Custom Fieldsとは

WordPressのプラグインで、カスタムフィールドを簡単に作成することのできるプラグインです。 Advanced Custom Fieldでは有料オプションである繰り返しが標準で使うことができます。

プラグインのインストールと有効化

管理画面のプラグイン→新規追加からSmart Custom Fieldsを検索し、ダウンロード後有効化します。
有効化すると左のメニューバーにSmart Custom Fields管理メニューが追加されます。

Smart Custom Fieldsでカスタムフィールドを作る

  1. メニューバーのSmart Custom Fieldsから新規追加を選びます。
  2. 作成するカスタムフィールド群の名前をつけます。
    これが管理画面でカスタムフィールドのタイトルとして表示される名前になります。
  3. フィールド追加ボタンを押します。
  4. タイプからカスタムフィールドの種類を選びます。
  5. カスタムフィールドの名前を入力します。(半角英数字)
  6. カスタムフィールドのラベルを入力します。管理画面に表示される名前になりますので、わかりやすい名前をつけてください。

さらにフィールドを追加したい場合は、3以降を繰り返してください。
たくさんカスタムフィールドを追加することができますが、1つのカスタムフィールド群に登録するカスタムフィールドは、関連性のあるもののみにするほうがわかりやすくなると思います。

作ったカスタムフィールドは以下のように表示されます。

繰り返しを使ってカスタムフィールドを作る

Advanced Custom Fieldでは有料オプションである繰り返しと同様の機能です。項目数が決まっていない場合に便利です。基本的な手順は上記と同じです。

  1. 繰り返しにチェックを入れます。
  2. 繰り返すカスタムフィールドグループの名前をつけます。(半角英数字)
  3. 通常と同様にカスタムフィールドを設定します。
  4. 繰り返しのグループ内に更にカスタムフィールドを追加したい場合はここを押します。

作ったカスタムフィールドは以下のように表示されます。

カスタムフィールドの入力欄を増やしたい時は「+」ボタンを押します。これでカスタムフィールドの入力欄をユーザが任意に増やすことができるようになりました。

カスタムフィールドの種類

Smart Custom Fieldsで指定できるカスタムフィールドの種類を紹介します。

基本フィールド

真偽値

trueかfalseを選択するカスタムフィールドを作ることができます。
カスタムフィールドにはtrueかfalseが格納されます。

設定画面

デフォルトを選択すると、入力画面であらかじめそちらが選択された状態で表示されます。

入力画面での表示

テキスト

一行のテキスト入力フィールドを作ることができます。

設定画面

デフォルトに値を指定すると、初期値を入力しておくことができます。

入力画面での表示

テキストエリア

複数行テキストが入力できるテキストエリアを作ることができます。

設定画面

行数を変更するとテキストエリアの縦の高さを修正することができます。入力される内容にあわせて修正します。

デフォルトに値を指定すると初期値を入力しておくことができます。

入力画面での表示

選択フィールド

選択肢の入力欄は、選択肢ごとに改行して増やします。
キーと値を分けることができます。キーは実際に格納されるデータです。値は入力画面に表示されるものです。
プログラムで処理するためにデータを数字や別の文字列で格納したいが、入力画面ではわかりやすい名前をつけたいときに使えます。そうでない場合は分けなくても構いません。

表示方向では選択肢の表示の仕方を指定できます。水平を指定すると横並び垂直を指定すると縦並びになります。

デフォルトの値を指定すると、入力画面での初期値を決めておくことができます。
キーを指定した場合はキーを入力してください。

チェックボックス

複数選択のできるフォームを作ることができます。

設定画面
入力画面での表示

ラジオボタン

択一選択のできるフォームを作ることができます。

設定画面
入力画面での表示

セレクトボックス

択一選択のできるプルダウン式のフォームを作ることができます。
選択肢がたくさんある場合に便利です。

設定画面
入力画面での表示

コンテンツフィールド

ファイル

PDFやCSVなどのファイルをアップロードできるフォームを作ることができます。標準でアップロードが可能なファイルを調べるには、wp-includes/functions.phpで確認することができます。

設定画面
入力画面での表示

画像

画像をアップロードできるフォームを作ることができます。

設定画面

プレビューサイズは、画像をアップロードした際に入力画面で表示される画像サイズになります。

入力画面での表示

設定画面で設定したサイズでプレビュー画像が表示されます。

WYSIWYG

ビジュアルエディタを使うことができるテキストエリアを作ることができます。

設定画面

デフォルトの項目にHTMLタグを指定しておくと、入力画面でも反映されます。

入力画面での表示

その他のフィールド

カラーピッカー

色を選ぶことができるフィールドを作ることができます。
カスタムフィールドには16進数での色コードが格納されます。

設定画面

デフォルトで選択した色(または色コード)が入力画面での初期色になります。

入力画面での表示

色を選択のボタンを押すとカラーピッカーが表示されます。

日付ピッカー

日付を選ぶことができるフィールドを作ることができます。
カスタムフィールドには指定したフォーマットで日付が格納されます。

設定画面

デフォルトで指定した日付が入力画面での初期値になります。
デフォルトの日付を指定する場合は、その下設定項目である「日付のフォーマット」とフォーマットを同じように揃えてください。

日付のフォーマットはどのような形で日付を格納するかを決めます。
yyは年、mmは月、ddは日を表します。2017/04/01というフォーマットにしたい場合は、「yy/mm/dd」と入力します。

最大日付と最小日付は、日付の入力範囲を決めることができます。基準は今日です。
+1yとすると、今日から1年先まで入力でき、+1mとすると1ヶ月先まで、+1dとすると1日先まで入力が可能になります。
+を-に変えると、過去の指定をすることができます。

入力画面での表示

日付の項目をクリックすると、カレンダー形式の日付ピッカーが表示されます。

関連する投稿

関連する投稿を選択できるフォームを作ることができます。
カスタムフィールドには投稿IDが格納されます。複数選択ができる場合は配列になります。

設定画面

投稿タイプは、関連する投稿に表示する投稿タイプを選択します。固定ページにのみチェックを入れると、固定ページのみが選択肢として表示されます。

選択できる個数は、関連する投稿の選択数を決めます。2にすると2つ以上選択することはできなくなります。この項目を指定せずにおくと、いくつでも選択することができます。

入力画面での表示

左が投稿の一覧で、クリックすると右のボックスに入り選択状態になります。
右のボックスの投稿それぞれの右上にある「-」を押すと削除できます。

関連するターム

関連するカテゴリ・タームを選択できるフォームを作ることができます。
カスタムフィールドにはカテゴリID、またはタームIDが格納されます。複数選択ができる場合は配列になります。

設定画面

タクソノミーは、関連するタームに表示させるタクソノミーの種類を決めます。タグにのみチェックをいれると、タグのみが選択肢として表示されます。

選択できる個数は、関連するカテゴリ・タームの選択数を決めます。2にすると2つ以上選択することはできなくなります。この項目を指定せずにおくと、いくつでも選択することができます。

入力画面での表示

左がカテゴリ・タームの一覧で、クリックすると右のボックスに入り選択状態になります。
右のボックスの投稿それぞれの右上にある「-」を押すと削除できます。

表示条件を指定して、カスタムフィールドの表示を限定する

つくったカスタムフィールドをすべてのページに表示したい場合を除いて、表示設定を指定します。表示設定の設定欄はSCF作成画面の左側にあります。

表示条件(投稿)

投稿にチェックをいれると、作ったカスタムフィールドは投稿にのみ表示されます。同様に固定ページにチェックをいれると、固定ページにのみ表示されるようになります。

また、あるページにのみ表示させたい場合は、投稿IDにページIDを入れるとそのページにのみ表示されます。

表示条件(プロフィール)

ユーザーのプロフィールページに表示をさせ、権限によって表示させるかどうかを判定します。

  • Administrator…管理者
  • Editor…編集者
  • Author…投稿者
  • Contributor…寄稿者
  • Subscriber…購読者

入力画面での表示

表示条件(タクソノミー)

タクソノミーとは、カテゴリやタグなどを表します。 このカテゴリにチェックをいれると、カテゴリーの編集画面でカスタムフィールドが表示されます。

入力画面での表示

表示条件(オプションページ)

カスタムフィールドを管理画面にメニューとして加えることができます。

functions.phpに以下の記述を追加します。

それぞれコメントアウトされているパラメータが順番に指定されています。実際の記述に沿って内容を紹介します。

  • ページタイトル…titleタグに表示されるページの名前です。
  • メニュータイトル…管理画面の左メニューに表示される名前です。
  • manage_options…メニューを操作できる権限です。通常このままで問題ありません。
  • theme-options…メニューのURLの一部、スラッグになるものです。固有の名前をつけてください、他と重複してはいけません。

上記を記述してアップロードすると、管理画面に以下のように表示されます。

チェックを入れて保存すると、管理画面のメニューとして追加されます。

入力画面での表示

  • 記事のタイトルとURLをコピー