プラグイン概要

WordPress のプラグイン Popup Maker は、WordPress サイトにポップアップ表示機能を簡単に追加することができるプラグインです。 用語の解説や商品の詳細、注意事項など、ページ本文に入れると煩雑になってしまう項目でもポップアップを使って表示することによって見たい人だけにスマートに表示することができます。 他にもフォームをポップアップで表示させたり、メディアを埋め込んで表示させる等ということもできるので、アイデア次第ではスマートでスタイリッシュなページを作成することが可能になります。 ポップアップはセンターポップアップ、右下スライドイン、トップバーなど様々な位置に表示することができます。 その他、設定で様々な見た目やタイミング等を変えることができるので是非試してみてください。

このページでは Popup Maker の基本的な使い方を紹介します。

---

インストール方法

まず、WordPress のダッシュボード画面を開きます。

1. ダッシュボード左側のメニューから「プラグイン」を選択します
2. 表示されたメニューから「新規追加」を選択します

1. 表示された検索画面のキーワード欄に「Popup Maker – Popup Forms, Opt-ins & More」と入力します
2. 表示された検索結果の Popup Maker – Popup Forms, Opt-ins & More の情報を確認します
3. 「今すぐインストール」ボタンをクリックします

1. プラグインのインストールが完了すると「有効化」ボタンが表示されるので、このボタンをクリックします

1. 有効化が完了するとプラグイン一覧が表示されるので「Settings」をクリックします

以上で Popup Maker のインストールが完了し、設定画面が表示されます

---

日本語化

Popup Maker は日本語化されていませんので、インストールしただけでは上記のように英語のメニューになっています。
英語での使用に違和感の無い方はこのまま使用しても問題無いと思います。

日本語で使用したい方は、日本語データを販売していますのでこちらを適用してからご使用ください。

日本語化ファイルを適用すると以下のように日本語メニューで設定等が行えるようになります

これ以降は日本語化後のメニューを使って Popup Maker の使い方説明を行っていきます。

---

Popup Maker の使い方

まずは基本的なポップアップ画面を表示させてみます

ダッシュボード画面から以下の手順で操作してください

1. ダッシュボード左側の「Popup Maker」をクリックしてポップアップ一覧画面を表示します
2. 「新しいポップアップを追加」をクリックしてポップアップの設定に進みます

ポップアップの設定画面が開きます

作成したいポップアップの情報を設定していきます

1. ポップアップ名を入力します。ここは管理用の名前でユーザには見えませんので自分でわかりやすい名前を入力しておきます
2. ポップアップタイトルを入力します。ここで入力したテキストはポップアップの見出しとして表示されますので、ユーザにとってわかりやすい文字を入力します
3. ポップアップの内容を作成します。ビジュアルエディタが使えますので画像やリスト、表などを入れて比較的自由に作成できます。
4. 「新しいトリガーを追加」をクリックしてトリガーを追加します。トリガーとは、どんなきっかけでポップアップを開くのか指定するものです。

トリガーの設定画面が開きます

1. 「開く」をクリックします、を選択します。これはユーザが何かをクリックしたときにポップアップを開くトリガーになります
2. 「追加」をクリックします

1. クッキー名の欄に表示されているクッキーのXをクリックして削除します。クッキーを設定していると2回目のクリックからポップアップが開かなくなります。
2. 追加をクリックします

1. 公開をクリックしてポップアップの作成を完了します

これで基本的なポップアップの作成は完了です

次にポップアップを投稿画面に組み込んでいきます

1. ポップアップ一覧画面のCSSクラスの欄にある文字列をコピーしておいてください。これを使って投稿画面に組み込みを行います

適当な投稿ページ（固定ページでも良いです）を作成してください

1. 例としてボタンブロックを配置します
2. ブロック設定の「高度な設定」を展開します
3. 「追加CSSクラス」の欄に先ほどコピーしておいたポップアップのCSSクラス名を入力します
4. プレビューをクリックして投稿ページのプレビューを表示します

1. 表示された投稿プレビュー画面で先ほどクラス名を設定したボタンをクリックします

以下のようにポップアップが表示されました

1. CLOSEボタンをクリックするとポップアップが閉じて投稿が表示されます

無事にポップアップが表示されましたが、そのままだと後ろに何も表示されていなくてポップアップ感がないですね。

ポップアップの設定を変更してよりポップアップ感を出してみます

ポップアップの設定ページを開きます

1. ポップアップ設定の「表示」をクリックして表示設定を開きます
2. ポップアップテーマの欄で「Light Box」を選択します
3. 「更新」をクリックしてポップアップ設定を保存します

設定を保存したら投稿ページのプレビューを開き直して試してみます

今度は投稿画面がバックに残っていて、よりポップアップ感が増しました

1. CLOSEボタンも x ボタンに変わっています。これをクリックするとポップアップが閉じます。

さらにいくつか設定を変更してみます

ポップアップの設定画面でいくつか設定を変更していきます

1. ポップアップ設定欄の「閉じる」をクリックして閉じる関係の設定を開きます
2. 「オーバーレイをクリックして閉じます、にチェックを入れます。ここにチェックを入れると閉じるボタンだけでなく、ポップアップの周りの薄暗くなっている部分をクリックしてもポップアップが閉じるようになります

1. ポップアップ設定欄の「表示」をクリックして表示設定を表示します
2. 「サイズ」をクリックしてポップアップのサイズに関する設定を表示します
3. 最大幅を30％に設定します

1. 「ポジション」をクリックしてポップアップの表示位置に関する設定を表示します
2. ロケーションで「右下」を選択します
3. 「下」欄の数値を30pxに設定します。これは画面下からの余白を30ピクセル分あけるという意味です。
4. 「右」欄にも30pxを設定します

これで設定を保存して、投稿プレビュー画面を表示しなおしてみます

プレビュー画面でポップアップを開くボタンをクリックしました

1. 最大幅30％、余白30px、変更した設定が反映されたポップアップになっています
2. ポップアップの外側（オーバーレイ部分）をクリックしてもポップアップを閉じることができるようになっています

このような形で設定をいろいろと変化させることで様々なポップアップを組み込むことができます。問合せフォームなどをポップアップの中に組み込むこともできますので是非いろいろと試してみてください。

以上で Popup Maker の使い方の解説は終了です。
Popup Maker の日本語化はこちらをご確認ください。