WordPressでポップアップを表示するなら、プラグインを入れる前に「誰に、どのページで、いつ、何を見せるか」を決めることが重要です。表示できるだけでは、読者の邪魔になるポップアップになりやすいからです。
Popup Makerなどを使えばポップアップ自体は作れます。一方、実際の運用では表示条件、タイミング、閉じやすさ、同じ人への表示頻度まで設計しないと、サイトの使いやすさを損なう可能性があります。
この記事では、WordPressでポップアップを作成する基本手順と、表示条件の考え方、用途別の設定、SEO・ユーザー体験の注意点をまとめます。
WordPressのポップアップで最初に決める5項目
ポップアップを作成する前に、次の5項目を1行ずつ決めます。
| 目的 | 何をしてほしいか | お知らせを読む、資料を見る、フォームへ進む |
|---|---|---|
| 対象 | 誰に見せるか | 全訪問者、特定ページの訪問者など |
| 場所 | どこで表示するか | トップ、記事、LPなど |
| タイミング | いつ表示するか | 時間経過、クリック、ページ離脱時など |
| 頻度 | 何回見せるか | 毎回、一定期間に1回など |
「全ページを開いた瞬間に毎回表示」は設定こそ簡単ですが、必要ない人にも繰り返し見せることになります。
重要なお知らせでも、対象ページを絞ったり、一度閉じた人にはしばらく表示しなかったりする方が使いやすくなります。
WordPressでポップアップを作る方法
主な方法は、ポップアップ専用プラグイン、ページビルダー等の既存機能、独自実装の3つです。
- 専用プラグイン:管理画面で内容・トリガー・表示条件を管理したい
- 既存のテーマ・ビルダー機能:すでに同じツールを使っており、ポップアップ機能が含まれる
- 独自実装:細かな挙動を制御し、保守できる開発体制がある
一般的なサイトなら、専用プラグインから検討する方が管理しやすいでしょう。プラグイン全般の評価基準はWordPressプラグインの選び方へ分離し、ここではポップアップ固有の設定に集中します。
Popup Makerでポップアップを表示する基本手順
2026年8月13日時点で、WordPress.orgにはPopup Makerが公開されています。ポップアップ本体の作成に加え、トリガーとターゲティング条件を設定できるため、WordPress内で完結させたいときの代表的な候補です。
1. Popup Makerをインストールする
管理画面の「プラグイン → 新規追加」で「Popup Maker」を検索し、作者とプラグイン名を確認してインストール・有効化します。
似た名称のプラグインもあるため、検索結果で別製品を選ばないようにしてください。導入前にはWordPress.orgの更新状況、対応WordPress、サポート情報も確認します。
2. ポップアップの内容を作る
ポップアップの編集画面で、タイトルと表示内容を作成します。本文には通常の文章、画像、フォームなどを配置できます。
内容は1つの目的に絞ります。お知らせ、メルマガ、クーポン、問い合わせを同時に詰め込むと、何を押せばよいか分かりにくくなります。
3. 表示トリガーを設定する
トリガーは「何をきっかけに開くか」です。Popup Makerの公式ドキュメントでは、クリックや時間経過などのトリガーが案内されています。
代表的な使い方は次のとおりです。
- ボタンをクリックしたら開く
- ページ表示から数秒後に開く
- 特定の操作をしたときに開く
重要な内容ほど即時表示すべきとは限りません。記事を読み始める前に画面を覆うと、訪問目的を妨げる場合があります。
4. 対象ページを設定する
ターゲティング条件で、表示するページを絞ります。Popup Makerは条件を設定しない場合、広い範囲に読み込まれる構成になるため、必要なページへ限定できるか確認します。
例えば資料請求の案内なら、関連サービスや記事だけに表示する方が自然です。全ページ共通のお知らせでも、ログインページやフォーム入力中など表示したくない場所を除外します。
5. 閉じ方と再表示の条件を確認する
閉じるボタンが見つけにくいポップアップは避けます。スマートフォンでは画面が小さいため、右上のボタンがブラウザUIと重ならないか、キーボード表示中でも閉じられるか確認してください。
同じ利用者へ表示し続けないためのCookie・頻度制御を使う場合は、保存期間と目的を決めます。設定名や利用できる機能はプラグインの版によって変わるため、現行ドキュメントを確認します。
用途別のポップアップ設定例
用途によって、適切なタイミングは変わります。
重要なお知らせ
休業、障害、受付時間変更など、訪問者全体に影響する情報です。画面全体を覆う必要がなければ、上部バナーの方が読みやすい場合もあります。
ポップアップを使う場合は、内容を短くし、詳細ページへのリンクと閉じる操作を分かりやすくします。
資料請求・問い合わせ
サービスページを読んだ人に関連情報として見せるなら、対象ページを限定します。ページを開いた瞬間より、一定時間経過や特定ボタンのクリックなど、内容に関心を示した後の方が自然な場合があります。
LP全体の構成、見出し、フォーム位置などはWordPressでLPを作る方法の担当です。ポップアップだけでLPの弱点を補おうとせず、ページ本体の導線も確認してください。
メールマガジン・会員登録
登録フォームを直接表示する場合は、入力項目を少なくし、何に登録するのかを明確にします。閉じた後に別の固定バナーを残すなど、何度も画面中央へ出さない設計も検討できます。
クーポン・キャンペーン
期間、対象、条件をポップアップ内だけに閉じ込めないことが大切です。閉じた後でもキャンペーン内容を確認できるページを用意すると、後から条件を読み直せます。
ポップアップがうまく表示されない場合の確認
表示されないときは、プラグインを入れ直す前に条件を確認します。
- ポップアップ自体が公開状態か
- 表示トリガーが設定されているか
- 対象ページ条件と除外条件が競合していないか
- Cookie等で「すでに表示済み」になっていないか
- キャッシュ・最適化プラグインの影響がないか
- ブラウザのコンソールにJavaScriptエラーがないか
- 別のブラウザやシークレットウィンドウでも再現するか
管理者ログイン中だけ動く、または管理者だけ動かない設定もあり得ます。実際の訪問者と同じ未ログイン状態でテストしてください。
スマホ表示では画面を覆いすぎない
PCでほどよい大きさでも、スマートフォンではほぼ全画面になることがあります。特にフォーム付きポップアップは、ソフトウェアキーボードが出ると閉じるボタンや送信ボタンが画面外へ移動することがあります。
最低限、次を実機で確認します。
- ポップアップ内をスクロールできる
- 閉じるボタンが常に操作できる
- 背景とポップアップの区別がつく
- 入力欄がキーボードで隠れない
- 横スクロールが発生しない
- 画面回転後も崩れない
モバイルで使いにくい場合、ポップアップより小さなバナーやページ内CTAの方が適していることがあります。
SEOとユーザー体験で注意すること
Google検索セントラルは、主なコンテンツを遮る煩わしいインタースティシャルやダイアログを避けるよう案内しています。画面全体を覆う表示で本文へすぐアクセスできない状態は、利用者だけでなく検索エンジンが内容を理解するうえでも問題になる可能性があります。
特に検索結果から訪問した直後に、本文より先に大きな広告・登録フォームを出す設計は慎重にしてください。
一方、法的義務などで必要なダイアログは別の扱いがあります。何でも「SEOに悪いから出さない」と単純化せず、表示目的と必要性を確認します。
ポップアップ公開前のチェックリスト
公開前に一度、表示条件を表にすると設定漏れを見つけやすくなります。
- 表示目的が1つに絞られている
- 対象ページが必要以上に広くない
- 表示タイミングが本文閲覧を妨げない
- 閉じるボタンがPC・スマホで押せる
- 同じ人への再表示頻度を決めている
- 未ログイン状態で確認した
- フォーム送信・リンク先を確認した
- キャッシュ有効時も動作確認した
- ポップアップを閉じても必要情報へ到達できる
表示回数だけで成功を判断せず、閉じる人が多すぎないか、フォーム入力の妨げになっていないかも見ます。
よくある質問
標準ブロックだけで一般的な自動ポップアップを管理する機能は用意されていないため、プラグインやテーマ・ページビルダーの機能、独自実装を使うのが一般的です。すでに利用中のテーマに機能があるか先に確認してください。
固定の正解はありません。記事、LP、重要なお知らせでは訪問者の行動が異なります。目的に合わせて複数のタイミングを試し、本文閲覧やフォーム操作を妨げていないか確認します。
技術的には可能でも、関連性のないページまで表示すると邪魔になりやすくなります。対象ページ、ユーザー状態、表示頻度を絞り、特にスマートフォンで本文を覆いすぎないようにしてください。
まとめ
WordPressのポップアップは、作成画面より「目的・対象・場所・タイミング・頻度」の設計が重要です。Popup Makerなどを使えば管理画面から設定できますが、全ページへ即時表示するだけでは使いやすい導線にはなりません。
公開前に対象ページ、閉じ方、再表示、スマホ表示を確認し、本文へのアクセスを妨げない範囲で使います。ポップアップはページ本体の代わりではなく、必要な情報へ補助的に案内する機能として設計してください。
