ポップアップ表示を簡単に作れるプラグイン「Boxzilla」を使ってメールマガジンの登録アピールしよう

WordPress

ウェブサイトを訪問すると、たまにポップアップが表示されたりするサイトがあるのを見たことありませんか?

例えば、以下のようなケースです。

  • ページをスクロールすると出現したり、
  • サイトから離脱しようとすると出現したり、

このようなポップアップは通常、プログラムを用意する必要があり、初心者の方が設置するのはハードルが高いですが、プラグインを使うことで簡単に設置する事が出来ます。

「Boxzilla」の使い方

WordPressサイトにポップアップを簡単に作成できる「boxzilla」というプラグインを使う事により、ポップアップを簡単に設置する事ができます。

この記事では、「boxzilla」の使い方について解説していきます

Boxzillaのインストール

それでは早速、「boxzilla」をインストールしていきます。

ダッシュボード>プラグイン>新規追加 を選択します。

プラグイン検索窓に「boxzilla」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。インストール終了後「有効化」をクリックして、プラグインを有効化します。

左側メニューの「設定」を確認すると、「boxzilla」という項目が追加されたことが確認できます。

ポップアップの作り方

プラグインをインストールしたら、早速、ポップアップを作ってみましょう。

ダッシュボード>Boxzilla>Add New を選択します。

ポップアップ作成画面が表示されますので、①タイトルを入力し、②ポップアップでアピールしたい内容を入力します。もちろん、メールフォームを設置する事もできます。

「MailChimp for WordPress」のショートコードを貼り付ければ、メールフォームを簡単に設置できます。

詳しい解説は「WordPressサイトとMailChimpを連携するプラグイン「MailChimp for WordPress」でリストを獲得」を参考にして下さい。

ポップアップの見栄えに関する設定

ポップアップ画面の外観を設定することができます。

Background color背景色を自由に変更することができます。
Text color文字色を自由に変更することができます。
Box widthポップアップ画面の幅を px 単位で指定することができます。
Border color枠線の色を自由に変更することができます。
Border width枠線の幅を px 単位で指定することができます。
Border style枠線のスタイルをDefault、Solid(線)、Dashed(破線)、Dotted(点線)、Double(二重線)の5種類の中から選択できます。

ポップアップの動作に関する設定

Load this box ifポップアップ画面を読み込む条件を「any(指定のページ)」、「All(全てのページ)」で設定できます。

初期設定では「any」の「everywhere(どこでも)
」となっていますが、投稿ページや、固定ページだけに表示させたい場合、if page、if postなどを選択すると選択したページだけに表示させる事ができます。

Box Positionポップアップ画面の表示位置を指定します。
Animationポップアップ画面を表示する際のアニメーションタイプを指定します。「Fade In(フェードイン)」か「Slide In(スライドイン)」のいずれかを選択します。
Auto-show box?ポップアップ画面を表示させるタイミングを指定します。訪問後すぐに表示させたり、指定した秒数が経過したら表示させたり(例「3秒後に表示など」)、ページを〇%スクロールしたら表示させるなど、設定することができます。

Cookie expirationこのポップアップ画面を表示もしくは非表示にされた後に再表示可能にするまでの時間を指定できます。例えば、「Dismissed」を3hoursに設定すると、3時間以内に再アクセスした場合は表示されません(3時間を経過しないと表示されない)。
Screen widthポップアップ画面を表示しても良い端末の画面の幅を指定できます。
Auto-hide?スクロールをもとに戻した際にポップアップ画面を隠すかどうかを選択できます。
Show close icon?ポップアップ画面の「閉じるボタン」を表示させるかどうかを選択します。
Enable test mode?テストモードを有効にするかどうか。有効にすると cookie による制御を無効化し全てのポップアップ画面を表示します。

 

ポップアップの作成例

試しに、このような感じで作成してみました。

ポップアップの文章

タイトルは外に見えないので適当です。

文章はあまり文字数が多すぎても目に留まり難いので、ひとまず以下のような感じが収まりが良いのではないかと思います。

反応率次第では文字数を変更してみますが…
文章の一番下に「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:再訪3時間以内は表示させないので、Dismissed を「3 hours」に設定
  • Screen width:特に何も設定していません。
  • Auto-hide?:閉じるボタンを押されるまで表示させたいので「いいえ」を選択
  • Show close icon?:閉じるボタンを表示させたいので「はい」を選択
  • Enable test mode?:テストモードじゃないので「いいえ」

というように設定しています。

以上で設定は完了です。

 

まとめ

以上、ポップアップを簡単に作成する事ができるプラグイン、「boxzilla」の使い方について解説しました。

ポップアップは訪問者の注意を引き付けやすいため、メールフォームを設置すると登録率がアップする傾向がありますが、

コンテンツを覆い隠すほど大きくしたり、頻繁にポップアップが出現したりするとユーザーに嫌がられる可能性がありますので、ほどほどに表示させるよう、気を付けましょう!

 

もし、MailChimpの使い方を網羅したページに興味がありましたら、以下の記事でMailChimpの使い方をまとめていますので、参考にして下さい。

トップへ戻る
タイトルとURLをコピーしました