カスタムフィールドの各種設定

Toolset Typesプラグインでは、用途に応じた様々な種類のカスタムフィールドを簡単に作成して、WordPressの「投稿」や「固定ページ」はもちろん、カスタム投稿タイプで利用することができます。このページの前半では、カスタムフィールドグループの画面構成と基本操作について学び、後半では、作成可能なカスタムフィールドの種類と、そのオプションについて見ていきます。

カスタムフィールド作成の流れや、作成したカスタムフィールドの表示方法については、以下のページを参照してください。

カスタムフィールドグループとカスタムフィールドの関係

Toolsetでカスタムフィールドを使いこなすために知っておいていただきたいのが、カスタムフィールドとカスタムフィールドグループの関係です。どちらも似たような名前で紛らわしいのですが、以下の図のような関係になっています。

カスタムフィールドの各種設定

カスタムフィールドとカスタムフィールドグループの関係

このように、カスタムフィールドグループは、各投稿タイプにカスタムフィールドを簡単に割り当てる管理用の枠組みで、「入れ物」と言うよりはカスタムフィールド用のタグのようなものです。

したがって、他のカスタムフィールドグループに移動させることはもちろん、上記画像内のカスタムフィールド②や⑤のように、複数のカスタムフィールドグループに同じカスタムフィールドを所属させることもできます。また、カスタムフィールドグループを削除した場合は、グループだけが削除され、所属していたカスタムフィールドは削除されません。
※基本的には、いったんグループから外して、他のグループに追加し直す手順になりますが、上級者向けの操作としてカスタムフィールドの管理画面で所属先を変更させることも可能です。

実はもう一つ似たような名前で「繰り返しフィールドグループ」というものがあるのですが、こちらは、カスタムフィールドの特殊な形態と考えてください。

カスタムフィールドグループ(設定画面)の開き方

カスタムフィールドの各種設定

① 管理画面からToolsetのダッシュボードにアクセスします。

カスタムフィールドの各種設定

② 投稿タイプの一覧から設定を変更したいフィールドグループ名をクリックします。

管理画面左のToolsetのメニューから「Custom Fields」をクリックしても、カスタムフィールドグループの一覧を表示することができます。

設定画面の構成

設定画面は4つのセクションで構成されています。各セクションやカスタムフィールドのタイトル部分をクリックすると、オプションを開閉することができます。また、所属するカスタムフィールドのタイトルをドラッグすると順番を入れ替えることができます。

カスタムフィールドの各種設定

カスタムフィールド設定画面の構成

Settings for the fields group セクション

このセクションでは、カスタムフィールドグループの名前・説明・使用する場所を設定します。

Name(必須)
このカスタムフィールドグループの名前を設定します。日本語でもOKです。
Description(任意)
Add description と書かれたリンクをクリックすると、フィールドグループの説明をメモしておくことができます。
Appears on(設定を推奨)

このフィールドグループを使用する場所(=出現条件)を設定することができます。未設定だと、すべての投稿タイプの投稿編集画面でこのフィールドグループが表示されてしまうので、投稿タイプによって使用するカスタムフィールドを使い分ける場合は必ず設定しておきましょう。このオプションを設定または変更するには、「Edit」ボタンをクリックします。

カスタムフィールドの各種設定

フィールドグループの出現条件を設定する画面

Toolsetのダッシュボードからフィールドグループを新規作成した場合は、あらかじめ投稿タイプが設定されていますが、管理画面左のToolsetのメニューから「Custom Fields」をクリックしてフィールドグループを新規作成した場合の初期値は未設定なので注意しましょう。

Appears on の詳しい設定方法については以下のページにまとめました。
投稿編集画面でのカスタムフィールドとグループの出現を制御する

Save セクション

「Save Field Group」ボタンをクリックすることで、変更内容を保存します。ボタンの左にある「Delete」と書かれたリンクをクリックすると、カスタムフィールドグループを削除することができます。

前述のとおり、グループを削除しても、既に作成(定義)したカスタムフィールド自体は削除されません。作成したカスタムフィールドそのものを完全に削除する場合は、以下のページを参照してください。
カスタムフィールドの高度な管理

利用できるカスタムフィールドの種類とオプション

ここからは、Typesプラグインで作成できるカスタムフィールドの種類とオプションについて見ていきます。

共通の設定項目

具体的な種類の説明に入る前に、まず、すべての種類に共通の設定項目と、一部の種類に共通の項目について押さえておきましょう。

すべての種類に共通の項目
カスタムフィールドの各種設定

全てのカスタムフィールドに共通の項目部分

Field name(必須)
このカスタムフィールドの名前を設定します。日本語でもOKです。フィールドの入力フォームのラベルなどにも利用されます。
Field slug(必須)
カスタムフィールドのスラッグを英半角小文字で入力します。WordPressやToolsetのプラグインがデータベース内での処理をおこなう際に利用するカスタムフィールド名のベースになります。したがって他のカスタムフィールドのスラッグと同じものは設定できません。
Field type
ドロップダウンリストを使ってカスタムフィールドの種類を変更することができます。ただし、カスタムフィールドの種類によっては変更できないものがあり、その場合は候補がグレーアウトされています。なお、変更可能なものであっても、よほどの事情がない限りカスタムフィールドの種類を後から変更することは避けるべきです。
Description(任意)
このカスタムフィールドの説明や注意書きを記述できます。投稿編集画面にも表示されるので、サイトを複数人で運用する場合や、ユーザー向けのヘルプを表示させたい時に便利ですが、多用すると画面が鬱陶しくなるので注意しましょう。
一部の種類に共通の項目
Placeholder(任意)
フィールドの入力欄に、プレースホルダを表示します。次の「Default Value」とは異なり、プレースホルダはあくまでもヒントの表示に過ぎないので、カスタムフィールドのデータとして保存されることはありません。
※ 例えば、新規投稿作成時にタイトル欄に表示される「ここにタイトルを入力」のように、フィールドがブランクの時に表示されるテキストなどのこと
Default Value(任意)
カスタムフィールドに入力する値のデフォルト値を指定することができます。指定すれば新規投稿作成時に入力の手間を省くことができますが、デフォルト値とは異なる値を入力するべき場合に、値を変更し忘れる可能性を考慮に入れておきましょう。
Single or repeating field?
このカスタムフィールドを「繰り返しフィールド」として扱うかどうかを選択します。繰り返しフィールドにすると複数の値を格納することができるようになります。

Allow multiple-instances of this field(複数の値を許可)
This field can have only one value(フィールドの値は一つのみ。デフォルト値)

繰り返しフィールドについての詳細は以下のページを参照してください。
繰り返しフィールドを作成する

Validation – Required(任意)
チェックを入れると、このカスタムフィールドの入力を必須にすることができます。すぐ下の「Validation error message」に、入力しなかった場合に表示する文言を入力します(日本語OK)。
Include in search(任意)
チェックを入れると、テキストボックス、WYSIWYGエディタフィールド内に入力したテキストを、サイト全体のテキスト検索対象に含めることができます。
Conditional display(任意)
このオプションを設定すると、指定したの条件がそろった時のみ、このカスタムフィールドの入力欄を表示させることができます。活用方法など詳しくは以下を参照してください。
カスタムフィールドの表示の個別制御

Audio(音声ファイル)

音声ファイル用のカスタムフィールドです。投稿編集画面で音声ファイルを指定するためのボタンが提供されます。音声ファイルフィールドを使うと、投稿用エディタ等の「Fields and Views」ボタンからフィールドを挿入する際、プレーヤーを一緒に埋め込むことができます。

カスタムフィールドの各種設定

① Select audio ボタンをクリックします。

カスタムフィールドの各種設定

② サウンドファイルを指定します。

対応するファイル形式は、WordPressが標準で取り扱える音声ファイルと同じ(mp3、m4a、ogg、wav、wma)です。

Checkboxes(複数チェックボックス)

複数の選択肢を用意してチェックできる複数チェックボックスを提供します。ついつい使いたくなるのですが、Viewプラグインなどで格納されたデータを活用する際に、やれることの制限が多いので、特に初心者の方は次の単一チェックボックスの利用をお勧めします。

複数チェックボックス固有の設定項目は大きく2つあり、未チェックの項目に0を保存するかどうかの選択と、選択肢ごとのタイトルと値です。画像で見てみましょう。

カスタムフィールドの各種設定

複数チェックボックスに固有の設定項目

ちなみに私が複数チェックボックスを使う場合、「未チェック時に0を保存する」のと、各選択肢の値は「1」にして、フィールド値を0と1で管理することが多いです。

カスタムフィールドの各種設定

例えば、選択肢を3つ作成すると…

カスタムフィールドの各種設定

投稿編集画面ではこのように表示されます。

前述のとおり、複数チェックボックスは、設定項目で選択肢の表示順序を並べ替えることができますが、実際に投稿でフィールド値を保存した後に、この順番を並べ替えてはいけません。複数チェックボックスのカスタムフィールド値は、「1,0,1,…」のような単純配列で保存されているので、投稿にフィールド値を保存した後に、設定で選択肢の順番を並べ替えてしまうとチェックがあべこべになってしまいます。

Checkbox(単一チェックボックス)

シンプルにON・OFFを管理できる単一チェックボックスを提供します。活用方法は様々ですが、私は値をキーにして条件を作成し、投稿内のコンテンツの表示を切り替えたりするのによく使います。複数チェックボックスを使いたい場面でも、単一チェックボックスを複数用意して運用する方が、Viewを使ってカスタム検索を作成する時に、データを扱いやすいように思います。

単一チェックボックス固有の設定項目も、複数チェックボックスのそれと基本的には同じですが、選択肢という概念がないので、選択肢の追加や並べ替えは出来ません。

カスタムフィールドの各種設定

単一チェックボックス固有の設定項目

私が単一チェックボックスを使う場合、「未チェック時に0を保存する」のと、値は「1」にして、フィールド値を0と1で管理することが多いです。

Colorpicker(カラーピッカー)

カラーピッカー(色選択用のパレット)を使って、HTML用のカラーコードを入力できる機能を提供します。例えば、商品紹介用のカスタム投稿タイプで、商品画像の下にカラーバリエーションを表示させたい時などに使えます。CSSの色指定でカスタムフィールド値を参照させれば、コンテンツ内の要素の色を投稿ごとに変えるといった活用方法もあります。

カスタムフィールドの各種設定

投稿編集画面でのカラーピッカーの表示例

カスタムフィールドの各種設定

カラーピッカーを使ったカスタムフィールドの活用例

Date(日付・日時)

カレンダー(年月日選択用のパレット)を使って、日付や日時を入力できる機能を提供します。なお、画面上では日付の形式で表示されますが、フィールド値はUNIXタイムスタンプで保存されます。

日付用カスタムフィールド固有の設定項目としては、入力形式(日付のみ or 日付+時間)の選択と、日付形式の検証(バリデーション)があります。ただし日付や時間は、手入力ではなくパレットを使って入力するのでバリデーション機能はあまり意味がなさそうです。

カスタムフィールドの各種設定

日付フィールドに固有の設定項目

カスタムフィールドの各種設定

投稿編集画面での表示例。設定で、日付+時間を選択した場合は、時間指定用のドロップダウンメニューが表示されます。

Email(電子メール)

電子メールアドレス用の入力フィールドを提供します。見た目は通常のテキストフィールドと同じですが、電子メール用フィールドでは、固有の設定項目としてメールアドレス形式の検証(バリデーション)が利用できるほか、ブラウザによっては、投稿編集画面で電子メールフィールドを検知すると、フォームの自動入力が利用できます。

カスタムフィールドの各種設定

電子メールフィールドに固有の設定項目

カスタムフィールドの各種設定

Chromeブラウザが、電子メールフィールドや電話番号フィールドを検知して自動入力が機能しているところ。

Embedded Media(埋め込みメディア)

YouTubeなどの再生ページのURLを格納する埋め込みメディア用のフィールドを提供します。埋め込みメディアフィールドを使うと、投稿用エディタ等の「Fields and Views」ボタンからフィールドを挿入する際、プレーヤーを一緒に埋め込むことができます。なお、このフィールド固有の設定項目としてURL形式のバリデーションが利用できますが、あくまでもURL形式の検証のみで、動画再生ページのURLかどうかを検証することは出来ません。

カスタムフィールドの各種設定

埋め込みメディアフィールド固有の設定項目

カスタムフィールドの各種設定

埋め込みメディア挿入時のオプション画面。プレーヤーの埋込みやサイズを指定できます。

埋め込みメディアに対応するサイトなどの詳細は、WordPress Codex を参照してください。

File(添付ファイル)

添付ファイル用のカスタムフィールドで、投稿編集画面で添付ファイルを指定するためのボタンが提供されます。

サイト内にあるフロントエンドでの内容表示を目的としないファイルを格納したい場合に使用しますが、あえてメディアファイルを指定することも可能です。添付ファイルフィールドを使うと、投稿用エディタ等の「Fields and Views」ボタンからフィールドを挿入する際、添付ファイルのリンクを簡単に作成できます。
※ 例えばPDFやZIPファイルなど

なお、投稿編集画面での基本的な操作方法は、前述の音声ファイル用フィールドと同じです。

Image(画像)

画像ファイル用のカスタムフィールドです。投稿編集画面で画像ファイルを指定するためのボタンが提供されます。添付ファイルフィールドを使うと、投稿用エディタ等の「Fields and Views」ボタンからフィールドを挿入する際、画像専用の出力オプションが利用できます。

なお、投稿編集画面での基本的な操作方法は、前述の音声ファイル用や添付ファイルフィールドと同じです。

Number(数値)

数値格納用のカスタムフィールドを提供します。固有の設定項目として数値用のバリエーションが利用できるので、数字以外の文字列や全角数字などを使った不正入力を防止することができます。なお、数値フィールドでは、桁区切り(カンマ)を使いません。小数点(ピリオド)はOKです。フロントエンドに桁区切り付きの数値を表示させるには JavaScript を使って実現します。

カスタムフィールドの各種設定

数値フィールド固有の設定項目

カスタムフィールドの各種設定

バリデーション(検証)を有効にした場合の動作例

Phone(電話番号)

電話番号用の入力フィールドを提供します。見た目は通常のテキストフィールドと同じですが、ブラウザによっては、投稿編集画面で電話番号フィールドを検知すると、フォームの自動入力が利用できます。

Radio(ラジオボタン)

複数の選択肢を用意して、そのうちの1つを必須選択させるラジオボタンを提供します。一見すると、複数チェックボックスに似ていますが、選択できる項目とフィールドに保存される値は常に1つだけである点が大きく異なります。
※ 新規投稿時に未選択であっても、一度選択すると、すべてを未選択の状態に戻すことは出来ず、いずれか一つが選択状態になります。

ラジオボタン固有の設定項目は選択肢ごとの設定と表示方法です。画像で見てみましょう。

カスタムフィールドの各種設定

ラジオボタンに固有の設定項目

ラジオボタンに保存されるフィールド値は、複数チェックボックスのように配列で保存されるわけではないので、各選択肢のフィールド値はユニークな値にします。上記の画像でいえば、「Option title 1」のフィールド値と「Option title 2」のフィールド値をどちらも「1」にすることは出来ません。

このことから、ラジオボタンでは、実際に投稿でフィールド値を保存した後に、設定項目で選択肢の順番を並べ替えても複数チェックボックスのような問題は発生しません。

ラジオボタンの設定例と投稿編集画面での表示例は以下のとおりです。

カスタムフィールドの各種設定

例えば選択肢を2つ作成すると…

カスタムフィールドの各種設定

投稿編集画面ではこのように表示されます。

Select(ドロップダウンリスト)

複数の選択肢を用意して、そのうちの1つを選択させるドロップダウンリストを提供します。ドロップダウンリスト内に選択肢が隠れるので、投稿編集画面をスッキリさせるメリットがあります。構造的にはラジオボタンに似ていますが、ラジオボタンと異なり、「未選択(not set)」状態を選択肢として利用できます。なお、投稿用のドロップダウンリストでは複数の候補を同時選択することはできません。

ドロップダウンリスト固有の設定項目は選択肢ごとの設定だけです。画像で見てみましょう。

カスタムフィールドの各種設定

ドロップダウンリストに固有の設定項目

ドロップダウンリストもラジオボタンフィールド同様、各選択肢のフィールド値はユニークな値にします。上記の画像でいえば、「Option title 1」のフィールド値と「Option title 2」のフィールド値をどちらも「1」にすることは出来ません。また、実際に投稿でフィールド値を保存した後に、設定項目で選択肢の順番を並べ替えても複数チェックボックスのような問題は発生しません。

ドロップダウンリストの設定例と投稿編集画面での表示例は以下のとおりです。

カスタムフィールドの各種設定

例えば選択肢を2つ作成すると…

カスタムフィールドの各種設定

投稿編集画面ではこのように表示されます

ちなみに、必須入力させたい場合(=「未選択(not set)」を使わせたくない場合)は、共通の設定項目である「Validation – Required」にチェックを入れます。

Skype(スカイプ)

Skypeアカウント格納用のカスタムフィールドです。Skypeフィールド使ってフロントエンドに表示させると、該当アカウントに直接連絡がとれるSkype用のGUIが提供されます。
Skype用フィールドは、再設計中で Typesプラグインの今後のバージョンで刷新されるようです。現状ではこのカスタムフィールドの使用は控えた方が良いでしょう。

公式サポートフォーラムでの Skypeフィールドに関するトピック

Multiple lines(複数行テキストボックス)

複数行入力可能なテキストボックスフィールドを提供します。後述のWYSIWYGエディタのようなリッチな編集画面ではありませんが、HTMLタグを使った記述は可能です。次の1行テキストボックスよりも投稿画面での入力エリアが広く、必要に応じて広げることができます。

カスタムフィールドの各種設定

複数行テキストボックスと1行テキストボックスの違い

Single line(1行テキストボックス)

1行のみ入力可能なテキストボックスフィールドを提供します。投稿編集画面での専有面積が少ないので、保存したいテキストが収まるのであればこちらを利用することで、編集画面をスッキリさせることができます。

URL

URL用の入力フィールドを提供します。URLフィールドを使うと、投稿用エディタ等の「Fields and Views」ボタンからフィールドを挿入する際、URLへのハイパーリンクを、リンク先を開くときの動作設定を含めて簡単に作成できます。

Video(動画)

動画ファイル用のカスタムフィールドです。投稿編集画面でサイト内の動画ファイルを指定するためのボタンが提供されます。動画ファイルフィールドを使うと、投稿用エディタ等の「Fields and Views」ボタンからフィールドを挿入する際、プレーヤーを一緒に埋め込むことができます。
※ 対応するファイル形式は、WordPressが標準で取り扱える音声ファイルと同じ(mp4、m4v、ogv、webm、wmv、flv)です。

カスタムフィールドの各種設定

動画フィールド挿入時のオプション画面。プレーヤーのサイズ、動画のカバー画像、ループ、自動再生などの設定がおこなえます。

WYSIWYG(エディタ)

投稿編集画面の本文用エディタと同じWYSIWYGエディタを使って、コンテンツを入力できるフィールドを提供します。複数行テキストボックスや1行テキストボックスでの入力環境が適切でない場合はこちらを利用すると良いでしょう。場合によっては、WYSIWYGエディタフィールドを使うよりも、別途カスタム投稿タイプを作成した上で、次の投稿参照フィールドを使うなどの代替方法も検討してみてください。

カスタムフィールドの各種設定

WYSIWYG フィールドの投稿編集画面での表示例。
※WordPress4.9.8 + Types 3.2.1

Post Reference(投稿参照)

このカスタムフィールドであらかじめ参照先の投稿タイプを設定すると、編集中の投稿から参照先の投稿を1つ指定することができます。エディタの「Fields and Views」ボタンを使って、参照先の投稿に所属するフィールドを簡単に本文に挿入することもできます。

カスタムフィールドの各種設定

投稿参照の仕組み

上の画像は、投稿参照フィールドが参照する投稿からカスタムフィールド等の値を取り出すまでの仕組みと手順を示したものです。

  • 編集中のカスタムフィールドグループの「Settings for the fields group」セクションの「Appears on」で、参照になる特定の投稿タイプを指定します(上記画像内)。
  • 投稿参照フィールドの設定項目で参照となる投稿タイプを指定します(上記画像内)。
  • 投稿編集画面でフィールド値(実際に参照する投稿)を指定します(上記画像内)。

「投稿」を参照元投稿タイプ、「固定ページ」を参照先投稿タイプとした場合を例として、実際の画面で見てみましょう。

カスタムフィールドの各種設定

参照元投稿タイプの指定と参照先投稿タイプを指定します。

カスタムフィールドの各種設定

投稿編集画面で、参照先の投稿を指定します。

Toolset JP Guide

ページ上部へ戻る