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

swell-toc-highlight

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

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

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

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

目次

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

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

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

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

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

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

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(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)

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

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

まとめ

本記事ではサイドバーの目次をハイライトするカスタマイズについて書きました。

PC版で見るユーザーが多い場合、サイドバーに目次をつけて見やすくしてあげるとユーザビリティが向上します。

是非、本記事のカスタマイズを参考にしてください。

SWELLカスタマイズ全まとめ

SWELLに関連するカスタマイズ記事を全てまとめました。

是非チェックしてみてください。

contact

お問い合わせ

WordPressの技術的なお悩みやご要望がありましたら、お気軽にお問い合わせください。

もちろんデザインに関することも相談できます。

  • 見た目の調整エラー相談その他技術に関する相談をしたい
  • 絞り込み検索オリジナルのブロックを作りたい
  • SEO内部施策構造化データの設定を依頼したい
  • サイトの高速化を診断・依頼したい
  • トップページデザインを依頼したい

この記事を書いた人

すいみんのアバター すいみん テクニカルアーティスト

カナダ在住のテクニカルアーティスト。
大学ではアート(油画)を専攻。卒業後はアニメ・映画・映像・ゲーム業界で、2Dから3DCG、ゲームエンジン、WEB制作まで幅広いコンテンツ制作の経験を積んでいます。デザイナーとエンジニアの中間のポジションでお仕事をするのが得意。

目次
閉じる