Elementor最強の拡張プラグイン、CrocoblockのJetEngineの使い方を説明したページです。
JetEngineとは
JetEngineとはWordPressのプラグインです。
そしてCrocoblockが展開するJetプラグイン全20種類の中の1つです。
数あるJetプラグインの中でもJetEngineはJetプラグインの根幹とも言えるプラグインです。
JetEngineでできること(一部)
JetEngineでできることが多すぎて、全部は書ききれませんが、メジャーな機能はこれらです。
- CPT UIと同じようにカスタム投稿タイプが作成できる
- ACF(有料版)と同等以上のレベルのカスタムフィールドが作成できる
- カスタムタクソノミーが作成できる
- 投稿タイプの一覧をElementorやグーテンベルグを使って自由に表示できる
- 複雑なフォームを作れる
- 投稿タイプ同士を繋げられる
- 投稿タイプのフィールドに住所を設定すればGoogleマップ上に表示可能
- 投稿タイプのフィールドからチャートを作成可能
- ユーザーが自分でお気に入りリスト作る機能など簡単に作れる
- 再利用可能なリストを作成してそれを使用できる
- 文字を簡単にQRコードにできる
JetEngineの値段
JetEngineは単品で購入することも可能ですが、JetEngineを含むCrocoblock全てのプラグインが使用可能なセットプランなどもあります。
また、サポートするサイト数や使用期限などにより価格も変動します。
JetEngine単品の価格
JetEngineの値段は、1サイトで年間26ドル、サイト数無制限で年間$54ドルです。
価格 | サポートするサイト数 | 使用期限 |
$26 | 1サイト | 1年 |
$54 | サイト数無制限 | 1年 |
Crocoblock全プラグインが使用可能なセットプランの価格
CrocoblockのJetプラグインを使えるプランもあって、価格は1サイトで年間$130、サイト数無制限で年間$265です。そして買い切りプランがあり、$750です。
価格 | プラン名 | サイト数 | 期限 |
$130 | All-Incrusive | 1サイト | 1年 |
$265 | All-Incrusive Unlimited | サイト数無制限 | 1年 |
$750(買切り) | Lifetime | サイト数無制限 | 永久 |
JetEngineの購入方法
こちらをクリックするとJetEngineの購入ページにジャンプすることができます。
また、JetEngineの購入からサイトへインストール、アクティベートするまでを説明した『Crocoblockのメンバーシップ【JetEngine】の購入からアクティベートする方法』の記事もありますのでよかったらご覧くださいね!
カスタム投稿タイプが作れる!
JetEngineでカスタム投稿タイプを作ることができます。
カスタム投稿タイプは投稿タイプの『投稿』や『固定ページ』の他の別に自分で作成できる投稿タイプのことを言います。
JetEngineのすごいところは、投稿タイプのリストを自由自在に表示できることです。
JetEngineでカスタム投稿タイプを作る方法については、『JetEngineでカスタム投稿タイプとカスタムフィールドを作る方法 – Crocoblock』の記事をご覧ください。
またカスタム投稿タイプは一体どのように使うものなのか、初歩的なことをを知りたい方は『WordPress カスタム投稿タイプ【徹底解説】』の記事もありますのでよかったらご覧くださいね!
またJetEngineのほとんどの各機能の設定には『Labels』と『Advanced Settings』が入っています。
これらの設定についてくわしく解説した『JetEngineのLabelsとAdvanced Settingsの設定方法』の記事がありますのでどうぞこちらもあわせてご覧ください!
ACF有料版と同等なカスタムフィールドを作れる!
JetEngineでカスタムフィールドを作成することができます。
ACF(Advanced Custom Fields)とは、カスタムフィールドを作れるプラグインです。
そのACFのさらにPro(有料版)と同等の詳細なカスタムフィールドをJetEngineで作ることができるんです!
ちなみに上記はが通常のカスタムフィールドです。それが・・・
↓↓↓↓↓
JetEngineなら、以下のような詳細なカスタムフィールドが自分の好きなレイアウトとUIで作成することができます!
ちなみに上記はJetEngineで作成したカスタムフィールドのサンプルです。
カスタムフィールドの情報ごとにタブが複数に分けることができたり、記入するタイプのフィールドやクリックによるリストからの選択式、画像の挿入も可能です。
この他にも様々なカスタムフィールドのオプションがあります。
JetEngineでカスタムフィールドを作成する方法につきましては『JetEngineでカスタム投稿タイプとカスタムフィールドを作る方法 – Crocoblock』の記事をご覧ください。
また、カスタムフィールドはJetEngineの『Meta fields』というセクションでの設定になります
そのMeta fieldsの詳細な設定方法をこちらの記事にて紹介しています!
JetEngineとACF Proならどっちがお得?答えはJetEngine!
JetEngineとACF Proはどちらも有料のプラグインですが一体どちらがお得かは、値段を見ていただければ一目瞭然です!
JetEngine | ACF Extended Pro |
$26/年 | $49/年 |
上記はJetEngineとACF extended Proの実際の価格を表示したものですが、ACF ectended Proは年額$49/サイトに対してJetEngineが年額$26/サイトと2倍近く安く、さらにカスタムフィールド以外の機能も兼ね揃えていて本当にお得です!
Meta Boxでどこにでもカスタムフィールドを設置!
Meta fieldとは各JetEngineの大きな機能それぞれに独立して設置されている各主要機能専用のカスタムフィールドを作成するツールですが、JetEngineの『Meta Box』は、WordPressのいたるところ、つまり JetEngineの機能ではない部分にカスタムフィールドを設置できる機能です。
これもまさにACF proと同じですね。
最初は各所にカスタムフィールドを作る理由がわからないかもしれませんが、後々紹介していく機能や他のJetプラグインを使用したときに拡張機能としてとても役に立つんです!
Meta Boxの操作方法はMeta fieldとほぼ同じですが、『JetEngineのMeta Boxの使い方- ACF Proよりすごい!』の記事でWordPressの各所にカスタムフィールドを追加する方法をくわしく解説していますのでどうぞご覧ください!
Conditional Logicで追加フィールドを分岐させられる!
Meta fieldsやMeta Boxを使用していると設定に『Conditional Logic』という機能があります。
この機能は例えば『はい』または『いいえ』で答えるような質問形式のフィールドがあるとして、答えが『はい』なら追加の質問が表示され、『いいえ』ならそれ以上何も表示されない、などのケースバイケースに応じたフィールドを作成することができます。
Conditional Logicを使って選択により分岐する追加フィールドを作成する方法を『Conditional Logicの使い方-Meta fieldのすごい機能【JetEngine】』の記事で紹介しています!
カスタムタクソノミーが作れる!
カスタムタクソノミーとは、カテゴリーやタグなどおおなじ機能を果たすオリジナルのタクソノミーです。
JetEngineの『Taxonomies』機能を使用すれば、簡単にカスタムタクソノミーを作ることができます。
また、そのカスタムタクソノミーにMeta fieldを追加したり、タクソノミーページのUIも自由に変更することができます。
JetEngineのTaxonomisesでカスタムタクソノミーの作り方をくわしく説明した記事がありますのでどうぞご覧くださいね!
タクソノミーごとのリスト(一覧)のテンプレートが作れる!
JetEngineの『Listings』という機能を使って、タクソノミーごとに違ったレイアウトのテンプレートをElementorで作成し、Elementor Proのテーマビルダーでそのテンプレートをサイトに表示させることができます。
例えば食料品のサイトなら、『乾物』『生鮮食品』『飲み物』『アジア食材』『イタリア食材』『スイーツ』『ヴィーガン』など、サイトの中でかなりタクソノミーを細分させることがありますよね。
一覧(リスト)で表示させたいタクソノミーごとにElementorのエディターでテンプレートを作成できます。
その際はJetEngineのダイナミックウィジェット(動的ウィジェット)の使用が可能です。
JetEngineで作成し、まとめた情報を『Listings』のエディターとJetEngineのウィジェットを使用して情報をテンプレートに呼び出して表示させていくことができます。
※カスタム投稿タイプのみならず、投稿、固定ページから情報を呼び出すことも可能。
Options Pagesでサイト全体で共有できるページを作れる!
Options Pagesは例えば『電話番号』という情報をサイト全体で共有したい場合などに活用します。
え?それどっかのカスタムフィールドで良くない・・?
と思ったかもしれませんが、カスタムフィールドは何かのページにや機能に対して入れるもので、Daynamicウィジェットでも物によっては機能やページの垣根を超えて追加フィールドの情報をサイトに呼び出せないことがあります。
そんなときにOptions Pagesに情報を入れておけば、どんな時でもサイトに動的にその情報を呼び出すことができるんです!
とても痒いところに手が届いた機能なので、ぜひカスタムフィールドと併用して使ってみてください。
Options Pagesの設定のしかた、使い方をくわしく説明した記事がありますのでどうぞご覧くださいね!
Listingsで動的な一覧ページのテンプレートを作れる!
JetEngineの『Listings』機能は、一覧表示させたいもののリストの1コマを作成すれば簡単に上記のようにアイテムがずらっと並ぶテンプレートページを簡単に作成することができます!
リストの作成にはElementorの機能をしようすることが可能で、『LISTINGS』と言うJetEngineのオリジナルウィジェットをつかって動的なリストを作ることができます。
作ったリストは1つずつListingsのページで保管することができ、サイト構築をする際にいつでもその情報が呼び出せるわけです。
ちなみにListingsで作成したリストのテンプレートをサイトに一覧で表示させるには、Elementorのテーマビルダーで『Listing Grid』というウィジェットを挿入するだけでとても簡単なんです!
JetEngineのListingsの使い方を紹介したページでくわしい操作方法をぜひご確認ください!
Listing Gridを応用した技を紹介!
JetEngineをすでに使っている方は、Listing Gridすごいぞ?!とその便利さと高機能さに感銘を受けているでしょう。
こちらでListingsの『Listing Grid』を応用した使える技を紹介します!
おしゃれなイベントカレンダーを作る
JetEngineとElementorを使っておしゃれで機能的なイベントカレンダーを作成することができます。
JetEngineでおしゃれなイベントカレンダーの作り方を紹介したページがありますので、ぜひそちらもご覧ください!
複数の投稿タイプを一つのリストに混ぜて表示する
JetEngineなら、複数の投稿タイプを一つのリストにミックスして表示することも可能です。
これをするにはJetEngineの『Listings』と『Query Builder』の2つの機能を合わせて使っていきます。
JetEngineで複数の投稿タイプを一つのリストに混ぜて表示する方法を紹介したページでくわしく説明をしています!
Relations機能で2つの投稿タイプをつなげられる!
JetEngineの『Relation』機能を使うと2つの投稿タイプをつなぎ合わせてサイトの機能拡張をすることができます!
それはどういうことかと言うと、とあるひとつの投稿タイプから作成された○○一覧のリストぺージがあったとしたら、そこに別の投稿タイプの一覧ページの情報も動的につなげることができるんです。
例えば、以下のような野菜を販売するようなサイトがあり、野菜の一覧ページがあるとします。
実際に野菜は色々な農家が生産しているため、アイテムによって農家の情報もバラバラですよね。
この野菜の一覧ページはJetEngineの『Listings』で『野菜』と言う1つの投稿タイプから作られたリストページですが、各野菜のリストの『詳細を見る』をクリックしたら別の投稿タイプ『生産農家』の『Listings』で作成されたリストページに動的にリンクさせられたらいいですよね?
実際に『詳細を見る』をクリックしてみると・・・
するとこのように農家の情報、またその農家が栽培している野菜のリストも一緒に表示されました。
このようなサイトの構造をRelations機能で作成することができるんです!
Relation機能の使い方を説明した記事で、実際に映画の情報サイトを作成するデモンストレーション付きでくわしく解説しています!
JetEngineのダッシュボード
ダッシュボードにはタブが4つあります。
その4つのタブごとにセクションを大きく分けて以下で説明をしていきます。
Module(モジュール)
Module(モジュール)とは、Elementorでいうウィジェットのように簡単に挿入し使うことのできる機能のことを言います。
Default Modules(デフォルトモジュール)
Default Module(デフォルトモジュール)とは、JetEngineに最初から備わっている基本機能で全部で12種類あります。
また、各モジュールはデフォルトでは全てオフになっていますので、使用したいモジュールをオンにし、Default Mudulesのセクション左下の『Save』をクリックします。
モジュールの種類
Default Module | デフォルトモジュール |
Grid Gallery for Dynamic Feild widget | ギャラリータイプのメタフィールドに追加された画像を、ウェブサイトのページにグリッドとして表示することができます。 |
Slider Gallery for Dynamic Feild widget | ギャラリータイプのメタフィールドに追加された画像を、ウェブサイトのページにスライダーとして表示することができます。 |
QR Code for Dynamic Feild widget | メタフィールドに配置された任意のテキストデータを選択し、それをQRコードとして表示することができます。 |
Calendar | CPTからの投稿をイベントカレンダー形式で表示することができます。 ※イベントを表示するには、カスタムポストタイプとリンクする必要があります。 |
Forms | 新しいフォームを作成したり、既存のフォームを編集したりすることができます。また、このモジュールは、以前に作成したフォームを表示するための新しいウィジェットをElementorに追加します。 |
Listing Grid injections | 1つのListing Gridウィジェット内で異なるリストテンプレートを使用することができます。 |
Profile Builder | ウェブサイト上に個人ユーザーのアカウントページを作成したり、ソーシャルメディアのプロフィールのようにユーザーの公開プロフィールを作成することができます。 |
Maps Listings | カスタムポストタイプのアイテムを地図上にポップアップマーカーとして表示することができます。 |
Dynamic Visibility for Widgets and Sections | メタフィールドの値、ユーザーの役割、その他の条件に応じて、ウィジェット、カラム、セクションの可視性を設定することができます。 |
Data Stores | ウィッシュリスト、お気に入り、いいね!、ブックマークなどの機能をウェブサイトに追加します。 |
Custom Content types | ウェブサイトのデータベースにカスタムテーブルを作成し、手動またはフロントエンドフォームを使ってデータを入力し、その情報をエクスポートしたり、リスティンググリッドウィジェットを使ってウェブサイトのページに表示したりすることができます。 |
REST API Listings | Listing Grid ウィジェットを使ってサードパーティの REST API からの情報を表示することができます。 またJetEngineのフォームに『REST API Request』の通知を追加します。 この通知は、”Call a Webhook “と同様に動作しますが、より多くの拡張オプションがあります。 |
JetEngineでなんでもQRコードにすることができる
JetEngineのDynamic Fieldウィジェットを使用し、さまざまな情報をサイトに呼び出せるわけですがそれらの情報をすべてQRコードにすることができます!
それを行うにはまずJetEngineのダッシュボードのDelault Moduleの『QR Code for Dynamic Feild widget』をオンにする必要があります。
JetEngineでWordPress内にQRコードを生成する方法【作り方6ステップ】の記事でQRコードを作成する手順をくわしく紹介していますのでどうぞ参考にしてください!
External Modules(外部モジュール)
External Modules(外部モジュール)はJetEngineのDefualt Modulesのどれかと相互作用したり、または別のJetプラグインとJetEgineが連携しさらに機能拡張することのできるモジュールになります。
External Modules | 外部モジュール | 必要なDefault Module | 相互作用できる別の別の拡張Jetプラグイン |
Dynamic Tables Builder | 投稿、WooCommerceの商品、ユーザー、用語、コメントなどの動的なデータに基づいて、さまざまなテーブルを作成することができます。 また、CCTデータに基づいたテーブルや、SQLデータベースから直接データを照会してテーブルを作成することもできます。テーブルセルには、データベースから取得したデータを表示するか、このデータに基づいて構築されたリストテンプレートを表示することができます。 また、ダイナミックテーブルモジュールはJetSmartFiltersと互換性があるので、選択したデータを自由にフィルタリングしたり、ソートしたりすることができます。 | Dynamic Feild widget | JetSmartFilters |
Dynamic Chart Builder | 動的なデータをグラフで表示するためのモジュールです。 | Dynamic Feild widget | – |
Attachment file link by ID | Dynamic Fieldウィジェットを使って、.pdf, .zipなどのファイル形式のダウンロードリンクを表示したり、アーカイブやシングルページのテンプレートにそのようなリンクを出力するのに使用できるようになります。 | Dynamic Feild widget | – |
Custom visibility conditions | Dynamic Visibility モジュールにカスタム条件を追加します。 | Dynamic Visibility for Widgets and Sections | – |
Trim string callback | 文字列を任意の文字数でトリミングして出力します。 メタフィールドやオプションなどのテキストの一部を、選択した文字列長の値でトリミングして表示します(デフォルトでは、これはポストの抜粋に対してのみ実行可能で、メタフィールドに対しては実行できません)。 | Dynamic Feild widget | – |
Post expiration period | 投稿の有効期限 JetEngineやJetFormBuilderのフォームで追加された投稿の有効期限を設定できます。 このモジュールを使うと、新しい投稿を一定期間表示することができます。 |
Skins Manager
『Skins Manager』(スキンマネージャー)では、以下のことを実行することが可能です。
- Import Skin: JSONファイル(テンプレートファイル)のインポート
- Export Skin: JSONファイルのエクスポート
- Presets: プリセット(事前設定を記憶したファイル)のインポート
Export Skin
Export Skin(エクスポートスキン)では、投稿タイプやタクソノミー、メタボックスなど自分が欲しい機能だけを組み合わせてエクスポートファイルを作ることができます。
以下のリストから、機能の選択ができます。
- Post types: カスタム投稿タイプを作成する機能
- Taxonomies: カスタムタクソノミーを作成する機能
- Meta boxes: ACFのようにWordPressのいたるところにカスタムフィールドを設置できる機能
- Relations: 二つの投稿タイプを紐づける機能
- Options Pages: サイト全体で共有できるデータを管理する機能
- Glossaries: Meta fieldsの選択式フィールドで使用するOption fieldのテンプレートをストックする機能
- Queries: クエリー
- Listing Items: リストのテンプレートを作成する機能
Shortcode Generator
JetEngine関連のデータをコンテンツ内の任意の場所に出力するショートコードを生成することができます。
Glossaries
『Glossaries』(グロサリー)はMeta Fieldsで作成する選択式フィールドを作成する際にとても便利な機能です。
例えばチェックボックスやRadio、スクロールなどの項目をクリックで選択するタイプのカスタムフィールドはMeta Fieldsの『Option field』を1選択項目につき1つ追加する必要があります。
そのOption fieldは1つのMeta fieldでいちいち追加し入力する必要があります。
しかしよく使うようなOption fieldの内容なら、GlossariesにあらかじめOption fieldのリストのテンプレートを作成しておけばMeta fieldを追加する際にいつでもその情報を呼び出すことができるんです!
Glossariesについてくわしく解説した記事はこちらになります!
Data Storeについて
>>こちらはJetEngineのData Storeの機能について説明をした動画です。
>>不動産屋や車屋などのWebサイトで重宝されるCrocoblockのJetEngineのData Store機能の話(その②)の動画です。
>>JetEngineのData Store機能で縦幅の統一や枠線の挿入など、「お気に入り映画のリスト」を使ってスタイルの編集を実演した動画です。