WordPressサイトでスクロール追従するバナーをプラグインを使わずに作る方法をご紹介します。

スクロール追従するバナーのイメージ

以下のようなスクロール追従するバナーをプラグインを使わずに作ります。

パソコン表示

スマホ表示

スクロール追従するバナーの作り方

ブロックエディタでバナーを作る

固定ページを新規追加してタイトルに「スクロール追従バナー」を入力する。

カバーブロックを挿入する。

左側のメニューよりブロックタブ→スタイルタブ→オーバーレイの不透明度を「0」にする。

左側のメニューよりブロックタブ→スタイルタブ→オーバーレイよりカバーブロックの色を設定する。（不透明度を「0」にしているので選んだ色は見えませんが、選ばないと次へ進めないので選びます）

カバーブロックのタイトルを入力する段落を削除します。

新しく段落を挿入して「✕」と入力し、左側のメニューよりブロックタブ→追加CSSクラスにclose-banner-buttonを設定します。

画像ブロックを挿入してバナー画像を設定します。

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

スクロール追従バナーの固定ページを下書き保存します。

追加CSSで体裁を整える

以下のCSSをWordPress子テーマのstyle.cssに記載します。

• WordPress子テーマの作り方

/* バナー 表示 */
.wrapper-sticky-banner {
    width: 400px;                   /* 幅 */
    min-height: initial !important; /* 最小の高さ */
    position: fixed !important;     /* 表示位置 */
    right: 0;                       /* 表示位置 */
    bottom: 0;                      /* 表示位置 */
}

/* バナー 非表示 */
.wrapper-sticky-banner.close-banner {
    display: none; /* 非表示 */
}

/* バナー ラッパー */
.wrapper-sticky-banner .wp-block-cover__inner-container {
    padding: 0; /* 内側の余白 */
}

/* バナー 消すボタン */
.wrapper-sticky-banner .close-banner-button {
    width: fit-content;           /* 幅 */
    margin: initial !important;   /* 外側の余白 */
    margin-left: auto !important; /* 外側の余白 */
    cursor: pointer;              /* カーソル */
}

追加PHPでバナーを表示する

以下のPHPをWordPress子テーマのfunctions.phpに記載します。

• WordPress子テーマの作り方

// バナーの設定
function initialize_sticky_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>
        // 閉じるボタン押下でバナーを消す
        function closeBanner() {
            const myBanner = document.querySelector(".wrapper-sticky-banner");
            myBanner.classList.add("close-banner");
        }
        const closeBannerButton = document.querySelector(".close-banner-button");
        closeBannerButton.addEventListener("click", closeBanner);
    </script>
<?php
}
add_action('wp_footer', 'initialize_sticky_banner');

まとめ

WordPressサイトでスクロール追従するバナーをプラグインを使わずに作る方法をご紹介しました。

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

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