MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


時限ポップアップや、年齢認証のポップアップ(モーダルウィンドウ)を実現できるプラグイン『ITRO Popup Plugin』

『訪問者にポップアップでメッセージを伝えたい』というクライアント様の要望で検証したプラグインが、色々な用途で使えそうなのでご紹介します。

『時限ポップアップ』や、『モーダルウィンドウ』等と呼ばれますね。

icons-message

例えば、

期間限定のキャンペーン告知!

メルマガ登録ボタン等のポップアップ!

年齢認証!

といった用途が考えられます。

・ポップアップを表示する時間
 (カウントダウン・×ボタンで消える)
・ポップアップを表示するまでの時間
 (訪問してX秒でポップアップ)
・認証設定
 (YES or NO を表示してYESをクリックするとページを表示)
等々、詳細なオプションがあるので便利!!

ちょっとプラグイン紹介の前に、モーダルウィンドウについて

モーダルウィンドウとポップアップの違いって??
ポップアップはポップアップでも、注意喚起を促すものや、ユーザーが適切な応答をしなければ操作できないようにするものを「モーダルウィンドウ」と呼ぶみたいです。

wikiより

モーダルウィンドウ(英: Modal window)は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、ユーザーに注意を促したり、緊急の状態を知らせる目的でよく使われる。

ITRO Popup Plugin

ITRO-PopupPlugin_03

プラグイン>新規追加>『ITRO Popup Plugin』検索で出てきます。

詳細設定は、設定>ITRO Popup で設定画面になります。

配布元:
ITRO Popup Plugin(ver4.6.2)
サイトリンク:
[browser-shot width=”600″ url=”https://wordpress.org/plugins/itro-popup/”]

表示ページの設定
DECIDE WHERE POPUP WILL BE DISPLAYED

ITRO-PopupPlugin_07

SHOW ADVANCED SETTINGS
チェックを入れるとさらに詳細な設定が可能になるので是非チェックを入れましょう。

Only selected pages
特定の固定ページやホームにポップアップを表示する

All pages
全てのページでポップアップを表示する

No pages
てっきり固定ページで表示せず、投稿のみでポップアップを出すのかと思いましたが、違うようです。全ページでポップアップが出なくなりました。

表示時間の設定
GENERAL SETTINGS

ITRO-PopupPlugin_10

Disable on mobile device
チェックするとモバイルでポップアップを使用しない

Disable ESC key
ポップアップは通常だとESCキーで消すことが出来ますが、チェックするESCを押しても消えなくなります。

Popup seconds:
何秒間ポップアップを表示するか

Popup delay:
訪問してから何秒でポップアップを表示するか

Next visualization (hours):
何時間クッキーを保持するか
0かつ、全ページ表示にしていると同一ユーザーでもページ遷移の度に毎回ポップアップを表示してしまうので、数値は入れた方がいいですね。

Delete cookie
現在保持しているクッキーを削除できます

Show countdown
チェックするとカウントダウンを表示できますが、カウントダウンのメッセージを変更するには翻訳ファイルの編集やプラグイン編集が必要そうですね。

Countdown font color:
カウントダウンメッセージの色を変更できます。

ウィンドウの設定
POPUP ASPECT

ITRO-PopupPlugin_13

ウィンドウサイズ・色・角丸・枠線・余白設定、
背景画像の設定やポジション等々、かなり詳細に設定が可能です。
詳細は画像をご覧下さい。

殆どが感覚的に操作できるのですが、わかり辛かったものを以下に解説します。

Popup height:
デフォルトはautoで、そのままでも問題ないと思いますが、数値を指定したいときは px % を選んで一回『変更を保存』しましょう。
そうしないと数値の入力フィールドが出てきません。

BACKGROUND IMAGE
背景画像を指定できます。
ウインドウ内に
positionはcenter center、no-repeatで表示されます。
ウインドウのサイズに応じて画像を選択しましょう。

Automatic top margin
通常は上下左右中央にウィンドウが出ますが、チェックを外すと
TOPからのマージンに変更可能です。

Background opacity と Opaque background color
こちらはポップアップウインドウの背景色ではありません。
ポップアップ表示中はページにオーバーレイがかかるのですが、
そのオーバーレイの色と透明度ですね。

年齢認証等モーダルウィンドウの設定
Age restriction setting

ITRO-PopupPlugin_15

Enable age validation にチェックを入れると
『YES or NO』『入場 or 退場』等の認証を有効にできます。

当然ですが、認証機能を有効にすると「カウントダウン」は機能しなくなります。
認証の意味無いですからね(笑)

ウィンドウに表示するテキスト等の設定
Your text (or HTML code)

ITRO-PopupPlugin_17

※エディタは使用できますが、テキストモードでも自動改行になりません。

わかりにくいぞ!?
『変更と保存』と『Preview page』について

ITRO-PopupPlugin_21

プレビュー機能はあるのです。
プレビューはクッキーが関係ないので毎回確実にポップアップを確認できますが、
保存していない内容はプレビューに反映されません。

なので、
設定を変更 > 変更を保存 > Preview にしないとプレビューに最新の内容が反映されません!!

あれー、変更したのに反映されないぞ??
とかなり悩みましたわ。

ちなみに、プレビューは
『ITRO – Preview』という非公開の固定ページが自動生成され、そこで確認します。

実装例

ちょっと変更するだけでこんな感じのポップアップウィンドウが作れます!
細部にこだわりたい方はCSSを追加しましょう。
クラスはけっこうあったのでデザインカスタマイズもしやすそうです!

告知に使用

ITRO-PopupPlugin_24

年齢認証に使用

ITRO-PopupPlugin_27

年齢認証を設ける際の注意

年齢認証を設ける場合、
Popup delay
は0、つまりアクセス後即座にモーダルウィンドウを出すと思いますが、それをやったところgoogleのボットもブロックしちゃいましたね。クロールエラーになりSEOを意識したいときは要注意です。

・Popup delayに数値を入れればOKなのか?
という所までは検証していませんので、実装の際は注意しましょう。

20150515追記:ボタンのサイズ変更について

年齢認証のボタンサイズ変更についてコメントを頂いたので検証を行いました。
管理画面ではボタンのサイズ変更は行えませんが、ブラウザの開発者ツール等でボタンの部分を解析してみましょう。
(ボタンを右クリック>要素を検証 等)

下図のように、ボタンには下記のIDが割り当てられているのでCSSの追加でデザイン変更を行うことができます。

itro-popup-plugin

/* 入場ボタン */
#ageEnterButton {
  width: 100%;
  margin-bottom: 10px;
}

/* 退場ボタン */
#ageLeaveButton {
  width: 100%;
}

ただし、お使いのテーマに

input[type=”button”] {
  ***
}

のようなCSSがある場合はその影響も受けることにご注意下さい。

まとめ

仕様・デザイン共にかなり詳細設定が可能な上、用途も幅広く使えそうです。
クッキーの操作もできるのでユーザーに1回だけ表示(クッキーの保持期間ですが)ということもできるので煩わしさも軽減できます。

キャンペーンやってます!

メルマガ登録はどうですか!?

お問合せはこちらから!

貴方は18歳以上??

といったポップアップ・モーダルウィンドウを手軽に導入できるのは嬉しいですね!

おすすめコンテンツ

“時限ポップアップや、年齢認証のポップアップ(モーダルウィンドウ)を実現できるプラグイン『ITRO Popup Plugin』” への10件の返信

  1. wp初心者です。
    『ITRO Popup Plugin』を使用したいのですが、なぜかプレビューやサイトに表示されません。。。
    設定などは一通り入力はしてはいるのですが、原因がわかりません。なにか方法はないでしょうか?
    WPバージョンは最新の4.1です。
    追記、WPはレスポンシブになります。

    1. レジェンド様

      コメントありがとうございます。
      僕もWP4.1、レスポンシブテーマの環境で利用していますが、特に問題なく表示されていますね。
      プレビューだとクッキーは関係なくなるようですが、一度
      ◆GENERAL SETTINGS の『Delete cookie』をしてみると良いかもしれません。

      他に考えられる設定の問題は、
      ◆DECIDE WHERE POPUP WILL BE DISPLAYED がNo Pageになっている
      > 一度All pagesで試して頂くといいかもしれません。

      ◆GENERAL SETTINGS
      ①Disable on mobile device にチェックが入っていて、スマホで確認している
      >Disable on mobile device にチェックをするとスマホでポップアップが表示されなくなります
      ②Popup delay が長く設定されている
      >ここの秒数はページを開いてからポップアップが出るまでの時間なので、長めに設定しているとその分表示が遅くなります

      ◆設定が保存されているか
      ITROのプレビューは、一般的な投稿のプレビューとは違い、設定が保存されたものを非公開ページでの動きを確認するためのものなので、『変更を保存』のあとに『Preview Page』をしないといけません。

      ◆他のプラグインとの競合
      他に似たようなポップアッププラグインや、super cacheのような高速化のためのキャッシュ操作プラグインを利用していないか
      僕の環境では上記のようなプラグインを利用していないのでわかりませんが、レジェンド様の環境でこういったプラグインを利用している場合、影響を受けている可能性も考えられます。

      ざっと思いつく限りで、上記のようなケースが考えられます。
      ご参考になれば幸いです。

  2. 初めまして。
    Age restriction settingの設定を利用して利用規約を作り、
    「同意する」「同意しない」のモーダルウィンドウを作成したいのですが、それぞれのボタンに対してのサイズ変更の設定方法がわかりません。
    初歩的な質問ですが、教えていただけると助かります。

    1. minion様
      初めまして。この度はコメントありがとうございます。
      検証の上、年齢認証の部分に追記を行いましたのでご確認頂ければと思います。
      ITROの管理画面からはサイズの変更を行えませんが、CSSの追加によってデザインの変更を行うことが可能です。
      よろしくお願い致します。

  3. Hello!
    We are the development team of ITRO Popup Plugin and of ITRO WordPress Marketing. Many thanks for your japanese guide, it is very well made and we’ll link it to our FAQ&Guide page of http://www.itro.eu
    We’ll be very glad if you wold like to translate our plugin in Japanese (using .po files located in the /languages folder)
    However for any support/collaboration do not hesitate to contact us at support@itroteam.com

    Bye!

  4. to ITRO Team
    I’m sorry. The translation project can not participate .
    However , a link to this page is free .
    Thank you very much!

  5. とてもわかりやすい解説ありがとうございます。
    「年齢認証に使用」ところにある画像のような、シンプルなウインドウの作り方がわかりません。
    タグを教えていただくことはできないでしょうか。

    1. 蛍様
      コメント頂き、ありがとうございます。
      サンプルで一度作っただけの画面なので、データとしては残っておりませんが、
      特にタグを打つことはなかったと思いますよ。

      枠線の色の設定、太さの設定、角丸のサイズを指定するだけでよかったかと思います。
      ウィンドウの設定

      枠線の色 pop up border color・・・#e03186
      線の太さ pop up border width・・・3px
      角丸 pop up border radius ・・・10px

      年齢認証等モーダルウィンドウの設定

      button background color・・・#e03186
      button border color・・・#e03186
      button font color・・・#fff
      とかで同じようなデザインになるかと思います。

  6. 初めまして。わかりやすい解説を有難うございます。
    最近wordpressをはじめまして、こちらを参考に年齢認証を作成してみたのですが……。

    こちらのサンプルでいう「入場」「退場」のボタンがセンターに来ておらず、左揃えになってしまいました。
    さらに、ボタンは改行されて2行になってしまいます。

          18歳未満は退場願います

    「入場」←ボタンが左端に2行になって並んでしまってます
    「来場」
     

    といったかんじで、初心者なので対策が分からずでして……。
    もし対策が分かれば教えて頂けると助かります。
    失礼します。

    1. >kyte様

      初めまして。この度はご連絡ありがとうございました。レスが遅れて申し訳ありません。
      一応最新バージョンを試してみましたが、デフォルトでは

      <p style="text-align: center;">
      (入場)(退場)
      </p>
      

      のようになっているので、よほどのことが無ければセンターに配置されるはずです。

      お使いのテーマのCSSが影響しているのかもしれません。

      例えば、CSSで

      p{text-align:left !important;}
      

      があるとか・・・(ただ、この場合は左寄せになるだけでボタンは改行せずに2つ並ぶはずです。)

      input[type="button"]{ display:block;}
      

      になっているとか・・・
      こんな風になります。(添付画像)
      itro

      ちょっと強引ですが、上記のようなCSSが無い限りはセンター寄せになると思われます。
      ボタンにどのようなCSSが指定されているかを調べる必要があるかもしれません。
      ご確認よろしくお願い致します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA