説明が長くなるとき、Popup Makerでポップアップでページ移動せずに見せる

Photo by Aaron Greenwood on Unsplash

先日複雑なフォームを作っていて、その項目についての説明をつけたいのだけれどもとても長くなってしまう、けれど別ページにはしたくないと思ったときにPopup Makerというプラグインを見つけて、ページを移動しなくてもポップアップで説明を表示できるようにしました。
その使い方や使い勝手について説明します。

Popup Makerで作ったポップアップはこんな感じです

プラグインPopup Makerで作ったポップアップはこんな感じです

ゆうそうとに「ホームページスタートアッププラン」というサービスがあり、そのサービスをお申し込みいただいた方にどのようなホームページを作りたいかという情報をいただくためのフォームを作っています。

ホームページについての情報をいただくとなるとかなりの量の質問をして回答をいただかないといけないので、フォームはどうしても長くなってしまいます。ここではメインカラーがどこで使われているのかということを3つのプラン別に説明したかったのですが、その内容をフォームの中に入れると長くなってしまいます。かといって別タブで見ていただくのも面倒かな、と思ってポップアップで表示できるようにしてみました。ポップアップで表示するとフォームから別のタブに移動することもないので、入力している途中に説明が出ても迷いが生じないかと思います。

Popup Makerのインストール

ポップアップを出せるようになるプラグインPopup Makerをインストールしてみます。

ダッシュボード プラグイン>新規追加 をクリック

キーワードにPopup Makerと入力すると

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

Popup Makerでポップアップする内容を作成する

インストールが終わると、ダッシュボードに

Popup Makerというリンクが表示されて、このようなメッセージが見えます。よくわからなかったので Skipをクリック

するとこのような表示になります。カスタム投稿タイプのような形でポップアップする画面の内容を入力できます。ポップアップ画面を追加するには、

Add Popupをクリック

投稿や固定ページと似たような入力画面です。

タイトルが2種類あります。それぞれ違うタイトルを入れてみました。内容は表示したいものを通常の投稿や固定ページと同じように入力します。

このポップアップはなにかのリンクをクリックしたときに表示させたいので、その指定をしておきます。

Triggersというところにある

Choose a type of trigger to get started.項目のSelect a trigger type.のリストを開いてClick Openをクリック

このような指定画面が表示されるので、このポップアップを表示させるときのセレクター(cssのclassやid)を入力します。

#popup_about_html_color というcssのIDの名前を入力して、Addをクリック

元の画面に戻って指定されたことがわかります。

公開をクリックして保存します。

Popup Makerで作ったポップアップを指定する方法

固定ページや投稿やフォームなどで、リンクをクリックしたらこのポップアップを表示させるようにする方法です。

たとえば新規投稿の

ビジュアルを見ると、Popup Makerのアイコンが追加されているので▼をクリックして

Popup Triggerをクリック

このような画面がポップアップされるので

Trigger Popupの▼をクリック

何か文字を入れないと選択肢が出ないので

適当に a とか入れるとこのように先ほど作ったポップアップが選択できるようになるので選択します。

Contentのところにリンクするときの文字を入れてから、Updateをクリック

このようなリンクができています。

この投稿を表示させて、リンクをクリックすると

先ほど指定したポップアップ画面がポップアップされました。

テキストタブで同じことをしたい場合は

このようなコードになるようです。id=”44″ というのがこのポップアップを指定している部分です。このid

ダッシュボード Popup Maker>All Popupsをクリックして

一覧に表示されている赤矢印の部分にある数字(popmake-44)がidとなっているようです。

表示するときのオプションを指定して、好みのポップアップ表示にしたりPopup Makerの管理用の表示を変える

Popup Makerにはオプションが色々あるようなので、オプションを指定して好みのポップアップ表示にしたり、Popup Makerの管理用の表示を変えたりしたいと思います。

ポップアップするときのデザインを変更する

ポップアップするときのデザインを変更します。Popup MakerにはTheme(テーマ)があるので、好きなものに変更します。

まずはどのようなテーマがあるかを確認します。テーマを見るには

ダッシュボード Popup Maker>Popup Themes をクリック

このように6つのテーマがあります。テーマのデザインを見るには、

テーマ名の下にある編集をクリックします

このように表示されて赤矢印で示した、右側にどのようなデザインになるのかが表示されています。

フォントの大きさや透明度など細かい設定もできるようですが、今はテーマをどれにするかを考えておくだけにします。

Light Boxというテーマにしようと思います。

ダッシュボード Popup Maker>All Popups をクリック

一覧から修正したいポップアップの編集をクリック

画面の右中ぐらいのところにTheme Settingsという項目があるので、

リストからLight Boxを選択して、

更新をクリック。

表画面で先ほどのリンクをクリックすると、

このように、ポップアップ画面のデザインが変わって、表示されているページも透明度が上がったので少し見えるようになっています。

おなじテーマでも透明度やフォントなどの変更できるオプションがありますので好みの表示にすることができますので、いろいろ触ってみてください。

ポップアップの閉じる機能の追加

デフォルトのままだとポップアップ画面を閉じるには、

右上に表示される × や CLOSE をクリックしないとできないようになっています。もっと簡単に閉じられるようにオプションが用意されています。

先ほどと同じように変更したいポップアップの編集画面で

本文の下にあるClose Settingsという部分が閉じるオプションについて指定できるところです。英語でわかりにくいので日本語に翻訳すると

このような感じでした。下の3つのチェックで指定できるようです。

私はオーバーレイ(ポップアップ画面以外)をクリックしたときとESCを押したときに閉じるようにこの2つをチェックしました。

更新をクリック。これで、

オーバーレイ(ポップアップ画面以外)をクリックしたときやESCを押したときに、閉じるようになりました。

管理バーに表示されているPopup Makerのボタンを非表示にする

Popup Makerをインストールすると、管理ツールバー

このようにPopup Makerのボタンが常に表示されるようになります。ポップアップ画面を表示するのはそれほど頻繁なことではないため、ここでは表示しないようにしたいと思います。

ダッシュボード Popup Maker>Settings をクリック

Miscタブをクリック

Disable Popups Admin BarのところのThis will disable the admin Popups menu item.にチェックを入れて

Saveをクリック

これで管理ツールバーに

Popup Makerのボタンが表示されなくなりました。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る