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

2023.11.29

Plugin

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

出典 : Popup Maker

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

NEW TEA ARRIVAL

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

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

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

ボタンクリックでポッポアップを出現させます。

中段、下段のカラムの「垂直配置」は「埋めるように拡張」に設定。

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

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

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

Popup Maker＞Create Popupをクリック

編集画面で内容を入力

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

出典 : TablePress

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

テーブル作成後、ショートコードをコピー

Popup Makerのテキスト欄にペースト

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

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

Trigger

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

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