【はじめての方はこちらをクリック!】《独学応援ブログ》では、Web制作の独学・営業・案件の進め方などのお悩み解決につながる記事を書いています。

WordPressでポップアップを表示させたいときに便利なプラグイン「Popup Builder」

平均読了時間→ 2

ポップアップを簡単に表示させたいときってありませんか?

ありますよね?笑

クライアントのサイトに急遽ポップアップ形式でイベントの紹介画像を表示させることになりまして、なにか便利なプラグインはないものかと調べて見つけたので、こちらでシェアさせていただきます。

設定も簡単なので、必要なときにぜひ試してみてください!

Popup Builderの設定方法

設定は簡単です。

  1. ダウンロードする
  2. 新規追加する
  3. ポップアップで表示させたいものを選ぶ(多くの場合は「HTML」)
  4. 表示させたいテキストや画像を入力する
  5. 表示させたいページや表示方法を選択する
  6. idをコピーして、ポップアップを表示させたい箇所のCSSに追加する

それでは、実際の画面を見てみましょう。

Popup Builderの設定手順

まずはこちらのプラグインをダウンロードしてください。

ダウンロードできたら、ダッシュボードからPopup Builderの「新規追加」を選択します。

Popup Builderの新規追加画面

「新規追加」を選択するとこちらの画面が表示されます。

ポップアップで表示させたいものを選ぶ画面ですが、ほとんどの場合は「HTML」でしょう。

今回も「HTML」を選択します。

モザイクは気にしないでください。

「HTML」を選択すると、いつもの編集画面が表示されるので、こちらで表示させたいテキストなどを入力します。当たり前ですが、画像も表示させられます。

さらに、編集画面の下の方へスクロールすると、ポップアップを表示させたいページや表示方法を選択できる項目があります。

ここまでの入力が終わったら、URLをアルファベットに変えて、「公開」を選択してください。

「公開」が完了したら、Popup Builderの設定画面にある「すべてのポップアップ」の画面に移動します。

こちらもモザイクは気にしないでください。

「すべてのポップアップ」の画面で、「クラス」の欄に表示されているクラスを確認してコピーしてください。

要はここでコピーしたクラスをポップアップを表示させたい箇所のCSSに追加することで、ポップアップを表示できるようになるという仕組みです。

JSを調べたりすることなく実装できるので、とても簡単ですよね。

以上がPopup Builderの設定方法でした。

ご参考ください!

Visited 649 times, 2 visit(s) today
ご感想はぜひツイートお願いします🧑‍💻
ABOUT US
めがねん管理人
Web制作の独学を「ただしく、くわしく、わかりやすく」|フリーランス5年目|Web制作の独学者向けブログ《独学応援ブログ》、無料コミュニティ《独学応援サロン》、個別サポートサービス《独学応援メンター》運営|ガジェット、SF、犬が好き🐶
牧草地でカメラに近づく牛

この画面が表示されたら成功です!