この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
Elementorでセミナー詳細ページを1枚ずつ作っていると、開催日、料金、対象者、会場、申込状況のような情報を毎回手入力することになります。ページが3件だけならまだ管理できますが、毎月セミナーが増えるサイトでは、古い料金が残る、一覧ページと詳細ページで表記がずれる、受付終了後も申込ボタンが残る、といった小さな事故が起きやすくなります。
この記事では、JetEngineの動的な項目表示（Dynamic Field）を使い、セミナー用の入力項目をElementorの詳細ページへ表示する具体例を作ります。想定するのは、静的なLP制作はできるけれど、セミナー情報を毎回コピペで直す運用に限界を感じているElementorユーザーです。
Dynamic Fieldは、ただ文字を差し込む部品ではありません。JetEngineで作った入力項目をElementorの見た目へ接続するための基本パーツです。まずはセミナー詳細ページの開催日、料金、対象者を表示できれば、静的ページから一歩進めます。
JetEngineの公式情報では、Dynamic Fieldは投稿、ユーザー、用語、オブジェクト、メタフィールド、オプションページ、関連データなどから値を取り出して表示できる動的ウィジェットとして説明されています。この記事では、その中でも初心者がつまずきにくい「投稿に持たせた入力項目を詳細ページへ出す」流れに絞ります。
今回の作り方の流れは、次の2枚で見ると理解しやすいです。1枚目で「作る画面、データの箱、詳細ページ」をつなぎ、2枚目で「入力値を表示用に整えること」と「1件の更新が一覧カードと該当詳細ページへ反映されること」を見ます。
この記事で分かること
- Dynamic Fieldをどの場面で使うのか
- セミナー詳細ページ用のデータの箱と入力項目の作り方
- 開催日、料金、対象者をElementor側へ表示する設定例
- 空欄や表記ゆれを減らすための整形ルール
- 運用が楽になるポイントと、作り込みすぎる境界
- 見た目を整えるための任意CSSスニペット
まず何を作るのか
今回作るのは、セミナー詳細ページです。1件のセミナーには、タイトル、説明文、開催日、開始時刻、参加料金、対象者、会場、受付状態、申込URLを持たせます。Elementor側では詳細ページの見た目を作り、その中の「開催日」「料金」「対象者」などをDynamic Fieldで表示します。
静的なElementorページでは、セミナーごとにページを複製して文字を書き換えます。見た目の自由度は高いのですが、情報が増えるほど更新場所も増えます。JetEngineを使う構成では、WordPress管理画面で1件のセミナー情報を登録し、一覧カードとそのセミナーの詳細ページへ同じ入力値を流し込みます。
ここで誤解しないでおきたいのは、1回の更新ですべてのセミナーが同じ情報になるわけではないことです。セミナーAにはセミナーAの開催日と料金があり、セミナーBには別の開催日と料金があります。JetEngineで便利になるのは、セミナーAを更新したら、一覧内のAカードとAの詳細ページが同じ情報を参照するという点です。
ここで大事なのは、最初から予約、決済、会員限定、複雑な検索まで作らないことです。まずは入力した情報が正しい場所に出るところまでを安定させます。表示の基礎ができてから、絞り込み検索、関連講師、申し込みフォーム連携などを足す方が安全です。
JetEngineでどのデータを持たせるのか
最初に作るのは、セミナーを入れるデータの箱（CPT）です。名前は seminar とします。通常のブログ投稿に混ぜても作れますが、セミナー一覧や詳細ページを後から作りやすくするなら、セミナー専用の管理場所を用意した方が分かりやすいです。
| 設定項目 | 値の例 | 理由 |
|---|---|---|
| データの箱 | seminar |
セミナー情報をブログ投稿と分ける |
| 管理画面ラベル | セミナー | 運用担当者が迷わない名前にする |
| Supports | Title, Editor, Thumbnail | タイトル、本文、画像を扱う |
| Archive | 必要なら有効 | 一覧ページの作り方に合わせる |
| 公開状態 | 公開ページとして表示 | 詳細ページを持たせる |
次に、セミナーに持たせる入力項目を作ります。Dynamic Fieldで表示しやすくするには、1つの長い本文に全部を書かず、表示したい情報を分けておくことが重要です。たとえば「開催日 2026年7月20日 13時から 料金5,000円 対象者は中学生以上」と本文にまとめてしまうと、一覧カードでは日付だけを出したい、詳細ページでは料金だけを強調したい、という調整が難しくなります。
| 画面ラベル | フィールド名 | 型 | サンプル値 | 表示場所 |
|---|---|---|---|---|
| 開催日 | event_date |
Date | 2026-07-20 | 詳細ページ、一覧カード |
| 開始時刻 | start_time |
Time | 13:00 | 詳細ページ |
| 参加料金 | price |
Number | 5000 | 詳細ページ、比較表 |
| 対象者 | target_reader |
Select | 中学生以上 | 詳細ページ、一覧カード |
| 会場 | venue |
Text | 東京都渋谷区 | 詳細ページ |
| 受付状態 | entry_status |
Select | 受付中 / 満席 / 終了 | CTAの表示判断 |
| 申込URL | entry_url |
URL | https://example.com/apply | 申込ボタン |
フィールド名は英数字で短くします。管理画面のラベルは日本語で構いませんが、フィールド名は後からDynamic Fieldや表示条件で参照するため、event_date や price のように意味が分かる名前にしておくと楽です。途中でフィールド名を変えると、既に作った表示設定やテンプレートの修正が必要になるので、公開前に最小構成を決めてください。
Elementor側ではどう表示するのか
Elementor側では、セミナー詳細ページのテンプレートを作ります。上部にサムネイル、見出し、短い説明文を置き、その下に「開催日」「料金」「対象者」「会場」をカード状に並べる構成にします。静的な文字として入力するのではなく、それぞれの場所にDynamic Fieldを配置します。
設定の考え方は、次のようになります。
| 表示したい項目 | Dynamic Fieldの取得元 | 出力の整え方 |
|---|---|---|
| 開催日 | event_date |
日付形式を日本語向けに整える |
| 開始時刻 | start_time |
13:00 のように短く表示 |
| 料金 | price |
数値に 円 を付ける |
| 対象者 | target_reader |
選択肢の表示名をそのまま出す |
| 会場 | venue |
空欄なら表示しない設計にする |
公式ドキュメントでは、Dynamic Fieldはテキスト、日付、時刻、日時、テキストエリア、WYSIWYG、スイッチ、チェックボックス、画像、ギャラリー、ラジオ、リピーター、セレクト、数値など、複数のメタフィールド型を表示できると説明されています。つまり、表示したい内容に合わせて入力項目の型を選ぶことが大切です。料金をTextにすると「無料」「5,000円」「5000」など表記が混ざりやすいので、数値として扱いたいならNumberに寄せる方が整理しやすくなります。
Dynamic Fieldの具体的な設定例
Dynamic Fieldを置いたら、まず「どこから値を取るか」を決めます。今回の例では、現在表示しているセミナー投稿の入力項目を出したいので、現在の投稿に紐づくメタフィールドを選びます。次に、表示したいフィールド名を選び、必要に応じて前後の文字や表示形式を整えます。
たとえば参加料金なら、次のような考え方です。
- フィールド名:
price - フィールド型: Number
- 入力値:
5000 - 表示例:
5,000円 - 表示位置: 料金カード、申込前の概要欄
開催日なら、入力値は日付として保存し、表示時に「2026年7月20日（日）」のように整えます。対象者はSelectで選択肢を用意し、「初心者向け」「中学生以上」「事業者向け」のように運用側が選ぶ形にします。自由入力にすると表記が増えすぎるので、一覧や絞り込みで使う可能性がある項目は選択式にした方が安定します。
空欄の扱いも決めておきます。会場が未定のときに「会場: 」だけが残ると不自然です。JetEngine側の表示条件やElementor側の構造で、空欄の場合は項目ごと非表示にする設計にします。Dynamic Fieldは表示の入口ですが、空欄の制御は次の記事で扱う表示条件（Dynamic Visibility）と組み合わせると実務的です。
運用すると何が楽になるのか
この構成にすると、運用担当者はElementorのデザイン画面を毎回開かなくても、セミナー管理画面から必要な値を直せます。開催日が変わったら event_date を直す、料金が変わったら price を直す、対象者が変わったら選択肢を選び直す、という形です。詳細ページの見た目はテンプレート側で統一されるため、ページごとのレイアウト崩れも起きにくくなります。
特に大きいのは、サイト全体を編集できる管理者が毎回更新しなくてもよくなることです。たとえばスタッフにはセミナー管理画面だけを触ってもらい、Elementor、サイト設定、他のデータには触らせない設計にできます。覚える画面が少なくなり、触ってはいけない場所を避けられるため、運用ミスも減らしやすくなります。
静的ページ運用では、似たページを複製して一部だけ書き換える作業が増えます。その方法は最初こそ速いのですが、あとから「全セミナーの料金表示を税込表記に変えたい」「開催日をカードの上部にも出したい」となったときに、すべてのページを触る必要が出ます。Dynamic Fieldを使う構成なら、テンプレート側の表示を変えるだけで、同じルールを複数のセミナーに反映できます。
運用面で楽になるのは、更新だけではありません。入力項目が分かれていれば、あとから一覧ページに「開催日が近い順で並べる」「料金を表示する」「対象者ラベルを出す」といった拡張がしやすくなります。絞り込み検索（JetSmartFilters）を使う場合も、対象者や開催月が入力項目として分かれている方が設計しやすいです。ただし、検索や絞り込みは最初から全部入れる必要はありません。
どこから複雑になりすぎるのか
Dynamic Fieldで表示できるからといって、入力項目を増やしすぎるのは避けた方がいいです。セミナー詳細ページであれば、最初は開催日、開始時刻、料金、対象者、会場、受付状態、申込URLくらいで十分です。講師、関連講座、受講者限定資料、キャンセル待ち、外部CRM連携まで一気に入れると、表示テンプレートより先に運用ルールが破綻します。
特に注意したいのは、個人情報や申込情報です。JetEngineは動的な表示を作れますが、申込者の氏名、メールアドレス、支払い情報、会員状態を表示する場合は、権限、プライバシーポリシー、アクセス制御、バックアップ、ログの扱いを別に設計する必要があります。プラグインの設定だけで安全性が自動的に保証されるわけではありません。
また、既存サイトでCPTや入力項目を変更すると、過去データやテンプレートに影響します。本番サイトで直接変更せず、テスト環境で表示を確認してから反映してください。バックアップを取り、不要になったフィールドをいきなり削除しないことも大切です。
この作り方が向いている人・向いていない人
向いているのは、セミナー、講座、イベント、店舗、スタッフ紹介、制作事例のように、同じ形の情報を何件も管理するサイトです。Elementorで見た目を作りながら、情報の中身はWordPress管理画面で整理したい人に向いています。
向いていないのは、1ページだけの単発LPで、今後も同じ形式のページが増えないケースです。その場合は、Elementorで静的に作る方が早いこともあります。また、大量データ、複雑な会員権限、予約、決済、外部システム連携まで必要な場合は、JetEngineだけで全部を済ませる前提にせず、設計、性能、セキュリティ、保守体制を確認してください。
まとめ
Dynamic Fieldは、JetEngineで作った入力項目をElementorの画面へ表示するための基本です。今回の例では、seminar というセミナー用のデータの箱を作り、開催日、料金、対象者、会場などを入力項目として分けました。そして、Elementorの詳細ページテンプレートにDynamic Fieldを配置し、入力値をカード状に表示しました。
静的なElementorページから一歩進めたいなら、最初に覚えるべきなのは派手な検索や複雑な会員機能ではありません。まずは、入力したデータを正しい場所に表示することです。ここが分かると、一覧テンプレート、表示条件、絞り込み検索、フォーム連携も理解しやすくなります。
セミナー詳細ページのように、同じ形の情報が増えるサイトから試すと、Dynamic Fieldの価値が見えやすいです。作り込みすぎず、必要な項目だけをデータ化して、Elementor側では見た目に集中するところから始めてください。
