JetEngineのDynamic Visibilityで条件つき表示を作る具体例

セミナー詳細ページでよくある失敗は、受付が終わったあとも申込ボタンが残ってしまうことです。Elementorで静的に作ったページなら、担当者がボタンを手で消せば済みます。ただ、セミナーが増えると「満席」「受付終了」「会員限定」などの状態をページごとに確認する必要が出ます。

この記事では、JetEngineの表示条件（Dynamic Visibility）を使い、受付中のセミナーだけ申込CTAを表示する具体例を作ります。想定するのは、セミナー詳細ページに「申込する」ボタンを出したいけれど、満席や期限切れのページでは自動で非表示にしたいElementorユーザーです。

公式ドキュメントでは、Dynamic VisibilityはElementorのウィジェット、セクション、コンテナ、Gutenbergブロック、Bricks要素などに対して、条件に応じた表示・非表示を設定できるJetEngineのモジュールとして説明されています。この記事では、まずElementorのセミナー詳細ページに絞り、表示条件の考え方を実務向けに整理します。

JetEngine公式ページを見てみる

今回の流れは、番号付き画像を2枚続けて見ると分かりやすいです。1枚目で「作る画面、データの箱、表示条件」を整理し、2枚目で「Elementor側の設定と運用フロー」を確認します。

この記事で分かること

• Dynamic Visibilityをどの場面で使うのか
• 受付状態、残席数、開催日を入力項目として持たせる考え方
• ElementorのCTAブロックに表示条件を付ける設定例
• AND条件とOR条件を混ぜるときの注意点
• 会員情報や個人情報を扱う表示条件で慎重にすべきこと
• 見た目を整えるための任意CSSスニペット

まず何を作るのか

今回作るのは、セミナー詳細ページの申込CTAです。ページの中ほど、または下部に「申込する」ボタンを置きます。ただし、すべてのセミナーに同じボタンを出すわけではありません。受付状態が「受付中」で、残席数が1以上で、開催日が過ぎていない場合だけ表示します。

静的なElementor運用では、満席になったら担当者がページを開いてボタンを消します。受付を再開したら、またボタンを戻します。単発ページならそれで十分ですが、セミナーが複数ある場合、更新漏れが起きやすくなります。Dynamic Visibilityを使う構成では、セミナーの入力項目を条件として読み取り、CTAブロックの表示を切り替えます。

ここで作るのは、決済や予約の完全な仕組みではありません。まずは表示してよい状態のときだけCTAを見せるところまでです。申し込みフォームや決済、通知、キャンセル待ちは、別の設計として考えます。

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

表示条件を作る前に、条件の材料になる入力項目を決めます。今回もデータの箱（CPT）は seminar とします。前回のDynamic Fieldの記事と同じように、セミナー情報をWordPress側で管理し、Elementor側では詳細ページの見た目を作ります。

受付状態は、日本語の表示名と内部値を分けると扱いやすいです。管理画面では「受付中」「満席」「受付終了」と見せ、条件では open、full、closed のような短い値を使います。日本語のラベルを条件値にしても動きますが、表記変更の影響を受けやすくなります。

残席数はNumber型にします。Text型にすると「残り12席」「12」「あと少し」のような値が混ざり、数値比較がしにくくなります。表示上はDynamic Fieldで「12席」と整えればよいので、保存する値は比較しやすい形に寄せます。

Elementor側ではどこに条件を付けるのか

Elementorでは、申込ボタンだけに条件を付ける方法と、CTA全体のブロックに条件を付ける方法があります。実務では、見出し、説明文、ボタン、補足テキストをまとめたCTAブロックに条件を付ける方が分かりやすいです。ボタンだけ消えて説明文が残ると、読者が迷うからです。

CTAブロックの構成例は次の通りです。

• 見出し: このセミナーに申し込む
• 説明文: 受付中のセミナーです。フォームからお申し込みください。
• ボタン: 申込する
• 補足: 満席になり次第、受付を終了します。

このCTAブロックに対して、Dynamic Visibilityを有効にします。公式ドキュメントでは、ElementorのAdvanced内にDynamic Visibilityタブがあり、表示条件タイプ、条件、Relationを設定する流れが示されています。表示条件タイプには、条件を満たしたら表示する方法と、条件を満たしたら非表示にする方法があります。今回の例では、考えやすいように「条件を満たしたら表示」を使います。

表示条件の具体例

今回の条件は3つです。受付状態が open、残席数が0より大きい、開催日が今日以降。この3つをすべて満たしたときだけCTAを表示します。Dynamic VisibilityのRelationはANDにします。ANDは、すべての条件を満たしたときだけ成立する考え方です。

実際の管理画面上では、条件項目の名称や選択肢がバージョンによって少し変わる可能性があります。大事なのは、比較する値の型を合わせることです。残席数を数値として比較するならNumeric、日付を比較するならDatetime、受付状態のような文字列を比較するならCharsとして考えます。

OR条件を使う場面もあります。たとえば「管理者には常に表示する、または受付中なら表示する」のような場合です。ただし、初心者が最初に作るCTAでは、AND条件で分かりやすく設計する方が安全です。OR条件を増やすと、意図しない条件で表示される可能性が上がります。

運用フローを決めてから条件を作る

Dynamic Visibilityは、条件を作るだけなら簡単に見えます。実務で大切なのは、誰がどのタイミングで入力項目を変えるのかを先に決めることです。受付開始時に entry_status を open にし、残席が0になったら full にする。開催後は closed にする。この運用が決まっていないと、どれだけ条件を作っても表示が安定しません。

小さく始めるなら、受付状態だけで切り替えても構いません。たとえば、entry_status = open のときだけCTAを表示する設計です。残席数や開催日まで条件に入れると自動化は進みますが、そのぶん入力ミスや時差の扱いも考える必要があります。まずは運用担当者が迷わず更新できることを優先してください。

また、満席時にCTAを完全に消すのか、代わりに「満席です」と出すのかも決めます。完全に消すとページがすっきりしますが、読者はなぜ申し込めないのか分からないかもしれません。実務では、申込CTAを非表示にし、別の案内ブロックで「満席になりました」と表示する方が親切です。この場合は、受付中CTAと満席案内にそれぞれ逆の表示条件を設定します。

会員別表示や個人情報では慎重にする

Dynamic Visibilityは、受付状態だけでなく、ログイン状態、ユーザー権限、ユーザーメタ、投稿の状態、日時などにも使えます。だからこそ、会員ページや申込者向けページに使うときは慎重に設計してください。表示条件で隠しているだけの情報を、絶対に安全な権限制御と同じように扱うのは危険です。

たとえば、会員だけに見せたい資料、申込者だけに見せたいURL、個人情報を含む内容を扱う場合は、表示条件だけでなく、ページ自体のアクセス制御、ユーザー権限、フォーム送信後の保存先、バックアップ、プライバシーポリシーも確認します。JetEngineやCrocoblockは便利な制作ツールですが、セキュリティ設計や個人情報管理を丸ごと代替するものではありません。

また、条件が増えすぎると、なぜ表示されないのかを追いにくくなります。受付状態、残席数、開催日、会員ランク、購入履歴、ユーザーID、表示端末を一度に組み合わせると、運用担当者が原因を特定できません。最初は1つか2つの条件で始め、必要な理由があるときだけ増やしてください。

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

Dynamic Visibilityが向いているのは、ページ内の一部を状態に応じて切り替える場面です。受付中だけ申込CTAを出す、満席なら案内文を出す、会員向けの補足を出す、関連データがあるときだけ一覧を出す、といった用途です。

逆に、複雑な権限管理そのもの、決済後のアクセス制御、機密情報の保護、大量データの検索条件、外部システムとの同期は、表示条件だけで解決しない方が安全です。必要なら会員管理プラグイン、フォームの権限設定、サーバー側の制御、カスタム開発、運用ルールを組み合わせます。

セミナーCTAの例でも、表示条件は「見せる・隠す」を担います。残席数の自動更新、申込者へのメール通知、キャンセル待ち、決済、管理者承認は別の仕組みです。JetFormBuilderを使えば申し込みフォームや送信後アクションを組み立てられますが、この記事ではCTA表示の条件に集中します。

この作り方が向いている人・向いていない人

向いているのは、Elementorで作った詳細ページの中で、状態に応じて一部を出し分けたい人です。セミナー、講座、イベント、会員向け資料、キャンペーン、制作事例のおすすめ枠など、表示するかどうかを入力項目で判断したいサイトに向いています。

向いていないのは、単に1ページだけのLPで、担当者が手でボタンを消しても問題ないケースです。また、申込者ごとに見える情報が違う会員サイトや、個人情報を扱う管理画面を作る場合は、Dynamic Visibilityだけで済ませず、権限、保存先、監査、バックアップ、保守を含めて設計してください。

まとめ

Dynamic Visibilityは、JetEngineで持たせた入力項目やユーザー状態を使い、Elementor上のブロックを表示・非表示にする仕組みです。今回の例では、seminar というセミナー用のデータの箱に、受付状態、残席数、開催日、申込URLを持たせ、受付中だけ申込CTAを表示する構成を作りました。

最初は、entry_status = open のような分かりやすい条件から始めるのがおすすめです。残席数や開催日を加えると便利になりますが、入力ミスや運用ルールも考える必要があります。表示条件は便利な反面、増やしすぎると原因調査が難しくなります。

セミナー詳細ページで受付中だけCTAを出せるようになると、静的Elementorページの手作業更新から一歩進めます。まずは小さなCTAブロックから試し、運用が安定してから満席案内、会員向け表示、申し込みフォーム連携へ広げてください。

JetEngine公式ページを見てみる