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

2023.09.142026.10.01

記事末尾に置いた目印が画面に入ったら、関連情報への小さな固定パネルを出す例です。ページ全体の高さの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 {
  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を追加

対象ページで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;
    const hide = () => {
      if (banner.contains(document.activeElement)) marker.focus({preventScroll: true});
      banner.hidden = true;
    };
    const observer = new IntersectionObserver(entries => {
      if (dismissed) return;
      const entry = entries[0];
      if (entry.isIntersecting || entry.boundingClientRect.bottom < 0) banner.hidden = false;
      else hide();
    });
    observer.observe(marker);
    close.addEventListener('click', () => { dismissed = true; hide(); observer.disconnect(); });
    banner.addEventListener('keydown', event => {
      if (event.key === 'Escape') { dismissed = true; hide(); observer.disconnect(); event.preventDefault(); }
    });
  };
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init, {once: true});
  else init();
})();