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

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' );