JetEngineで講師一覧を作る方法。CPTとカスタムフィールドの考え方

Elementorで講師紹介ページを作っていると、最初は1ページずつ丁寧に作れても、人数が増えた瞬間に更新が重くなります。肩書きが変わった、写真を差し替えたい、専門分野で並べ替えたい、受付中の講座だけに講師を出したい。こうした運用が始まると、静的なElementorページだけでは管理箇所が散らばりやすくなります。

この記事では、JetEngineのデータの箱（CPT）と入力項目（カスタムフィールド）を使って、講師一覧を1件ずつ手作業で増やさない仕組みを作る考え方を解説します。例として作るのは「講師CPT」と「講師一覧ページ」です。講師を管理画面で追加すると、Elementor側の一覧カードと詳細ページに自動で反映される構成にします。

JetEngineのCPT機能は、Elementor、Gutenberg、Bricksで使える動的コンテンツ機能として公式に案内されています。まず製品ページで全体像を見てから設定に入ると、この記事の「データの箱」「入力項目」「一覧テンプレート」の関係がつかみやすいです。

JetEngine公式ページを見てみる

この記事で分かること

• 講師一覧をCPTで管理する理由
• JetEngineで作る講師CPTと入力項目の具体例
• Elementor側で1件の講師カードを作る流れ
• Query Builderで表示順や公開条件を整える考え方
• 運用が楽になる範囲と、作り込みすぎる境界線
• 必要な場合だけ足せる小さなPHPスニペット

まず何を作るのか

今回作るのは、スクールや講座サイトにある「講師一覧」です。静的なElementorページでは、講師カードを複製して、画像、名前、肩書き、紹介文、リンクを手で差し替えます。5人くらいならそれでも問題ありません。ただ、20人、30人と増えると、カードの余白やボタンの文言が少しずつずれたり、退任した講師が古い講座ページに残ったりします。

JetEngineで作る場合は、先にWordPress側へ「講師」というデータの箱を用意します。専門用語ではCustom Post Type、略してCPTです。最初は「ブログ投稿とは別の管理場所」と考えると十分です。講師情報を通常投稿に混ぜるのではなく、管理画面に「講師」というメニューを作り、1人ずつ登録していきます。

今回の設定例は次の通りです。

ここで考えるべきなのは、最初から複雑な会員制や予約システムにしないことです。まずは「講師を登録する」「講師一覧に出す」「講師詳細に飛ばす」だけで十分です。動く土台ができてから、講座との関連づけや絞り込みへ進む方が失敗しにくくなります。

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

講師CPTを作ったら、次に入力項目を設計します。入力項目は、見た目のためだけではなく、あとで並び替え、絞り込み、条件表示に使うために分けておきます。たとえば「Web制作講師。ElementorとWordPressが得意。初心者向け講座を担当。」という情報を本文に全部書くと、表示はできます。しかし「初心者向け講師だけを出す」「Elementor担当だけを並べる」といった操作が難しくなります。

講師CPTには、次のような入力項目を持たせると扱いやすいです。

ポイントは、本文に入れてもよい情報と、フィールドとして分ける情報を区別することです。肩書き、専門分野、表示順、公開状態のように「表示の制御に使う可能性がある値」は、入力項目として分ける方が後から楽になります。逆に、長い経歴やメッセージは本文やWYSIWYGでよい場面もあります。

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

データの箱と入力項目ができたら、Elementor側では「1件分の講師カード」を作ります。JetEngineでは一覧テンプレート（Listing Item）として、1件分の見た目を先に設計します。その1枚をListing Gridで繰り返し表示する流れです。

講師カードの構成例は次のようにします。

• 画像: profile_photo をDynamic Imageで表示
• 名前: 投稿タイトルをDynamic Fieldで表示
• 肩書き: teacher_title をDynamic Fieldで表示
• 専門分野: specialty をタグ風に表示
• 短い紹介: short_profile を2〜3行で表示
• 詳細リンク: 投稿URLへDynamic Linkで移動

Elementorだけで静的カードを複製する場合、講師ごとにカードを増やす必要があります。JetEngineでは、カードのデザインは1つだけ作ります。講師が増えたら、管理画面で講師を追加するだけです。デザイン変更も1か所で済みます。たとえばカードのボタン文言を「詳しく見る」から「プロフィールを見る」に変えたい場合、30枚のカードを探して直す必要がありません。

表示順と公開条件を整える

講師一覧を作るとき、登録順のまま表示してよいとは限りません。代表講師を上に出したい、退任した講師は一覧から外したい、特定カテゴリだけの一覧を作りたい。こうした条件をElementorの手作業で対応すると、ページごとの修正が増えます。

JetEngineのQuery Builderを使う場合、たとえば次のような条件を考えます。

ここでの注意点は、Query Builderを複雑にしすぎないことです。最初から「専門分野、担当講座、地域、人気順、空き枠、会員状態」を全部組み合わせようとすると、表示確認も運用も難しくなります。はじめは公開状態と表示順だけで十分です。そのあと、必要になった条件だけを追加します。

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

この構成にすると、運用面ではかなり分かりやすくなります。新しい講師が増えたら、管理画面の「講師」から1件追加します。肩書きや写真を更新したいときも、その講師データを編集するだけです。Elementorの一覧ページを開いてカードを複製する必要はありません。

また、講師詳細ページをテンプレート化しておけば、詳細ページも同じデザインで揃えられます。静的ページでは、講師ごとに余白や見出しサイズが少しずつ変わることがあります。JetEngineで入力項目とテンプレートを分けると、見た目のばらつきも抑えやすくなります。

さらに、講座CPTを後から作る場合にもつながります。講師と講座を関連づければ、講師詳細ページに「この講師が担当する講座」を表示できます。ただし、関連づけは次の段階です。最初から講師、講座、受講者、申込、決済、会員ページまで一気に作ると、どこで情報が更新されるのか分からなくなります。

静的Elementorから移すときの作業順

既存サイトにすでに講師紹介カードがある場合、いきなり全部をJetEngineへ置き換える必要はありません。まずは現在の講師カードを眺めて、「毎回変わる情報」と「デザインとして共通の情報」に分けます。毎回変わるのは、講師名、肩書き、写真、専門分野、紹介文、詳細ページへのリンクです。共通なのは、カードの余白、見出しサイズ、ボタンの形、背景色、ホバー時の見え方です。

次に、毎回変わる情報だけを講師CPTの入力項目にします。ここで、既存カードに書いてある文章をそのまま1つの長い説明欄へ入れたくなりますが、あとで一覧や絞り込みに使う値は分けてください。たとえば「専門分野: Elementor / WordPress / EC」と文章中に書くのではなく、specialtyという項目で選べるようにします。表示順も本文内に「おすすめ講師」と書くのではなく、display_orderの数字で管理します。

その後、ElementorでListing Itemを作ります。既存のカードデザインを完全に再現しようとする前に、まずは写真、名前、肩書き、詳細リンクだけで小さく表示します。ここで一覧が出ることを確認してから、専門分野のタグ風表示、短い紹介文、余白調整、ボタンの装飾を足していきます。最初から完成デザインを目指すと、問題が「データが出ない」のか「CSSが崩れている」のか切り分けにくくなります。

最後に、既存の静的カードとJetEngineの一覧を見比べます。講師名が違う、画像サイズがそろわない、ボタンリンクが詳細ページに飛ばない、非表示にした講師がまだ出る、といった点を1つずつ確認します。移行作業では、デザイン移植より先にデータ表示の正しさを見た方が安全です。

管理画面での更新フローを決めておく

JetEngineで講師CPTを作ると、制作側は便利になりますが、実際に更新する人が迷うと運用は止まります。そこで、管理者向けの入力ルールも最初に決めておきます。たとえば「講師名は投稿タイトルに入れる」「肩書きは20文字以内」「専門分野は既存の選択肢から選ぶ」「写真は横長ではなく正方形に近い画像を使う」「退任した講師は削除せず公開状態をhiddenにする」といったルールです。

削除ルールも重要です。講師を削除すると、過去の講座ページや関連表示から参照が外れることがあります。退任や一時非表示なら、まずteacher_statusをhiddenにして一覧から外す方が安全です。完全削除は、関連する講座、リンク、検索結果、キャッシュへの影響を見てから行います。

写真も運用で差が出ます。講師ごとに画像の比率が違うと、一覧カードの高さがばらつきます。JetEngineの設定だけでなく、Elementor側の画像比率、オブジェクトフィット、カードの最小高さを整えると、講師が増えても一覧が崩れにくくなります。これは動的サイトではよくある落とし穴です。データ化すれば自動で整うのではなく、増えたときに崩れない表示ルールを先に決める必要があります。

任意で足せる小さなPHPスニペット

標準設定だけでも講師一覧は作れます。ここでは、講師詳細ページの任意の位置に「肩書き＋専門分野」を短いラベルとして出したい場合の補助スニペットを紹介します。Code Snippetsプラグイン、または子テーマのfunctions.phpに追加して使う想定です。ライブサイトではなく、先にテスト環境で確認してください。

add_shortcode( 'teacher_badge', function () {
    if ( ! is_singular( 'teacher' ) ) {
        return '';
    }

    $post_id   = get_the_ID();
    $title     = get_post_meta( $post_id, 'teacher_title', true );
    $specialty = get_post_meta( $post_id, 'specialty', true );

    if ( is_array( $specialty ) ) {
        $specialty = implode( ' / ', array_map( 'sanitize_text_field', $specialty ) );
    }

    $parts = array_filter( array( $title, $specialty ) );
    if ( empty( $parts ) ) {
        return '';
    }

    return '<div class="teacher-badge">' . esc_html( implode( '｜', $parts ) ) . '</div>';
} );

Elementorのテキストウィジェットなどに[teacher_badge]と入れると、講師詳細ページだけでラベルを出せます。これはあくまで任意の見た目調整です。講師一覧そのものは、JetEngineのDynamic FieldやListing設定で作れます。スニペットを使う場合は、フィールド名の打ち間違い、キャッシュ、テーマ側CSSの影響も確認してください。

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

講師一覧はJetEngine入門として分かりやすい題材ですが、作り込みの境界もあります。たとえば、講師ごとにログイン権限を持たせる、受講者の個人情報を表示する、講座の申込状況と連動する、決済や予約までつなぐ、という段階では慎重に設計してください。

個人情報や会員ページを扱う場合は、表示条件だけで安全になるわけではありません。権限、プライバシーポリシー、バックアップ、スパム対策、管理者の確認フローが必要です。また、講師数や講座数が多くなり、複雑な絞り込みを多用すると、表示速度にも影響します。JetEngineは動的サイト制作の土台になりますが、セキュリティ設計やパフォーマンス調整まで自動で肩代わりするものではありません。

この構成が向いている人・向いていない人

この構成が向いているのは、Elementorで見た目は作れるけれど、同じ型の情報を何度も手入力している人です。講師一覧、スタッフ紹介、制作事例、サービス一覧、店舗一覧のように、複数件の情報を同じデザインで表示したいサイトに向いています。

一方で、1ページだけのLP、更新頻度が低い小規模サイト、一覧や詳細ページがほとんど増えないサイトでは、JetEngineを入れるほどではない場合もあります。導入する前に、「何件くらい登録するのか」「誰が更新するのか」「後から並べ替えや絞り込みが必要か」を確認してください。

導入前にチェックしたい小さな設計メモ

講師一覧を作る前に、紙やメモアプリでよいので、登録する講師を3人だけ仮に書き出してみてください。講師AはElementor担当、講師BはWordPress担当、講師Cはデザイン担当というように、実際に入りそうな値を入れます。そのうえで、一覧カードに出す情報、詳細ページだけに出す情報、管理者だけが見る情報を分けます。

この確認をすると、フィールドの作りすぎを防げます。たとえば「講師からの一言」「得意な業種」「保有資格」「登壇実績」「SNSリンク」を全部入れたくなるかもしれません。しかし、一覧にも詳細にも使わない項目を増やすと、管理者は入力に疲れます。最初はカード表示に必要な項目を中心にして、運用後に本当に必要な項目だけ追加する方が続きます。

もう1つ確認したいのは、更新担当者の画面です。制作した本人はJetEngineの設定を理解していますが、運用担当者は「どこを編集すればサイトに反映されるのか」だけ分かれば十分です。管理画面のメニュー名、フィールドラベル、説明文を日本語で整えておくと、公開後の質問が減ります。動的サイトは、設定の高度さよりも、更新する人が迷わない構造の方が大切です。

まとめ

JetEngineのカスタム投稿タイプは、Elementorサイトに「情報を登録して、自動で表示する」流れを作るための基本です。今回の講師一覧では、講師CPTを作り、肩書き、専門分野、写真、紹介文、表示順、公開状態を入力項目として分けました。Elementor側では1件分の講師カードを作り、Listing Gridで繰り返し表示します。

運用面で楽になるのは、情報更新の場所が明確になることです。見た目をElementor、情報をJetEngine、表示条件をQuery BuilderやDynamic Visibilityというように分けて考えると、静的ページから一歩進めます。逆に、最初から関係や条件を増やしすぎると管理が難しくなるため、まずは小さな講師一覧から始めるのが現実的です。

JetEngine公式ページを見てみる