【WordPress 教學】系列文章進度條 Code 怎麼用？附 AI 客製化 Prompt 範例(複製貼上就能用)

Table of Contents

為什麼系列文章需要「進度條導覽」？

如果你正在經營學習筆記、教學課程或任何「一篇接一篇」的系列文章，讀者最常問的問題其實不是內容好不好，而是:

「這是第幾篇？總共有幾篇？」
「上一篇、下一篇在哪裡？」
「我可以直接跳去完整目錄嗎？」

沒有清楚的系列導覽，讀者讀完一篇就容易離開，跳出率變高，連帶影響 SEO 排名與內容被 AI 引用的機率(因為 AI 在判斷內容是否完整、有架構時，結構化的系列頁面通常更容易被當作「完整資源」整理引用)。

這篇要分享一段我自己在用的 WordPress 系列文章進度條 Code，純 HTML + CSS，不需要外掛、不會拖慢網站速度，複製貼上就能用。文末也會教你怎麼用 AI(例如 Claude)幫你微調樣式與內容。

✨實際範例可以參考我的文章或參考以下: Claude 101 學習筆記 Lesson 1:認識 Claude 文章開頭就放了這個進度條，讀者一眼就能看到「目前在第 1 課(共 14 課)」、左右兩篇的標題，以及跳轉完整目錄的連結。

📖 Claude 101 學習筆記系列（根據 Anthropic 官方英文免費課程整理）｜第 1 課（共 14 課）

1 Lesson 1 認識Claude（本篇）

2 Lesson 2 首次對話

3 Lesson 3 提升輸出

📋 查看完整 14 課目錄

這段 Code 長怎樣？做了什麼事？

整段元件其實是三個區塊組成:

區塊	功能	對應讀者需求
📊 進度條 (progressbar)	顯示「第幾課 / 共幾課」+ 視覺化進度百分比	一眼知道自己讀到哪
🔗 課次卡片 (series-step)	顯示前一篇、目前篇、下一篇的標題與連結	方便上一篇/下一篇跳轉
📋 目錄連結 (series-toc-link)	連到系列總覽頁	想跳著看的讀者可以直接找目錄

Step by Step:如何放到自己的 WordPress 文章裡

步驟 1:複製整段 Code

▶ 點此展開完整 Code，且可以一鍵複製後請AI按照個架構修改成你需要的版本

<!– ============================================ –>
<!– Claude 101 Lesson 1 文章專用 – 進度條導覽 –>
<!– 貼在文章標題下方、第一段之前 –>
<!– 使用方式:WordPress編輯器新增「自訂HTML」區塊,整段貼入 –>
<!– ============================================ –>

<div class=”series-progress-wrap”>

  <div class=”series-progressbar-row”>
    <span class=”series-progressbar-label”>📖 Claude 101 學習筆記系列(根據 Anthropic 官方英文免費課程整理)|第 1 課(共 14 課)</span>
    <div class=”series-progressbar-track”>
      <div class=”series-progressbar-fill” style=”width: 7%;”></div>
    </div>
  </div>

  <div class=”series-progress”>
    <div class=”series-step series-step-current”>
      <a href=”#” onclick=”return false;”>
        <span class=”series-dot”>1</span>
        <span class=”series-week”>Lesson 1</span>
        <span class=”series-title”>認識Claude(本篇)</span>
      </a>
    </div>
    <div class=”series-line”></div>
    <div class=”series-step”>
      <a href=”https://knittinghiyori.com/claude-101-lesson-2-first-conversation/”>
        <span class=”series-dot”>2</span>
        <span class=”series-week”>Lesson 2</span>
        <span class=”series-title”>首次對話</span>
      </a>
    </div>
    <div class=”series-line series-line-active”></div>
    <div class=”series-step”>
      <a href=”https://knittinghiyori.com/claude-101-lesson-3-better-results/”>
        <span class=”series-dot”>3</span>
        <span class=”series-week”>Lesson 3</span>
        <span class=”series-title”>提升輸出</span>
      </a>
    </div>
  </div>

  <div class=”series-toc-link”>
    📋 <a href=”https://knittinghiyori.com/claude-101-complete-notes”>查看完整 14 課目錄</a>
  </div>

</div>

<style>
.series-progress-wrap {
  margin: 0 0 28px 0;
  padding: 16px 4px 14px;
  background: #faf7f2;
  border-radius: 8px;
}
.series-progressbar-row {
  padding: 0 12px 14px;
}
.series-progressbar-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #6b6759;
  margin-bottom: 8px;
}
.series-progressbar-track {
  width: 100%;
  height: 6px;
  background: #e8e2d4;
  border-radius: 3px;
}
.series-progressbar-fill {
  height: 100%;
  background: #c9a876;
  border-radius: 3px;
}
.series-progress {
  display: flex;
  align-items: flex-start;
  padding: 0 12px;
}
.series-step {
  flex: 1;
  min-width: 0;
}
.series-step a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  padding: 2px;
}
.series-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d8d2c4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #8a8678;
}
.series-week {
  font-size: 12px;
  font-weight: 600;
  color: #6b6759;
  text-align: center;
}
.series-title {
  font-size: 11.5px;
  color: #9c9788;
  text-align: center;
  line-height: 1.3;
}
.series-line {
  flex: 0 0 28px;
  height: 1px;
  background: #d8d2c4;
  margin-top: 13px;
}
.series-line-active {
  background: #c9a876;
}
.series-step-current .series-dot {
  background: #c9a876;
  border-color: #c9a876;
  color: #fff;
}
.series-step-current .series-week,
.series-step-current .series-title {
  color: #8a6d3b;
}
.series-step-current a {
  cursor: default;
}
.series-toc-link {
  margin-top: 14px;
  padding: 0 12px;
  font-size: 13px;
  color: #6b6759;
}
.series-toc-link a {
  color: #8a6d3b;
  font-weight: 600;
  text-decoration: none;
}
.series-toc-link a:hover {
  text-decoration: underline;
}
@media (max-width: 480px) {
  .series-progress-wrap { padding: 14px 4px; }
  .series-progress { padding: 0 6px; }
  .series-line { flex: 0 0 14px; }
  .series-week { font-size: 11px; }
  .series-title { font-size: 10px; }
  .series-dot { width: 22px; height: 22px; font-size: 11px; }
  .series-progressbar-label { font-size: 11.5px; }
}
</style>

點擊展開上面的完整Code，並點複製全部的code。

步驟 2:在 WordPress 編輯器新增「自訂 HTML」區塊

Step 1 在文章標題下方、第一段內文之前點選「+」新增區塊
Step 2 搜尋「自訂 HTML」(Custom HTML)
Step 3 把整段 Code 貼進去。

步驟 3:修改這 5 個地方，變成你自己的系列

要改的地方	對應 Code 位置	範例
系列名稱與目前課次	`series-progressbar-label` 文字	「📖 新手系列｜第 3 課(共 8 課)」
進度條百分比	`style="width: 7%;"`	公式:目前課次 ÷ 總課數 × 100，四捨五入即可
三張課次卡片內容	三組 `series-step`	改成你前一篇、本篇、下一篇的標題
連結網址	每個 `<a href="...">`	已發布的文章填正式網址;尚未發布就先留 `href="#" onclick="return false;"`，讓它顯示但不能點
目錄連結	`series-toc-link` 裡的 `<a href>`	連到你的系列總覽頁網址

步驟 4:每發布一篇新文章，記得回頭補連結

例如你發布了 Lesson 2，記得回到 Lesson 1 那篇文章，把原本 href="#" 的「下一篇:Lesson 2」改成正式網址。這個小動作很容易被忽略，但對讀者體驗跟 SEO 內部連結(internal linking)都很重要。

想客製化樣式或內容？這樣寫 AI Prompt 最有效

很多人看到一串 CSS 就卻步，其實完全不用自己改 Code，直接把整段貼給 Claude 這類 AI，並描述你想要的調整即可。以下整理幾種常見需求的 Prompt 寫法，可以直接複製使用，把 [ ] 內容換成你的需求:

1. 新增一課 / 修改總課數

這是我部落格文章用的進度條 Code(貼上完整 Code)。我現在要更新成「第 [4] 課(共 [14] 課)」，進度條要重新計算對應的百分比。三張課次卡片請改成:前一篇是「[Lesson 3 提升輸出]」連結 [網址]，目前是「[Lesson 4 課程標題]」，下一篇是「[Lesson 5 課程標題]」連結 [網址，如果還沒發布就先用 # 不可點擊]。請直接給我修改後的完整 Code。

2. 改配色 / 風格

這是我的進度條 Code(貼上完整 Code)。我想把主色從咖啡色系改成 [藍色 / 粉色 / 我品牌色 #1A73E8] 系，但保持一樣的圓角、陰影質感和排版結構不變，請給我修改後的完整 Code。

3. 改成適合手機讀者的更簡化版本

這是我的進度條 Code(貼上完整 Code)。我的讀者大多用手機看文章，想請你把手機版(480px 以下)的卡片再縮小一點、字級降低，並確認三張卡片在小螢幕不會擠在一起變形，請給我修改後的完整 Code。

4. 套用到完全不同的系列主題

這是我的進度條 Code(貼上完整 Code)。我想把它套用到 [理財 / 健身 / 攝影] 系列文章，系列名稱是 [系列名稱]，總共 [N] 課，目前是第 [N] 課。請幫我把文字內容換成對應主題，但結構、CSS 都保持不變，並提醒我哪些地方之後要記得手動更新。

寫 Prompt 的關鍵原則:

一定要把完整 Code 貼給 AI，不要只描述「我有一個進度條」，AI 才能準確修改而不是重寫一個不一樣的版本。
明確說出「哪些保持不變」(例如排版結構、CSS 變數命名)，避免 AI 順手連你不想改的地方也一起改掉。
請 AI 直接輸出完整修改後的 Code，你才能整段複製貼上，不用自己手動拼接。

常見問題 FAQ

Q:這段 Code 會拖慢網站速度嗎？ 不會。整段都是純 HTML + CSS，沒有外掛、沒有額外的 JavaScript 請求，載入速度跟一般文字內容差不多。

Q:沒有工程背景也能用嗎？可以。只要會「複製貼上」就能用，進階客製化的部分交給 AI 處理即可，不需要自己寫 CSS。

Q:可以用在 WordPress 以外的平台嗎？ 只要該平台的編輯器支援「自訂 HTML」區塊或可以貼 HTML 原始碼(例如部分 Wix、自架 Ghost 網站)，理論上都能用，但實際顯示效果建議貼上後先預覽確認。

Q:一定要 14 課嗎？ 不用，課數、名稱都可以照你自己的系列調整，7%、14% 這類進度條百分比只要照「目前課次 ÷ 總課數 × 100」重新計算就好。

想自己架站經營系列文章？新手推薦:Bluehost 一站式架站

如果你還沒有自己的部落格，想要從零開始經營像這樣的系列內容，我會推薦使用 Bluehost:

▸ 網域與主機一次完成
▸ 一鍵安裝 WordPress
▸ 自動完成基本設定
▸ 適合沒有技術背景的使用者

我自己使用到現在，最大的優點是流程簡單、節省時間。

有興趣可以點擊以下連結，從這裡開始透過部落格建立個人品牌:

👉 立即點擊開始用Bluehost建立自己的部落格

(本文含聯盟行銷連結，若透過連結完成購買，我可能會獲得一小部分回饋，不會增加你的購買成本，謝謝支持。)