ポップアップ作成プラグイン「Popup Maker」で詳細情報をボタンクリックで表示

LPはスクロールしていくと多くの情報を順番に表示できます。しかし、多数の商品を紹介する場合、詳細情報が多くなり、スクロールも長くなってしまいます。また、デザイン的にも崩れるため、個別の詳細情報は通常別ページで作成することが多いです。しかし、元々商品シングルページがない場合はポップアップで表示することも出来ます。今回はポップアップ作成プラグイン「Popup Maker」の紹介をしていきます。

そもそもポップアップとは、別ページに移動せずに情報を表示する機能です。クリックするとモダールウィンドウで表示されたり、ヘッダー、フッターに現れる広告もその一種です。他には当サイトのACCESSページのように、GoogleMapを別ページに移動せずに表示したりすることもできます。今回のDEMOは、お茶のLPページをテーマに作成しました（寒くなりホットティーをよく飲むので）。

今回もブロックエディターを使用して作成しました。

商品の「商品詳細 ＋」ボタンをクリックすると、産地、カロリー、原材料などの詳細情報がポップアップで表示されます（実際はダミーなので具体的な内容は入力していません）。

商品の上段はメディアとテキストを横で利用しています。中段は2カラムで左に1つ、右に2つの商品を縦にで入れ、下段は、4カラムで、作成しました。中段、下段の背景色を隣のカラムの高さに合わせるため、カラムを選択し、バーから「垂直配置を変更」をクリックし、「埋めるように拡張」を選択。背景色は3色使用し、PCで見た時、できる限り隣り合わせにならないように、また、SPで1カラム縦スクロールになるの時に、上下で色が被らないようにしました。

商品は、色が被らないように配色

では、本題のプラグインの説明です。まず、「Popup Maker」プラグインをダウンロードし有効化します。

左サイドバーからPopup Maker＞Create Popupをクリックします。編集画面が表示されるので、内容を入力していきます。

「Popup Name」はファイルを管理するための名前で、任意でつけます。「Popup Title」はポップアップのタイトルで表示されるので今回は商品名を入力しています。入力欄に表示したい内容を入力します。今回テーブルを使用するのですが、「TablePress」というプラグインを使用しました。テーブルを簡単に作成できCSSでのスタイル変更もできます。

「テーブルの内容」でテーブルを作成し、保存後ショートコードをコピーします。Popup Makerのテキスト欄にペーストします。作業を進めたら定期的に「下書き保存」をします。

項目	設定値
Popup Name	ファイル名
Popup Title	ポップアップのタイトル
テキスト欄	ポップアップの内容

次項からは、ポップアップの設定やデザインをテキスト欄の下の「Popup Setteings」で設定していきます。

Trigger

一番上の「Triggers」でポップアップの発生方法を設定します。今回はボタンがクリックされたときにポップアップが表示されるアクションを設定します。

右の「Add New Trigger」をクリックします。一番上のセレクトボックスの「Click Open」を選択して、「Prevent popup 〜」のチェックを外し、下の「Add」をクリックします。「Click Trigger Setting」が表示されるので、そのまま下の「Add」をクリックします。これでアクションの設定は完了です。

Display

次にポップアップのデザインを変更していきます。上から3番目の「Display」をクリックします。7項目あるので順番に設定していきます。

Display Presents

「Display Presents」の「Center Popup」をクリックします。これで、ポップアップが画面の真ん中にモダールウィンドウで表示されます。

Appearance

「Appearance」で、スタイルを選択し、カスタマイズしていきます。セレクターから「Enterprise Blue」を選択します。下の「Customize This Theme」をクリックします。

項目	設定値
Popup Theme	Enterprise Blue

テーマのビジュアルが右に表示されるので、変更したい箇所を指定していきます。今回はオーバーレイの「Opacity」を30%に、モノトーンにしたいので「Title」の色を黒に、「Close」ボタンの「background」も黒に変更しました。

Size

「Size」で画面に対するポップアップの大きさを指定します。PCでは画面の幅に対して0%、SPでは90％の設定にしました。

項目	設定値
Size	Medium-60%
Min Width	0%
Max width	90%

Animation

「Animation」では、ポップアップ表示時のアニメーションを設定します。今回はデフォルトのままです。

項目	設定値
Animation Type	Fade
Animation Speed	350ms

Sounds

「Sounds」ではポップアップが表示される時の音を指定できます。音を出したくないので、デフォルトのまま「none」にしておきます。

項目	設定値
Opening Sound	None

Position

「Position」は、POPアップの画面に対する位置を指定しますが、デフォルトのまま「Middle Center」にします。「Fixed Positioning」にチェックを入れて、ポップアップ時、スクロールしても動かない設定にします。

項目	設定値
Location	Middle Center
Top	100px
Position from Trigger	チェック無
Fixed Positioning	チェック有

 Advanced

「Popup Z-Index」で右上ハンバーガーメニューの上にポップアップが表示されるように設定しました。

項目	設定値
Disable Overlay	チェック無
Stacable	チェック無
Disable Repositioning	チェック無
Popup Z-Index	999999

Close

Close＞Alternate Methodsから、オーバーレイをクリックするとポップアップが閉じるようにします。

項目	設定値
Click Overlay Close	チェック有
Press ESC to Close	チェック無
Press F4 to Close	チェック無

以上でポップアップの設定は終了です。編集画面上の「Preview」をクリックして表示を確認し、OKなら「公開」をクリックします。ポップアップを複製し、タイトルとタキストを変更し、他のポップアップを作成します。

設置方法

最後に設置方法です。Poupu Maker＞All Popupsをクリックし、設定するポップアップの「CSS Class」をコピーします。投稿を開き、設置するボタンをクリック。右サイドバーのブロック＞設定＞高度な設定の「ADDITIONAL CSS CLASS(ES)」にペーストします。

これで設置完了です。プレビューを確認して、OKなら他のボタンにも設定していきます。

今回はプラグインでポップアップを作成しました。通常JavaScriptで実装するのですが、プラグインだとブロックエディターで使用できるので、LP作成時などに簡単に設定できます。

Webサイト作成のお問い合わせは、コンタクトフォームよりよろしくお願いします。