ポップアップとは
「ウェブサイト上で、画面の上に新しいウィンドウを開いて、情報を表示したり、アクションを促したりする機能」のことです。
タイトルや画像をクリックした場合や、特定の条件を満たした場合に内容が表示されます。
ウェブサイトが開かれたときに、このようなCookieの利用同意のポップアップを表示させたい!と思うことはありませんか?
この記事では、プラグインを使って簡単に実装する方法をお伝えしていきます!
Popup Makerのインストールと有効化
まずは、「Popup Maker」のプラグインをインストールし、有効化します。
ポップアップの作成
2-1
ポップアップの作成画面の表示
有効化すると、管理画面に「Popup Maker」のメニューが追加されます。
Popup Maker>Create Popup
をクリックします。
2-2
ポップアップのタイトルを入力する
こちらはポップアップの作成画面になります。
Popup Nameには、ご自身がわかりやすいタイトルを入れておきます。(サイトには表示されません)
2-3
タイトルの下にブロックエディタでポップアップの内容を作成する
タイトルの下にブロックエディタで、ポップアップで表示させたい内容を作成します。
今回の例では、Popup Nameは「Cookie使用可否ポップアップテスト」としました!
ポップアップの出現トリガーの設定
ポップアップの作成画面で下にスクロールしていくと、ポップアップの設定(Popup Settings)が出てきます。
Triggersを選択し、Add New Triggerボタンをクリックします。
- Time Delay/Auto Open を選択
- 「クッキーを使用してポップアップが再び訪問者に表示されないようにしますか?」にチェックを入れる
- On Popup Closeを選択
(訪問者がどのアクションをおこなったときに、ポップアップを停止するか)
選択とチェックができたら、Addボタンをクリックします。
すると、このような画面になります。
サイトが開かれてから、500ミリ秒(0.5秒)後にポップアップが出現するようになっています。
※目的やお好みに合わせて変更が可能です。
今回はこの設定のまま、Addボタンをクリックします。
今回は、Cookieの同意についてのポップアップなので、サイトが開かれたときに、自動でポップアップが出現するように設定しています!
ポップアップのCookie設定
このように、Triggersのところに設定が追加されていることがわかります。
Cookies control the repeat display of a popupの編集マーク(鉛筆マーク)をクリックします。
※ステップ3で、クッキーを使用してポップアップが再び訪問者に表示されないように設定されています。
Cookie Timeを「1 day」とします。
これで、ポップアップを閉じてから1日は、再度ポップアップが表示されなくなります。
入力ができたら、Updateボタンをクリックします。
Cookie Timeは自由に変更可能です!
seconds、minute(s)、hour(s)、day(s)、month(s)、year(s)という単位が使用できます。
ポップアップの各種設定
5-1
ポップアップのタイプを選択
Popup Setteingsの中のDisplay>Display Presetsを選択します。
ここで、ポップアップのタイプを変更することができます。
デフォルトではCenter Popupが選択されています。
今回はこのままにしておきます。
5-2
ポップアップのデザインの調整
次に、Appearanceを選択します。
このプラグインには、様々なデザインのポップアップのテーマが用意されています。
お好きなテーマを選択することができます。
Popup Makerには様々なテーマがあります
Popup Makerには様々なテーマが用意されています!
これらのテーマをそのまま使用することもできますが、テーマをカスタマイズしたり、テーマを作成したりすることも可能です!
背景色や文字色、クローズボタンの色やデザインなど、様々な調整ができます!
Default Theme
Light Box
Enterprise Blue
Hello Box
Cutting Edge
Framed Border
Floating Bar
- Soft Blue
Content Only - For use with page builders or block editor
※こちらのテーマは、ポップアップの中身をブロックエディタで作成した場合、ブロックのデザインで表示させることができます!
今回の例では、Content Only - For use with page builders or block editorのテーマを選択し、クローズボタンと背景を覆うオーバーレイの色をカスタマイズして使用します。
5-3
ポップアップのサイズの指定
次に、Sizeを選択します。
今回はこのように設定しました。
5-4
ポップアップの位置の指定
次に、Positionを選択します。
今回は、画面の真ん中に表示させたいので、
LocationをMiddle Centerとしました。
ご紹介した以外にも、様々な設定をおこなうことができるので、ぜひ一度、試されてみてください!
ポップアップを公開する
ここまできたら、画面右上の公開ボタンを押して、ポップアップを公開状態にします。
これで、サイトを開いたときにポップアップが出現するようになります!
ポップアップの出現を確認する
サイトを開いて確認してみます。
このように、Cookieの利用同意のポップアップが表示されます!
プラグインを使用して、サイトが読み込まれたときに、自動でポップアップを出現させることができました!
機能体験型のデモサイトで「ポップアップ機能」を体験!
様々な機能を体験できる、Lightningテーマのデモサイトをオープンいたしました!
まずは、下記の記事で、各機能の概要や活用シーンをご確認くださいませ。
【検索・予約・イベントカレンダー】
機能体験型デモサイトをオープン!
今回は自動で表示されるポップアップを作成しましたが、このプラグインを使用すれば、クリックしたときにポップアップを出現させることも可能です。
クリックされると出現するポップアップをデモサイトに実装しています。
一度、イメージを確認してみてくださいね。
※トップページのACTIVITYの「ふれあう」「体験する」「食べる」「泊まる」の部分の各画像もしくはボタンをクリック
投稿者プロフィール
-
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。
最新の投稿
- WordPress講座2024年7月4日画像にPDFのリンクを設定!|WordPress【プラグイン不要】|画像をクリックするとPDFが開くようにするには?
- WordPressのプラグイン2024年6月26日VK Filter Search Proの使い方 ー 応用編 ー|WordPressの検索システムのプラグイン
- WordPressのプラグイン2024年5月27日VK Filter Search Proの使い方 ー 基礎編 ー|WordPressの検索システムのプラグイン
- WordPressのプラグイン2024年4月16日Booking Packageの使い方|2024年最新 | 時間帯予約&宿泊予約に対応
お問合せフォームはこちら
(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)
お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。