【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,並儲存設定。

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顏色可以任意修改*/
}

畫面 :

附加的CSS

結語

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

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

0 0 選票
文章評分

如果對文章內容有任何問題,歡迎在底下留言讓我知道。
如果你喜歡我的文章,可以按分享按鈕,讓更多的人看見我的文章。
還沒訂閱部落格的朋友們,記得在右上角填入信箱,收到我最新文章的通知。

by 小翔

訂閱
通知
guest
0 評論
在線反饋
查看所有評論