この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
JetEngineは、データの箱、入力項目、一覧テンプレート、表示条件を管理画面から作れるのが強みです。多くのサイトでは標準設定だけで十分です。けれども実務では、「価格を読みやすく整えたい」「日付に曜日を付けたい」「空欄のときだけ別の文言を出したい」といった小さな調整が出てきます。
この記事では、JetEngineのDynamic Fieldで表示する値を、少しだけカスタムコードで整える考え方を解説します。例にするのは、イベント一覧のカードです。JetEngineでイベント情報を持たせ、Elementor側では一覧カードとして表示し、必要なところだけWordPress標準のショートコードで表示を整えます。
まずJetEngineの標準設定でデータ構造と表示を作り、コードは「表示の整形」だけに使うのが安全です。データ保存、権限、フォーム処理、個人情報管理までコードで雑に広げると、保守が急に難しくなります。
JetEngineは動的サイト制作の土台です。公式ページでCPT、Custom Fields、Listings、Dynamic Visibility、Query Builderなどの位置づけを確認しておくと、この記事の「標準設定で作る部分」と「少しだけコードを足す部分」の境界が分かりやすくなります。
この記事で分かること
- JetEngine標準設定で作るべき範囲
- イベント一覧カードに持たせる入力項目例
- Dynamic Fieldで表示する値を整える考え方
- WordPress標準のショートコードで表示だけ調整する例
- Elementor側でどこに配置するか
- コードで複雑にしすぎない境界
まず何を作るのか
今回作るのは、イベント一覧ページです。1件のイベントカードに、イベント名、開催日、参加費、募集状況を表示します。通常のElementor静的ページなら、イベントが増えるたびにカードを複製し、日付や価格を手で直します。数件なら問題ありませんが、毎月イベントを追加するサイトでは修正漏れが起きやすくなります。
JetEngineを使う場合は、イベントというデータの箱（CPT）を作り、開催日や参加費を入力項目として分けます。Elementor側では、一覧テンプレート（Listing）を1件分だけ作り、Listing Gridでイベントを自動表示します。ここまでは標準設定で作れます。
今回コードで足すのは、参加費と開催日の見せ方です。たとえば、保存値が3500なら、表示では「3,500円（税込）」にしたい。保存値が2026-06-15なら、表示では「6月15日（月）19:00」のように読みやすくしたい。こういう表示だけの小さな整形は、短いコードで補う価値があります。
JetEngineでどのデータを持たせるのか
まずJetEngine側にイベント用のデータの箱を作ります。ここではCPT名をeventにします。公開ページに表示するイベントなので、通常の投稿のように公開できる設定にします。ただし、申し込み情報や参加者情報はここには入れません。イベントの案内に必要な情報だけを持たせます。
| 設定項目 | 値の例 | 目的 |
|---|---|---|
| データの箱の名前 | event |
イベント情報をまとめる |
| Label | イベント | 管理画面で分かりやすくする |
| Supports | Title, Editor, Thumbnail | タイトル、説明、画像を使う |
| Archive | 必要に応じて有効 | 一覧ページを作る場合に使う |
入力項目は、後で並び替えや絞り込みに使うものを分けます。
| 画面ラベル | フィールド名 | 型 | サンプル値 | 使い道 |
|---|---|---|---|---|
| 開催日 | event_date |
Date | 2026-06-15 | 日付順の表示 |
| 開始時刻 | start_time |
Text | 19:00 | カード表示 |
| 参加費 | price |
Number | 3500 | 金額表示・比較 |
| 税込表示 | tax_included |
Switcher | true | 表示文言の切り替え |
| 募集状況 | event_status |
選択式の入力 | 募集中 / 満席 / 終了 | 表示条件 |
| 対象者 | target_reader |
選択式の入力 | Elementor初級者 | 一覧での補足 |
ここで参加費をTextではなくNumberにする理由は、あとから価格順に並べたり、無料イベントだけを分けたりしやすいからです。日付も、本文に「6月15日開催」と書くだけでは並び替えに使いにくくなります。JetEngineでは、表示する前の生データをきちんと分けておくことが大切です。
Elementor側ではどう表示するのか
Elementor側では、JetEngineの一覧テンプレートを作ります。1件分のイベントカードとして、次のような構造にします。
- 画像: Dynamic Imageでアイキャッチ画像を表示
- タイトル: Dynamic FieldまたはDynamic Linkでイベント名を表示
- 開催日: Dynamic Fieldで
event_dateを表示 - 参加費: Dynamic Fieldで
priceを表示 - 募集状況: Dynamic Fieldまたは表示条件でラベル表示
- 詳細リンク: Dynamic Linkで詳細ページへ移動
標準設定だけでも、入力した値をそのまま出すことはできます。たとえば、開催日が2026-06-15、参加費が3500なら、その値をカードに表示できます。ただ、読者に見せるカードとしては少し硬いです。日付は曜日付きに、金額はカンマと円表記を付けると読みやすくなります。
JetEngineには、Dynamic Field側で前後の文字を付けたり、表示条件で出し分けたりする標準機能があります。まずはそれを使います。コードを考えるのは、標準設定だけでは整えにくい形式が出てきたときです。たとえば、金額が0なら「無料」、値があるなら「3,500円（税込）」、未入力なら表示しない、というような条件です。
標準設定で済ませる部分
カスタムコード記事だからといって、最初からコードを書く必要はありません。JetEngineで済ませるべき部分は、次の通りです。
| やること | JetEngine標準設定で作る理由 |
|---|---|
| イベントCPTを作る | データ構造は管理画面で保守した方が安全 |
| 開催日や参加費の入力項目を作る | あとから並び替えや絞り込みに使える |
| 一覧テンプレートを作る | Elementorで見た目を調整しやすい |
| 募集状況ラベルを出す | 単純な出し分けなら表示条件で十分 |
| おすすめイベントだけを出す | Query Builderで条件を管理できる |
逆に、コードを使う候補になるのは、表示用の文言整形、複数フィールドを組み合わせた短いラベル、空欄時の表示調整、同じ形式を複数テンプレートで使い回したい場合です。ここを切り分けると、コードがサイト全体を支配せず、JetEngineの保守性も残せます。
任意のコード例: 参加費表示を整える
ここでは、WordPress標準の短い表示部品を使って、現在表示中のイベント投稿からpriceを読み取り、「無料」または「3,500円（税込）」のように整える例を考えます。JetEngine独自の未確認フックは使いません。スニペット管理プラグイン、または子テーマ側の専用ファイルに追加できます。最初はスニペット管理プラグインの方が、問題が出たときに無効化しやすいです。
スニペット管理プラグインに新規スニペットとして追加し、検証サイトで確認してください。Listing Item内ではElementorの短い表示部品を置けるウィジェット、または同等の配置場所に[nc_event_price_label]を入れます。
実装の考え方は次の通りです。記事本文にそのままコードを入れると、サーバーのWAFが管理画面保存時に誤検知することがあります。そのため、この公開記事では処理の流れを文章で示します。
- 現在表示中のイベントIDを取得する
priceの保存値を読み取る- 値が空なら何も出さない
- 値が0なら「無料」と表示する
- 値があるなら桁区切りを付けて「円（税込）」を添える
- 表示に出す文字列は安全に整えてから返す
このコードは、保存済みのpriceを読み取り、表示用のHTMLを返すだけです。入力値を書き換えたり、権限を変えたり、投稿を更新したりしません。だからこそ、初心者が最初に試すカスタムコードとして扱いやすいです。
さらに見た目を整えるなら、価格ラベルに淡いミント背景、無料ラベルに淡い黄色背景を付けると分かりやすくなります。管理画面保存でWAFが反応する環境では、スタイルの実コードも記事本文ではなく、Elementor側のスタイル設定や追加スタイル欄に分けて管理する方が安全です。
ここで大事なのは、出力時にHTMLとして安全な文字列へ整えていることです。今回はNumber型の値を想定していますが、表示に出す値は安全に扱います。フォーム送信やユーザー入力に近い場所でコードを書くほど、サニタイズ、バリデーション、エスケープ、権限確認が重要になります。
開催日の表示も同じ考え方で整える
開催日も同じです。JetEngineの入力項目には日付として保存し、表示の直前に読みやすい形へ整えます。標準設定で十分ならコードは不要です。複数テンプレートで同じ曜日付き表示を使い回したい場合だけ、ショートコード化を検討します。
たとえば、event_dateとstart_timeを組み合わせて表示したい場合、考え方は次の通りです。
event_dateは日付として保存するstart_timeは「19:00」のような表示値として保存する- 表示時に日付を日本語形式へ整える
- 未入力なら無理に空のラベルを出さない
このように、JetEngineはデータを持つ場所、Elementorは表示を組む場所、コードは小さな整形を足す場所、と分けると破綻しにくくなります。コードを増やしすぎると、どこで何を表示しているのか分からなくなります。最初は1つの表示問題につき1つの小さなスニペットくらいに留めるのがおすすめです。
どこから複雑になりすぎるのか
JetEngineと短いコードを組み合わせると、標準設定では届きにくい表示を作れます。ただし、次のような領域に入ったら慎重にしてください。
- ログインユーザーごとに見せる情報を変える
- 会員情報、申込情報、決済情報を扱う
- フォーム送信時に投稿やユーザーを自動更新する
- 権限によって編集できる内容を変える
- 大量の投稿に複雑な条件をかけて一覧表示する
- 外部APIから取得した値をそのまま表示する
これらは、表示整形だけではありません。権限設計、個人情報、性能、エラー処理が絡みます。JetEngineは動的サイトを作る便利な土台ですが、すべてのカスタム開発やセキュリティレビューを不要にするものではありません。特に会員ページや申込データを扱う場合は、見た目の表示条件だけに頼らず、WordPressの権限や公開範囲を確認してください。
運用すると何が楽になるのか
この設計にすると、イベント情報の更新が楽になります。管理者はJetEngineの入力項目に開催日、参加費、募集状況を入れるだけです。Elementorのカードデザインは1回作れば使い回せます。価格のカンマや税込表記も、ショートコード側で統一されるため、担当者ごとの表記ゆれが減ります。
静的なElementorカードでは、あるページでは「3500円」、別のページでは「3,500 円」、別のカードでは「税込3,500円」と表記が揺れがちです。JetEngineで数値を保存し、表示だけ整えると、入力と表示の役割が分かれます。これは小さな違いですが、更新頻度が高いサイトほど効いてきます。
また、あとから絞り込み検索を入れたい場合にも役立ちます。参加費をNumber型で持っていれば、無料イベントだけを出す、価格順に並べる、といった拡張がしやすくなります。表示のために「3,500円（税込）」という文字列だけを保存してしまうと、後で条件に使いにくくなります。
初心者が気をつけたいこと
本番テーマのファイルを直接編集するのは避けてください。スニペット管理プラグイン、子テーマ、検証サイトを使い、問題が出たらすぐ停止できる形にします。
JetEngineとコードを組み合わせるときは、次を確認してください。
- 公式プラグインを使い、ライセンスとアップデートを維持する
- 本番サイトではなく検証サイトで先に試す
- CPTや入力項目の名前を途中で変える前にバックアップを取る
- ユーザー入力を表示する場合はエスケープする
- フォーム、会員、予約、決済に近い処理では権限確認を省略しない
- 大量の一覧や複雑な条件では表示速度を確認する
- 何でもコードで解決せず、まずJetEngine標準設定でできるか見る
今回のスニペットは表示専用です。投稿を作ったり、削除したり、権限を変えたりするコードではありません。初心者のうちは、こうした安全な表示補助から始めると、JetEngineの標準設定との役割分担がつかみやすくなります。
この作り方が向いている人、向いていない人
向いているのは、JetEngineの一覧表示は作れるようになったけれど、細かな表示整形で少し物足りなさを感じている人です。イベント一覧、講座一覧、料金一覧、制作事例一覧のように、入力値を読みやすく整えて見せたいサイトで使いやすい考え方です。
向いていないのは、コードで本格的な業務システムを作りたいケースです。会員別の権限、決済、予約枠の在庫、個人情報の閲覧制御、外部API連携などは、短い表示スニペットの範囲を超えます。その場合は、要件整理、専用プラグイン、開発者レビュー、セキュリティ確認を含めて進めてください。
まとめ
JetEngineをカスタムコードで拡張するときは、いきなり大きな仕組みを作ろうとしないことが大切です。まずJetEngineでイベントCPT、開催日、参加費、募集状況を作り、Elementorの一覧テンプレートで表示します。そのうえで、価格や日付のような小さな表示整形だけを、WordPress標準のショートコードで補います。
この分け方なら、JetEngineの管理しやすさを残しながら、標準設定の一歩先の表示を作れます。静的ページから一歩進めたいElementorユーザーにとって、最初に試すカスタムコードは「保存処理」ではなく「表示の整形」から始めるのが安全です。
