【WordPress教學】手把手教你建立,文章目錄滑動跟隨

本篇文章,小翔將手把手教你,在你的網站文章旁邊插入,會跟隨文章的「文章目錄」,有效提升網站訪客的閱讀體驗。

前言

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

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

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

而閱讀更方便的提升方法,讓觀看的人可以輕鬆的找到想看的內容,我的建議是安裝一個目錄外掛,就像本篇文章右邊的文章目錄,不僅查找內容方便,還會顯示你所到的觀看區域,且你滑到哪它就跟到哪,非常方便。


確認可使用側邊攔

你的網站主題要能支援使用側邊攔小工具,大部分主題應該都是支援的,請看下方圖示。


安裝擴充外掛

不會安裝外掛的,可點擊已下文章教學連結 ↴

【WordPress教學】手把手教你如何安裝外掛

安裝 LuckyWP Table of Contents

內容目錄外掛,簡單好用而且好看,目前只支援WordPress 4.7以上版本。

安裝 Q2W3 Fixed Widget

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

安裝 Insert Headers and Footers

加入JavaScript代碼所需外掛,一樣非常好用,我這裡把它用來修飾目錄外掛的外觀,當然,它的功能遠不只如此。

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


目錄外掛設定

點擊設定 > 內容目錄

一般設定

記得每改一個不同的設定,都要滑到底部點選儲存設定。

在「一般」設定的編號方式改成不加編號 ↴ (記得按儲存設定)

外觀設定

「外觀」設定的色彩配置改成透明 ↴

處理標題設定

「處理標題」設定的永遠進行處理的內容類型只勾選文章 ↴

其他設定

到「其他」設定,把清單標記設成UL/LI ↴


固定目錄設定

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


目錄外觀美化

以下程式碼非小翔我設計,個人覺得原作者寫的程式碼非常棒,以下是原作者文章網址,如已下小翔打的程式碼無效,可以去原作者的文章複製他的程式碼。

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

嵌入程式碼

選擇「設定」的「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>

寫入CSS

將以下 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;
}

記得按下發佈 ↴


如果這篇文章有幫助到你,請幫我拍手 5 下鼓勵我 ☝☝☝

只要花 30 秒登入 FB 或 Google,不用花任何錢就能支持我

回饋將由 LikeCoin 基金會配發

你的支持將會是我創作的最大動力!快快點擊拍手按鈕吧!

by 小翔


發表迴響