特定のページだけにモーダルウィンドウを表示するWordPressプラグイン「Popup Maker」

ネットサーフィンをしていると画面内に突然別のウィンドウが表示されることはないでしょうか。煩わしいこともありますが、制作サイドの視点で考えるとマーケティング的に有効な手段の一つにもなります。

モーダルウィンドウとよばれるこの機能は、jQueryなどを使って実装する方法もありますが、本項では、レスポンシブデザインに対応したモーダルウィンドウをも簡単に実装できるWordPressプラグイン「Popup Maker」の使い方についてご紹介いたします。

モーダルウィンドウとは

モーダルウィンドウとは、ホームページ上に自動表示されるポップアップウィンドウのことです。特定の箇所をクリックした際や、時間経過に合わせて、自動表示される場合が多いです。

メールアドレスの登録やお気入り登録など、マーケティング目的で使用されることが多いです。

モーダルウィンドウの役割

モーダルウィンドウが使用される主な目的は以下です。

1. オプトイン
2. 広告宣伝
3. 重要メッセージの通知
4. 警告メッセージ

TCDテーマでもモーダルウィンドウを表示可能なモーダルCTAを実装しているWordPressテーマがあります。下記WordPressテーマで動作をご確認いただけます。

→ FAMOUS（デモサイト）
→ ROCK（デモサイト）

プラグイン「Popup Maker」の使い方

「Popup Maker」とはWordPressで動作する無料のプラグインです。特定のページに対して条件を設定してモーダルウィンドウを表示できます。

プラグインインストール

下記のボタンより、プラグイン「Popup Maker」をダウンロードできます。
wp-content/pluginsディレクトリにインストールした後、管理画面から有効化してください。

Popup Maker

基本設定

以下の手順通りに進めれば、必ずモーダルウィンドウを表示可能です。大きく分けて以下の3ステップで設定していきます。

1. 表示内容の設定
2. 起動条件の設定
3. 動作確認

有効化するとダッシュボードのツール内に「Popup Maker」が表示されますので、「Add New Popup」をクリックし、下記の画面を表示させます。

1. 表示内容の設定

通常の固定ページと同様、タイトルや、本文を入力し、挿入したい画像などを設定する

2. 起動条件の設定

1.の設定が完了したら、「Popup Settings」にてモーダルウィンドウの起動条件を設定します。

下にスクロールし「Add New Trigger」をクリックし条件を設定します。
「Click Open」（クリックして起動）か「Time Delay/Auto Open」（時間の経過によって自動で起動）から選択可能です。

＜クリックして起動する場合＞
下記箇所に表示させたいCSSのセレクタを入力します。特に入力しなくても、投稿や固定ページにリンクを表示させることで、モーダルウィンドウを表示させることが可能です。

＜時間経過によって自動で起動する場合＞
下記箇所にてミリ秒単位で設定可能です。設定した秒数後に自動でポップアップ表示されます。

それぞれ、クッキーを設定することで、ポップアップ画面が何度も表示されないようにもできます。
クッキーは、Trigerのすぐ下の「Add New Cookie」で設定できます。

クッキーが作成されるタイミングは、ポップアップを開いた時、閉じた時などから選択可能です。設定が完了したら公開をクリックしておきます。

公開後に、「All Popups」をクリックし一覧を表示します。ここで以下の数字をコピーしておきます。

3. 動作確認

最後に表示させたい投稿ページや固定ページのテキストタブにて、下記のコードを記述します。

[popup_trigger id="2.でコピーした数字" tag="span"]任意のテキスト[/popup_trigger]

今回の例であれば、下記のように記述します。

これで実際の画面には、以下のように表示されます。

ポップアップの詳細設定

ポップアップの編集画面の下部の「Popup Settings」では、基本設定にて設定したTrigger（起動条件）以外にも以下のような設定が可能です。

• Targeting（ポップアップを表示するページをページ単位で設定可能）

  

  下部のチェックボックスでスマホやタブレットでポップアップを表示するか否かを設定できます。

• Display（テーマの選択、ポップアップのサイズ、ポップアップのアニメーション、ポジション等）
• Close（クローズボタンが表示されるまでの秒数、オーバーレイをクリックして閉じられるかどうかなど）

モーダルウィンドウのデザインを選択可能

以下の6種類のデザインがデフォルトで用意されていますので、任意に変更可能です。

• Default Theme
• Light Box
• Enterprise Blue
• Hello Box
• Cutting Edge
• Framed Border

またデフォルトのテーマをそれぞれ編集することができ、新たなテーマを自身で追加することも可能です。非常に細かいデザインまでこだわって反映させることができます。

• オーバーレイの設定（色、透明度）
• コンテンツの詳細設定（パディング、枠、背景色の透明度、枠線のスタイル、ドロップシャドウ等）
• タイトルの詳細設定（カラー、フォント、行間、配置等）
• 本文の詳細設定（色、フォント、文字のスタイル等）
• クローズボタンの詳細設定（テキスト、ポジション、サイズ、フォント、枠線、ドロップシャドウ等）

編集画面右手には、リアルタイムでプレビューも表示されるので、どこがどう変化するのか直感的な操作で確認できるのも実用的です。

まとめ

モーダルウィンドウの用途はさまざまで、使い方によっては、ユーザーに不快な思いをさせてしまいます。しかし、そのほとんどが適切な活用ができていない場合に起こります。当記事で紹介してきた「Popup Maker」プラグインでは、ユーザーに配慮した細やかな設定が可能ですので、うまく活用すれば、モーダルウィンドウから鬱陶しさのみを取り除き、スタイリッシュなマーケティングツールの一つとして活用できるのではないでしょうか。

最後に。本プラグインの動画解説をご視聴になりたいからはこちらからどうぞ。

ご自身でJavaScriptでモーダルウィンドウを表示したい方はこちらの記事を参考にどうぞ（プログラマー向きの記事です）。