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

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

Popup Maker

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

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

ポップアップの作成

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

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

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

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

1.Popup Name

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

2.Popup Title

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

3.ポップアップの内容を入力

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

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

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

動作の設定

トリガーの設定

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

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

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

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

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

Add」をクリックします。

様々な設定

テーマの設定

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

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

サイズの設定

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

クローズボタンの設定

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

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

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

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

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

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

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

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

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

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

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

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

弊社のLightningテーマのデモサイトで、ポップアップ機能を実際にご確認いただけます!
一度、実装のイメージを確認してみてくださいね。

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

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

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

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

投稿者プロフィール

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

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

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

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

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

    任意貴社サイトURL

    必須お問い合わせ項目

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

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

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

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

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

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

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

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

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

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

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