簡単にWordPressでモーダルウィンドウ(ポップアップ)を作れるプラグイン「Popup Maker」の使い方を徹底解説!

簡単にWordPressでモーダルウィンドウ(ポップアップ)を作れるプラグイン「Popup Maker」の使い方を徹底解説!

コンテンツの説明や追加情報をユーザーに見せたい時、または注意喚起や利用規約などで絶対にユーザーに見せないといけないコンテンツがある時、ポップアップでその内容を表示させることで確実にユーザーに情報を届けることができます。

世の中にはColorBoxやprettyPhotoといったjsのライブラリもありますが、ことWordPressに限っては簡単な設定ですぐに使えるプラグインがそろっています。

中でもポップアップといえばコレ、という有名なプラグインが「Popup Maker」になります。
この記事では「Popup Maker」の使い方を実例を交えつつ説明していきます。

ちょっと長いですので必要箇所を抜粋して読んでいただければと思います。

Popup Makerをインストールする

それではさっそくPopup Makerをインストールしてみましょう。
「プラグイン」→「新規追加」から【Popup Maker】を検索します。

すると

このようにプラグインが表示されると思いますので、「今すぐインストール」→「有効化」
これだけです!

Popup Makerを有効化すると、管理画面左のメニューに

このようにPopup Makerの設定項目が表示されますので確認してみましょう。

\プラグインのインストール方法をもう少し詳しく見たい方はこちら/

Popup Makerでポップアップの中身を作成する

それではさっそくPopup Makerを使ってポップアップを作成していきましょう。

demo

まずはdemoのように簡単なポップアップの作成から行います。
Popup Makerの設定画面から「Add New Popup」をクリックします。

すると

このように普段投稿の際に使用するエディタのようなものが開きます。
必要最低限記述、設定が必要な項目は以下の通り

・Popup Name
・Popup Title
・エディタ

ひとつずつ解説していきます。

Popup Name

作成するポップアップの名前を入力します。日本語でも構いませんので分かりやすい名前を付けておくことをおすすめします。
作成後はこの名前で各ポップアップを管理する事になります。

Popup Title

作成するポップアップのタイトルを入力します。ポップアップの中に表示される内容になりますので、表示させたいコンテンツに応じてタイトルを記入します。
未記入の場合タイトルは表示されませんのでタイトルはいらないなーという場合は記入しなくても問題ありません。

エディタ

ポップアップの中身を作成します。
普段使っているエディタと同じようにビジュアルとテキストで分かれていますし、クイックタグなども普段通り使えますので安心してください。

Popup Settingsでポップアップの動きを設定する

Popup Settingsではポップアップの動作部分を設定できます。
何をトリガーにポップアップを出すのか、どのような見た目で表示させるのか等を簡単に設定できますので説明していきます。

Trigger

何を起因にポップアップを起動させるかを設定できます。

「Add New Trigger」をクリックするとクリックでポップアップを起動させるパターンか時間経過でポップアップを起動させるパターンかを選べます。
クリックの場合は前述のdemoのようにコンテンツをクリックした際にポップアップが出現、時間経過の場合はページが表示されてから何秒後にポップアップが出現する形になります。

クリックを使う場面は商品等を詳しく説明する場合やページ遷移前に読んでほしい注意点があるとき等、時間経過を使う場面はページ遷移後にある程度時間が経っている場合に出したいコンテンツの表示等に向いています。

遷移から時間が経っている=ページをしっかりと読み込んでいるorページを読んでも分からずに困っている事が想定されます。
「もっと詳しく」という風にファン拡大や販促に繋げたり、「分からないところはありませんか?」とユーザーをチャットに導いたりFAQに繋げたりといった使い方ができますね。

Targeting

ポップアップを表示するページを指定する事ができます。
Choose a condition to target~で指定した投稿やカテゴリだけでポップアップを表示させるような設定が可能です。

下部のチェックボックスはスマホやタブレットでページを見た時のポップアップの処理を指定でき、チェックを入れておくことでスマホ、タブレットでのポップアップを無効に設定する事ができます。

Display

ポップアップの表示方法(見た目)を変更できます。
デフォルトでは画面いっぱいを使ったポップアップが表示されてUIとして使いにくいので、それ以外のものから選択したほうが無難かと思います。

html、cssの技術があれば自身でpopup themeを作成する事もできますので気に入ったものが無い!という場合はチャレンジしてみてください。

各ポップアップの見た目は下記をクリックして確認してください。

default themeliteboxenterprise bluehello boxcutting edgeframed border

Close

閉じるボタンのテキストを変更できます。
デフォルトでは「×」になっていますが、「閉じる」や「了承」といった言葉に変更する事も可能です。
が、文字を入力すると閉じるボタンをcssできちんと修正しないと崩れてしまいますのでどうしても「閉じる」にしたいんだ!という場合以外は何も記述しないで良いかと思います。

また閉じるボタンを表示させるまでの時間を変更する事もできます。
ポップアップ表示から1秒後、5秒後などと変更する事は可能ですが、閉じるボタンが分かりづらいポップアップはスパムと変わりませんので0秒のまま(最初から表示)に固定しておくのが無難です。

Alternate Methods

Alternate Methodsでは閉じ方にバリエーションを付けることが可能です。
Click Overlay to Closeにチェックを入れておくと、ユーザーがポップアップの外(オーバーレイがかかっている部分)をクリックする事でポップアップを閉じることができるようになります。
小さい×ボタンだけで閉じるボタンとするのはインターフェースとして使いづらいので基本的にはチェックを入れておくことを推奨します。

Press ESC to CloseとPress F4 to CloseはそれぞれescキーやF4キーを押したときにポップアップを閉じるようにできるチェックボックスです。こちらも必要に応じて選択しましょう。

Advanced

この項目ではフォーム送信後のポップアップの自動再起動を無効にしたり、ユーザー補助機能のオンオフを切り替えることができます。
絶対にこういう動きをさせたいというのが無い限りはチェックをしなくても問題ないでしょう。

実際にポップアップを作成してみる

上記の流れが分かったところで実際にdemoで使ったポップアップを作成してみましょう。
長ったらしく各項目を解説しましたが、やること自体は単純です。

説明に従ってこのように各項目を埋めていきましょう。

まずはPopup Nameに任意の名前を付けます。
今回は練習なので「new-popup」と付けましたが、実際には分かりやすく〇〇の説明補足、〇〇への誘導などと管理しやすい名前にしておくのがベターです。

次にPopup Titleを記入します。ここからはユーザーに見える内容になるので適切な名前を付ける必要があります。今回はそのままdemoと記入します。

タイトルが記入できたら中身を作成していきます。
ここも練習ですのでとりあえず何でも大丈夫です。わかりやすく「Success!!」だったり「Hello World!」と入れておきましょう。

最後にトリガーの設定をします。
「Add New Trigger」から「Click Open」を選択してAdd。CSS SelectorsとCookie Nameを記入する欄が出てきますが無視して再度Addをクリックで問題ありません。

これでポップアップの作成は完了です。
Popup MakerのAll Popupsの項目に

このように作成したポップアップが表示されていれば成功です。

実際にポップアップを記事内に組み込む

上記でポップアップが完成したら実際に記事内に挿入してみましょう。

ポップアップは通常の投稿内でも固定ページでも使用する事が可能です。まずは適当に投稿などから記事作成を行います。エディターはビジュアルモードを選択してください。

そうすると

このようにPopup Makerのアイコンが表示されていると思いますのでクリック、Popup Triggerを選択します。

Targeted Popupを選択する

Popup Triggerの設定が開きますのでTarget Popupから先ほど作成したポップアップのPopup Nameを選択します。
今回は「new-popup」で作成しているのでnew-popupを選択します。
aとかbだとこの時に内容が分からなくなりますので名前は大切ですね。

Trigger Contentを記述する

次にTorigger Contentに何をクリックした時にポップアップが起動するかを記述します。
文字だけ(例:demo、click here!、詳しく見る等)を入れればその文字列をクリックした時に起動、htmlで画像やボタンを作成して入れておけば、そのコンテンツをクリックした時に起動するようになります。


HTML Tagsを設定する

次にOptionsからTrigger Contentで入れた内容を囲うタグを設定します。
pタグ、spanタグなど通常のhtmlタグが使えます。
htmlはよく分からない…という場合はコンテンツを独立させるならpタグ、一連の文章中で使う場合はspanタグを使うぐらいの感覚で良いかと思います。

CSSを設定する場合はCSS Classにつけておきたいclass名を記入します。特に必要ない場合は無しでも構いません。

記述できたら「Save」をクリックして保存します。

エディターにdemoと表示されていたら完成です。
プレビューを確認、実際にdemoの文字をクリックしてみましょう。

このように表示されていたら成功です!

見た目と動きを調整する

表示されたのは良いですが、このままではちょっと見づらいですね。
もちろんコンテンツの量が多ければきちんと表示されますが、表示されるポップアップのサイズが毎回マチマチなのは何だか気持ちが悪いです。

という事でポップアップを調整して見た目と動きを整えましょう。

作成したポップアップのPopup SettingsからDisplayを開きます。

demoを作成した時にはここでテーマのみ選びましたが、その他にも

・サイズ
・表示アニメーション
・表示位置
・その他設定

を変更可能です。
各項目を調整して見た目や動きを整えていきましょう。

size

Sizeでは言葉の通り、ポップアップのサイズを変更できます。

Size

sizeの項目をクリックするとポップアップの横幅を変更する事ができます。
デフォルトは全体の60%の幅になっていますが、コンテンツに応じてサイズの変更が可能になっています。

横幅、縦幅を指定したい場合は「custom」を選択するとpxでサイズを指定する事も可能になります。

Min Width

Min Widthはポップアップの最小幅を決めることができます。
横幅を%で指定している場合は、ブラウザサイズが小さくなるとそれに応じてポップアップも小さくなっていき、内部のコンテンツが崩れてしまう事があります。
それを防ぐ為にも「少なくともこのサイズまでしか小さくしない」というサイズを決めておくことができます。

Max Width

こちらは逆に最大サイズを決めておくことができます。
横幅が広いディスプレイの場合、表示されるポップアップが大きくなりすぎないように「大きくなってもここまで」というサイズを決めることができます。

Animation

アニメーションではポップアップの表示の仕方を変更できます。

Animation Type

どういった動きでポップアップが表示されるかを指定できます。
デフォルトではFade(ふわっとコンテンツが表示される)になっていますが、Slideでスライド表示、Fade and Slideでコンテンツがふわっと表示されながらスライド表示されます。

slide、Fade and Slideで表示する場合は、Animation Originの項目を変更する事でスライドの始動位置を上下左右、様々な方向に変更可能です。

Animation Speed

数値を変えることで表示されるまでの時間を変更する事が可能です。
デフォルトでは350ms=0.35秒で表示になっていますが、数字を大きくすることでよりゆっくりと、小さくすることで素早く表示させることが可能です。
あまりにゆっくり表示されるとユーザーにイラっとされる原因にもなりますので特に問題が無ければデフォルトのままで良いでしょう。

Position

Positionではポップアップをどの位置に表示させるかを変更する事ができます。

Location

デフォルトでは「サイトの上部から100pxで左右均等位置」に表示されますが、Locationを変更する事で位置を変更する事ができます。
サイトの左寄せであったりサイトの真ん中に配置するといった形で変更が可能ですので試してみてください。

位置調整スライド

位置を細かく指定するにはスライドバーの数字を変更します。
デフォルトではTOPの表示だけですが、Locationを変更する事で左右の調整用スライドバーも表示されます。

各位置から何pxずらす、という指定になります。

position from Trigger

position from Triggerにチェックを入れると、ポップアップの表示位置をトリガーになったボタンや文字の上部に固定する事が可能です。
商品説明や利用規約などの場合はポップアップのコンテンツが大きくなりすぎて使いづらいですが、専門用語を簡単に補足する場合などは小さなポップアップを文字の直上に出してあげることで説明が簡単にできる、なんて使い方も可能です。

例:このサイトではモーダルウィンドウの表示方法について解説しています。

使い方によっては非常に便利ですので覚えておいて損はないです。

Advanced

アドバンスの項目では表示に関するより高度な設定をすることが可能です。

Disable Overlay

ポップアップ表示中のオーバーレイを無効にすることができます。
デフォルトではポップアップ以外の部分は薄くグレーがかかっていますが、チェックを入れることでオーバーレイを消すことができます。
position from Triggerの例でもオーバーレイを非表示にしていますので確認してみてください。

Stackable

デフォルトではポップアップは一つずつしか開けませんが、この項目にチェックを入れることで複数個のポップアップを開いたままにできます。

Disable Repositioning

デフォルトではブラウザサイズが変更された場合、それに応じてポップアップのサイズが可変しますが、この項目にチェックを入れることでサイズ調整をしないようにすることが可能です。

Popup Z-index

z-indxの値を変更できます。基本的にデフォルトのままで問題ないかと思いますが、重なり順などで調整が必要な場合はこちらから変更が可能です。

こんなに色々あっても分からない!という場合はとりあえずサイズだけ変更しておきましょう。
サイズだけ整えておけば、それ以外の項目は追々でも問題ありません。

Popup Makerのまとめ

という事で非常に長くなってしまいましたが、Popup Makerを使ってポップアップを作る方法をまとめました。
日本語ではないうえに、諸々説明を書いたので迷うところもあるかと思いますが、きちんと手順を踏めば非常に簡単に使えてサイトに動きを出すことができるのでお勧めです。

自身でhtml、cssが書けるのであればサイトに合った形に1から作成する事も可能ですので試してみてください。

あまりにポップアップが多いサイトは使いづらいですが、要所要所で使う分には訴求やユーザーの疑問に応えやすいコンテンツになるのでぜひ活用してみてください。

プラグインカテゴリの最新記事