「WordPress 架站」電子報

我們的分析文章著重於如何善用外掛工具、有效達成目的、提升網頁載入速度、行銷自動化,以及各種優惠資訊,歡迎訂閱電子報唷!

Table of Contents – 使用 Blocksy 與 Kadence Blocks 輕鬆建立文章目錄、內容大綱

在書籍的最開頭一般都會有文章目錄、內容大綱,目的是協助讀者能快速地了解這本書的架構與內容章節,除了讓讀者在初次閱讀時能方便掌握作者的思路之外,讀者後續再次閱讀也能挑選喜歡的章節快速進入內容。

部落格、內容網站也是如此,善加利用文章目錄、內容大綱可以讓訪客有方便的導引工具,清楚的知道目前閱讀的是哪個章節,也能快速地跳到有興趣的章節進行閱讀。

這篇文章與大家分享我們設定文章目錄、內容大綱的方式,只需要使用到少數工具就能製作出美觀、輕巧的文章目錄、內容大綱。

  • 透過 Blocksy 佈景主題編輯器,利用 Blocksy Pro 的 Content Blocks 功能,可以自由的將文章目錄、內容大綱嵌入至文章的側邊欄或是其它指定位置。
  • 使用免費版 Kadence Blocks 區塊編輯器外掛,利用其 Table of Contents 區塊,可以自訂文章目錄、內容大綱顯示的標題階層 (H1~H6)、呈現樣式。

我們的最終目標是做出在文章頁面側邊欄顯示,當上下捲動畫面時可以吸附置頂,並且會聚焦顯示目前所在位置的文章目錄、內容大綱!

Blocksy 佈景主題編輯器

Blocksy 是快速崛起、頗受網頁設計社群青睞的輕量佈景主題編輯器,除了彈性、美觀的 UI、UX 設計之外,Blocksy 還提供了 33 種不同主題的 Starter Sites 範本 (陸續增加中) 讓大家可以快速建立網站。

Blocksy 目前提供的網站主題範本有:

  • Smart Home – 智能家庭 (產品解決方案)
  • Daily News – 每日新聞
  • Cosmetic – 彩妝
  • Real Estate – 房地產
  • Photo Studio – 攝影工作室
  • Restaurant – 餐廳
  • Wood – 木工工作室
  • Renovation – 裝修
  • Beverr – 網站設計工作室
  • Catering – 外燴
  • Barber Shop – 美容、理髮
  • Bizonsult – 商業諮詢顧問
  • Gadgets – 科技小物電商網站
  • Home Decor – 室內設計
  • Cleaning Service – 清潔、打掃服務
  • Car Service – 汽車維修、美容服務
  • Floreo – 植栽、花藝
  • Garderobe – 時尚選品
  • Petsy – 寵物
  • Justice – 專業服務
  • Wedding – 婚禮
  • Web Agency – 網路服務 (Saas、WordPress 外掛等) 創業、開發
  • Persona – 個人網站
  • Yogi – 瑜珈工作室
  • Homi – 生活風格、居家選物
  • Tasty – 食譜分享
  • Business – 商業服務
  • Review Hub – 產品推薦、評論
  • Charity – 慈善、NGO
  • Travel – 旅遊風格
  • App – 應用程式、網路服務
  • Modern Shop – 線上購物
  • News – 新聞

可以到官網看看這些 Starter Sites 範本的實際樣貌,做為網站設計的參考唷。

在這篇文章中我們會使用 Blocksy Pro 付費版的 Content Blocks 功能,讓我們從安裝佈景主題與外掛開始!

安裝 Blocksy 佈景主題

首先,到 WordPress 後台的外觀 > 佈景主題,點選「安裝佈景主題」後搜尋 Blocksy。

blocksy-theme-builder-install

並點擊「安裝」。

安裝 Blocksy Companion 外掛

因為接下來介紹的 Content Blocks 是需要購買 Blocksy Pro 才會有的 Pro Extensions 功能,所以直接登入 Blocksy 帳號下載最新版的 Blocksy Companion。

接著按照安裝外掛的方式在 WordPress 後台上傳、安裝即可。

blocksy-companion-premium-download

如果想先使用免費版的人,可以到外掛 > 安裝外掛搜尋 Blocksy Companion。

blocksy-companion-plugin

並點擊「立即安裝」。

提醒:如果有購買付費版,只需要安裝 Blocksy Companion (Premium) 即可,不需安裝免費版的外掛。

安裝範本 (非必要)

Blocksy 安裝完成之後,從後台進入 Blocksy 的控制面板,點選 Starter Sites 後挑一個喜歡的範本。

這邊以 Modern Shop 為例。

blocksy-starter-site-modern-shop-import

點擊「Import」開始安裝步驟。

Step 1 – 安裝 Child Theme

透過安裝 Child Theme,未來可以直接新增自訂 CSS 代碼,不會因為 Blocksy 升級新版本而受到影響。

blocksy-starter-site-modern-shop-step1

Step 2 – 選擇頁面編輯器

這個範本目前提供兩種頁面編輯器 Brizy、Elementor 可供選擇。(不同範本使用的頁面編輯器不盡相同)

blocksy-starter-site-modern-shop-step2

Step 3 – 安裝必要的外掛

Modern Shop 範本中還有使用到 Contact Form 7 的功能。

blocksy-starter-site-modern-shop-step3

Step 4 – 匯入範本內容

blocksy-starter-site-modern-shop-step4

實際上後續編輯頁面時如果拿掉了頁面中使用的 Contact Form,是可以將 Contact Form 7 外掛移除的。

Kadence Blocks 區塊編輯器

安裝 Kadence Blocks 免費版

接著到 WordPress 後台外掛 > 安裝外掛搜尋 Kadence Blocks

kadence-blocks-install

並點擊「立即安裝」。

Table of Contents 文章目錄、內容大綱

Blocksy Pro – Content Blocks

從 WordPress 的後台找到 Blocksy 的功能選單,可以看到 3 個選項:

  • Dashboard
  • Content Blocks
  • Account
Blocksy-admin-menu

Content Blocks (內容區塊) 就是我們將要使用到的功能,點擊 Content Blocks 進入內容區塊管理頁面。

新增 Content Blocks

點擊 Add New 按鈕新增 Content Blocks。

Blocksy Pro-Content Blocks

Kadence Blocks – Table of Contents

在編輯頁面中選取新增區塊,從 Kadence Blocks 的選項中找到 Table of Contents 區塊。(也可以用搜尋功能)

Kadence-Table of Contents

插入 Table of Contents 區塊之後,編輯頁面顯示如下:

Kadence-Table of Contents Block

接下來就要到右邊的功能設定開始調整 Table of Contents 區塊的外觀、功能,以及顯示的位置。

General 一般設定

先從一般設定開始,H1 到 H6 的選項是讓我們決定一篇文章中的哪些標題階層需要在文章目錄、內容大綱中顯示。

一般 H1 大標題在文章中就是文章的主題,只會有一個,所以一般是不需要在文章目錄、內容大綱中顯示的。

H2 ~ H6 等標題階層可以自由決定是否顯示。

Kadence-Table of Contents-General_new

下半部是決定文章目錄、內容大綱是否可以摺疊收合,以及摺疊收合的行為機制。

  • Enable Collapsible Content
    顧名思義,就是決定是否要啟用摺疊收合的功能。
  • Start Collapsed
    若啟用功能,是否最初的呈現就是摺疊收合的。
  • Icon Style
    收合與開啟文章目錄、內容大綱的圖示。
  • Enable title to toggle as well as icon
    決定是否點選區塊標題也能收合、開啟文章目錄、內容大綱。

Style – Title 標題格式

樣式設定中的標題設定可以決定「Table of Contents」、「文章目錄」、「內容大綱」這幾個常用的區塊標題的呈現樣式。

Kadence-Table of Contents-Style-Title

Style – List 清單列表格式

樣式設定中的清單列表設定可以決定動態抓出的文章標題階層的呈現樣式。

包含每個標題階層彼此之間的間距、標題階層退縮的距離等。

Kadence-Table of Contents-Style-List

Style – Container 容器格式

樣式設定中的容器設定則可以決定整個 Table of Contents 區塊背景色彩、是否要有圓角、陰影。

Kadence-Table of Contents-Style-Container

Advanced 進階設定

在進階設定中可以決定 Table of Contents 區塊在嵌入位置中與其他物件之間的距離。

此外,在 Scroll Settings 捲動設定中更提供了當讀者在文章中上下捲動畫面時與文章目錄、內容大綱間的互動關係。

  • Enable Smooth Scroll to ID
    當點選文章目錄、內容大綱中的標題階層時,是否要滑順的捲動到文章的相對標題位置。
  • Enable Highlighting Heading when scrolling in active area
    當讀者在文章中上下捲動畫面時,文章目錄、內容大綱中相對應的標題階層會顯示聚焦/強調顏色。
Kadence-Table of Contents-Advanced

文章目錄、內容大綱顯示位置

在 Content Blocks 編輯頁面右上角的 Blocksy 頁面設定中可以找到設定顯示條件、位置的功能。

Blocksy-Page Settings-Condition

顯示條件

點擊顯示條件按鈕,可以看到 Blocksy 提供了進階的顯示條件功能;可以按設定的條件決定這個內容區塊顯示的時機與頁面類型。

當然,文章目錄、內容大綱我們一般都是與「單一文章」一起出現就可以了。

Blocksy-Content Block Display Conditions

顯示位置 (Hook/勾點)

而 Location & Priority 則可以決定此內容區塊要嵌入在文章頁面中的哪個部分。

透過 Blocksy 顯示勾點 (Show Hooks) 功能可以清楚的知道頁面中的每一個部分的勾點名稱。

例如,如果要嵌入在側邊欄的最上方,就要選擇 Sidebar Start 勾點;如果想要嵌入在文章內容的最上面,就要選擇單一文章的 Top Content 勾點。

Blocksy-Show Hooks

最後,我們透過決定側邊欄的行為來讓文章目錄、內容大綱能夠在上下捲動畫面時置頂不動。

從「外觀」>「自訂」進入佈景主題的編輯模式。

Blocksy Theme-Customizer

在佈景主題的自訂編輯模式中點選「一般選項」>「資訊欄」。

Blocksy-Customizer-Sidebar

在資訊欄設定選項中最下方啟用「吸附資訊欄」,接著就能決定資訊欄吸附置頂的行為。包含:

  • 吸附上方偏移
    吸附置頂時距離螢幕畫面上方的距離有多遠。
  • 黏附行為
    整個資訊欄吸附置頂,或是從資訊欄中最後第 X 個小工具的位置算起。
Blocksy-Customiser-Sticky Sidebar_new

適合不同尺寸的螢幕

最後,再加上一點點調整就可以讓這個側邊欄的文章目錄、內容大綱更加完美了。

對於習慣撰寫長文章的站長來說,文章的章節目錄可能也會較長,這時候如果遇到使用筆電、螢幕解析度較低,或是將字體放大 (如長輩) 的讀者,文章目錄可能就會因為長度太長超過畫面而無法閱讀了。

為了解決這個問題可以把下面這段 CSS 代碼加上:

  • overflow-y: auto
    當螢幕高度不夠時,會出現捲動視窗的功能;當螢幕高度足夠時,捲動視窗功能會隱藏起來。
  • max-height: 70vh
    限制區塊最高的高度為螢幕可視範圍的 70%。(可調整為適合的百分比)
.kb-table-of-content-wrap {
    overflow-y: auto;
    max-height: 70vh;
}

如此一來,不僅是對大螢幕或小螢幕的讀者來說都可以正常的使用文章目錄、內容大綱的功能了!

感謝 Anbobo 的建議回饋,不然我也沒發現小螢幕的訪客無法完全顯示長文章的章節目錄。

結語

這樣就完成了在文章頁面側邊欄顯示,當上下捲動畫面時可以吸附置頂,並且會聚焦顯示目前所在位置的文章目錄、內容大綱了!是不是很簡單呢!

Table of Contents-Sidebar

綜合以上的說明,我們知道了:

  • 如何使用 Blocksy 佈景主題編輯器,利用 Blocksy Pro 的 Content Blocks 功能,將文章目錄、內容大綱嵌入至文章的側邊欄,並且將側邊欄吸附置頂。
  • 如何使用免費版 Kadence Blocks 區塊編輯器外掛,利用其 Table of Contents 區塊,自訂文章目錄、內容大綱顯示的標題階層與樣式。

希望這些對大家在建立文章目錄、內容大綱時能幫得上忙。

如果有什麼心得、想法或建議,也歡迎大家加入社團一起討論唷!

參考文章 – 「如何製作適合手機閱讀的文章目錄、內容大綱?

The-Plugin-With-the-Best-Video-Experience-440X231

Blocksy Pro

使用優惠碼「QNSAVE10」獲得10%折扣!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *