JetEngineを小さく試すなら講師一覧から始めるのが分かりやすい理由

JetEngineをいきなり大きな会員サイトや予約サイトで試すと、設定項目の多さに引っかかりやすいです。最初の一歩としては、講師一覧のような小さなデータ一覧から始める方が、JetEngineの役割をつかみやすくなります。

この記事では、Elementorで作った静的な講師紹介ページを、JetEngineのデータの箱と一覧テンプレートに置き換える例で説明します。大げさなシステムではありません。講師名、肩書き、専門分野、対応エリア、受付状態をWordPress側に持たせ、Elementor側ではカード一覧として表示する構成です。

静的ページでも、講師が2人なら直接カードを作れば足ります。問題は、講師が増えたとき、表示順を変えたいとき、受付中の講師だけを出したいときです。そこで初めて、JetEngineで情報を分けて持つ意味が見えてきます。

JetEngine公式ページを見てみる

この記事で分かること

• JetEngineを小さく試すなら、なぜ講師一覧が分かりやすいのか
• 講師データ用のデータの箱（CPT）と入力項目の設計例
• Elementor側で1件のカードと一覧ページを作る流れ
• 受付中だけを表示するQuery Builderの考え方
• 小さく始めるときに、どこから複雑にしすぎなのか

まず何を作るのか

今回作るのは「講師一覧ミニ構成」です。スクール、講座販売、士業チーム、コンサルタント紹介、オンラインサロンの講師紹介などに置き換えやすい題材です。最初から申込フォームや会員ページまでは作りません。まずは、WordPress管理画面で講師情報を登録し、Elementorで一覧表示できるところまでに絞ります。

サンプルのデータの箱は teacher、管理画面での表示名は「講師」です。1人の講師を1投稿として登録します。固定ページの中に直接カードを並べるのではなく、講師データを別に持たせ、一覧ページではそのデータを呼び出す考え方です。

最初に作る画面は3つだけで十分です。講師を登録する管理画面、講師カードを並べる一覧ページ、1人の講師を詳しく見せる詳細ページ。この3つがつながれば、JetEngineの基本はかなり見えます。

ここで考えるべきなのは、いきなり完成形を作らないことです。講師一覧を作っていると、講座一覧、予約フォーム、会員別表示、担当者別通知まで欲しくなります。ただ、最初の検証で全部入れると、どこでつまずいたのか分からなくなります。まずは「講師を登録して、一覧に出す」。この小ささが大事です。

JetEngineでどのデータを持たせるのか

JetEngineの役割は、Elementorの見た目を派手にすることだけではありません。公式のJetEngine概要でも、カスタム投稿タイプ、入力項目、一覧表示、Query Builderなど、動的コンテンツを作るための機能が紹介されています。講師一覧では、講師というデータの型を作り、必要な入力項目を分けて持たせます。

入力項目は、本文に全部書かない方が扱いやすいです。たとえば「東京でWordPressを教える受付中の講師です」と本文に書くだけだと、エリアで絞る、受付中だけ出す、専門分野で並べる、といった使い方がしにくくなります。一覧や条件表示に使う情報は、入力項目として分けるのが基本です。

少し迷いやすいのは、Selectの値です。画面に出すラベルは「受付中」「受付停止」で構いませんが、内部値は open と closed のように揺れない名前にしておくと後で扱いやすいです。「受付中」「募集中」「対応可」が混ざると、Query Builderで条件を作るときに地味に困ります。

また、最初から項目を増やしすぎない方がいいです。SNSリンク、資格、実績、料金、担当講座、空き時間、所属部署まで入れたくなりますが、運用で本当に更新する項目だけに絞ります。講師一覧の試作なら、まずは7項目前後で十分です。足りない項目は、一覧が動いてから足せます。

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

Elementor側では、1人分の講師カードを作ります。JetEngineでは一覧テンプレート（Listing）として、1件のデータをどう見せるかを作り、Listing Gridで複数件を並べます。公式ドキュメントでも、Listing Gridは投稿、カスタム投稿タイプ、ユーザー、ターム、CCTなどの動的データを表示するためのウィジェットとして説明されています。

講師カードに入れる情報は、写真、名前、肩書き、専門分野、短い紹介、詳細リンクくらいに抑えます。詳細ページに書くべき長いプロフィールまでカードに入れると、スマホで読みづらくなります。カードは候補を見比べる場所、詳細ページはその人を詳しく確認する場所、と分けると作りやすいです。

設定としては、Dynamic Imageで profile_photo を出し、Dynamic Fieldで肩書きや専門分野を表示します。名前は投稿タイトルを使ってもよいです。詳細ページへのリンクはDynamic Linkで個別ページに飛ばします。ここでは凝ったアニメーションより、まず「入力した項目がカードの正しい場所に出るか」を確認します。

カードを作るときは、空欄の見え方も確認しておきます。プロフィール画像が未設定の講師、短い紹介が空の講師、受付状態が未入力の講師をサンプルで1件ずつ用意すると、表示崩れに気づきやすいです。実運用では、全部の項目がきれいに埋まるとは限りません。ここは少し面倒ですが、後で慌てないための確認です。

一覧ページでは、Listing Gridを置いて、先ほど作った講師カードの一覧テンプレートを選びます。PCは3カラム、タブレットは2カラム、スマホは1カラムくらいから始めると確認しやすいです。件数が少ないうちはページネーションや読み込みボタンまで入れなくても構いません。表示件数が増えてから考える方が、設定の意味が分かります。

受付中だけを出す表示条件を作る

講師一覧が動いたら、次に試しやすいのが「受付中の講師だけを出す」条件です。JetEngineのQuery Builderは、どのデータを拾って一覧に出すかを作る機能です。講師一覧の検証では、まず難しい条件を作らず、受付状態だけで絞るところから始めるのが分かりやすいです。

Query BuilderでPosts Queryを作り、対象の投稿タイプを teacher にします。Meta Queryでは accepting_status = open、並び順は display_order の昇順にします。Elementor側のListing Gridでは、Custom Queryを有効にして、そのクエリを選びます。これで受付中の講師だけを一覧に出す形になります。

ここでやりがちな失敗は、条件を一度に増やしすぎることです。専門分野、エリア、受付状態、表示順、おすすめ、会員限定、講座カテゴリまで同時に入れると、一覧に何も出ないときに原因を追いにくくなります。最初は受付状態だけ。次に表示順。必要になってから専門分野。段階を分けた方が、初心者には確認しやすいです。

表示条件（Dynamic Visibility）も、小さく使うなら便利です。受付状態が open の講師だけ「相談できます」というラベルを出し、closed の講師には「受付停止中」を出す、という程度です。ただし、個人情報や会員情報を隠す用途では慎重にしてください。見えないようにする設定だけで、安全なアクセス制御まで完了したとは考えない方がいいです。

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

この構成にすると、講師情報の更新場所がはっきりします。肩書きを変えるなら position、受付を止めるなら accepting_status、並び順を変えるなら display_order です。Elementorのカードを1枚ずつ探して修正するより、WordPress管理画面で講師投稿を編集する方が迷いにくくなります。

同じ講師データを別の場所に使い回せるのも利点です。トップページには受付中の3名だけ、講師一覧ページには全員、詳細ページには長いプロフィール、キャンペーンページには専門分野がWordPressの講師だけ。静的なElementorカードではそれぞれ手入力になりがちですが、データとして持っていれば表示の切り替えで対応しやすくなります。

運用面では、担当者が変わっても説明しやすいです。「講師一覧を直すときはElementorのこのページを開いて、カードを複製して……」という説明より、「講師メニューから1人追加して、入力項目を埋める」と言える方がシンプルです。小さな差ですが、更新が続くサイトでは効いてきます。

ただし、JetEngineを入れれば運用設計が不要になるわけではありません。誰が講師情報を追加するのか、公開前に誰が確認するのか、受付停止の判断はどこで行うのか。このあたりはプラグイン設定とは別に決める必要があります。ここを曖昧にしたまま項目だけ増やすと、管理画面が複雑になります。

どこから複雑になりすぎるのか

講師一覧が動くと、次に講座一覧も作りたくなります。講師と講座を関連づければ、「この講師が担当する講座」を詳細ページに出せます。JetEngineにはRelationsという関連づけ機能もあります。ただ、最初の検証でそこまで入れると、入力項目、一覧、詳細ページ、関連表示のどこで問題が起きているのか分かりにくくなります。

小さく始めるなら、関係性は後回しで構いません。まず講師一覧だけを作る。次に講座一覧を別で作る。両方の入力と表示が安定してから、必要なら関連づけを考える。この順番の方が、Elementorユーザーには理解しやすいです。最初から完成形を作らないことも、JetEngineを使うコツです。

個人情報の扱いにも注意が必要です。講師の公開プロフィールなら問題が少ないですが、内部メモ、報酬、契約状況、連絡先、本人確認書類のような情報まで同じ画面で扱うなら、公開範囲と権限を分けて考えます。Dynamic Visibilityで隠すだけではなく、管理者権限、編集者権限、バックアップ、公開前チェックまで含めて設計します。

表示速度も見ておきたいところです。講師が10人程度なら大きな問題になりにくいですが、画像が重い、条件が多い、一覧を複数箇所に置く、絞り込みを増やす、といった要素が重なると表示に影響することがあります。最初は件数を絞り、画像サイズを整え、必要な一覧だけを置く方が無難です。

この始め方が向いている人、向いていない人

この構成が向いているのは、Elementorでページは作れるけれど、同じ型の情報を毎回手で直すのがつらくなってきた人です。講師、スタッフ、事例、講座、店舗、プランのように、同じ項目を持つ情報を一覧化したい場合は、JetEngineの考え方を学びやすいです。

逆に、1枚のLPだけを作る場合や、講師が1人しかいないサイトでは、無理にJetEngineを入れなくてもよいです。固定ページで十分なものまでデータ化すると、管理画面の項目が増えるだけになります。プラグインを増やす判断は、「今後も同じ型の情報が増えるか」で見た方が現実的です。

また、予約受付、決済、会員管理、個人情報の保存まで一気に作りたい場合は、講師一覧だけでは足りません。JetFormBuilderや予約系の仕組み、権限設計、通知、スパム対策、バックアップも関わります。JetEngineは土台として強力ですが、すべての開発や安全設計を置き換えるものではありません。

公開前に確認したい小さなチェック

講師一覧が形になったら、公開前にいくつか小さく確認します。まず、講師を3人だけ登録した状態で、一覧、詳細ページ、受付中一覧を見ます。1人目は受付中、2人目は受付停止、3人目は専門分野を別の値にしておくと、条件が効いているか分かりやすいです。全部同じ値で登録すると、一覧が正しく絞られているのか判断しにくくなります。

次に、管理画面で講師を1人追加する作業を実際に通します。名前、肩書き、専門分野、対応エリア、短い紹介、画像、受付状態を入力し、下書きで詳細ページを確認します。このときに「どの項目を入れればカードが完成するのか」が分かりにくいなら、項目名や説明文を見直した方がいいです。制作した本人だけが分かる管理画面は、後から運用しづらくなります。

画像の扱いも早めに決めます。プロフィール画像を必須にするなら、未設定のまま公開しない運用ルールが必要です。任意にするなら、画像がない講師でもカードが崩れないようにします。ここは見た目の問題だけではありません。講師によって写真の有無が混ざると、一覧の信頼感が落ちることがあります。必要なら「写真未準備」の講師は公開しない、という判断も現実的です。

受付状態の変更手順も、意外と大事です。講師が一時的に新規受付を止める場合、投稿を非公開にするのか、受付状態だけを closed にするのかで見え方が変わります。非公開にすると一覧から消えますが、過去に共有した詳細ページの扱いも考える必要があります。受付停止ラベルを出すだけならプロフィールは残せます。どちらが正しいかはサイトの運用次第です。

最後に、一覧の増え方を想像します。講師が5人なら単純な一覧で足りますが、20人を超えるなら専門分野やエリアで絞り込む導線が欲しくなるかもしれません。ただ、絞り込み検索を入れる前に、入力項目の値がそろっているかを見ます。「東京」「東京都」「関東」「オンライン可」が混ざっている状態で絞り込みを作ると、見た目の前にデータ整理でつまずきます。最初の小さな講師一覧でも、値の揺れを防ぐ意識は持っておくと後が楽です。

まとめ

JetEngineを試すなら、最初から大きな会員サイトを作るより、講師一覧のような小さなデータ一覧から始めるのがおすすめです。データの箱を作り、入力項目を分け、Elementorで1件のカードを作り、Listing Gridで並べる。この流れだけでも、静的なElementorページから一歩進める感覚がつかめます。

大事なのは、講師名や専門分野を本文に混ぜ込まず、一覧や条件表示に使う情報として分けて持つことです。受付中だけ表示する、表示順を変える、トップページに一部だけ出す。こうした小さな運用改善が見えてくると、JetEngineを入れる意味がはっきりします。

JetEngine公式ページを見てみる

まずは講師3人分のサンプルで十分です。項目を増やしすぎず、一覧が動くことを確認し、必要になったら講座一覧や関連づけへ広げる。小さく作ってから広げる方が、JetEngineの設定もElementor側の表示も理解しやすくなります。