如何在 WordPress 製作 HackMD 風格的內容目錄？

前言

在文章中加入內容目錄 (Table of Contents) 功能可以讓訪客更快速的了解整篇內容的結構，減輕閱讀負擔。科技月球、民樂電腦與這篇文章頁面內都有加入內容目錄欄位，據說也可以增進 SEO 分數，只不過我認為效益不大，主要焦點應該還是要放在 讓使用者更有效率的閱讀文章。

雖然我不是專業美術領域的人，但我對於「看得順眼」與「操作簡單」兩點還蠻挑的，只要有能改善網站品質的機會，我不會放過。

進入重點，我構想的內容目錄樣式不是一般放在文章前的那種固定型，這種還要往上去找我不喜歡，而是能像固定於 HackMD 文檔右側的那種內容目錄，而且能隨著滾動位置來醒目提示更好。然而我還不太會寫 WordPress 外掛，所以我使用了懶人工具搭配法，結合內容目錄外掛「LuckyWP Table of Contents」、固定小工具外掛「Q2W3 Fixed Widget」與幾行簡單的 JavaScript、CSS 來客製化功能。

我的意思應該傳達得差不多了，直接進入實作階段吧！

確認網站環境

可使用右側欄小工具

這個很重要，我認為人在瀏覽網頁時因為由左往右讀字的關係，左邊的專注力會比較強，所以我會將內容目錄小工具放在右側欄。左側空間雖然會被壓縮，但其實他有「看起來」文字量變多的效果，我認為是可接受且很 Cool。

WordPress 4.7 版本以上

我選用的 LuckyWP Table of Contents 外掛要求 WordPress 需要 4.7 以上版本，沒更新的請快更新吧！

安裝擴充外掛

安裝 LuckyWP Table of Contents

這個就是內容目錄的核心外掛，設定很簡單直觀，也支援自動嵌入。最重要的是他的介面看起來很舒服。

LuckyWP Table of Contents

安裝 Q2W3 Fixed Widget

要做到右側欄小工具跟隨功能的首選外掛就是他，實在好用。

Fixed Widget and Sticky Elements for WordPress

安裝 Insert Headers and Footers

最後這支可裝可不裝，主要是要能在網頁中順利加入額外的 JavaScript 用。不管用哪個外掛都好，只要能順利寫入就行了。

WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager

設置內容目錄外掛

接下來到設定 > 內容目錄這邊，修改以下四項設定：

一般 > 編號方式：不加編號
外觀 > 色彩配置：透明
處理標題 > 永遠進行處理的內容類型：文章
其他 > 清單標記：UL/LI

設定值的位置如下面四張截圖，可點開放大檢視。

最後到外觀 > 小工具中拖拉「內容目錄」區塊到右邊資訊欄中，並勾選「固定這個小工具」。

做到這邊，一個能跟隨視窗滾動的內容目錄小工具就出現了。只不過前面有說過這樣子還無法滿足我，接下來要用 JavaScript 與 CSS 來改一下長相。

加入自動醒目提示功能

最後將以下程式碼嵌入至 </body> 標籤前面，這是自動醒目提示的核心程式碼。這是我改寫 CSS-TRICKS 提供的腳本完成的，只不過因為 WordPress 要做區塊性的 ID 會很麻煩，所以我改成監測 H2 標題，導致有些細微的 BUG，但對於網站的影響低到可以無視。

<script>
window.addEventListener('DOMContentLoaded', () => {
	var toclist = [];
	const observer = new IntersectionObserver(entries => {
		entries.forEach(entry => {
			const id = entry.target.getAttribute('id');
			if (entry.intersectionRatio > 0) {
				if(toclist.length > 0){
					document.querySelector('.widget_lpwtoc_widget li a[href="#' + toclist[0] + '"]').classList.remove('toc-active');
					toclist.shift();
				}
				document.querySelector('.widget_lpwtoc_widget li a[href="#' + id + '"]').classList.add('toc-active');
				toclist.push(id);
			} else {
				if(toclist.length > 1){
					document.querySelector('.widget_lpwtoc_widget li a[href="#' + id + '"]').classList.remove('toc-active');
					toclist.shift();
				}
			}
		});
	});
	// Track all sections that have an `id` applied
	document.querySelectorAll('h2 span[id]').forEach((section) => {
		observer.observe(section);
	});
});
</script>

加入醒目提示外觀

最後就是加入醒目提示的外觀樣式啦！直接將以下 CSS 寫入外觀 > 自訂 > 附加的 CSS 中即完成所有步驟。

.toc-active, .toc-active + ul a{
	color: #000!important;
}
.widget_lpwtoc_widget li a{
	color: #999;
}
.widget_lpwtoc_widget li a:hover{
	color: #000;
}

完成內容目錄客製化

看起來不錯吧？