簡単にポップアップを作成！「Popup Maker」の使い方

今回は、ポップアップの作成ができるプラグイン「Popup Maker」の使い方についてご紹介します。

「Popup Maker」のインストールと有効化

1.ダッシュボードのプラグイン＞新規追加から
「Popup Maker」を検索してインストールします。

インストールができたら、「有効化」をクリックします。

ポップアップの作成

Popup Makerを有効化すると、メニューの中に、「Popup Maker」という項目が表示されます。

メニューの中の「Popup Maker」をクリックすると、ポップアップ一覧画面が表示されます。

「Create New Popup」をクリックして、新規ポップアップを作成します。

ポップアップの中身の作成

１．Popup Name

ポップアップの名前を入力します。ここに入力した名前がポップアップ一覧に表示されますので、自分が見てわかりやすい名前を入力します。（ポップアップの中には表示されません）

２．Popup Title

ポップアップのタイトルを入力します。
ここで入力した名前がポップアップの見出しとして表示されますので、ユーザーにとってわかりやすいものを入力します。
（未入力でも問題ありません）

３．ポップアップの内容を入力

作成方法は固定ページや投稿の作成と同様ですが、クラシックエディタがデフォルトに設定されています。
ブロックエディタに変更したい場合は、「Popup Maker」の中にある「Settings」から、「Enable Block Editor Support」にチェックを付けて「Save」ボタンをクリックして変更します。

※今回の例ではクラシックエディタを使用して作成しています。

画面を下にスクロールし、「Popup Settings」でポップアップの動作に関する設定をおこないます。

動作の設定

●トリガーの設定

どのようなきっかけでポップアップが開くようにするかを指定します。
Triggers＞Add New Triggerをクリックして、トリガーを追加します。

今回は、ユーザーがクリックしたときにポップアップを開くように設定したいので、「Click Open」を選択し、「Add」をクリックします。

※その他、ウェブページが表示されたときに自動的にポップアップを表示させるなどの設定も可能です。

Cookie Nameのところに表示されているクッキーの
×をクリックして削除します。

※クッキーを設定したままにしていると、２回目のクリックから、ポップアップが開かなくなります。

「Add」をクリックします。

様々な設定

●テーマの設定

Display>Appearance>Popup Themeで使用したいテーマを選択します。（デフォルトでは「Default Theme」となっています）

※Customize This Themeをクリックすると、テーマ自体のカスタマイズを行うことが可能です。

●サイズの設定

Display >Sizeでポップアップのサイズを選択します。

●クローズボタンの設定

Close>Button>Close Textでクローズボタンに表示される文字を入力します。（デフォルトでは、Closeとなっています）

その他、表示させたいポップアップのイメージに合わせて、様々な設定やカスタマイズが可能です！

画面右の方にある「公開」をクリックします。
これでポップアップ自体の作成は完了です。

次に、ポップアップの組み込みをおこないます。

ページにポップアップを組み込む方法

ポップアップ一覧画面の「CSS Class」にある文字列をコピーしておきます。

※今回は、ポップアップのテスト用ページで、ボタンを作成しています。

「追加CSSクラス」の欄にコピーをしておいたポップアップのCSSクラス名を入力します。

ブロック設定の「高度な設定」を展開します。

「プレビュー」を押して確認をします。

表示されたプレビュー画面で、クラス名を設定したボタンをクリックすると、ポップアップが表示されます。

機能体験型のデモサイトで「ポップアップ機能」を体験！

様々な機能を体験できる、Lightningテーマのデモサイトをオープンいたしました！
まずは、下記の記事で、各機能の概要や活用シーンをご確認くださいませ。

【検索・予約・イベントカレンダー】
機能体験型デモサイトをオープン！

今回ご紹介した「ポップアップ機能」も、デモサイトに実装しています。
一度、イメージを確認してみてくださいね。

※トップページのACTIVITYの「ふれあう」「体験する」「食べる」「泊まる」の部分の各画像もしくはボタンをクリック

「ポップアップ機能」使用の
デモサイトの「トップページ」へ

こちらの記事もぜひご覧ください

「ブロックエディタ」を使用してポップアップの作成をおこなっています！

【個人情報保護】Cookieの利用同意のポップアップの作り方（Popup Maker）

ポップアップとアコーディオンの機能や利用シーンについて記事にしています。

ページが見やすくスッキリ！～ポップアップとアコーディオン～

投稿者プロフィール

Mayu: Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

「Popup Maker」のインストールと有効化