WordPress│記事の終わりにバナーを表示するカスタマイズ

2023.09.142026.10.21

記事末尾に置いた目印が画面に入ったら、関連情報への小さな固定パネルを出す例です。ページ全体の高さの80%を記事末尾と見なす処理をやめ、IntersectionObserverで設置した目印を監視します。広告の最適化を行う例ではありません。

HTMLを記事の末尾へ置く

対象記事のカスタムHTMLブロックに次の1組を置きます。URLとリンク文言を実際の案内に変更してください。このページでは後述の「動く見本」に目印を置いています。画像バナーにする場合もリンクの目的が分かるaltを指定します。

<p class="waza-end-marker" tabindex="-1">この記事の説明はここまでです。</p>
<aside class="waza-end-banner" aria-label="関連情報" hidden>
<button type="button" class="waza-banner-close">閉じる</button>
<a href="https://motoki-design.co.jp/wordpress/">WordPressの実装例を探す</a>
</aside>

CSSを追加

.waza-end-banner[hidden] { display: none !important; }
.waza-end-banner {
  box-sizing: border-box;
  overflow-wrap: anywhere;
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 80; width: min(280px, calc(100vw - 32px));
  padding: 12px; background: #fff; color: #222; border: 2px solid #766028;
  border-radius: 8px; box-shadow: 0 2px 12px #0002;
}
.waza-end-banner a { display: block; padding: 12px 0; color: #173b65; }
.waza-banner-close { padding: 8px 12px; border: 1px solid #555; color: #222; background: #fff; }
.waza-end-banner :focus-visible { outline: 3px solid #173b65; outline-offset: 2px; }

JavaScriptを追加

CSSは追加CSSまたは子テーマのstyle.cssへ、JavaScriptは対象ページで読み込むJSファイルかJavaScript挿入機能へ1回だけ追加します。PHP欄やCSS欄にJavaScriptを貼り付けません。HTMLの目印とパネルも1組だけ設置してください。既存のwindow.onloadを書き換えず、必要な要素がないページやIntersectionObserver非対応環境では何もしません。

(() => {
  const init = () => {
    const marker = document.querySelector('.waza-end-marker');
    const banner = document.querySelector('.waza-end-banner');
    const close = banner?.querySelector('.waza-banner-close');
    if (!marker || !banner || !close || !('IntersectionObserver' in window)) return;
    let dismissed = false;
    let frame = 0;
    const hide = () => {
      if (banner.contains(document.activeElement)) marker.focus({preventScroll: true});
      banner.hidden = true;
    };
    const refresh = () => {
      frame = 0;
      if (dismissed) return;
      if (marker.getBoundingClientRect().top <= window.innerHeight) banner.hidden = false;
      else hide();
    };
    const queueRefresh = () => {
      if (!dismissed && !frame) frame = requestAnimationFrame(refresh);
    };
    const observer = new IntersectionObserver(queueRefresh);
    observer.observe(marker);
    window.addEventListener('scroll', queueRefresh, {passive: true});
    window.addEventListener('resize', queueRefresh);
    const dismiss = () => {
      dismissed = true;
      hide();
      observer.disconnect();
      window.removeEventListener('scroll', queueRefresh);
      window.removeEventListener('resize', queueRefresh);
      if (frame) cancelAnimationFrame(frame);
    };
    close.addEventListener('click', dismiss);
    banner.addEventListener('keydown', event => {
      if (event.key === 'Escape') { dismiss(); event.preventDefault(); }
    });
    refresh();
  };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, {once: true});
  else init();
})();

動く見本

次の目印までスクロールすると右下に案内が表示されます。目印が画面下端へ到達したかを、IntersectionObserverに加えてスクロール・リサイズ時にも確認するため、ページ内リンクやEndキーで目印を飛び越えた場合にも対応します。閉じるボタンまたはパネル内のEscapeキーで閉じます。閉じた後は、このページを再読み込みするまで再表示しません。

この記事の説明はここまでです。

確認と戻し方

目印へ到達する前、到達時、通過後、上へ戻った時を確認します。初回から目印が画面内にある短い記事ではすぐ表示します。キーボードで閉じたときは目印へフォーカスを戻します。フォーカスを強制的にパネルへ移すことはしません。

パネルはbox-sizing: border-boxで幅に余白と枠線を含め、長いリンク文言は折り返します。テーマの共通CSSに依存せず、狭い画面でも指定幅からはみ出しにくくするためです。スマホで本文や別の固定UIを隠さないか、閉じるボタンを操作できるか確認してください。この見本は関連リンクの案内で、全画面の広告やモーダルではありません。戻す場合は追加したHTML・CSS・JavaScriptを外します。旧fixed-wrapを操作するスクリプトも停止してから切り替えてください。