ポップアップとは

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

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

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

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

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

STEP
1

ポップアップの作成

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

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

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

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

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

1.Popup Maker>Settingsを開きます

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

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

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

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

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

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

6:00AM

STEP
2

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

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

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

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

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

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

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

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

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

STEP
3

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

ポップアップのCookie設定

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

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

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

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

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

STEP
4

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
5

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を選択します。
今回は、画面の真ん中に表示させたいので、
LocationMiddle Centerとしました。

STEP5

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

ポップアップを公開する

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

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

STEP
6

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

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

STEP
7

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

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

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

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

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

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

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

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

投稿者プロフィール

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

お問合せフォームはこちら

(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)