Pupup Makerの使用方法について

プラグイン
この記事は約6分で読めます。

Pupup Makerとは

WordPress のプラグイン Popup Maker は、WordPress サイトにポップアップ表示機能を簡単に追加することができるプラグインです。 用語の解説や商品の詳細、注意事項など、ページ本文に入れると煩雑になってしまう項目でもポップアップを使って表示することによって見たい人だけにスマートに表示することができます。
他にもフォームをポップアップで表示させたり、メディアを埋め込んで表示させる等ということもできるので、アイデア次第ではスマートでスタイリッシュなページを作成することが可能になります。
ポップアップはセンターポップアップ、右下スライドイン、トップバーなど様々な位置に表示することができます。 その他、設定で様々な見た目やタイミング等を変えることができるので是非試してみてください。

インストール方法

  1. ダッシュボード左側のメニューから「プラグイン」を選択し、表示されたメニューから「新規追加」を選択する。
  2. 表示された検索画面のキーワード欄に「Popup Maker – Popup Forms, Opt-ins & More」と入力する。
  3. 検索結果を確認し、「今すぐインストール」を選択する。
  4. プラグインのインストールが完了すると「有効化」ボタンが表示されるので、このボタンをクリックする。
  5. 自動更新をクリックする。(手動更新希望の方はそのまま)
  6. 有効化が完了するとプラグイン一覧が表示されるので「Settings」をクリック

(設定画面)

Popup Makerでポップアップを作成する方法

  1. 『WordPress管理>ダッシュボード>Popup Maker>Add New Popup』をクリック
    • Popup Maker英字メニューの補足説明
      • Popup Maker → ポップアップメーカー
      • All Popups → 全てのポップアップ
        • ポップアップに一覧が表示されます。
          (ラジオボタンの切り替えで簡単に表示のON/OFFが可能)
      • Add New Popup → 新しいポップアップを追加
        • 新規作成はここからです。
      • Call to Action → 行動喚起
        • 慣れてきてからにしましょう。
      • Popup Themes → ポップアップテーマ
        • 色々な雛形が用意されています。
          (最初はデフォルトがおすすめ)
      • Subscribers → 購読者
        • 慣れてきてからにしましょう。
      • Settings → 設定
        • エディター画面で設定できる内容です。
          (デフォルトがおすすめ)
      • Tools → ツール
  2. 「Add New Popup」をクリック
    • 投稿記事を作成する要領で、本文に「テキスト・画像・ボタン・ショートコード・リンク」などをっ自由に配置できます。CTAやお知らせ文を入力してポップアップ広告を作成する。
  3. エディター画面でできる設定(Popup Settings)
    • エディター画面をスクロールダウンすると、以下のメニュー(Popup Settings)が表示されます。
      ここでは、ポップアップの表示に関する設定ができる。
    • Popup Maker 英字メニューの補足
      • Triggers → ポップアップをいつ表示するかを決める設定
        • 「Popup Settings」の「Triggers」タブをクリックします。
        • Triggers cause a popup to open.」の右側にある『Add New Triggers』をクリックして、『Delay(遅延/時間差)』を設定します。
        • Cookies control the repeat display of a popup. 」は、ポップアップを閉じたあとに何が起こるかを設定します。初めはデフォルト設定のままで問題ありません。表示頻度が気になる場合は、調整してみましょう。
      • Targeting → どのページ・どのユーザーにポップアップを表示するかを決める設定
        • 「Popup Settings」の「Targeting」タブをクリックします。
        • 「  Choose a condition」の窓をクリックすると、表示先ページの一覧が表示されるので、ポップアップを表示したいページを選択できます。
      • Display → ポップアップの見た目や表示方法を設定する項目
        • 「Popup Settings」の「Display」タブをクリックします。
        • 表示イメージを直感的に選択できます。また、他のタブから細かな設定も行えます。
        • Display Presets → ポップアップの表示スタイル(見た目)のひな形
        • Appearance → 外観/見た目
        • Size → 大きさ(幅・高さ)
        • Animation → 動き/表示の演出(スライド・フェード)
        • Sounds → 効果音/音の設定(Beep・Chimes・Correct)
        • Position → 表示位置/配置場所(上下左右の位置調整)
        • Advanced → 詳細設定/高度な設定
      • Close → ポップアップを閉じる操作や設定
        • 「Popup Settings」の「Close」タブをクリックします。
        • クローズボタンのテキストや表示タイミングを、ポップアップの表示とずらして設定できます。
      • Advanced → 基本設定では触らない、少し高度なカスタマイズ項目
        • 「Popup Settings」の「Advanced」タブをクリックします。
          • フォームを送信したあとに、同じポップアップが再度自動表示されるのを防ぐ設定です。
          • キーボード操作や読み上げ支援など、アクセシビリティに関する機能をオフにする設定です。
        • デフォルトのままでOKです。

Popup Makerが表示されないときの注意点

  • 『Triggers>Trigger』が設定されているか
  • 『Triggers>Cookie』の設定により再表示が制限されていないか
  • 『Targetng>Conditions』で表示ページが指定されているか
  • キャッシュがクリアされているか

「popup maker 2回目が動作しない」場合の対応

WordPressのプラグイン「Popup Maker」でポップアップが2回目以降表示されない場合、最も多い原因はCookie(クッキー)の設定です。

以下の手順で設定を確認・修正してください。

1. Cookie設定の削除(何度も表示させたい場合)
Popup Makerは、一度表示したユーザーに何度も同じポップアップを見せないよう、デフォルトでCookieを保存する設定になっていることがあります。 [12]

  • 確認手順:
    1. WordPress管理画面の「Popup Maker」から該当のポップアップ編集画面を開きます。
    2. 下部の「Popup Settings(ポップアップ設定)」にある「Triggers(トリガー)」タブをクリックします。
    3. 設定されているトリガー(「Click Open」や「Time Delay」など)の右側にある「Cookie」欄を確認します。
    4. Cookieが設定されている場合は、ゴミ箱アイコンをクリックして削除するか、ペン型アイコンから保存期間(Cookie Time)を短く調整してください。
    5. ページを「更新」します。

2. プレビューでの確認方法
Cookie設定を消さずに、単に動作テストとして2回目を見たい場合は、以下の方法を試してください。

  • ブラウザのキャッシュ/Cookie削除: ブラウザの履歴からCookieを削除すると再度表示されます。
  • シークレットモード: シークレットブラウザ(またはプライベートモード)でサイトを開き直すと、前回の閲覧履歴がリセットされた状態で確認できます。
  • 管理バーからリセット: サイトを表示した状態で、上部の管理バーにある「Popup Maker」メニューから「Reset Cookie(クッキーをリセット)」を選択します。

3. その他の可能性

  • キャッシュプラグインの影響WP RocketWP Fastest Cacheなどのキャッシュプラグインを使用している場合、古いデータが表示されている可能性があります。一度サイト全体のキャッシュをクリアしてください。
  • JavaScriptのエラー: 別のプラグインやテーマとの競合で、2回目の実行時にスクリプトが止まっている可能性があります。ブラウザの「デベロッパーツール(F12キー)」の「Console」タブで赤文字のエラーが出ていないか確認してください。

コメント