Jetプラグインを解き明かす

JetEngineの使い方完全ガイド

Elementor最強の拡張プラグイン、CrocoblockのJetEngineの使い方を説明したページです。

JetEngineとは

JetEngineと相互作用するプラグインを示した図

JetEngineとはWordPressのプラグインです。

そしてCrocoblockが展開するJetプラグイン全20種類の中の1つです。

数あるJetプラグインの中でもJetEngineはJetプラグインの根幹とも言えるプラグインです。

JetEngineでできること(一部)

JetEngineでできることが多すぎて、全部は書ききれませんが、メジャーな機能はこれらです。

  • CPT UIと同じようにカスタム投稿タイプが作成できる
  • ACF(有料版)と同等以上のレベルのカスタムフィールドが作成できる
  • カスタムタクソノミーが作成できる
  • 投稿タイプの一覧をElementorやグーテンベルグを使って自由に表示できる
  • 複雑なフォームを作れる
  • 投稿タイプ同士を繋げられる
  • 投稿タイプのフィールドに住所を設定すればGoogleマップ上に表示可能
  • 投稿タイプのフィールドからチャートを作成可能
  • ユーザーが自分でお気に入りリスト作る機能など簡単に作れる
  • 再利用可能なリストを作成してそれを使用できる
  • 文字を簡単にQRコードにできる

JetEngineの値段

JetEngineの値段

JetEngineは単品で購入することも可能ですが、JetEngineを含むCrocoblock全てのプラグインが使用可能なセットプランなどもあります。

また、サポートするサイト数や使用期限などにより価格も変動します。

JetEngine単品の価格

JetEngineの値段は、1サイトで年間26ドル、サイト数無制限で年間$54ドルです。

価格サポートするサイト数使用期限
$261サイト1年
$54サイト数無制限1年

Crocoblock全プラグインが使用可能なセットプランの価格

CrocoblockのJetプラグインを使えるプランもあって、価格は1サイトで年間$130、サイト数無制限で年間$265です。そして買い切りプランがあり、$750です。

価格プラン名サイト数期限
$130All-Incrusive1サイト1年
$265All-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で作成したカスタムフィールドを示した図

JetEngineでカスタムフィールドを作成することができます。

ACF(Advanced Custom Fields)とは、カスタムフィールドを作れるプラグインです。

そのACFのさらにPro(有料版)と同等の詳細なカスタムフィールドをJetEngineで作ることができるんです!

通常のカスタムフィールドの見本

ちなみに上記はが通常のカスタムフィールドです。それが・・・

↓↓↓↓↓

JetEngineなら、以下のような詳細なカスタムフィールドが自分の好きなレイアウトとUIで作成することができます!

JetEngineで作成したカスタムフィールドの見本1
JetEngineで作成したカスタムフィールドサンプル:基本情報のタブ
JetEngineで作成したカスタムフィールドの見本
JetEngineで作成したカスタムフィールドサンプル:車のコンディションのタブ

ちなみに上記はJetEngineで作成したカスタムフィールドのサンプルです。

カスタムフィールドの情報ごとにタブが複数に分けることができたり、記入するタイプのフィールドやクリックによるリストからの選択式、画像の挿入も可能です。

この他にも様々なカスタムフィールドのオプションがあります。

JetEngineでカスタムフィールドを作成する方法につきましては『JetEngineでカスタム投稿タイプとカスタムフィールドを作る方法 – Crocoblock』の記事をご覧ください。

また、カスタムフィールドはJetEngineの『Meta fields』というセクションでの設定になります

そのMeta fieldsの詳細な設定方法をこちらの記事にて紹介しています!

JetEngineとACF Proならどっちがお得?答えはJetEngine!

JetEngineとACF Proはどちらも有料のプラグインですが一体どちらがお得かは、値段を見ていただければ一目瞭然です!

JetEngineACF 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で作れるオシャレなイベントカレンダーのサンプル

JetEngineとElementorを使っておしゃれで機能的なイベントカレンダーを作成することができます。

JetEngineでおしゃれなイベントカレンダーの作り方を紹介したページがありますので、ぜひそちらもご覧ください!

複数の投稿タイプを一つのリストに混ぜて表示する

JetEngineなら、複数の投稿タイプを一つのリストにミックスして表示することも可能です。

これをするにはJetEngineの『Listings』と『Query Builder』の2つの機能を合わせて使っていきます。

JetEngineで複数の投稿タイプを一つのリストに混ぜて表示する方法を紹介したページでくわしく説明をしています!

Relations機能で2つの投稿タイプをつなげられる!

JetEngineの『Relation』機能を使うと2つの投稿タイプをつなぎ合わせてサイトの機能拡張をすることができます!

それはどういうことかと言うと、とあるひとつの投稿タイプから作成された○○一覧のリストぺージがあったとしたら、そこに別の投稿タイプの一覧ページの情報も動的につなげることができるんです。

例えば、以下のような野菜を販売するようなサイトがあり、野菜の一覧ページがあるとします。

野菜のリストに一覧ページ

実際に野菜は色々な農家が生産しているため、アイテムによって農家の情報もバラバラですよね。

この野菜の一覧ページはJetEngineの『Listings』で『野菜』と言う1つの投稿タイプから作られたリストページですが、各野菜のリストの『詳細を見る』をクリックしたら別の投稿タイプ『生産農家』の『Listings』で作成されたリストページに動的にリンクさせられたらいいですよね?

実際に『詳細を見る』をクリックしてみると・・・

『詳細を見る』をクリックして表示する農家のリスト

するとこのように農家の情報、またその農家が栽培している野菜のリストも一緒に表示されました。

このようなサイトの構造をRelations機能で作成することができるんです!

Relation機能の使い方を説明した記事で、実際に映画の情報サイトを作成するデモンストレーション付きでくわしく解説しています!

JetEngineのダッシュボード

JetEngineのダッシュボードの表示画面

ダッシュボードにはタブが4つあります。
その4つのタブごとにセクションを大きく分けて以下で説明をしていきます。

Module(モジュール)

Module(モジュール)とは、Elementorでいうウィジェットのように簡単に挿入し使うことのできる機能のことを言います。

Default Modules(デフォルトモジュール)

デフォルトモジュール一覧画面

Default Module(デフォルトモジュール)とは、JetEngineに最初から備わっている基本機能で全部で12種類あります。

モジュールをアクティブにする方法・必要なモジュールをオンにし、SAVEをクリック。


また、各モジュールはデフォルトでは全てオフになっていますので、使用したいモジュールをオンにし、Default Mudulesのセクション左下の『Save』をクリックします。

モジュールの種類

Default Moduleデフォルトモジュール
Grid Gallery for Dynamic Feild widgetギャラリータイプのメタフィールドに追加された画像を、ウェブサイトのページにグリッドとして表示することができます。
Slider Gallery for Dynamic Feild widgetギャラリータイプのメタフィールドに追加された画像を、ウェブサイトのページにスライダーとして表示することができます。
QR Code for Dynamic Feild widgetメタフィールドに配置された任意のテキストデータを選択し、それをQRコードとして表示することができます。
CalendarCPTからの投稿をイベントカレンダー形式で表示することができます。
※イベントを表示するには、カスタムポストタイプとリンクする必要があります。
Forms新しいフォームを作成したり、既存のフォームを編集したりすることができます。また、このモジュールは、以前に作成したフォームを表示するための新しいウィジェットをElementorに追加します。
Listing Grid injections1つのListing Gridウィジェット内で異なるリストテンプレートを使用することができます。
Profile Builderウェブサイト上に個人ユーザーのアカウントページを作成したり、ソーシャルメディアのプロフィールのようにユーザーの公開プロフィールを作成することができます。
Maps Listingsカスタムポストタイプのアイテムを地図上にポップアップマーカーとして表示することができます。
Dynamic Visibility for Widgets and Sectionsメタフィールドの値、ユーザーの役割、その他の条件に応じて、ウィジェット、カラム、セクションの可視性を設定することができます。
Data Storesウィッシュリスト、お気に入り、いいね!、ブックマークなどの機能をウェブサイトに追加します。
Custom Content typesウェブサイトのデータベースにカスタムテーブルを作成し、手動またはフロントエンドフォームを使ってデータを入力し、その情報をエクスポートしたり、リスティンググリッドウィジェットを使ってウェブサイトのページに表示したりすることができます。
REST API ListingsListing 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の一覧画面

External Modules(外部モジュール)はJetEngineのDefualt Modulesのどれかと相互作用したり、または別のJetプラグインとJetEgineが連携しさらに機能拡張することのできるモジュールになります。

External Modules外部モジュール必要なDefault Module相互作用できる別の別の拡張Jetプラグイン
Dynamic Tables Builder投稿、WooCommerceの商品、ユーザー、用語、コメントなどの動的なデータに基づいて、さまざまなテーブルを作成することができます。
また、CCTデータに基づいたテーブルや、SQLデータベースから直接データを照会してテーブルを作成することもできます。テーブルセルには、データベースから取得したデータを表示するか、このデータに基づいて構築されたリストテンプレートを表示することができます。
また、ダイナミックテーブルモジュールはJetSmartFiltersと互換性があるので、選択したデータを自由にフィルタリングしたり、ソートしたりすることができます。
Dynamic Feild widgetJetSmartFilters
Dynamic Chart Builder動的なデータをグラフで表示するためのモジュールです。Dynamic Feild widget
Attachment file link by IDDynamic Fieldウィジェットを使って、.pdf, .zipなどのファイル形式のダウンロードリンクを表示したり、アーカイブやシングルページのテンプレートにそのようなリンクを出力するのに使用できるようになります。Dynamic Feild widget
Custom visibility conditionsDynamic Visibility モジュールにカスタム条件を追加します。Dynamic Visibility for Widgets and Sections
Trim string callback文字列を任意の文字数でトリミングして出力します。
メタフィールドやオプションなどのテキストの一部を、選択した文字列長の値でトリミングして表示します(デフォルトでは、これはポストの抜粋に対してのみ実行可能で、メタフィールドに対しては実行できません)。
Dynamic Feild widget
Post expiration period投稿の有効期限
JetEngineやJetFormBuilderのフォームで追加された投稿の有効期限を設定できます。
このモジュールを使うと、新しい投稿を一定期間表示することができます。

Skins Manager

Skin Managerのタブ・表示画面

『Skins Manager』(スキンマネージャー)では、以下のことを実行することが可能です。

  • Import Skin: JSONファイル(テンプレートファイル)のインポート
  • Export Skin: JSONファイルのエクスポート
  • Presets: プリセット(事前設定を記憶したファイル)のインポート

Export Skin

Export Skinのタブ・エクスポート可能なファイルの一覧

Export Skin(エクスポートスキン)では、投稿タイプやタクソノミー、メタボックスなど自分が欲しい機能だけを組み合わせてエクスポートファイルを作ることができます。

以下のリストから、機能の選択ができます。

  • Post types: カスタム投稿タイプを作成する機能
  • Taxonomies: カスタムタクソノミーを作成する機能
  • Meta boxes: ACFのようにWordPressのいたるところにカスタムフィールドを設置できる機能
  • Relations: 二つの投稿タイプを紐づける機能
  • Options Pages: サイト全体で共有できるデータを管理する機能
  • Glossaries: Meta fieldsの選択式フィールドで使用するOption fieldのテンプレートをストックする機能
  • Queries: クエリー
  • Listing Items: リストのテンプレートを作成する機能

Shortcode Generator

Shortcode Generatorのタブ・表示画面

JetEngine関連のデータをコンテンツ内の任意の場所に出力するショートコードを生成することができます。

Glossaries

Glossaryの表示画面

『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機能で縦幅の統一や枠線の挿入など、「お気に入り映画のリスト」を使ってスタイルの編集を実演した動画です。

目次