JetEngineのMeta fieldsは、つまり『カスタムフィールド』を作成するツールです。
カスタムフィールドと言ってもただのカスタムフィールドではありません。
JetEngineではACF Extended Pro (Advanced Custom Fieldsの有料版）と同等、もしくはそれ以上の詳細なカスタムフィールドが作れます！
しかし、まずいったいどのようにMeta fieldsを操作すればいいのかよくわからない！という方が多いのではないでしょうか。
以前に【JetEngineでカスタム投稿タイプとカスタムフィールドを作る方法 – Crocoblock】という記事でカスタムフィールドを追加する方法を解説しました。
実際に上記の記事だけではMeta fieldsの詳しい機能設定、カスタムフィールドをJetEngineでレイアウトしていく方法までは書かれていないので、そのことを知りたい場合はこの記事をお読みください！
Meta fieldsでカスタムフィールドの作成方法、各機能の説明を実際にデモンストレーションしながら以下のセクションでくわしく説明していきます！
JetEngineのことをもっと学びたい人は、どうぞJetEngineの使い方完全ガイドを見てください。
様々なJetEngineに関する情報がまとめられています。
また、JetEngineを動画で学ぶページもありますのでどうぞ活用してくださいね！
- JetEngineの全18種類の多様なフィールドタイプでカスタム投稿タイプを自分好みのUIで構築できる。
- カスタムフィールドのレイアウトは主に『Meta fieldの項目の配置』と『 Field widthでフィールド幅の調整』で決まる。
- タブのタイトルにしたいMeta fieldはObject Typeを『Tab』にするだけで簡単にカスタムフィールドをタブで仕分けることができる。
カスタムフィールドの追加の仕方（クイック説明）
Meta fieldsでカスタムフィールドを追加する方法は【JetEngineでカスタム投稿タイプとカスタムフィールドを作る方法 – Crocoblock】の記事で説明をしましたが、ここではおさらいとしてサラッと説明します。
- 『New Meta Field』をクリック
- 『Label』を記入：日本語でもローマ字でもOK
- 『Name/ID』を記入：半角数英小文字と`-` または`_`※Label（ラベル）と関連したワードを入れましょう。
- 『Field type』を選択：Field typeの種類についてはField type（フィールドタイプ）の種類のセクションをご覧ください。
- 『Update Post Type』をクリック
これで1つのフィールドができます。
必要なカスタムフィールドの項目の数だけ上記の手順を繰り返し行います。
こちらは以上の手順でカスタムフィールドの項目を以下のように追加した後のMeta fieldsの表示画面です。
| Label | Name/ID | Field type |
| 説明 | description | textarea |
| 車のメーカー | car_maker | radio |
| 車種 | car_type | text |
| 年式 | years | text |
| 色 | color | radio |
| タイプ | type | radio |
| エンジン | engine | radio |
Field typeにつきましては『Field type（フィールドタイプ）の種類』のセクションにてくわしく説明しています。
こちらは実際の投稿ページのエディターに表示されたカスタムフィールドです。
Meta fieldsで配置されている通りの順番でカスタムフィールドに項目が配置されます。
しかし、これではたくさん項目を増やせば増やすほど画面のスクロールが必要になり、少々使いづらいですね。
実際に、車種や年式のフィールドに『text』のフィールドタイプを使用していますが、画面の幅いっぱいに文字を書き込むことはしないと思います。
また、色 / タイプ / エンジンのクリックでリストから選択するタイプ（フィールドタイプ：radio)もどうせなら同じ横のラインに配置できればスペースの節約もでき、見た目にスッキリすると思いませんか？
このようなレイアウトになってしまうのは『Field Width』（フィールド幅）の設定がデフォルトで『100%』になっているからです。
ですのでフィールドのレイアウトの変更はField Widthを変更することにより行うことができます。
※Field Widthについては『Field Widthで各フィールドの幅を調整・配置できる』のセクションでくわしく説明しています。
カスタムフィールドのレイアウトのカスタマイズ方法
JetEngineのカスタムフィールドは各フィールドを変更したりして、自分好みのUIにレイアウトすることができます。
Field Widthで各フィールドの幅を調整・配置できる
『Object type』を『Field』に設定したMeta Fieldは設定のオプションに必ず『Field width』（意味：フィールドの幅）が表示されます。
この『Field width』の値は以下のオプションから選択が可能です。
- 100%（デフォルト）
- 75%
- 66.6%
- 50%
- 33.3%
- 25%
Field widthのデフォルトは100%に設定されており、上記画像の矢印で記した幅（画面いっぱいの横幅）になります。
複数のフィールドを横一列にまとめる方法
例えばこのサンプルのカスタムフィールドに『車種』と『年式』が上下で隣り合って配置されています。
プレイスホルダーの幅も縮めて2つを横1列に並べたい、という場合はこれらのField widthをそれぞれ『50%』、またはそれ以下の値にします。
すると上記画面のように『車種』と『年式』のフィールドが2つ隣り合って配置されました。
隣り合ったフィールド同士のField widthの合計が100%またはそれ以下の値であれば自動的に横一列に配置されます。
ちなみに3つのフィールドを横1列に配置したい場合は隣り合った3つのフィールドのField widthをそれぞれ33.3%にします。
Field type（フィールドタイプ）の種類と機能
JetEngineのフィールドタイプは全部で18種類あります。
各機能を以下で紹介します。
Text
『Text』は文字通り、テキストを手動で入力するタイプのフィールド（プレイスホルダー）です。
短いテキストを入力したい時に適しています。
Character limit
『Character limit』は入力できる文字数の上限を設定できます。
文字数の上限を設定する場合はCharacter limitのフィールドに上限にしたい数字を半角で記入します。
特に記入をしない場合は文字数の上限が無限になります。
Date
『Date』は日付の選択ができるフィールドタイプです。
見た目はテキストのフィールドタイプと同じですが、フィールドをクリックすると上記のようにカレンダーが表示され、そこから日付選択をすることができます。
カレンダーより日付を選択すると、上記のようにカスタムフィールドには2021-11-26と、『yyyy-mm-dd』で表示されます。
しかし、実際にElementorでJetEngineを使用してこのカスタムフィールドのDateを呼び出すと日付のフォーマットは『November 26, 2021』（F j, Y)で表示されます。
なお、その日付の表示フォーマットのデフォルトは Elementorのデフォルトが優先されでWordPressの設定ので設定した日付フォーマットは無視されます。
しかし、Elementorのエディターで日付のフォーマットは自由に変更が可能ですのでご安心ください。
Time
『Time』は時間を入力するフィールドです。
こちらはフィールドをクリックしてもエディターは出てきませんので、手動で入力してください。
Datetime
『Datetime』は日付の設定と時間の設定の両方が行えるフィールドです。
『Datetime』のフィールドをクリックすると上記のように日付を選択するカレンダーと、時間を設定するエディターが表示されます。
カレンダーの日付をクリックで選択し、Hour/Minutsのカーソルをスライドさせて時間の設定をすることができます。
フィールドには『yyyy-mm-ddT◯◯:◯◯』と表示されます。
※手動入力での訂正も可能です。
ちなみにこのフォーマットはそのままElementorの画面上でも反映します。
Textarea
『Textarea』は大きめのプレイスホルダーのフィールドです。
例えば、改行を要するような説明文を入力する時になどに適しています。
Character limit
『Character limit』の説明、設定方法につきましては『TextのCharacter limitのセクション』を参考にしてください。
WYSIWYG
『WYSIWYG』は上記のようなWYSIWYGエディターをカスタムフィールドに表示することができます。
WYSIWYGエディターは右下の角をドラッグしながら上下に動かすことでフィールドのサイズを変えることができます。
Switcher
『Switcher』は何かを『ON/OFF』で切り替えることのできるスイッチを表示させることができます。
Checkbox
『Checkbox』は項目のリストの横にチェックボックスが表示される選択式のフィールドです。
Checkboxを追加するには以下の操作を行ってください。
①New Field Optionをクリック
フィールドタイプで『Checkbox』を選択するとMeta Fieldの編集オプションに『New Field Option』が表示されますのでそちらをクリックします。
② Option ValueとOption labelを記入
New Field Optionをクリックすると1つのField Optionが追加され、以下の編集項目が表示されますので各項目を編集します。
- Option Value：半角数英小文字で記入
- Option label：チェックボックスに表示させたい名称
- Is checked (selected)：オンにすると、デフォルトでチェックボックスにチェックがついた状態で表示されます。（サンプルではオフのままにします）
Field Optionはリストの項目1つにつき、1つのField Optionを作成します。
上記は3つのField Optionを作成した後の表示画面です。
以下はカスタムフィールドの表示画面です。
3つのチェックボックスが表示されました。
選択式のリストを作るに覚えておきたい”Glossaries”
JetEngineのダッシュボードにある『Glossaries』（グロッサリー）という機能をご存知ですか？
Glossariesは簡単に言うと選択式のリストのテンプレートのようなもので、Glossariesで作成したリストがサイト全体のどの投稿タイプにも呼び出すことができ、何度でも使用が可能です。
Field Optionでリストを作成するとそのフィールドのみでしか使用することができませんので、よく使うリストや、例えば47都道府県の大きな選択枠のあるリストを作成するときなどにGlossariesの機能を活用すると作業時間も短縮につながりますね。
Glossariesのくわしい使い方については『Glossariesの使い方-サイト全体で使い回せる選択式フィールドのリスト【JetEngine】』の記事を別に用意しましたのでそちらをご覧になってくださいね！
なお、Checkboxはデフォルトで複数の項目の選択が可能になります。
Checkbocの設定にあるAllow CustomとSave Customの機能にについては、『Radio』のセクションの『Allow Custom』『Save Custom』でくわしく説明をしています。
Iconpicker
『Iconpicker』では、多種多様なアイコンリストの中から選択したアイコンを表示させることができます。
Media
『Media』は文字どおりメディアを挿入することができるようになります。
『CHOOSE MEDIA』というボタンが追加されますのでそちらをクリックでメディアライブラリからメディアを追加が可能です。※アップロードも可能。
仕様は他のWordPressのメディアライブラリとまったく同じです。
Gallery
『Gallery』はフォトギャラリーを追加することができます。
Mediaと同じように『CHOOSE MEDIA』が表示され、メディアライブラリから画像を選択またはアップロードで追加ができます。
Radio
『Radio』はリストの中からクリックして項目を選択するタイプのフィールドです。
こちらは『Checkbox』と似たような機能ですが何が違うかと言うと、Checkboxはリストから複数の項目が選択可能なのに対し、Radioで選択できるのは1つの項目のみです。
Radioをカスタムフィールドに挿入するには、『Field type』を『Radio』に設定すると『New Field Option』が表示されますのでそちらをクリックしてリストの項目を追加していきます。
Radioのリストの項目を作る方法は『Checkbox』で説明したNew Field Optionでリストを追加する方法とまったく同じですので、そちらを参考にしてください。
Allow Custom
『Allow Custom』をオンにすると、リストに該当する項目がなかった場合、ユーザーが項目をカスタムで追加することができます。
Save Custom
『Save Custom』の機能はAllow Customをオンにすると表示されます。
Save CustomはユーザーがAllow Customで追加した機能を使ってリストを追加した場合、自動的に『Option Field』にリストの項目が追加されるようになります。
例えばユーザーがカスタムの選択枠に『黒』と追加したとします。
すると、Meta fieldのエディターの『Field Option』に自動で『黒』が追加されました。
Repeater
『Repeater』は多種多様な設定が可能なため一言で説明するのはむずかしいですが、例えばユーザーに何かを質問や選択をさせるようなシチュエーションで、入力により回答を得られ、さらに同じ質問に対して複数の回答をさせることもできる機能を持っています。
『Repeater』をカスタムフィールドで使用するには Meta Fieldで各種設定が必要になりますので、その方法を以下のセクションにて説明します。
①New Repeater Fieldを追加する
Field typeを『Repeater』に設定すると、エディター内に『New Repeater Field』と表示されますのでそちらをクリックします。
すると以下のフィールド（Repeater Field）が追加されます。
以下の設定を行います。
- Label：例えばユーザーから質問に対しての回答を得るようなカスタムフィールドにしたい場合はここに質問文を記入します。
- Name：半角数英小文字でLabelに関連するワードを記入します。
- Type：16種類のフィールドタイプからの選択が可能です。
なお、Repeater Fieldはいくらでも追加することが可能です。
この記事のサンプルではTypeで『Text』を選択しましたが、他のタイプも組み合わせたりすれば何通りもの有用性のある機能を作ることができそうですね！
Select
『Select』はリストから項目を選択するタイプのフィールドですが、CheckboxやRadioのようにリストの全ての項目がカスタムフィールドに表示されるわけではなく、クリックでフィールドを開けるとリストが表示され、そこから項目を選択できるタイプのフィールドです。
なお、デフォルトの設定ではリストから1つの項目しか選択ができませんが『Multiple』の設定で複数の項目を選択することも可能になります。
SelectはRadioに比べてリストの項目が多い場合にスペースの節約になり、カスタムフィールドの見た目をスッキリさせることができそうですね。
『Select』のリストの項目の追加の仕方は『Checkbox』のセクションで説明したNew Field Optionでリストを追加する方法とまったく同じですので、そちらを参考にしてください。
Placeholder
『Plaeholder』は記入した文字がSelectのフィールド（セレクター）の一番上に表示されます。
例えば『支店名を選択してください。』とPlceholderに記入します。
すると、上記の画像のように『支店名を選択してください。』Placeholderで記入したことの下に各選択項目が表示されました。
これが一体何に対する選択なのかが一目瞭然になりますね。
Multiple
『Multiple』はリストから複数の選択を可能にする機能です。
上記はMultipleを『オン』にしたのときのカスタムフィールドの表示画面です。
選択した項目がフィールドの上部にすべて表示されます。
※Placeholderを記入していた場合、MultipleをオンにするとPlaceholderは自動的に表示されなくなります。
Number
『Number』は数字を入力することができるフィールドです。
フィールドの右側の矢印をクリックすることにより数字を増減させることもできますが、フィールドに直接入力することもできます。
Min valueは数字の下限を設定できる
『Min value』 は入力する数字の下限を設定することができます。
例えばMin valueを『0』に設定すると0以下の数字は設定できなくなります。
Max valueは数の上限を設定できる
『Max value』は入力する数字の上限を設定することができます。
例えばMax valueを『100』に設定したら100以上の数字は入力できなくなります。
Step valueは設定した数字の倍数でカウントされる
『Step value』では、設定した数字の倍数で数字がカウントされます。
例えばStep valueを『25』で設定すると…-50/-25/0/25/50/75/100…と25の倍数刻みでカウントされます。
Colorpicker
『Colorpicker』はその名の通り、上記のカラーピッカーをカスタムフィールドに挿入することができます。
Posts
『Posts』では特定のページをカスタムフィールドに挿入できます。
フィールドに3文字以上入力するとページが絞り込まれたページタイトルが表示されますので該当するページをそこから選択します。
Search in post typesでさらに投稿タイプを絞り込む
『Search in post types』でさらにフィールドで選択できる投稿タイプを絞り込むことができます。
Search in post typesの項目をクリックすると上記のリストが表示されますのでそこから必要な投稿タイプのみを選択します。
例えばリストより『投稿』『固定ページ』『車』を選択すると、フィールドでそれらの中で作成されたページのみ選択可能になります。
Multiple
Multipleの機能については『SelectのMultiple』のセクションを参考にしてください。
HTML
『HTML』はカスタムフィールドをコードで作成したい場合に使用します。
Field typeをHTMLに設定するとエディターに『HTML Code』という項目が追加されます。
そこに書いたコードがカスタムフィールドへ反映されます。
ですので、いくらField typeをHTMLに設定してもコードを書かなければカスタムフィールドには何も表示されません。
ほとんどのMeta fieldエディターににある設定の説明
全18種類あるフィールドタイプのほとんどに以下の設定項目があります。
しかし、すべてのMeta fieldに上記の設定があるものもあれば、フィールドタイプによって何の設定機能があるかままちまちです。
各設定が一体どのようなものなのかは以下をご覧ください。
Description
『Description』はカスタムフィールドのラベルの下にそのフィールドの説明文を挿入することができます。
こちらはDescriptionを挿入した後のカスタムフィールドの表示画面です。
そのフィールドが一体何のための設定なのかをより詳細に記すことができますね。
Field width
『Field width』はカスタムフィールドの画面の横幅に対し、各フィールドの幅を%で設定するものです。
こちらの設定はカスタムフィールドのレイアウトに直結するもので、『Field Widthで各フィールドの幅を調整・配置できる』のセクションでField widthの使い方をくわしく説明していますのでそちらをご覧ください。
Default value
『Default value』は入力が可能なフィールドに、最初から何かを記入させた状態で表示させたいときなどに使用します。
例えば、電話番号を入力するフィールドなどで人によって市外局番から書く人もいれば書かない人もいますよね。
その場合にあらかじめガイドラインになるフォーマットがフィールドにあればユーザーによってばらけることもなくなります。
こちらは例として電話番号を入力すカスタムフィールドの項目で、Default valueに日本の国別番号の『+81』を入力しました。
Is required
『Is required』とは、必須項目のことです。
例えばユーザーに何かを記入してもらうようなフィールドに使用し、未記入だと次のステップに進めない仕組みになります。
Conditional Logic
『Conditional Logic』は、例えばユーザーに『はい/いいえ』で答えてもらうようなフォームで『はい』を選択した場合は追加質問を表示させ、『いいえ』の場合は質問がそれで終わるなど、ユーザーの回答次第でフォームを分岐させることのできる機能です。
こちらの機能の操作方法は別の記事でくわしく説明をしていきます！
カスタムフィールドを項目ごとにタブで分けることができる
カスタムフィールドも入力する項目が多くなればフィールドの数も多くなり、画面が縦に長くなります。
また、フィールドごとに情報をタブで仕分けすればよりわかりやすくスッキリしたになりますね。
以下は実際にカスタムフィールドを『（車の）基本情報』と『車のコンディション』という2つのタブに情報を整理してタブを分けた時のカスタムフィールドの表示画面です。
情報をタブで仕分けることにより、さらにフィールド自体の見た目もスッキリし、ユーザーも情報が散漫せずに使いやすくなったと思いませんか？
先に答えを言うと、『タブ（tab)』で設定された1つのMeta fieldの下にそのタブに該当するカスタムフィールドをドラッグ＆ドロップで配置するだけです。
Meta fieldをタブ（tab)に設定する方法は以下のセクションをご覧ください。
タブの作り方-5ステップ
タブを作成する手順は全部で5ステップです。
①New Meta Fieldをクリック
タブを作成するにはまず新しいMeta Fieldを作成する必要があります。
Meta fieldsの一番下の『New Meta Field』をクリックします。
②Label(ラベル)を記入
『Label』(ラベル）を記入します。
このラベルはタブのタイトルとしてカスタムフィールドに表示されるものです。
日本語入力も可能です。
③Name/IDを半角英数字で記入
『Name/ID』を半角数英小文字と `-` または`_` の記号で記入します。
ここまでは他のフィールドの作成の仕方と特に変わりません。
④Object typeでTabを選択
『Object type』で『Tab』を選択します。
⑤タブの中に表示させたいフィールドの上にタブのオブジェクトをドラッグ＆ドロップで配置
作成したタブの中に配置したいフィールドのMeta Fieldの上にドラッグ＆ドロップでそのタブのMeta Fieldを配置します。
各Meta Fieldはドラッグ＆ドロップにより自由に配置の変更ができますので、とにかく『タブのMeta Fieldの下にそのタブに該当するフィールドのMeta Fieldが来る』ようにします。
別のタブを作成する時も上記のステップ①〜⑤の手順で作成します。
タブ仕分後のMeta fieldsの全体図
このサンプルではタブを大きく2つに分けて作成しました。
Object typeを『タブ』に設定したMeta Fieldは、タブ内のカスタムフィールドよりも少し手前（左側）に出ているのがわかると思います。
上記の『車の投稿タイプ』のMeta fieldsでレイアウトしたものが実際に以下のようなカスタムフィールドのになりした。
なお、タブは何個でも作成することが可能です。
まとめ
- JetEngineで作るカスタムフィールドは全18種類の多種多様のフィールドタイプと設定で、サイト機能を大幅に拡張できる。
- Field widthでフィールド幅の調整をすれば複数のフィールドを横一列に配置することができ、カスタムフィールドのスペース節約になり、見た目もスッキリする。
- カスタムフィールドの情報量が多い場合はタブで分けるとさらなるスペース節約と、画面をスクロールする手間・管理も省ける。
この記事でJetEngineの基本的なカスタムフィールドのUIの作り方、どのようなフィールドタイプがあるのか、またその機能は一体何なのかをを紹介しました。
自分にとって使いやすいレイアウト、JetEngineの便利な機能を知ることはWeb制作の効率をぐんと高めることができますね。
JetEngineは全てが英語で書かれているから少し混乱するかもしれませんが、基本的な操作を覚えさえしてしまえば、あとは他のMeta Boxなどで応用するだけです。
JetEngineを制するものNoCodeを制す、とは案外そのとおりかもしれませんよ！
JetEngineのカスタム投稿タイプ、カスタムフィールドの基本設定として『Labels』と『 Advanced Settings』もあります。
これらは主にカスタム投稿タイプのエディターのUIを決定していくものですが、こちらもサイトのUIの設定になりますのでよかったら『JetEngineのLabelsとAdvanced Settingsの設定方法』の記事も合わせてお読みくださいね！
この記事ではJetEngineのMeta fieldsだけに焦点を当て説明しましたが、 これだけでも機能がありすぎて’JetEngineもう、わけがわかんない！’ってなることがたまにあると思います。
そんなときはJetEngineの使い方完全ガイドをご覧ください！
JetEngineで一体何ができるのか、使い方から構造までを一挙に紹介しています。
きっと答えが見つかるはずですよ！