【WordPress外掛】建立會滑動跟隨的文章目錄

本篇文章，小翔將手把手教你，在你的 WordPress 網站文章旁邊插入一個會跟隨的「文章目錄」，方便訪客瀏覽文章，可以有效提升網站訪客的閱讀體驗。

目錄隱藏

前言
使用教學
結語

前言

一篇文章最重要的，除了內容，就是 可讀性 與 方便性。

閱讀環境太過於雜亂，嚴重影響文章的可讀性，文章太過沉長，想找出想看的都不容易，實在很不方便。

閱讀環境可以自己修改解決，而小翔我認為最好的閱讀環境就是，除了文章，其他全部都撤掉，就像這個網站一樣，只留文章，其它都反白，是不是看著挺不錯的?

而閱讀更方便的提升方法，讓觀看的人可以輕鬆的找到想看的內容重點，我的建議是安裝一個目錄外掛，就像本篇文章右邊的文章目錄 (使用電腦、平板等等螢幕較寬的 3C 產品才會顯示出來)，不僅查找內容方便，還會顯示你所到的觀看區域，且你內容讀到哪它就跟到哪，非常方便。

使用教學

確認你的主題可否使用側邊攔

你的 WordPress 網站所安裝的主題要能支援使用側邊攔小工具，大部分主題應該都是支援的，如下圖所示。

安裝3個擴充外掛

step 1

安裝 LuckyWP Table of Contents，內容目錄外掛，簡單好用而且好看，支援自訂樣式。

LuckyWP Table of Contents 外掛頁面 :
https://tw.wordpress.org/plugins/luckywp-table-of-contents/

step 2

安裝 Q2W3 Fixed Widget，右側欄小工具跟隨外掛，非常實用，有效調升網站轉換率，配合上面的目錄外掛，就可以讓目錄跟隨，有助於方便閱讀。

Q2W3 Fixed Widget 外掛頁面 :
https://tw.wordpress.org/plugins/q2w3-fixed-widget/

step 3

安裝 Insert Headers and Footers，加入 JavaScript、CSS 等等代碼所需外掛，一樣非常好用，我這裡把它用來修飾目錄外掛的外觀，以及在目錄上顯示你目前所觀看的文章區域，當然，它的功能遠不只如此。

Insert Headers and Footers 外掛頁面 :
https://tw.wordpress.org/plugins/insert-headers-and-footers/

以上外掛都要安裝並啟用 !!!

目錄外掛設定

step 1

點擊「設定」>「內容目錄」，如下圖所示。

step 2

在「一般」設定的 編號方式 和 編號後置詞 依序改成「小數 (巢狀)」與「)」，並點擊下方的 儲存設定。

step 3

在「外觀」設定的「色彩配置」改成淺色。在「覆寫色彩配置」的色彩選擇，你可以自由設定，更改成你最喜歡的顏色，完成後按下方的儲存設定。

step 4

在「處理標題」設定，永遠進行處理的內容類型只勾選文章，並儲存設定。

step 5

在「其他」設定，把清單標記設成 UL/LI，並儲存設定。

固定目錄

step 1

到外觀 > 小工具 介面，把「內容目錄」區塊拖拉到右側資訊欄中，當然你也可以選擇左側資訊欄。

step 2

勾選「固定這個小工具」，並儲存你的設定。

目錄樣式美化

step 1

選擇「設定」>「Insert Headers and Footers」，將以上程式碼嵌入至「</body>標籤前面」。

程式碼 :

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

畫面 :

step 2

將以下 CSS 程式碼複製貼上到外觀 > 自訂 > 附加的 CSS 中，程式碼中的「#f28500」代碼顯示的是橙色，會在目錄上顯示你目前觀看的文章區域，你看到那裡醒目顏色就跟到那裡，在閱讀的幫助上甚大。你可以自由更換想要的顏色，並記得按下發佈儲存設定。

CSS 程式碼 :

.toc-active, .toc-active + ul a{
    color: #f28500!important;
    /*#f28500顏色可以任意修改*/
}

畫面 :

結語

替目錄外掛增加滑動跟隨，讓訪客在閱讀時，可以更方便、快速的瀏覽你的文章，對於網站整體的 SEO 優化，也就是 訪客閱讀優化方面 有不錯的助益。

缺點是如果想要達成以上文章說的效果，就需要另外安裝 3 個外掛，性價比稍微有點低，要不要拿來使用就給各位自己決定了，要想看最終效果可以瀏覽瀏覽小翔的這個網站。

0 0 選票

文章評分

如果對文章內容有任何問題，或有想讓小翔另外補充的的內容，歡迎在底下留言讓我知道。

在這裡，我想讓您知道在 小翔教你SEO 網站中，有些連結為聯盟營銷連接，這代表，當人們點擊該連結，並前往其他網站進行購買動作時，我將會從銷售中獲得少部分佣金（但不會影響你購買的價格）。

有關更詳細的聯盟連接說明，請前往聯盟計畫聲明（FTC）頁面觀看。

by 小翔