絞れば、出てくる、アイディア。

ワードプレスで無料でポップアップを作成する方法

WEBサイトやブログで表示される「ポップアップ」は、サイトへの訪問者や読者の注意を引き、より詳細な情報への誘導や売上などのコンバージョン率を高めるためにとても効果的です。

例えば、特設サイトへの誘導、メールマガジンへの登録、セール情報の案内やクーポンコードの配布など、その用途は様々です。

今回の記事では、WEBサイトやブログをワードプレスで運用している方に向けて、無料で簡単にポップアップを作成する方法を紹介します。
ポップアップの種類や使い分け、ポップアップをプラグインで作成する方法、プラグインを使わない方法も解説しますので、ぜひ参考にしてみてください！

この記事の目次

ポップアップの種類
 1-1. ポップアップの比較
 1-2. 画面中央に表示される「ライトボックスポップアップ」
1-3. 画面の端に表示される「スライドインポップアップ」
プラグインで作成する方法
 2-1. Popup Makerで作成する方法
プラグイン以外で作成する方法
 3-1. HTML+Javascriptで作成する

1. ポップアップの種類

ポップアップにもいくつかの種類があり、それぞれ目的や使い方が異なります。
今回は画面中央に表示される「ライトボックスポップアップ」と、画面の端に表示される「スライドインポップアップ」の代表的な2種類を紹介します。

1-1. ポップアップの比較

まず初めに、「ライトボックスポップアップ」と「スライドインポップアップ」の特徴や用途、メリット・デメリットを表としてまとめてみました。

ライトボックスポップアップは、画面の中央に表示されるのに対し、スライドインポップアップは画面の表示じされ、表示場所が特徴として大きく異なります。
また、用途やメリット、デメリットもそれぞれのポップアップで異なります。

1-2. 画面中央に表示される「ライトボックスポップアップ」

ライトボックスタイプは、ユーザーがページを開いたときや特定の操作をしたときに、画面中央に表示されるポップアップです。背景が暗くなり、中央のポップアップに注目が集まるのが特徴です。

ライトボックスポップアップは中央に表示されることでユーザーの視認性がとても高く、伝えたいメッセージを目立たせることができます。
また、購買や登録など特定の行動を促す際には、コンバージョン率の向上にもつながりやすいです。

一方で、注意しなければならないのが、ユーザー体験（UX）への影響です。
表示のタイミングが悪いと、ユーザーの閲覧を妨げる要因となり、離脱率の増加を招く恐れもあります。また、スマートフォンなどのモバイル端末では画面が狭いため、中央に大きなポップアップが表示されることで、操作しにくさや不快感を与えてしまうことがあります。

1-3. 画面端に表示される「スライドインポップアップ」

スライドインポップアップは、画面の端、たとえば右下や左下などから、アニメーションとともにスライドして表示されるタイプのポップアップです。
ライトボックスに比べて控えめな表示であるため、ページの閲覧体験を邪魔することなく情報を提示することができます。

スライドインポップアップは、SNSのフォローを促したり、LINEの追加を案内したり、割引クーポンの表示、あるいは新着記事への導線として利用されることが一般的です。
ユーザーの行動をさえぎらずに、必要なときに必要な情報だけをそっと伝える使い方が適しています。

最大のメリットは、表示が控えめであるため、ユーザーにストレスを与えにくいという点です。
特にスマートフォンやタブレットなどのモバイル端末では、画面全体を覆うことなく自然に表示できるため、ユーザー体験を損なわずに済みます。
また、メインコンテンツの閲覧と同時に補足的な情報を提示する用途にも向いています。

2. プラグインで作成する方法

ここからは実際にポップアップを作成する方法を解説していきます。
今回はワードプレス無料でポップアップが作成できるおすすめのプラグインを2種類紹介します。それぞれ実際の操作画面のスクリーンショット付きで解説しますので、ぜひ一緒にポップアップを作成してみてください！

2-1. Popup Makerで作成する方法

Popup Makerはワードプレスのポップアッププラグインの中でも最も人気のあるプラグインの一つです。多機能でありながら使いやすく、もちろん無料で使うことができます。

↑ワードプレスのメニューで「プラグイン」を選択し、画面上部の「プラグインを追加」をクリックします。

↑画面右上の「プラグインの検索」で「popup maker」と入力します。
似たようなプラグインが複数表示されるのですが、「Popup Maker – Boost Sales, Conversations…」と表示されているプラグイン（上記画像赤枠）の「今すぐインストール」をクリックしその後「有効化」をクリックします。

↑Popup Makerがインストールされたら、「Welcome to Popup Maker!」という画面が表示されます。ここでは画面下部の「Create your first popup!」をクリックします。

↑ここまで来たら、実際にポップアップを作成していきます。
今回は例として「家庭でできるいちごの作り方完全ガイドPDF」をダウンロードしてもらうポップアップを作成します。

まず一番上にポップアップの名前を入力します。もう一つの枠は空欄でも問題ありません。
今回はあらかじめポップアップで表示させたい画像を作っておき、その画像を「メディアを追加」から登録します。
画像を登録したら「編集」をクリックします。

↑「編集」をクリックしたら、上記のような画面が表示されます。
リンク先を「カスタムURL」に設定し、URLをポップアップの遷移先（＝ポップアップをクリックしたら表示される画面）に設定します。

↑ポップアップ画像のリンク先を設定したら、画面下の「Popup Settings」というところから「Triggers」をクリックし、「Add New Trigger」をクリックします。

↑New Triggerでは、ポップアップが表示されるときのきっかけを設定します。
今回は「Time Delay / Auto Open」を選択します。これを選択すると自動的にポップアップを表示させることができます。

↑Time Delay Settingsでポップアップを出現させる時間を指定することができます。
例えば、Delayを5000msに設定した場合、ページが表示されてから5秒後にポップアップを表示させるように設定できます。

↑ポップアップが表示される場所は「Popup Settings」の「Display」から選択できます。
今回の例では画面の右下に表示させたいので、「Right Bottom Slide-in」を選択します。

↑ここまで設定して更新すると、上記の画像のように画面の右下にポップアップを表示させることができます！

3. プラグイン以外で作成する方法

3-1. HTML＋CSS＋JavaScriptで作成する方法

プラグイン以外でもワードプレスでポップアップを作成する方法があります。
今回は自由度が高くポップアップを作成できる方法として「HTML＋CSS＋JavaScriptで作成」する方法もご紹介します。

※今回の例はワードプレステーマ「Cocoon」の場合の例となります。

↑ポップアップを表示させたい投稿または固定ページの編集画面で「カスタムHTML」を追加します。

↑「カスタムHTML」に下記のコードを貼りつけます。画像をポップアップにする場合は、「img src=」の部分にポップアップの画像URLを入力します。

				
					<!-- ポップアップの本体 -->
<div id="popup" class="popup">
  <div class="popup-content image-popup">
    <span class="close">&times;</span>
    <img decoding="async" src="ここに画像のURLを入力" alt="ポップアップ画像" class="popup-image">
  </div>
</div>

↑画像のURLはワードプレスのメニュー「メディア」から「添付ファイルの詳細」の「ファイルのURL」で確認することができます。

↑次に、一度ワードプレスのメニューに戻り、「外観」→「カスタマイズ」を選択します。

↑カスタマイズの画面に移動したら、「追加CSS」をクリックします。

↑追加CSS（上記画像の赤枠部分）に下記のコードを貼り付けます。

				
					.popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}

.popup-content.image-popup {
  position: relative;
  margin: 5% auto;
  max-width: 70%;
  max-height: 70%;
  background: none;
  border: none;
  text-align: center;
}

.popup-image {
  max-width: 90vw;
  max-height: 80vh;
  height: auto;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.close {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 28px;
  color: #fff;
  background: #333;
  border-radius: 50%;
  padding: 5px 10px;
  cursor: pointer;
}

↑もう一度ワードプレスのメニューに戻り、「外観」→「テーマファイルエディター」を選択します。

↑テーマファイルエディターの画面が表示されたら、「テーマフッター（footer.php）」を選択し、最後の「</body>」の直前に下記のコードを貼り付けて「ファイルを更新」をクリックします。
※テーマファイルを編集する際は必ずコピーなどをしてバックアップをとっておきましょう。

				
					<script>
  window.onload = function () {
    if (!localStorage.getItem("popupShown")) {
      setTimeout(function () {
        document.getElementById("popup").style.display = "block";
        localStorage.setItem("popupShown", "true");
      }, 2000); // ← 2秒後に表示
    }
  };

  document.addEventListener("DOMContentLoaded", function () {
    const closeBtn = document.querySelector(".close");
    if (closeBtn) {
      closeBtn.onclick = function () {
        document.getElementById("popup").style.display = "none";
      };
    }

    window.onclick = function (event) {
      if (event.target === document.getElementById("popup")) {
        document.getElementById("popup").style.display = "none";
      }
    };
  });
</script>