WordPressでポップアップ広告を作ってみた。【プラグインなし】

プログラミング

2024.07.19

私が調べながら作ったポップアップサンプルで、下記はPCとスマホでの表示の違いです。

ウェブサイトに広告を表示するためのポップアップを作成するには、JavaScriptとCSSを組み合わせて簡単に実装できます。この記事では、ポップアップ広告の表示方法とその各部分の説明します。

1. 必要なインストール
2. 各プログラムごとの説明
1. CSS部分
2. JavaScript部分
3. 全体のプログラム
4. 活用事例

1. 必要なインストール

特にインストールするものはありませんが、当たり前ですけどポップアップ広告を導入するための環境が整っているか確認してください。以下のものが必要です。

ウェブブラウザ（Chrome, Firefox, Safariなど）
テキストエディタ（VSCode, Sublime Textなど）

2. 各プログラムごとの説明

CSS部分

ポップアップのスタイルを定義するCSSコードです。このコードは、ポップアップのサイズ、配置、背景色、影などの見た目を設定します。

cocoonですが、「外観」→「テーマファイルエディター」→「子テーマ」のstyle.cssに配置してみました。

#popup-ad {
    width: 300px;
    text-align: center;
    z-index: 1000;
}

JavaScript部分

DOMが完全に読み込まれた後にポップアップを生成し、表示するJavaScriptコードです。閉じるボタンの機能もここで定義します。

cocoonですが、「外観」→「テーマファイルエディター」→「子テーマ」のjavascript.jsに配置してみました。

document.addEventListener("DOMContentLoaded", function() {
    var popup = document.createElement("div");
    popup.id = "popup-ad";
    popup.style.position = "fixed";
    popup.style.left = "50%";
    popup.style.top = "50%";
    popup.style.transform = "translate(-50%, -50%)";
    popup.style.padding = "20px";
    popup.style.backgroundColor = "white";
    popup.style.boxShadow = "0px 0px 10px rgba(0,0,0,0.5)";
    popup.innerHTML = `
        <p>PR<p>
        <a href="リンク"target="_blank"><img src="画像のURL" alt="" height="250"></a>
        <button id="close-popup">閉じる</button>
    `;
    document.body.appendChild(popup);

    document.getElementById("close-popup").addEventListener("click", function() {
        document.body.removeChild(popup);
    });
});

3. 全体のプログラム

上記のCSSとJavaScriptコードを合わせて、HTMLファイル内に配置する場合は以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ポップアップ広告のデモ</title>
    <style>
        #popup-ad {
            width: 300px;
            text-align: center;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var popup = document.createElement("div");
            popup.id = "popup-ad";
            popup.style.position = "fixed";
            popup.style.left = "50%";
            popup.style.top = "50%";
            popup.style.transform = "translate(-50%, -50%)";
            popup.style.padding = "20px";
            popup.style.backgroundColor = "white";
            popup.style.boxShadow = "0px 0px 10px rgba(0,0,0,0.5)";
            popup.innerHTML = `
                <p>PR<p>
                <a href="リンク"target="_blank"><img src="画像のリンク" alt="" width="300" height="250"></a>
                <button id="close-popup">閉じる</button>
            `;
            document.body.appendChild(popup);

            document.getElementById("close-popup").addEventListener("click", function() {
                document.body.removeChild(popup);
            });
        });
    </script>
</body>
</html>