JetEngineとは？Elementorを動的サイト化できる理由を具体例で解説

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

Elementorで見た目のきれいなページを作れるようになると、次にぶつかりやすいのが「同じ情報を何度も手入力している」問題です。

たとえば、講師紹介ページを1人ずつElementorで作り、講座ページにも同じ講師名、肩書き、プロフィール、顔写真を手で入れているとします。最初は5人なら何とかなりますが、講師が増えたり、肩書きが変わったり、担当講座が入れ替わったりすると、修正箇所が一気に増えます。

JetEngineの強みは、Elementorで作った見た目に、WordPress側のデータ構造を接続できることです。静的なページを増やすのではなく、講師、講座、料金、受付状態、開催日、関連講座のような情報をデータとして持たせることで、それをElementor側で自動表示できます。

この記事では、JetEngineを「多機能なプラグイン」として浅く紹介するのではなく、具体例として「講師一覧と講座一覧のミニポータル」を作る前提で解説します。専門用語を先に並べるのではなく、まずは「データの箱を作る」「入力項目を分ける」「一覧を自動表示する」「条件に合わせてボタンを出し分ける」という順番で見ていきます。

この記事の結論

JetEngineは、Elementorサイトに「データを登録して、条件に合わせて表示する仕組み」を足したい人向けの中心プラグインです。静的なLPを作るだけなら必須ではありませんが、一覧、詳細ページ、絞り込み、関連表示、会員ページ、予約や申込の土台を作りたいなら、かなり重要な選択肢になります。

まず公式ページでJetEngineの全体像を確認しておくと、このあとの「データの箱」「一覧テンプレート」「表示条件」の話がつながりやすくなります。

JetEngine公式ページを見てみる

この記事で分かること

この記事では、次の内容を整理します。

JetEngineがElementorに何を足してくれるのか
講師一覧と講座一覧を例にしたデータ設計
データの箱、入力項目、一覧テンプレートの基本的なつながり
関連づけや表示条件で何ができるのか
標準設定にコードスニペットを足すときの考え方
JetEngineを使う前に注意したい設計・保守・安全面

最初はすべてを覚える必要はありません。まずは「WordPressにデータを持たせる」「Elementorでそのデータを表示する」「条件に合わせて表示を変える」という3つの流れで考えると分かりやすいです。

まず何を作るのか

今回の例では、小さな教育系サイトを想定します。

作りたいのは、次のような構成です。

講師一覧ページ
講師詳細ページ
講座一覧ページ
講座詳細ページ
受付中の講座だけに申込ボタンを表示
講師詳細ページに、その講師が担当する講座を自動表示

これをElementorだけで静的に作ると、講師ページと講座ページの情報がばらばらになります。講師名を変更したとき、一覧カード、詳細ページ、講座ページ、申込導線のすべてを探して直す必要が出てきます。

JetEngineを使う場合は、まずWordPress側に「講師」と「講座」というデータの箱を作ります。そして、各講師や各講座に必要な項目をカスタムフィールドとして追加します。Elementorでは、そのデータを読み込んでカードや詳細ページとして表示します。

ここで大事なのは、JetEngineを「装飾パーツを増やすプラグイン」と考えないことです。JetEngineの本質は、サイト内の情報を構造化して、表示や条件分岐に使えるようにするところにあります。

JetEngineが中心になる理由

Crocoblockには複数のプラグインがあります。ただ、最初から全部の名前を覚える必要はありません。このシリーズでは、まずJetEngineを中心に考えます。

理由はシンプルで、JetEngineが「データの土台」を担当するからです。

たとえば、あとから絞り込み検索を作りたい場合も、先に物件、講座、商品、事例などのデータが整理されていないと、絞り込み条件を作りにくくなります。申し込みフォームから情報を保存したい場合も、保存先になる「データの箱」や入力項目の設計が必要です。予約カレンダーを作る場合も、予約対象の部屋やサービスをどう持たせるかが先に決まっていないと、あとで混乱します。

こうした機能を作るときに、必要に応じて絞り込み検索用のプラグイン、申し込みフォーム用のプラグイン、予約用のプラグインを組み合わせます。ただし、それらはあくまで発展形です。最初に理解したいのは、JetEngineでデータの土台を作る考え方です。

つまり、JetEngineは「見た目を作る前の設計図」に近い役割を持ちます。

公式情報でも、JetEngineは「独自のデータを作る」「入力項目を増やす」「一覧や詳細ページに表示する」「条件によって表示を変える」「データ同士を関連づける」といった動的コンテンツ向けの機能を持つプラグインとして整理されています。英語の機能名は多いですが、最初はこの日本語の役割で理解すれば十分です。

Elementorで静的なページを作るだけなら、こうした機能は少し大げさに見えるかもしれません。しかし、同じ型のページを何十件も作る、一覧と詳細を連動させる、条件に合わせてボタンを出し分ける、ログインユーザーごとに見せる内容を変える、という段階に進むと、JetEngineの必要性が見えてきます。

どのデータをWordPressに持たせるのか

今回の例では、まず2つの「データの箱」を作ると考えます。専門用語ではCPTと呼ばれますが、最初は「講師用の箱」「講座用の箱」と考えれば十分です。

講師: teacher
講座: course

CPTはCustom Post Typeの略です。WordPress標準の「投稿」や「固定ページ」とは別に、独自の投稿タイプを作る仕組みです。言葉は少し難しいですが、要するに「ブログ記事とは別の管理場所を作る」ということです。講師を通常投稿に混ぜてしまうと、ブログ記事と講師情報が同じ場所に並んでしまいます。そこで、講師は講師、講座は講座として分けて管理します。

講師CPTには、たとえば次のようなフィールドを持たせます。

項目	フィールド名	型	使い道
肩書き	`teacher_title`	Text	一覧カードと詳細ページに表示
専門分野	`specialty`	Select または Checkbox	講師の分類や絞り込みに使用
プロフィール写真	`profile_photo`	Media	講師カードの画像に使用
紹介文	`profile_text`	Textarea	詳細ページに表示
表示順	`display_order`	Number	Query Builderで並び替えに使用

講座CPTには、次のようなフィールドを持たせます。

項目	フィールド名	型	使い道
受講料	`course_price`	Number	価格表示や比較に使用
開催日	`course_date`	Date	開催順の並び替えに使用
受付状態	`entry_status`	Select	受付中、満席、終了などを管理
対象者	`target_level`	Select	初心者向け、実務者向けなどを表示
メイン画像	`course_image`	Media	講座カードや詳細ページに表示

ここでつまずきやすいのは、何でも長い本文欄に入れてしまうことです。

たとえば「受講料: 33,000円、対象: 初心者、受付: 受付中」という情報を本文にまとめて書くと、見た目としては表示できます。しかし、あとから「受付中だけを一覧に出したい」「価格が安い順に並べたい」「初心者向けだけを絞り込みたい」となったときに困ります。

JetEngineでは、あとで表示条件や絞り込みに使いそうな情報は、できるだけ独立した入力項目として分けておくのが基本です。

Elementor側ではどう表示するのか

データを作ったら、次はElementor側で表示します。

ここで使う中心機能が「一覧テンプレート」です。JetEngineではListingと呼ばれます。1件分の表示テンプレートを作り、それを一覧に繰り返し表示する仕組みです。

たとえば講師一覧ページでは、1人分の講師カードをListing Itemとして作ります。カードの中には次のような要素を配置します。

画像表示: profile_photo を表示
文字表示: 投稿タイトルを講師名として表示
文字表示: teacher_title を肩書きとして表示
文字表示: specialty を専門分野として表示
リンク設定: 講師詳細ページへのリンクを設定

この1枚のカードを作っておくと、講師が10人でも30人でも、Listing Gridが繰り返して表示してくれます。講師を追加したいときは、Elementorのページをコピーするのではなく、WordPress管理画面から講師CPTに1件追加します。

講座一覧も同じ考え方です。講座カードの中に、講座名、開催日、受講料、対象者、受付状態、詳細リンクを配置します。カードのデザインはElementorで作り、表示される値はJetEngineのDynamic Fieldで引っ張ってきます。

ここがElementorだけの静的制作と大きく違うところです。

静的ページでは、見た目と情報がくっついています。JetEngineを使うと、見た目・情報・表示条件の役割を分けられます。

JetEngineのListing ItemとListing Gridで一覧表示する流れ

Relationsで講師と講座をつなぐ

講師一覧と講座一覧を別々に作るだけなら、CPTとListing Gridだけでもかなり進められます。ただ、実務で便利になるのは、別々のデータを関連づけるところです。

今回の例では、講師と講座をつなげたいです。

たとえば、田中先生が「WordPress入門」と「Elementor実践講座」を担当しているとします。講師詳細ページを開いたとき、その先生が担当している講座だけを下に自動表示できると便利です。

このときに使うのが「関連づけ」です。JetEngineではRelationsと呼ばれます。

関係性としては、最初は次のように考えると分かりやすいです。

親: 講師 teacher
子: 講座 course
関係: 1人の講師が複数の講座を持つ

もちろん実際には、1つの講座に複数講師が関わるケースもあります。その場合は多対多の関係を検討します。ただ、最初から複雑にしすぎると管理画面も分かりにくくなります。はじめてJetEngineでRelationsを使うなら、まずは一対多の関係で小さく試すのがおすすめです。

講師詳細ページでは、現在表示している講師に関連する講座だけを取得し、一覧テンプレートで表示します。これにより、講座を追加したときに講師ページ側を毎回手で編集しなくても、関連講座が自動で増えていきます。

運用面では、この差が大きいです。

静的ページでは「新しい講座を作る」「講師ページにも追記する」「一覧ページにも追記する」という作業が発生します。JetEngineでデータをつないでおくと、「講座を追加し、担当講師を関連づける」だけで表示が更新される構成を作れます。

Dynamic Visibilityで受付中だけボタンを出す

次に、受付状態によって表示を変える例です。

講座詳細ページに申込ボタンを置く場合、すべての講座に同じボタンを出すと困ります。終了した講座や満席の講座にも申込ボタンが表示されると、ユーザーにとって分かりにくくなります。

そこで、講座CPTに entry_status というSelectフィールドを作ります。

選択肢は、たとえば次の3つです。

open: 受付中
full: 満席
closed: 終了

Elementor側では、申込ボタンに「表示条件」を設定します。JetEngineではDynamic Visibilityと呼ばれる機能です。考え方としては、entry_status が open のときだけボタンを表示する、というルールです。

同時に、満席や終了の場合は別のメッセージを表示すると親切です。

受付中: 申込ボタンを表示
満席: 「現在満席です」と表示
終了: 「この講座は終了しました」と表示

表示条件は、単に要素を隠すだけの機能ではありません。データの状態に合わせて、ユーザーに見せる導線を変えるための機能です。

ただし、ここは注意も必要です。表示条件で非表示にしたからといって、セキュリティ対策が完了するわけではありません。会員限定情報、個人情報、申込情報のようなものは、表示制御だけでなく、権限設計やフォーム側のチェックも必要になります。

Query Builderでおすすめ講座だけを出す

一覧表示が増えてくると、ただ全件を出すだけでは足りなくなります。

たとえばトップページに「おすすめ講座」を3件だけ出したいとします。この場合、講座CPTに is_recommended というフィールドを追加します。型はSwitcherやCheckboxでよいです。

設定例は次のようになります。

フィールド名: is_recommended
型: Switcher
意味: トップページに出したい講座だけONにする

JetEngineの絞り込み条件を作る機能では、講座のデータを対象にして、is_recommended がONの投稿だけを取得するルールを作ります。さらに course_date で開催日が近い順に並べれば、「受付中かつおすすめの講座を開催日順に3件表示」のような一覧も作りやすくなります。

ここで大切なのは、クエリを作る前にフィールド設計をしておくことです。

おすすめ講座を本文内に「おすすめ」と書いているだけでは、あとから自動表示の条件として扱いにくくなります。条件に使う情報は、入力項目として分けておく。この考え方が、JetEngineを使うときの基本です。

コードスニペットを少し足すと何ができるか

JetEngineは標準設定だけでも多くの表示を作れます。ただ、実務では「ここだけ少し整えたい」という場面があります。

たとえば、講座の受付状態をただ文字で表示するだけでなく、状態に応じて色つきバッジとして出したい場合です。Elementor側のデザイン設定でもある程度できますが、複数の場所で同じ表示ルールを使いたいなら、短いショートコードを作る方法もあります。

以下は、WordPress標準の get_post_meta() を使って、現在の講座投稿の entry_status を読み取り、受付状態バッジを返す例です。JetEngine独自の未確認フックは使っていません。Code Snippetsプラグインに追加するか、子テーマの functions.php に入れる想定です。

add_shortcode( 'course_status_badge', function () {
    $post_id = get_the_ID();

    if ( ! $post_id ) {
        return '';
    }

    $status = get_post_meta( $post_id, 'entry_status', true );

    $labels = array(
        'open'   => '受付中',
        'full'   => '満席',
        'closed' => '終了',
    );

    if ( ! isset( $labels[ $status ] ) ) {
        return '';
    }

    $class = 'course-status-badge course-status-badge--' . sanitize_html_class( $status );

    return sprintf(
        '<span class="%s">%s</span>',
        esc_attr( $class ),
        esc_html( $labels[ $status ] )
    );
} );

追加CSSは、外観のカスタマイズ、子テーマ、またはElementor側のカスタムCSSに入れます。

.course-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.course-status-badge--open {
  color: #075985;
  background: #e0f2fe;
}

.course-status-badge--full {
  color: #854d0e;
  background: #fef3c7;
}

.course-status-badge--closed {
  color: #475569;
  background: #e2e8f0;
}

Elementor側では、Shortcodeウィジェットに次のように入れます。

[course_status_badge]

これで、講座詳細ページやListing Itemの中で、受付状態に応じたバッジを共通表示できます。

もちろん、最初からコードを書く必要はありません。まずはJetEngineのDynamic FieldやDynamic Visibilityで作り、どうしても共通化したい表示や細かい整形が出てきたときに、短いコードスニペットを足すくらいで十分です。

コードは必ずテスト環境で試す

Code Snippetsプラグインを使う場合でも、いきなり本番サイトに入れるのは避けた方が安全です。バックアップを取り、ステージング環境で表示とエラーを確認してから使いましょう。フォーム、会員、予約、個人情報に関わる処理では、権限チェック、入力検証、エスケープを省略しないことが大切です。

申込・検索・予約へどう広げるか

JetEngineでデータ構造ができると、他の機能へ広げる意味も分かりやすくなります。

たとえば、申し込みフォームを作りたい場合は、フォーム用のプラグインであるJetFormBuilderを組み合わせると、申込フォームから講座申込データを作る流れを考えられます。フォーム送信後に、申込者名、メールアドレス、対象講座、希望日、備考を保存し、管理者に通知するような構成です。

絞り込み検索を作りたい場合は、検索フィルター用のJetSmartFiltersを組み合わせると、講座一覧を「初心者向け」「実務者向け」「価格帯」「開催月」などで絞り込めます。ここでも、先に target_level や course_price や course_date がフィールドとして分かれていることが重要です。

予約機能まで広げたい場合は、予約用のプラグインを検討します。ただし、予約対象や担当者、時間枠の設計が必要になります。これも、JetEngineで「何をデータとして持たせるか」を考えてから入ると、全体像をつかみやすいです。

つまり、JetEngineは単体でも記事にする価値がありますし、Crocoblock全体を理解する入口にもなります。

運用すると何が楽になるのか

JetEngineを使う最大のメリットは、更新作業の場所を整理できることです。

講師を追加するときは、講師CPTに1件追加します。講座を追加するときは、講座CPTに1件追加します。受付状態を変えるときは、entry_status を変更します。トップページに出したい講座は、is_recommended をONにします。

このように、運用担当者が触る場所を決められると、サイト更新が安定します。

Elementorで作った静的ページを毎回コピーしていると、デザインの微妙なズレや情報の古い箇所が増えやすくなります。JetEngineでListingを使えば、カードの見た目は1つのテンプレートを修正するだけで済みます。デザイン変更とデータ更新を分けられるため、サイト全体の保守がしやすくなります。

ただし、便利だからといって何でもJetEngineで複雑に作ればよいわけではありません。

講師が3人、講座が2つだけで、今後ほぼ増えないなら、静的ページでも十分です。逆に、講師、講座、申込、会員、予約、決済、メール通知、絞り込み、マイページまで一気に作ろうとすると、最初の設計がかなり重要になります。

最初は「一覧と詳細を自動化する」くらいから始めるのが現実的です。