JetPopupとJetEngineで条件つき案内を出す考え方

ポップアップは、ただ目立たせるために出すと邪魔になりやすいです。特にElementorで会員向けページや講座サイトを作っている場合、「全員に同じ案内を出す」のではなく、必要な人にだけ短く出したい場面が出てきます。

この記事では、JetEngineで案内データを持たせ、ポップアップ表示用のプラグインであるJetPopupを使って、会員状態別に案内を出し分ける考え方を解説します。例にするのは、会員ページに「未ログイン向け」「無料会員向け」「有料会員向け」の案内を出す小さな仕組みです。

JetPopupは個別アフィリエイトURLが指定されていないため、この記事のCTAではCrocoblock公式リンクを使います。JetEngineと組み合わせて検討する前提で確認してください。

Crocoblock公式サイトを見てみる

この記事で分かること

• JetPopupを「案内を出す場所」として使う考え方
• JetEngineで会員向け案内データを持たせる例
• Elementor側でポップアップ内容を動的に表示する流れ
• 表示条件を増やしすぎないための判断軸
• 一度閉じた案内をしばらく再表示しない任意JS

まず何を作るのか

今回作るのは、会員ページに条件つき案内を出す仕組みです。たとえば、未ログインの人には「ログインすると閲覧できます」、無料会員には「有料講座の案内」、有料会員には「次回ライブ配信の案内」を出します。ポップアップという見た目はJetPopupが担当し、どの案内を出すかを決める材料はJetEngine側で整理します。

静的なElementorページでも、案内ボックスを手で置くことはできます。ただし、ページごとに同じ案内を貼り直したり、キャンペーン終了後に消し忘れたりすると、運用が急に面倒になります。ここで考えるべきなのは、派手な表示ではなく、案内の中身をどこで管理するかです。

今回は、データの箱（CPT）として member_notice を作る想定にします。1件の案内を1投稿として登録し、会員ランク、案内種別、表示期限、リンク先を入力項目として持たせます。最初はここまで分かれば十分です。いきなり複数条件、複数ページ、細かいABテストまで入れると、何が効いているのか分からなくなります。

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

JetEngine側では、案内そのものをWordPress管理画面で登録できるようにします。本文に直接書くのではなく、案内ごとに項目を分けておくと、あとから一覧、カード、ポップアップに使い回しやすくなります。

ここで迷いやすいのは、案内文を全部本文に入れてしまうことです。短期キャンペーンならそれでも動きますが、会員ランクや期限で出し分けたいなら、条件に使う値は別フィールドに分ける方が扱いやすいです。逆に、1回だけの案内で今後使い回さないなら、ここまで分ける必要はありません。

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

Elementor側では、まず案内1件分の一覧テンプレート（Listing Item）を作るイメージです。見出しには notice_title、説明には notice_summary、ボタンには notice_url を差し込みます。これをページ内のカードとして出してもいいですし、JetPopupの中身として使うこともできます。

JetPopupは、ポップアップのレイアウト、表示タイミング、閉じる動作などを担当します。公式情報ではElementorやブロックエディターでポップアップを作れる前提が案内されており、入口や表示条件を設計して使うプラグインです。ただし、ポップアップを出せることと、出すべき相手を正しく決められることは別です。ここをJetEngine側のデータ設計で支えます。

表示としては、会員ページの上部に小さな案内カードを置き、「詳細を見る」でポップアップを開く構成が無難です。ページを開いた瞬間に大きなポップアップを毎回出すより、ユーザーが確認したいときに開ける方が嫌われにくいです。どうしても自動表示したい場合も、回数やタイミングは控えめにします。

表示条件は少なく始める

表示条件（Dynamic Visibility）は便利ですが、最初から細かくしすぎると管理しづらくなります。今回の例では、次の3つだけを基本にします。

「会員ランク = paid」「表示期限が今日以降」のように、条件は読んで理解できる粒度にします。AND条件を何段も重ねると、あとから見たときに自分でも分からなくなります。特に会員ページでは、間違った相手に案内が出ると不信感につながります。ここは少し慎重でいいです。

Query Builderで最新の案内だけ出す

複数の案内を登録するなら、Query Builderで「公開中の案内だけ」「期限内の案内だけ」「会員ランクに合う案内だけ」を取得する考え方もあります。たとえば、案内一覧で使うクエリを次のようにします。

• post_type: member_notice
• meta query: show_until が今日以降
• meta query: member_rank が対象ランクと一致
• order by: show_until の近い順
• posts per page: 1件または3件

ポップアップに出すなら、1件だけに絞る方が読みやすいです。会員ページ内の案内欄なら3件程度でも構いません。ここで欲張って多く出すと、ポップアップなのに小さなニュース一覧のようになり、閉じられるだけの表示になりがちです。

管理画面ではどう入力するか

実際の運用では、制作担当者だけでなく、サイト管理者が案内を更新することがあります。そのため、JetEngineの入力画面は「作った人だけが分かる名前」にしない方がいいです。フィールド名は notice_summary のような英数字でも構いませんが、管理画面のラベルは「短い説明」「表示期限」「対象会員」のように、更新する人が迷わない言葉にします。

たとえば、案内を1件作るときの入力順は次のようにします。

この順番にしておくと、案内を更新するときに「誰に」「いつまで」「どこへ誘導するか」を先に確認できます。文章をきれいに整えるのはその後です。ここは少し事務的ですが、案内ミスを減らすには効きます。

ポップアップの出し方は3段階で考える

JetPopupを使うと、ページ読み込み時、クリック時、スクロール時など、さまざまな出し方を考えられます。ただ、会員ページの案内では、最初から強い表示にしない方が無難です。ユーザーは目的のページを見に来ているため、毎回大きなポップアップが割り込むと、案内そのものの印象が悪くなります。

まずは次の順番で試します。

• 段階1: ページ上部に案内カードとして表示する
• 段階2: 「詳細を見る」クリックでポップアップを開く
• 段階3: 本当に重要な期限つき案内だけ自動表示する

段階1なら、案内が邪魔になりにくく、表示条件のテストもしやすいです。段階2でポップアップの中身を整え、段階3は必要なときだけにします。自動表示は最後の手段くらいに考えると、実装の失敗が目立ちにくくなります。

また、スマホ表示では閉じるボタンの位置も確認してください。PCでは問題なくても、スマホで閉じるボタンが小さい、上部メニューと重なる、本文のスクロールを邪魔する、といったことがあります。ポップアップは見た目の完成より、閉じやすさと戻りやすさの方が大事な場合があります。

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

案内をデータ化しておくと、運用担当者は管理画面で1件の案内を直すだけで済みます。たとえば、配信日が変わったら show_until と説明文を直す。リンク先が変わったら notice_url を直す。Elementorのページを開いて、同じ文言を探して書き換える必要が減ります。

また、古い案内を止めやすくなります。表示期限を過ぎた案内をクエリから外す設計にしておけば、キャンペーン終了後に古いポップアップが出続ける事故を減らせます。完全に自動で安全になるわけではありませんが、手作業で消し忘れるよりは管理しやすくなります。

任意JS: 一度閉じた案内をしばらく出さない

標準設定だけでもポップアップ表示は作れます。そこに少し足すなら、「同じ案内を閉じた人には、しばらく自動表示しない」処理が実務的です。これはポップアップを嫌われにくくするための補助で、必須ではありません。

“`js
document.addEventListener(‘click’, function (event) {
const closeButton = event.target.closest(‘[data-notice-close]’);
if (!closeButton) return;

const popup = closeButton.closest(‘[data-notice-id]’);
if (!popup) return;

const noticeId = popup.getAttribute(‘data-notice-id’);
const until = Date.now() + 7 * 24 * 60 * 60 * 1000;
localStorage.setItem(‘closed_notice_’ + noticeId, String(until));
});

document.querySelectorAll(‘[data-notice-id]’).forEach(function (popup) {
const noticeId = popup.getAttribute(‘data-notice-id’);
const closedUntil = Number(localStorage.getItem(‘closed_notice_’ + noticeId) || 0);
if (closedUntil > Date.now()) {
popup.setAttribute(‘hidden’, ‘hidden’);
}
});
“`

この例では、ポップアップの外側に data-notice-id、閉じるボタンに data-notice-close を付ける想定です。JetPopup側の標準的な閉じる動作そのものを置き換えるものではなく、サイト側で作った案内ブロックを一時的に隠す補助として考えてください。ユーザーごとの厳密な制御や会員情報に関わる処理は、localStorageだけで済ませない方が安全です。

公開前に見るテスト項目

条件つき案内は、公開前の確認がかなり大事です。普通の固定ページなら、表示されているかどうかを見るだけで済みます。しかし会員状態別の案内では、「見えるべき人に見えるか」と同じくらい、「見えないべき人に見えないか」を確認する必要があります。

最低限、次の状態でチェックします。

• 未ログイン状態で、無料会員向け・有料会員向けの案内が出ないか
• 無料会員で、有料会員向けの案内が出ないか
• 有料会員で、期限切れの案内が出ないか
• リンク先が下書きページや権限不足ページになっていないか
• スマホで閉じるボタンが押せるか
• キャッシュを使っている場合、別ユーザーの表示が混ざらないか

最後のキャッシュ確認は見落とされがちです。会員状態で表示を変えるサイトでは、ページキャッシュや最適化プラグインの設定によって、想定と違う表示になることがあります。JetPopupやJetEngineの設定だけを見ても原因が分からない場合があるので、テスト時はキャッシュを切った状態と本番に近い状態の両方を見ます。

小さく始めるなら1つの案内だけでよい

初回の実装では、未ログイン、無料会員、有料会員の3種類をすべて作らなくても構いません。まずは「無料会員にだけ有料講座の案内を出す」1パターンに絞る方が、動きの確認がしやすいです。対象者を増やすのは、その1パターンが安定してからで十分です。

具体的には、member_notice に1件だけ案内を登録し、member_rank を free にします。表示期限を1か月後に設定し、リンク先は有料講座の詳細ページにします。Elementor側では、会員ページの上部に小さな案内カードを置き、クリックしたときだけJetPopupで詳しい説明を開く形にします。

この小さな構成で見るべきなのは、デザインの完成度ではありません。無料会員で見えるか、有料会員で見えないか、期限を過ぎたら止まるか、スマホで閉じられるか。この4点です。ここが通れば、次に未ログイン向け案内や有料会員向け案内を足していけます。逆に、この段階で条件が分かりにくいなら、複数案内に広げる前に設計を直した方がいいです。

案内文も短くします。「有料講座はこちら」だけでは弱いですが、長い説明を詰め込む必要もありません。見出し、短い説明、ボタンの3つで読み切れる分量にします。ポップアップは本文ページではないので、説明したいことが多い場合は、リンク先の詳細ページに任せる方が読みやすいです。

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

ポップアップは、表示条件を増やしやすい機能です。ページ、会員ランク、閲覧回数、キャンペーン、購入状況、フォーム送信状況。条件を増やすほど細かい案内はできますが、同時に「なぜこの人に出ているのか」を追いにくくなります。

特に会員ページでは、個人情報や権限に関わる案内を出すことがあります。表示条件を間違えて、別ランク向けの案内が見える状態は避けなければいけません。JetEngineやJetPopupは表示を助ける道具であって、権限設計や個人情報保護を自動で保証するものではありません。重要な情報は、WordPress側の権限、会員プラグイン、サーバー側の制御も含めて確認します。

また、自動表示のポップアップを多用すると、ページの読み込みや体験にも影響します。毎ページで別の案内を出すより、重要なページだけに絞る方が運用しやすいです。最初は「会員ページのトップだけ」「期限つき案内だけ」くらいにして、必要になったら広げる方が現実的です。

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

向いているのは、Elementorで会員ページや講座サイトを作っていて、案内を手作業で貼り替える回数が増えてきた人です。会員ランク別の案内、期間限定のお知らせ、申込ページへの導線などを整理したい場合に向いています。

向いていないのは、案内が1つしかなく、更新頻度も低いサイトです。その場合は、Elementorの通常セクションで案内を置くだけでも十分です。ポップアップ化やデータ化は便利ですが、管理する項目が増える分だけ、最初の設計も必要になります。

まとめ

JetPopupとJetEngineを組み合わせると、ただの目立つポップアップではなく、会員状態や表示期限に合わせた案内を作りやすくなります。JetPopupは表示の箱、JetEngineは案内データと条件の土台、と役割を分けて考えるのがポイントです。

最初は member_notice のような小さなデータの箱を作り、会員ランク、表示期限、リンク先だけを持たせるところからで十分です。出し分けを増やす前に、案内の内容、対象者、停止方法を決めてください。静的ページから一歩進めるなら、まずはここからです。

Crocoblock公式サイトを見てみる