WordPressサイトでポップアップバナーをプラグインを使わずにブロックエディタで作る方法をご紹介します。

ポップアップバナーのサンプル

Webページが表示されてから5秒経つとバナーがポップアップ表示されます。

ポップアップバナーの固定ページを作成する

WordPress固定ページを追加して、タイトルをポップアップバナーとします。

ポップアップバナーの固定ページにカバーブロックを挿入します。

カバーブロックの追加CSSクラスにwrapper-popup-bannerを設定します。

カバーブロックのオーバレイの不透明度を0にします。

カバーブロックの背景色を選択します。

カバーブロック内に段落ブロックを挿入します。

段落ブロックに✕と入力して、追加CSSクラスにclose-popup-banner-buttonを設定します。

カバーブロック内にもともとあったタイトルの段落ブロックを削除します。

カバーブロック内に画像ブロックを挿入します。

画像ブロックにバナーとして表示したい画像を設定します。

固定ページを下書き保存します。

バナーをポップアップ表示させる処理を追加する

バナーをポップアップ表示させる処理をWordPressの子テーマに追加します。

• WordPress子テーマの作り方

PHP & JavaScript

WordPress子テーマのfunctions.phpに以下の処理を追加します。

function initialize_popup_banner() {
    // 固定ページ「ポップアップバナー」を他のページに挿入する
    $query = new WP_Query(array(
        'post_type' => 'page',
        'title' => 'ポップアップバナー',
        'post_status' => 'draft'
    ));

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            esc_html(the_content());
        }
    }
    wp_reset_postdata();
?>
    <script>
        const myPopupBanner = document.querySelector(".wrapper-popup-banner");

        // ５秒後にバナーを表示する
        function displayPopupBanner() {
            myPopupBanner.classList.add("displayed");
            document.body.classList.add('do-not-scroll');
        }
        setTimeout(displayPopupBanner, 5000, myPopupBanner);

        // 閉じるボタン押下でバナーを消す
        function closePopupBanner() {
            myPopupBanner.classList.remove("displayed");
            document.body.classList.remove('do-not-scroll');
        }
        const closePopupBannerButton = document.querySelector(".close-popup-banner-button");
        closePopupBannerButton.addEventListener("click", closePopupBanner);
    </script>
<?php
}
add_action('wp_footer', 'initialize_popup_banner');

ポップアップバナーの固定ページをその他の各ページに挿入し、JavaScriptでその表示・非表示のCSSを切り替えています。

CSS

WordPress子テーマのstyle.cssに以下のスタイルを追加します。

/* 初期は非表示 */
.wrapper-popup-banner {
    display: none !important;
}

/*  画面の上下左右中央配置で最前面に表示 */
.wrapper-popup-banner.displayed {
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 100;
}

/* カバーブロックの幅をリセット */
.wrapper-popup-banner .wp-block-cover__inner-container {
    width: initial !important;
}

/* 画像ブロックの影を表示 */
.wrapper-popup-banner img {
    box-shadow: 0px 12px 50px -20px rgba(0, 0, 0, 0.7);
}

/* 閉じるボタンを視認しやすいスタイルにする */
.wrapper-popup-banner .close-popup-banner-button {
    width: fit-content;
    cursor: pointer;
    padding: 10px 15px;
    margin: initial !important;
    margin-left: auto !important;
    background-color: #c6c6c6;
    color: #ffffff;
    border-radius: 10px;
}

/* ページをスクロールできなくする */
.do-not-scroll {
    overflow: hidden !important;
}

まとめ

WordPressサイトでポップアップバナーをプラグインを使わずにブロックエディタで作る方法をご紹介しました。

カナメグローバルホールディングスではWebサイトの制作や保守を行っています。

WordPressサイトも対応しているのでお気軽にご相談ください。