説明やお知らせを「超簡単」にポップアップ画面表示できるプラグイン「Popups – WordPress Popup」

Photo by Krzysztof Kowalik on Unsplash

あるWEBサイトを作っていて、「このページに説明を付けたいけど、説明が長くなりすぎて肝心の部分が見えなくなる。。ポップアップ画面かな?」と思いました。以前ポップアップを作るプラグインを見つけていたのですが、そのプラグインは多機能な分、手間が多少かかります。
簡単にポップアップ画面が作れて、簡単にポップアップの指定ができるプラグインがあるといいのに、と思って検索してみたらありましたので、そのプラグインについてご紹介します。

Popups – WordPress Popup を使ったポップアップはこんなかんじです!

今回ポップアップを作ってみたいと思ったのは、「あるページに説明を入れたいけど、説明が長くなってしまうので同じページに入れると本来のコンテンツが見えにくくなる。しかし、別ページにリンクするのも操作として煩雑」という場合でした。今回見つけたPopups – WordPress Popupで、その操作がとても簡単にできました。

Popups – WordPress Popupで作ったポップアップは、ショートコードを使えば簡単にどこにでも貼り付けることができます。

例)下のリンクをクリックして下さい。

ゆうそうとについて

ポップアップの内容は通常の投稿や固定ページと同じように編集できますので、画像や見出し、リンクなどを好きなように貼り付けることが出来ます。

Popups – WordPress Popupのインストール

Popups – WordPress Popupをインストールします。

ダッシュボード プラグイン>新規追加 をクリック

Popups – WordPress Popup と入力すると

このプラグインが見つかりますので、今すぐインストールをクリック

有効化をクリック。これでインストールが終了です。

ポップアップ画面のコンテンツを作成して、ショートコードで好きなところに貼り付ける

ポップアップ画面のコンテンツを作成して表示させるのはとても簡単です。大まかにいうと

1.投稿や固定ページと同じようにコンテンツを作成する
2.オプションを指定する
3.公開する
4.ショートコードをコピーして、表示させたいコンテンツに貼り付ける

これだけです。かなりシンプルな手順となっています。

この手順通りにご紹介します。

1.投稿や固定ページと同じようにコンテンツを作成する

ダッシュボードの Popups をクリック

Add Newをクリック

任意のタイトルを入力します。これは一覧で見てわかるようにするだけです。

このコンテンツの場合はビジュアルで編集する方がわかりやすいのでクリック。

これが初期状態です。灰色の部分がポップアップなのでここに入力していきます。

投稿や固定ページと同じく画像やリンク、見出しなど好きなようにコンテンツを入力することができます。

背景の色はデフォルトで灰色ですが、白にしたかったのでこのページの下の方に移動して

Popup Backgroundという項目を見つけます。

カラーパレットから白を指定しました。

2.オプションを指定する

オプションの指定をします。Popups – WordPress Popupは何も指定をしないと、デフォルトで「ページが開いてから5秒後に自動的にポップアップ表示」という指定になっているので(そのようにしたい方は指定しなくてもよさそうです)、クリックしたときにポップアップ表示となるようにオプションを指定します。

編集画面の下の方に移動すると、

Popup Display Rulesという項目があります。ここの内容が

Page Typeis equal toAll Pages となっていることを確認します。

その項目の下にDisplay Optionsというところがあるのでクリックします。

Trigger(きっかけ)という項目があり、seconds after page load5となっています。デフォルトで、「ページが開いてから5秒後に自動的にポップアップ表示」と指定されていますのでここを変更します。

左側のリストボックスをクリックしManual Triggering(手動)にします。

3.公開する

公開をクリックします。

4.ショートコードをコピーして、表示させたいコンテンツに貼り付ける

公開をクリックしてから再度

このあたりまでページの下に移動します。赤枠で囲った部分が、このポップアップを表示させるためのショートコードです。

ショートコードを選択して右クリックしてコピー

コピーしたコードはこのようなものです。Click hereの部分は、用途に応じて書き換えます。

こんな感じです。実際にこれをこちらに貼ると、

ゆうそうとについて

このようになり、上記のリンクをクリックすればポップアップを見ることができるようになります。

まとめ:インストールからポップアップ作成まであっという間にできました!

このプラグインを探して、インストールしてポップアップを作成するまでは30分もかからずあっという間にできました。このプラグインなら気軽で、「ポップアップ作りたいな」と思ったときにすぐに作ることが出来そうです(^^)/

自動的にポップアップさせることができたり、表示させる条件もログイン中であるかどうかなど色々な条件が使えるようです。また、ポップアップを表示する位置もオプションでいろいろ指定できるようなので沢山の用途に使えるプラグインだと思います。

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
ゆうそうとITブログはMIXHOSTで運営中
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

280人の購読者に加わりましょう

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。