SWELLのモーダル目次表示にハイライトをつける
目次にハイライトをつけると閲覧者が今記事のどこにいるのかわかりやすくなり、記事の見やすさが向上します。
TOC
目次にハイライトをつける理由
当サイトでは記事ページは１カラムで記事の先頭の目次も非表示にしており、画面右下の目次ボタンで目次を見られるようにしています。目次ボタンをクリック（タップ）するとモーダルウィンドウで目次が表示されますが、今どこにいるのかが標準ではわかりません。
このモーダルウィンドウ目次の現在位置にハイライトをつけるカスタマイズをします。
ハイライトを追加するためのコード
まずはfunctions.phpまたはCode Snippetsに以下のコードを貼り付けます。
//目次ハイライト
function swell_toc_highlight() {
echo <<< EOM
<script>
class toc_highlight {
init(){
this.elem = document.querySelectorAll('.-modal a');
this.elem2 = document.querySelectorAll('.-modal a');
}
update(){
if(this.elem === null) {
return 0;
} else {
for (let i = 0; i < this.elem.length; i++) {
const y = document.documentElement.clientHeight;
const a = document.getElementById( this.elem[i].hash.slice(1) ).getBoundingClientRect().top;
if( y > a ){
this.elem[i].classList.add("current");this.elem2[i].classList.add("current");
if ( i>0 ){
this.elem[0].classList.remove("current");this.elem2[0].classList.remove("current");
this.elem[i-1].classList.remove("current");this.elem2[i-1].classList.remove("current");
}
} else {
this.elem[i].classList.remove("current");this.elem2[i].classList.remove("current");
}
}
}
}
}
var toc=new toc_highlight();
window.addEventListener('DOMContentLoaded', function(e){ toc.init(); });
window.addEventListener('scroll', function(e){ toc.update(); });
</script>
EOM;
}
add_action( 'wp_print_footer_scripts', 'swell_toc_highlight' );続いて色を追加cssで指定します。
/* 目次ハイライト*/
a.p-toc__link.current {
background-color: var(--color_main);
color: #fff;
}色はお好みで調節可能です。
まとめ
このページの目次を表示すると現在位置にハイライトがついています。確認してみてください。
＼ SWELLのカスタマイズ ／
WordPressテーマ「SWELL」を
使用したカスタマイズ事例集
