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

2022.04.162024.03.05

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

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

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

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

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

サイドバーの目次をハイライトするカスタマイズはfunctions.phpをコードを挿入するだけです。

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

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

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

functions.phpに下記のコードを挿入してください。

※日本語アンカーを入れた時のエラー対応にてコードを修正（11行目 2022.9.30）

function motoki_mkj_highlighter() {
echo <<< EOM
<script>
const mkjHighlight = (e) => {
  const hashes = document.querySelectorAll(".widget_swell_index a");
  const sy = window.pageYOffset;
  const ey = sy + document.documentElement.clientHeight;
  let userAgent = window.navigator.userAgent.toLowerCase();
  let focusEl = [null, null];
  hashes.forEach((el) => {
    const targetEl = document.querySelector(decodeURI(el.hash));
    const y = sy + targetEl.getBoundingClientRect().top;
    el.closest(".p-toc__list li").classList.remove("mkj-marker");
    el.classList.remove("mkj-active");
    if (sy < y && y < ey && !focusEl[1]) {
      focusEl[1] = el;
      focusEl[0] = null;
    }
    if (sy > y) focusEl[0] = el;
  });
  if (focusEl.length)
    focusEl.forEach((el) => {
      el && el.classList.add("mkj-active");
      el && el.closest(".p-toc__list > li").classList.add("mkj-marker");
    });
};
mkjHighlight();
window.addEventListener("scroll", mkjHighlight);
</script>
<style>
.p-toc__link.mkj-active, .mkj-marker::before {
    background-color: var(--color_main);
    color: #fff;
    padding: 0.2em;
}
</style>
EOM;
}
add_action( 'wp_print_footer_scripts', 'motoki_mkj_highlighter' );

もしハイライトする色を変更したい場合はコードの32,33行目で背景の色と文字の色が変更できます（CSS）

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

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