WordPressにポップアップを設置しよう！『Popup Maker』

左側メニューにPopup Makerが追加されます。

Add New Popupをクリックします。

●Popup Name
ポップアップファイル名（日本語OK）
ポップアップ一覧で表示される名前になるので、わかりやすいものにしましょう。

その下にポップアップの内容を入力します。
ブロックエディタで入力できます。

下にスクロールし、メインウインドウの下のPopup Settingsウインドウで設定します。
Settingsウインドウ内の左側、Triggersをクリックします。

Triggers

ポップアップを開くトリガーを設定します。
【Add New Trigger】ボタンをクリックすると、New Triggerウインドウが開きます。

プルダウンメニューから

●What kind of trigger do you want?

Time Delay / Auto Openを選択
（時間遅延/自動オープン）
ページを表示すると同時にポップアップを表示させる設定

●Prevent popup from showing to visitor again using a cookie?

チェック
（クッキーを使用して、ユーザーにポップアップが再度表示されないようにしますか?）
→チェックを入れると追加メニュー表示

●top showing popup once visitor takes this action

On Popup Closeを選択　
（クッキーが残るユーザーにはポップアップをすぐ閉じる⇒表示しない）

【Add】ボタンをクリックし保存します。
→Time Delay Settingsウインドウに遷移します。

●Delay

「トリガーから何秒後にポップアップを表示するか」の設定です。
ページを表示すると同時にポップアップを表示させる場合は「0ｍs」と入力します。

●Cookie Name

クッキーを設定している場合はここにクッキー名が表示されます。

【Add】ボタンをクリックし保存します。
ウインドウが閉じます。

下段の「Cookies control the repeat display of a popup.」にOn Popup Closeの設定が追加されています。
ここでクッキーの有効期限の設定をします。
［Actions］の下の設定変更マークをクリックします。

Cookie Settingsウインドウが開きます。

Cookie Settingsウインドウ

●Cookie Name

クッキー名が表示されています。

●Cookie Time

クッキーの有効期限を設定します。
単位はseconds/minute/hour/day/monthです。
今回は10分後に再表示したいので「10minute」と入力しました。

【Update】ボタンをクリックし保存します。
ウインドウが閉じます。

トリガーを設置するページを設定します。

左メニューから［Targeting］を選択します。

プルダウンメニューから

• HomePage
• 固定ページ：ID
• All投稿
• カテゴリー：selected

などを選択します。右のエリアにはページIDやカテゴリー名などを入力します。

さらに［+AND］をクリックし指定を追加できます。

今回はホームにアクセスしたらポップアップを表示する設定なので「HomePage」を選択しました。

●Disable this popup on mobile devices.
●Disable this popup on tablet devices.
にチェックを入れると、モバイルやタブレット表示の際にポップアップを無効にします。

デザインをカスタマイズします。

Popup Settingsウインドウの左メニューから［Display］を選択します。

Display Presets

ポップアップの表示される位置とデザインを設定します。
今回は『Center Popup』を選択します。

Appearance

デザインを設定します。

プルダウンメニューから
今回は『Default Theme』を選択しておきます。

Size

表示サイズを設定します。

プルダウンメニューから
今回は『Auto』を選択します。

Animation

表示アニメーションを設定します。

プルダウンメニューから
今回は『Fade』を選択します。

追加表示されたAnimation Speedは「500ms」とします。
0.5秒かけてフェードインするようになります。

Sounds

ポップアップが表示されるときに音を鳴らす設定です。

プルダウンメニューから
今回は『None』を選択します。

Position

ポップアップを表示する場所を設定します。

Locationプルダウンメニューから
今回は『Middle　Center』を選択します

Advanced

なにも変更しないでOKですが、それぞれ
・オーバーレイを無効にする
・ポップアップを積み重ね表示
・ウィンドウのサイズを変更しても配置が固定される
・ポップアップのZインデックス値
の設定です。

右メニューの『下書き保存』または『保存』ボタンをクリックし保存します。

さらにデザインの詳細を設定します。
再度 Appearance を選択します。

［Customize This Theme］をクリックすると
Edit Popup Themeに遷移します。
選択したポップアップのデザインをカスタマイズするページです。

Edit Popup Theme

［Add New Popup Theme］をクリックし
デザイン名を付けます。なるべく半角英数で作成します。

右メニューに『Theme Preview』があり、大まかなデザインがプレビューされます。

Overlay

画面全体を覆う背景色を設定します。

Color：背景色
Opacity：透過度（数値が大きいほど濃い）

Container

ポップアップ本体の設定です。

［Container］

Padding：枠から内容までのスペース
Border Radius：角の丸さ

［Background］

枠の色と透過度を設定します。

Color：枠の色
Opacity：透過度（数値が大きいほど濃い）

［Border］

Style：枠の線種
Color：枠の色
Thickness：枠線の太さ

［DropShadow ］

Color：枠の影の色
Opacity：影の濃さ（数値が大きいほど濃い）
Horizontal Position：影が横にずれる
Vertical Position：影が上下にずれる
Blur Radius：影のぼやけ具合（数値が大さいほどぼやける）
Spread：影の範囲が広がる
Inset (inner shadow)：Yesにすると影が枠の中に入る

Title

ポップアップのタイトルの設定です。
『ポップアップを作成』で作り込んでいる場合は、
［Font］［Text Shadow ］ともに無視してOKです。

Close

閉じるボタンの設定です。

［General］

Close Button Text：表示内容（閉・Close・× など）
Position Outside Container：ボタンの位置が枠側になる
Location：ボタンの位置を枠内のいろいろな場所に設定できる

今回は『Top Right』を選択
追加で表示される「Top」「Right」それぞれの数値を調整します。マイナス値にすると枠からはみ出ます。

［Size］

ボタンの背景のサイズの設定です。

Padding：Close Button Textで設定した内容の周囲のスペース
Height：高さ
Width：幅
Border Radius：角の丸さ

［Background］

ボタンの背景の色と透過度の設定です。

Color：背景の色
Opacity：透過度（数値が大きいほど濃い）

［Font］

ボタンの表示内容（閉・Close・×などの文字）の設定です。

［Border］

ボタンの枠線の設定です。

［DropShadow］

背景の影の設定です。

［TextShadow］

表示内容のテキストの影の設定です。

設定し終わったら右下の『更新』をクリックし保存します。
ポップアップのデザイン設定が終わりました。

左メニューの［All Popups］をクリックすると、作成したポップアップの一覧画面になります。

作成したポップアップの編集をクリックし、デザイン設定を続けます。

再度DisplayのAppearance に戻り、プルダウンメニューから先ほど作成したテーマを選択します。
これでデザイン部分はほぼ完成です。

Popup Settingsウインドウ

Close

［Button］

すでに設定しているので、なにもせずにOKです。

［Form Submission］

フォームのボタン操作などで使用する項目なので、今回はなにもせずにOKです。

［Alternate Methods］

閉じるボタンのほかにポップアップを閉じる設定です。

• オーバーレイをクリック
• ESCキーを押す
• F4キーを押す

問題がなければすべてチェックを入れてOKです。

Advanced

今回はなにもせずにOKです。

右上の『下書き保存』ボタンをクリックし保存します。
ダッシュボードに戻ります。

左メニューのAll　Popups　をクリックし、作成したポップアップの一覧画面にします。

作成したポップアップ名の右のトグルスイッチをオンにすると、Targetingで設定したページにポップアップが表示されるようになります。