【WordPress】Easy Table of Contents 美化CSS語法

在眾多WordPress外掛中，Easy Table of Contents (以下簡稱ETOC) 是一款廣受歡迎且功能強大的目錄生成工具，能有效提升網站文章的可讀性和使用者體驗。對於內容豐富、篇幅較長的文章，ETOC能自動偵測文章中的標題（H1、H2、H3等），並將其轉換為一個結構化的目錄，方便讀者快速瀏覽和跳轉到感興趣的章節。

Easy Table of Contents 基本介紹

ETOC的核心功能之一是其自動生成目錄的能力。使用者無需手動編輯或插入代碼，ETOC會根據文章中預設的標題標籤自動抓取內容，並生成一個清晰的目錄列表。這不僅節省了大量時間，也確保了目錄的準確性。此外，使用者還可以自行設定哪些標題層級應被納入目錄，例如只顯示H2和H3標題，以避免目錄過於冗長。

高度客製化選項是ETOC的另一大亮點。使用者可以根據網站的風格和偏好，調整目錄的外觀。這包括但不限於：

• 位置選擇： 可以選擇將目錄放置在文章內容之前、之後，或指定特定位置。
• 顯示條件： 可以設定文章達到一定數量標題時才顯示目錄，例如至少有2個標題才顯示。
• 標題顯示： 可以自訂目錄的標題，例如「文章目錄」、「內容列表」等。
• 外觀設定： 提供多種預設主題供選擇，同時也允許使用者自訂字體大小、顏色、背景色、邊框樣式等，確保目錄與網站設計風格保持一致。
• 摺疊功能： 支援目錄摺疊功能，讓讀者可以選擇展開或收起目錄，特別適用於目錄項目較多的文章，有助於節省螢幕空間。
• 平滑滾動： 當點擊目錄中的連結時，頁面會以平滑滾動的方式跳轉到對應的章節，而非突然跳轉，提升使用者體驗。

ETOC還具備優化SEO的潛力。結構化的目錄不僅能提升使用者體驗，降低跳出率，Google等搜尋引擎也可能將目錄項目識別為內部連結，有助於提升文章在搜尋結果頁面中的可見度。此外，它支援Schema Markup，這可以讓搜尋引擎更好地理解文章的結構，並在搜尋結果中顯示豐富摘要。

在易用性方面，ETOC的設定介面直觀且使用者友好，即使是WordPress新手也能輕鬆上手。它提供詳細的設定選項，但同時也保留了簡潔的預設值，讓使用者無需深入了解複雜的技術細節也能快速啟用目錄功能。

總體而言，Easy Table of Contents作為一款功能全面、高度可客製化的WordPress外掛，對於任何希望提升文章可讀性、優化使用者體驗以及潛在改善SEO的網站而言，都是一個不可或缺的工具。它能將看似雜亂的長篇文章轉化為組織良好、易於導航的內容，從而有效留住讀者，並提供更優質的閱讀體驗。

Easy Table of Contents 美化語法

AI 工具的興起，特別是像 ChatGPT 這樣的模型，為不熟悉 CSS 語法的使用者提供了絕佳的解決方案。雖然 Easy Table of Contents 提供了高度客製化的功能，但如果沒有逐一設定，就會採用預設的顯示方式和樣式，如果要再進一步美化目錄，這對於不熟悉 CSS 語法的用戶來說，可能會相當困難。

不過，現在使用者可以先請 AI 協助生成基本的 CSS 語法，然後再根據自己的需求，請 AI 協助調整。這使得即使沒有程式設計背景的使用者也能輕鬆地客製化和美化他們的目錄樣式。

美化樣式一

/* Easy Table of Contents 樣式 */
#ez-toc-container {
    background-color: #f9f9f9;       /* 淺灰背景 */
    border: 1px solid #ddd;          /* 邊框 */
    border-radius: 10px;             /* 圓角 */
    padding: 20px;
    font-family: "Noto Sans", Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* 輕柔陰影 */
    max-width: 600px;                /* 限制最大寬度 */
    margin: 0 auto 30px auto;        /* 置中 */
}

/* 標題樣式 */
#ez-toc-container .ez-toc-title {
    font-size: 1.8em;
    font-weight: bold;
    color: #2a7ae2;                  /* 主色調藍色 */
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #2a7ae2;
    padding-bottom: 5px;
}

/* 項目樣式 */
#ez-toc-container ul {
    list-style: none;                /* 移除預設符號 */
    padding-left: 0;
}

#ez-toc-container ul li {
    position: relative;
    margin: 10px 0;
    padding-left: 30px;              /* 空出編號或符號位置 */
    font-size: 1em;
}

#ez-toc-container ul li::before {
    content: "▶";                    /* 使用圖形符號 */
    color: #2a7ae2;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.9em;
}

/* 次層項目樣式 */
#ez-toc-container ul ul {
    margin-left: 15px;               /* 次層縮進 */
}

#ez-toc-container ul ul li::before {
    content: "•";                    /* 子層符號 */
    color: #2a7ae2;
    font-size: 1em;
    left: 0;
}

/* 連結樣式 */
#ez-toc-container a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

#ez-toc-container a:hover {
    color: #2a7ae2;
    text-decoration: underline;
}

美化樣式二

/* Easy Table of Contents 樣式 */
#ez-toc-container {
    background-color: #fff0f5;             /* 柔粉色背景 */
    border: 2px solid #f5c6cb;             /* 粉紅邊框 */
    border-radius: 10px;
    padding: 20px;
    font-family: "Helvetica", "Microsoft JhengHei", sans-serif;
    color: #333;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 30px auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  /* 柔和陰影 */
}

/* 標題樣式 */
#ez-toc-container .ez-toc-title {
    font-size: 1.8em;
    font-weight: bold;
    color: #e75480;                       /* 柔粉色主色 */
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #e75480;
    padding-bottom: 5px;
}

/* 移除預設列表點和縮進 */
#ez-toc-container ul {
    list-style: none;
    padding-left: 0;
}

/* 第一層 (H2) 標題樣式 */
#ez-toc-container ul li {
    margin: 10px 0;
    padding-left: 25px;
    position: relative;
}

#ez-toc-container ul li::before {
    content: "🌸";                         /* 粉色花朵符號 */
    position: absolute;
    left: 0;
    color: #e75480;
    font-size: 1.2em;
    top: 0;
}

/* 第二層 (H3) 標題樣式 */
#ez-toc-container ul ul li {
    padding-left: 25px;
    position: relative;
}

#ez-toc-container ul ul li::before {
    content: "💖";                         /* 愛心符號 */
    position: absolute;
    left: 0;
    color: #f06292;                        /* 較深粉色 */
    font-size: 1.1em;
    top: 0;
}

/* 第三層 (H4) 標題樣式 - 如果需要，可加入 */
#ez-toc-container ul ul ul li::before {
    content: "▪";                          /* 小圓點符號 */
    color: #f8bbd0;                        /* 淡粉色 */
    font-size: 1em;
    position: absolute;
    left: 0;
    top: 0;
}

/* 連結樣式 */
#ez-toc-container a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

#ez-toc-container a:hover {
    color: #e75480;
    text-decoration: underline;
}

放置CSS語法

請先至【控制台】，點選【外觀】，再點選【自訂】，會有個【自訂CSS】的區域，將語法貼進空白處即可。