SWELL│サイドバーの目次をハイライトするカスタマイズ

2022.04.162026.10.04

PC版の場合、SWELLでの目次は追従サイドバーに設置するケースが多いと思います。

記事を見ている際に、今どこの部分を見ているのか？

サイドバーの目次の項目をハイライトするカスタマイズをSWELLで適応させてみました。

SWELLの追従サイドバーに設置した目次の該当項目がハイライト表示されている様子。

ZIMAさんのTHE SONIC用の目次スクロールをSWELL用にしてみました｡

SWELLでサイドバーの目次をハイライトするカスタマイズ

このコードは、すでに表示されているSWELLのサイドバー目次を強調するものです。

目次ウィジェット自体は追加しないため、設置先のPC画面でサイドバー目次とリンク先の見出しが表示されていることを先に確認します。

以下、詳しく解説いたします。

functions.phpにコードを挿入する

WordPressの管理画面＞外観＞テーマファイルエディター＞ functions.php

子テーマのfunctions.phpをバックアップし、PHPエラー時にも元のファイルへ戻せる手段を確保してから、PHP開始タグの内側へ以下を追加します。

以前のmotoki_mkj_highlighter関数・登録行は置き換え、二重登録しないでください。

親テーマには追加しません。

日本語IDはデコードしてgetElementByIdで取得します。

空のハッシュ、不正なエンコード、存在しない見出し、別ページのリンクは処理対象から外します。

function motoki_mkj_highlighter() {
    if (!is_singular()) return;
    echo <<<'WAZA_TOC'
<script>
(() => {
  const init = () => {
  const groups = Array.from(document.querySelectorAll('.widget_swell_index')).map(widget => {
    const entries = [];
    widget.querySelectorAll('a[href*="#"]').forEach(link => {
      let id;
      try { id = decodeURIComponent(link.hash.slice(1)); } catch (_) { return; }
      if (!id || link.pathname !== location.pathname || link.origin !== location.origin) return;
      const heading = document.getElementById(id);
      if (heading) entries.push({link, heading});
    });
    return entries;
  });
  const update = () => {
    groups.forEach(entries => {
      let current = null;
      entries.forEach(entry => {
        if (entry.heading.getBoundingClientRect().top <= 120) current = entry;
      });
      entries.forEach(entry => {
        const active = entry === current;
        entry.link.classList.toggle('mkj-active', active);
        if (active) entry.link.setAttribute('aria-current', 'location');
        else entry.link.removeAttribute('aria-current');
      });
    });
  };
  let scheduled = false;
  const schedule = () => {
    if (scheduled) return;
    scheduled = true;
    requestAnimationFrame(() => { scheduled = false; update(); });
  };
  update();
  window.addEventListener('scroll', schedule, {passive:true});
  window.addEventListener('resize', schedule);
  };
  if (document.readyState === 'complete') init();
  else window.addEventListener('load', init, {once:true});
})();
</script>
<style>
.widget_swell_index a.mkj-active { background:#24507a; color:#fff; }
.widget_swell_index a:focus-visible { outline:3px solid #24507a; outline-offset:3px; }
</style>
WAZA_TOC;
}
add_action('wp_print_footer_scripts', 'motoki_mkj_highlighter');

色はstyle内のbackgroundとcolorで変更します。

文字と背景のコントラストを確保してください。

画面上端から120pxを通過した最後の見出しを現在位置とし、最初の見出しより前では選択しません。

固定ヘッダーの高さに合わせて120の値を調整します。

カスタマイズは以上です。

コード挿入後にキャッシュをクリアして、記事を読みながらサイドバーの目次が見出しの上にハイライトされているか確認しましょう。