ブログを運営していて、キャンペーンの告知やちょっとしたお知らせなど「期間限定で伝えたい情報」を表示したいことが意外とあります。
そんなときに便利なのがポップアップなのですが、実際にポップアッププラグインを探してみると高機能で便利な反面、設定項目が多く、「ちょっとしたお知らせには大げさだな」と感じることがありました。
個人ブログなのでもっとシンプルに、必要なときだけ使えるポップアップ プラグインをなかなか見つけることが出来なかったので、お知らせ用にちょうどいいポップアッププラグイン「Popup Studio」を自分で作ってみることにしました。
興味のある方はぜひ試してみてください。（無料配布中）
Popup Studio とは
Popup Studio は、WordPressサイトで使う お知らせ・告知向けのポップアップを、シンプルに管理するためのプラグインです。
表示期間を決めてポップアップを出したり、複数ある場合は優先度を設定したりと、実際の運用でよく使う機能だけ に絞って作られています。
多くのポップアッププラグインは、マーケティング用途や高度なトリガー設定を前提としているものが多いので、個人ブログでは少し扱いづらいと感じることもあります。
Popup Studio はそういった方向とは異なり、
・設定が分かりやすい
・管理画面で状態を把握しやすい
・必要なときだけ、迷わず使える
ことを重視しています。
高機能ではありませんが、「ちょっとしたお知らせを、きちんと管理したい」
そんな用途にはちょうどいいプラグインです。
主な機能
Popup Studio は、高機能さよりも「実際の運用で使いやすいかどうか」を重視したものとなっています。
主な機能は下記となります。
- 管理画面からポップアップを作成・編集（クラシックエディタを使用）
- テキスト・画像・動画を使ったポップアップ表示（サイズ、位置指定あり）
- 表示開始日・終了日の設定（期間限定表示に対応、時間指定、曜日指定、除外期間あり）
- 表示する投稿、固定ページ指定、除外指定が可能
- 期間未設定の場合は常時表示として利用可能
- 複数ポップアップの管理に対応
- 優先度を設定して表示順を制御
- ポップアップごとの表示ON / OFF切り替え
- 一覧画面で表示状態・期間・優先度をまとめて確認
- 一覧画面からの簡易操作（優先度変更など）
- 管理画面からのプレビュー機能（簡易表示）
- テーマに依存しにくい構成で動作
- 個人ブログ・小規模サイト向けの軽量設計
他にも、バックアップ機能、ディバック機能（ポップアップが なぜ表示された／されなかったのか を確認するための可視化ツール）もあります
Popup Studio の使いかた
Popup Studio の管理画面は、
・Popup Studio （一覧画面）
・ポップアップを追加
・全体設定
から構成されています。
それぞれの説明をしていきたいと思います
「ポップアップを追加」画面について
「ポップアップを追加」画面は、新しいポップアップを作成し、内容や表示ルールを設定するための画面です。
表示したい文章や画像を入力し、表示期間、表示条件等を設定する画面となります。
Popup Studio →「ポップアップを追加」から新規作成します。
タイトル：管理用の名前（表示には影響しません）
ポップアップ内容：表示したい文章・画像・動画などを入力（クラッシックエディタ）
・プレビュー表示では、編集した内容を保存する前にプレビュー表示することが出来ます。
※ただし、テーマなどのCSSは読み込まないため、位置の確認などにの簡易版となります。
赤枠の部分は表示内容を設定するものとなります
青枠の部分は表示期間等の条件を設定するものとなります。
| 🔹ポップアップ ON / OFF | 個別のポップアップ表示の切り替え |
| 🔹表示位置の設定 | 初期値は中央となります。縦横それぞれ％で指定 |
| 🔹拡大率 ％で指定 | 初期値は100% |
| 🔹位置・拡大の適用範囲 | ＰＣのみ/スマホのみ/ＰＣとスマホ両方 スマホのみ（画面幅 767px 以下を基準に判定するため、タブレット端末でも該当する場合があります） |
| 🔹スマホでは表示しない | ONにした場合スマホでは表示されずPCのみとなります。（画面幅が 767px 以下の場合を対象としているため、タブレット端末でも表示されない場合があります。） |
| 🔹優先度 | 数値が大きいほど優先（複数のポップアップがある場合に便利です）さらに詳しく |
| 🔹表示期間 開始日・終了日 | 指定することで、期間限定表示ができます（未設定の場合は常時表示） |
| 🔹表示時間帯 | 指定することで、表示する時間帯を指定できます（未設定の場合は常時表示） |
| 🔹曜日指定 | ONの曜日のみ表示 初期値はすべてON |
| 🔹除外期間 | 表示を除外したい期間を設定 |
| 🔹表示設定のリセット | 表示期間、表示時間帯、曜日指定、除外期間をリセット |
下の赤枠はポップアップのクローズのタイミング、表示頻度、表示ページ指定等の設定です。
| 🔹ポップアップ表示時間(秒) | ポップアップが自動的に閉じるまでの秒数、ブランクにすると読者が閉じるまで表示されます |
| 🔹動画の再生終了後に自動で閉じる | ONの場合はホップアップ表示時間よりも優先されます |
| 🔹GIFアニメーションのループ回数 | ONの場合はホップアップ表示時間よりも優先されます |
| 🔹最大表示回数 | 1人の訪問者に対して、ポップアップを何回まで表示するかの設定 空白にするとページ読み込みの時に常に表示される |
| 🔹表示間隔（日数) | ポップアップを表示してから次に表示されるまでの間隔を日数で指定する設定 例えば、表示間隔を「3日」に設定した場合、 一度表示された後、3日間は再表示されません |
| 🔹初回アクセスページのみ表示 | サイトに初めて訪れた際に表示されたページでのみポップアップを表示します。 それ以外のページでは表示されません。 |
| 🔹カテゴリ指定ID | カテゴリーを指定したい場合にID番号を入力 |
| 🔹投稿ページ指定ID | 投稿ページを指定したい場合にID番号を入力 |
| 🔹固定ページ指定ID | 固定ページを指定したい場合にID番号を入力 |
| 🔹除外ページ指定ID | 投稿・固定ページ・カスタム投稿（単一ページ）を対象に、表示しないページIDを指定します。 ※ 投稿一覧・アーカイブページは対象外です。 |
「Popup Studio」 （一覧画面）について
「Popup Studio」（一覧画面）は、作成したポップアップを「まとめて管理するための画面」です。
表示状態や表示期間を確認しながら、必要に応じてポップアップ表示のON/OFF、優先度の変更が行えます。
※上の画像は、一覧画面に表示されている内容を右上にある『表示オプション』で表示されるものを選択しています
赤枠の部分が変更等ができるものとなります
変更内容は、瞬時に反映され保存されます。
・ ポップアップを個別に表示設定をON / OFF の切り替え
・ 優先度の変更
・簡易プレビュー表示
また、下記は詳細確認のみとなります。
・表示期間
・表示条件
表示条件がある場合にはリンク付きの”あり”が表示され、クリックするとそのポップアップの編集画面が開きます。
※ プレビューは簡易表示です。テーマ固有のデザインや装飾は、実際のページ表示で確認ください。
紫枠はディバッグになります。
※ 全体設定で、デバッグ機能を有効にした場合のみに表示されます。
ディバッグに関する説明は、別項目での説明を確認ください。
クイック編集について
クイック編集ではPopup Studio 用に赤枠の部分が変更可能となっています、
下記が変更できます。
・ステータス
・表示 ON / OFF
・優先度
・表示開始・表示終了
・日数間隔
・初回のみ表示 ON/OFF （初回アクセスのみ表示させる）
・条件設定
※表示条件がある場合にはリンク付きの”あり”が表示され、クリックするとそのポップアップの編集画面が開きます
「全体設定」について
新規作成時の初期値設定や、デバッグ・バックアップなどの補助機能を管理する画面です。
赤枠の部分は、ポップアップ機能のON/OFFの選択、ディバッグのON/OFFの切り替えとなります。
※ポップアップ機能をOFFにした場合は、個別にポップアップ表示がONとなっていても全てのポップアップが表示されなくなります。
青枠の部分は、新規作成時のデフォルト値（未入力時の初期値）、ディバッグの使い方の説明となります。
▶をクリックするとに下記の初期値の設定、ディバッグの説明画面が表示されます。
赤枠の初期設定について
新規作成時のデフォルト値
新しくポップアップを作成した際に、自動で入力される初期値を設定します。
編集画面で各項目を未入力のまま保存した場合は、ここで設定した値が使用されます。
※ 既に作成されているポップアップの設定には影響しません。
初期値は、ポップアップ表示時間、最大表示回数、表示回数カウントの期間、表示間隔、初回アクセスページのみ表示の初期値を設定できます。
※ 青枠の表示回数カウントの期間について
編集画面には表示されない項目です。
ポップアップの表示回数は、訪問者ごとにカウントされています。そのカウントを、どのくらいの期間リセットせずに累積するのかを決めるのが表示回数カウントの期間（時間） となります。
おすすめは30日（720時間）です。
デバッグ、バックアップ/復元（サーディバッグのONバー）
・ディバッグをONにすると下の青枠の部分が表示されます
・赤枠の部分がバックアップ/復元の機能となります。
デバッグの使い方（手順・見方）
このデバッグ機能は、エラー調査ではなく「ポップアップが なぜ表示された／されなかったのか を確認するための可視化ツール」で、「出ない理由が分からない」状態をなくすためのツールです。
管理画面で デバッグを ONにし、表示された青枠の部分に確認したい投稿・固定ページ等のID番号を入れ”ディバッグを開く”をクリックすると下記画面が表示されます。（一覧画面に表示されるディバッグも同じです）
※ID入力欄を空欄にした場合は、トップページでの内容が表示されます。
デバッグを使い終わったら OFFにすることをお勧めします。
※ 本番環境での動作について（重要）
本番環境でも WordPress にログインしている管理者のみ 、URLの最後に?popup_debug=1 を付ければデバッグを利用できます。
例：httos://XXXXXXXXX.com?popup_debug=1
ただし、一般ユーザー（未ログイン）は?popup_debug=1 を付けても デバッグ画面は表示されません
デバッグ画面は 管理者の確認用途のみ に表示され、一般ユーザーの表示には一切影響しません。
Result（判定結果）の結果は下記3つとなります
・ 選択
最終的に表示されるポップアップ。すべての条件を満たし、優先度・強度の比較の結果「採用」された状態
実際にユーザーに表示されるのはこの1件のみ
・候補
条件はすべてクリアしているが、他により優先度の高いポップアップが存在するため採用されなかった「表示できた可能性はある」状態
・除外
何らかの条件により 表示対象から除外された。右側に表示される理由が、その 除外理由
除外の主な理由例
曜日が条件外、表示時間帯外、除外期間中、表示回数／Cookie 制限に達している、初回のみ表示条件に合わない、対象ページ条件が一致していない、ログイン条件が一致していないなどです
優先度・強度について
・優先度
ポップアップ同士の優先順位
・強度
同一条件内での強さ、複数の 候補がある場合でも最終的に選択されるのは1件のみです。
表示条件がどれだけ一致しているか、対象ページ条件の一致度、初回表示・リピート条件、特定条件（ログイン、曜日、時間帯など）管理者が設定した重み付けで、「このポップアップは今このページで出すのにどれだけ適しているか」を数値化したものです。
※よくある「表示されない」原因は、曜日／時間帯が条件に合っていない、除外期間に入っている、Cookie・表示回数制限に達している、対象ページ条件が一致していない、他のポップアップが優先度で勝っている
または公開ではなく下書きになったままなどです。
バックアップ機能の使い方
バックアップ機能は、ポップアップの設定内容（投稿データ・メタ情報）を、誤操作や不具合に備えて退避・復元できる仕組みです。
・バックアップの対象
バックアップされるのは、主に以下の内容です。
- ポップアップ投稿本体
- タイトル
- 本文（HTML / ブロック内容）
- 各ポップアップの設定情報
- 表示条件
- 表示回数・間隔
- 除外ページID
- 位置・サイズなどのレイアウト設定
- プラグイン独自の post_meta 情報
「ポップアップ1件分の設定を丸ごと」バックアップします。
※対象外のもの
画像ファイルそのもの（メディアは参照のみ）
・バックアップの保存場所
wp-content/uploads/popup-studio-backups にpopup-studio-backup-20260115-025349.jsonの様な形式で保存されます。
必要がなくなった場合には、ご自身で削除してください。
復元（リストア）について
復元を行うには、設定画面の”復元を実行する”にチェックを入れ”最新バックアップから復元”をクリックするだけです。
バックアップから復元すると、次のような挙動になります。
・バックアップ取得時点の設定内容に 完全に戻る
・現在の設定内容は 上書きされる
・復元後は、即座にフロント表示にも反映される
※ 復元操作は元に戻せませんので実行前に内容を確認必ず確認ください。
優先度について
ポップアップが複数ある場合の優先度について、同じ優先度で最大表示回数・表示間隔（日数）がどちらも空白（＝制限なし）の場合、基本的には「常に同じポップアップ」が表示されます。
※同じ優先度、制限（回数・日数）なし、他条件も同じ場合は、 常に同じポップアップが表示されます
ただし、“運用で”ローテーションすることもできます。
表示間隔（日数）を 1 にする、最大表示回数を 1 にする、優先度を少しずらす（10 / 20 / 30 など）など少し工夫をすれば可能です。
さいごに
あまり派手な機能はいらないので、できるだけシンプルに必要な要件を満たしたポップアップを使いたいと思い、自分用に作ってみたプラグインです。
まだ不具合や足らない機能があるかもしれませんが、興味のある方はぜひ使ってみてください。
コメント