WordPressサイトにポップアップウィンドウを設置する方法をお探しの方向け。
Webサイトを訪問すると、以下のようなポップアップが表示されるサイトを見たことありませんか？
- ページをスクロールすると出現する
- サイトから離脱しようとすると出現する
このようなポップアップは通常、プログラムを用意する必要があり、初心者の方が設置するのはハードルが高いですが、プラグインを使うと簡単に設置できます。
この記事では、WordPressサイトにポップアップ表示を簡単に設置できるプラグイン、「Boxzilla」を使ってポップアップを設置する手順や使い方を解説します。
WordPressプラグインBoxzillaでポップアップを設置する手順
WordPressプラグイン、Boxzillaでポップアップを設置する手順を解説します。.
- 手順①：Boxzillaのインストール
- 手順②：ポップアップの作成
- 手順③：ポップアップ表示の外観を設定する
- 手順④：ポップアップの動作設定
上記のとおり。
手順①：Boxzillaのインストール
まずは「boxzilla」をインストールします。
ダッシュボード＞プラグイン＞新規追加 を選択します。
プラグイン検索窓に「boxzilla」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。インストール終了後「有効化」をクリックして、プラグインを有効化します。
左側メニューの「設定」を確認すると、「boxzilla」という項目が追加されたことが確認できます。
手順②：ポップアップの作成
プラグインをインストールしたら、ポップアップを作成します。
ダッシュボード＞Boxzilla＞Add New を選択します。
ポップアップ作成画面が表示されますので、①タイトルを入力し、②ポップアップでアピールしたい内容を入力します。
「MailChimp for WordPress」のショートコードを貼り付ければ、メールフォームを簡単に設置できます。
詳しくは別記事の「MailChimpのフォームをWordPressに簡単に設置できる「MailChimp for WordPress」」をどうぞ。
手順③：ポップアップ表示の外観を設定する
ポップアップ表示の外観を設定します。
各項目の設定方法は下記のとおりです。
- Background color：背景色を変更できます。
- Text color：文字色を変更できます。
- Box width：ポップアップ画面の幅を px 単位で指定できます。
- Border color：枠線の色を変更できます。
- Border width：枠線の幅を px 単位で指定できます。
- Border style：枠線のスタイルをDefault、Solid（線）、Dashed（破線）、Dotted（点線）、Double（二重線）の５種類の中から選択できます。
手順④：ポップアップの動作設定
ポップアップの動作設定を行います。
各項目の設定方法は下記のとおりです。
- Load this box if：ポップアップ画面を読み込む条件を「any（指定のページ）」、「All（全てのページ）」で設定できます。
- 初期設定では「any」の「everywhere（どこでも）」となっていますが、投稿ページや、固定ページだけに表示させたい場合、if page、if postなどを選択すると選択したページのみ表示できます。
- Box Position：ポップアップ画面の表示位置を指定します。
- Animation：ポップアップ画面を表示する際のアニメーションタイプを指定します。
- 「Fade In（フェードイン）」か「Slide In（スライドイン）」のいずれかを選択します。
- Auto-show box?：ポップアップ画面を表示させるタイミングを指定します。
- 訪問後すぐに表示させたり、指定した秒数が経過したら表示させたり（例「３秒後に表示など」）、ページを〇％スクロールしたら表示させるなど、設定できます。
- Cookie expiration：このポップアップ画面を表示もしくは非表示にされた後に再表示可能にするまでの時間を指定できます。
- 例えば、「Dismissed」を３hoursに設定すると、3時間以内に再アクセスした場合は表示されません（3時間を経過しないと表示されない）。
- Screen width：ポップアップ画面を表示しても良い端末の画面の幅を指定できます。
- Auto-hide?：スクロールをもとに戻した際にポップアップ画面を隠すかどうかを選択できます。
- Show close icon?：ポップアップ画面の「閉じるボタン」を表示させるかどうかを選択します。
- Enable test mode?：テストモードを有効にするかどうか。有効にすると cookie による制御を無効化し全てのポップアップ画面を表示します。
WordPressプラグイン「Boxzilla」でポップアップを作成する具体例
「Boxzilla」でポップアップを作成する具体例を、ポップアップに記載する文章、外観、動作の3ヶ所ご紹介します。
- ポップアップの文章
- ポップアップの外観
- ポップアップの動作
上記のとおり。
ポップアップの文章
タイトルはユーザーに見られないので、管理しやすい名称を入れればOKです。
ポップアップに記載する文章はあまり文字数が多すぎても目に留まりにくいので、ひとまず以下のような感じが収まりが良いのではないかと思います。
ちなみに、上記のケースでは文章の一番下に「MailChimp for WordPress」のショートコードを貼り付けてます。
ポップアップの外観
オレンジ色のフォームを作成するので、「Background color」をオレンジ色に設定しました。
横幅は380pxです。
ポップアップの動作
初めて作成される方は、以下の動作設定でポップアップを作成してみて下さい。
- Load this box if：「any」と「everywhere」を選択
- Box Position：「Bottom Right（右下）」を選択
- Animation：「Slide In」を選択
- Auto-show Box?：ページに訪問してから3秒後に表示させたいので、「Yes, after」を選択して3秒後に設定
- Cookei expiration：再訪３時間以内は表示させないので、Dismissed を「3 hours」に設定
- Screen width：特に何も設定していません。
- Auto-hide?：閉じるボタンを押されるまで表示させたいので「いいえ」を選択
- Show close icon?：閉じるボタンを表示させたいので「はい」を選択
- Enable test mode?：テストモードじゃないので「いいえ」
以上で設定は完了です。
まとめ
以上、WordPressサイトにポップアップ表示を簡単に設置できるプラグイン、「Boxzilla」を使ってポップアップを設置する手順や使い方を解説しました。
ポップアップは訪問者の注意を引き付けやすいため、メールフォームを設置すると登録率はアップします。
ただ、コンテンツを覆い隠すほど大きくしたり、頻繁にポップアップを表示させるとユーザーに嫌がられる可能性がありますので、ほどほどに表示させるよう、気を付けましょう。