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

ポップアップとは

「ウェブサイト上で、画面の上に新しいウィンドウを開いて、情報を表示したり、アクションを促したりする機能」のことです。

タイトルや画像をクリックした場合や、特定の条件を満たした場合に内容が表示されます。

ウェブサイトが開かれたときに、このようなCookieの利用同意のポップアップを表示させたい！と思うことはありませんか？
この記事では、プラグインを使って簡単に実装する方法をお伝えしていきます！

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

まずは、「Popup Maker」のプラグインをインストールし、有効化します。

STEP

ポップアップの作成

2-1　
ポップアップの作成画面の表示

有効化すると、管理画面に「Popup Maker」のメニューが追加されます。

Popup Maker>Create Popup
をクリックします。

ポップアップをブロックエディタで作成したい場合は？

デフォルトではクラシックエディタで作成をする形になっていますが、ブロックエディタで作成をおこないたい場合には、設定を変更することができます！

１．Popup Maker>Settingsを開きます

２．Generalの中の、Enable Block Editor Supportにチェックを入れて、Saveボタンをクリックして保存します。

これでブロックエディタでポップアップを作成することができるようになります！
今回はブロックエディタでポップアップを作成していきます。

2-2　
ポップアップのタイトルを入力する

こちらはポップアップの作成画面になります。
Popup Nameには、ご自身がわかりやすいタイトルを入れておきます。（サイトには表示されません）

2-3　
タイトルの下にブロックエディタでポップアップの内容を作成する

タイトルの下にブロックエディタで、ポップアップで表示させたい内容を作成します。

6:00AM

STEP

今回の例では、Popup Nameは「Cookie使用可否ポップアップテスト」としました！

ポップアップの出現トリガーの設定

ポップアップの作成画面で下にスクロールしていくと、ポップアップの設定（Popup Settings）が出てきます。

Triggersを選択し、Add New Triggerボタンをクリックします。

Time Delay／Auto Open　を選択
「クッキーを使用してポップアップが再び訪問者に表示されないようにしますか？」にチェックを入れる
On Popup Closeを選択
（訪問者がどのアクションをおこなったときに、ポップアップを停止するか）

選択とチェックができたら、Addボタンをクリックします。

すると、このような画面になります。
サイトが開かれてから、500ミリ秒（0.5秒）後にポップアップが出現するようになっています。

※目的やお好みに合わせて変更が可能です。

今回はこの設定のまま、Addボタンをクリックします。

STEP

今回は、Cookieの同意についてのポップアップなので、サイトが開かれたときに、自動でポップアップが出現するように設定しています！

ポップアップのCookie設定

このように、Triggersのところに設定が追加されていることがわかります。

Cookies control the repeat display of a popupの編集マーク（鉛筆マーク）をクリックします。

※ステップ３で、クッキーを使用してポップアップが再び訪問者に表示されないように設定されています。

Cookie Timeを「1 day」とします。
これで、ポップアップを閉じてから1日は、再度ポップアップが表示されなくなります。

入力ができたら、Updateボタンをクリックします。

STEP

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を選択します。
このプラグインには、様々なデザインのポップアップのテーマが用意されています。

お好きなテーマを選択することができます。

STEP

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としました。

STEP5

ご紹介した以外にも、様々な設定をおこなうことができるので、ぜひ一度、試されてみてください！

ポップアップを公開する

ここまできたら、画面右上の公開ボタンを押して、ポップアップを公開状態にします。

これで、サイトを開いたときにポップアップが出現するようになります！

STEP

ポップアップの出現を確認する

サイトを開いて確認してみます。
このように、Cookieの利用同意のポップアップが表示されます！
プラグインを使用して、サイトが読み込まれたときに、自動でポップアップを出現させることができました！

STEP

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

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

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

今回は自動で表示されるポップアップを作成しましたが、このプラグインを使用すれば、クリックしたときにポップアップを出現させることも可能です。
クリックされると出現するポップアップをデモサイトに実装しています。
一度、イメージを確認してみてくださいね。

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

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

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

「クラシックエディタ」を使用してクリックすると開くポップアップの作成をおこなっています。

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

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

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

投稿者プロフィール

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

ポップアップとは

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