Web集客無料メール講座

ウェブ集客に関するメール講座を期間限定で無料購読できます。

詳細はこちら

ポップアップ表示を簡単に作れるプラグイン「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?:テストモードじゃないので「いいえ」

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

実際のプラグインの動作は以下のページで確認できます。

事業再生マニュアル | 倒産危機を回避する資金繰りノウハウ。倒産回避のための「事業再生マニュアル」
資金繰りが苦しく、銀行に見放され、専門家や支援機関の相談員に相談しても「破産した方が早い」としか言われなかったとしても、クライアントで公課実証済みのノウハウによって、多くの方が破産すること無く、今でも経営継続されています。
ちなみに、一度ポップアップのを閉じたら3時間は表示できないようになっています。

 

まとめ

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

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

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

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
無料メール講座
集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法

期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」

PROFILE
この記事を書いた人
瀬間 隆司

上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

フォローする
WordPressプラグイン
クリエイトエクスプレス