[WordPress+Cocoon]スクロール追従サイドバーの目次を着色する方法

対象読者
結論
手順
1. style.cssへのコピペ
2. javascript.jsへのコピペ
プラグインTOC+(Table Of Content Plus)による悪影響
コピペカスタマイズの困難さ
参考

対象読者

WordPressテーマ「Cocoon」ユーザーの方
この件をやろうといろいろコピペしてみたが、失敗した方

結論

WordPressでは、記事上部に目次を自動生成できる。しかし、スクロールすると、折角の目次がフェードアウトしてしまい、記事構造や現在位置が分からなくなってしまう。

そこで、

目次をサイドバーに追従させ、
スクロール位置に応じてハイライトさせる

ことで、UXを高めることができる。私のサイドバーの目次を確認していただきたい(デスクトップ限定)。

以下では、これを実現するための手順や補足を説明する。

手順

２つの手順から成る。

サイドバー追従の目次の設定
それをハイライトさせる処理の記述

それぞれの具体的手順は以下だ。

WordPressの管理画面 -> 外観 -> ウィジェットにて、サイドバースクロール追従に「[C]目次」を追加(詳細は参考1)
WordPressの管理画面 -> 外観 -> テーマエディターにて、style.css、javascript.jsに追記(後述のコードをコピペ)

以下では、手順２のコピペ用コードを示す(元にしたのは参考1のコード)。

style.cssへのコピペ

a.current {
    background-color: #EEEEFF;
}

a要素のclass名は何でもいいが、javascript.jsのclass名と対応させる必要がある。

javascript.jsへのコピペ

const GAP     = -50;
const CLSNAME = "current" //cssと対応

class SidebarTOC{
	constructor(selector){
		this.$a = $(`${selector} a`);
	}

	getCurrentAnchor(currentTop){
		var heads = this.getHeads();
		var tops  = heads.map(x => x.offset()["top"]);
		var n_anchor = tops.length - 1;

		for(var i=0; i < n_anchor; i++){
			let first  = tops[i]     + this.GAP;
			let second = tops[i + 1] + this.GAP;
			if(first < currentTop && currentTop < second){
				return $(this.$a[i]);
			}
		}
	}

	getHeads(){
		var arr = [];
		this.$a.each(function(_, a){
			var href = $(a).attr("href");
			arr.push($(href));	
		});
		arr.push($(".article-footer"));
		return arr;
	}

	clear(){
			this.$a.removeClass(CLSNAME);
	}

	inRange(currentTop){
		var tops = this.getHeads().map(x => x.offset()["top"]);
		var min = tops.reduce((a, b) => a < b ? a: b);
		var max = tops.reduce((a, b) => a > b ? a: b);
		return min < currentTop && currentTop < max + this.GAP;
	}
}


$(function(){
  　//引数は人によって異なるかも
  　//サイドバー目次の属性をF12で確認してください
	　var toc = new SidebarTOC("#sidebar-scroll .toc-content");
    $(window).on('load scroll', function() {
		　　toc.clear();
        var wTop = $(window).scrollTop();
		　　if(toc.inRange(wTop)){
			　　toc.getCurrentAnchor(wTop).addClass(CLSNAME);
		　　}
    });
});

このコードはCocoonではないWordPressテーマでも使えると思う。結局、似たような処理をしているし、私のコードの方が整理されているからだ（参考２)。