16 個章節 · 完整課程

所有 WordPress 教學章節

依教科書順序編排,由基礎觀念到外掛開發與 AI 活用。每個章節都補上學習重點、實作任務與完成能力,方便安排課堂進度與自主學習。

CHAPTER 01基礎

WordPress 的安裝與結構剖析

從 WordPress 的角色、安裝方式與目錄結構開始,建立後續主題與外掛開發所需的共同語言。

學習重點

  • 理解 WordPress.org、WordPress.com 與 CMS 的差異
  • 完成本機開發環境與 WordPress 安裝
  • 辨識 wp-admin、wp-includes、wp-content 與 wp-config.php 的用途

實作任務

建立一個本機 WordPress 站台,完成基本設定並記錄主要目錄結構。

完成後你會

能獨立建立練習環境,並說明 WordPress 網站由哪些核心資料夾組成。

3 節觀念 + 實作
CHAPTER 02基礎

HTML / CSS / JavaScript 基礎

快速整理前端三大支柱,讓後續修改佈景主題與撰寫互動效果時有足夠基礎。

學習重點

  • 使用語意化 HTML 組織頁面內容
  • 用 CSS 控制排版、間距、色彩與響應式版面
  • 以 JavaScript 監聽事件並操作 DOM

實作任務

製作一個單頁課程介紹區塊,包含標題、按鈕、卡片與簡單互動效果。

完成後你會

能讀懂佈景主題中的 HTML、CSS、JavaScript,並進行小幅修改。

3 節觀念
CHAPTER 03基礎

jQuery / AJAX 基礎

理解 jQuery 在 WordPress 生態中的常見用途,並學會用 AJAX 交換資料。

學習重點

  • 使用 jQuery 選取元素、綁定事件與修改內容
  • 理解 AJAX 請求、回應與非同步流程
  • 認識 WordPress 前台互動常見寫法

實作任務

做出一個不用重新整理頁面的資料載入按鈕,觀察成功與錯誤狀態。

完成後你會

能維護舊有 jQuery 程式,並理解 WordPress 外掛常見的 AJAX 互動模式。

2 節觀念 + 實作
CHAPTER 04基礎

WordPress 佈景主題基礎

從佈景主題的安裝、啟用、客製化與區塊編輯器切入,建立主題操作能力。

學習重點

  • 安裝與切換 WordPress 佈景主題
  • 使用自訂器與站台編輯器調整版面
  • 了解模板、樣式與內容之間的分工

實作任務

挑選一個佈景主題並完成首頁、選單、頁尾與基本視覺設定。

完成後你會

能用後台工具完成基礎網站外觀設定,並判斷何時需要進入程式層修改。

3 節操作
CHAPTER 05進階

PHP 程式語言快速導覽

補齊 WordPress 開發所需 PHP 語法,涵蓋變數、流程控制、函式與 AI 輔助開發。

學習重點

  • 掌握 PHP 變數、陣列、條件、迴圈與函式
  • 讀懂 WordPress 主題與外掛中的 PHP 片段
  • 使用 GitHub Copilot 輔助理解與產生程式碼

實作任務

撰寫一組 PHP 函式,輸出課程資料並用條件判斷控制顯示內容。

完成後你會

能閱讀 WordPress PHP 檔案,並撰寫小型功能片段。

6 節觀念 + 實作
CHAPTER 06進階

手工打造佈景主題

從零建立自訂佈景主題,理解必要檔案、模板載入與子佈景主題的實務價值。

學習重點

  • 建立 style.css、index.php、functions.php 等主題必要檔案
  • 理解模板檔案如何組成前台頁面
  • 使用 Child Theme 保留客製化修改

實作任務

建立一個最小可啟用佈景主題,加入文章列表與基本樣式。

完成後你會

能從空資料夾建立可運作的 WordPress 佈景主題骨架。

2 節實作
CHAPTER 07進階

WordPress 所需的 PHP 程式設計技巧

把 PHP 語法放回 WordPress 場景,理解 Loop、模板標籤與內容輸出流程。

學習重點

  • 理解 WordPress Loop 與查詢結果輸出
  • 使用常見模板標籤顯示文章資訊
  • 認識物件導向在 WordPress 開發中的用途

實作任務

修改主題文章列表,加入分類、日期、摘要與條件式顯示。

完成後你會

能追蹤主題如何取得與顯示文章內容,並安全修改輸出邏輯。

3 節觀念 + 實作
CHAPTER 08進階

WordPress 佈景主題製作實例(上)

進入完整主題製作流程,先處理版面拆分、樣式組織與基本模板。

學習重點

  • 規劃主題版型與檔案結構
  • 拆分 header、footer、sidebar 等共用模板
  • 建立首頁與文章列表的主要版面

實作任務

將靜態 HTML 版面轉換成 WordPress 主題模板。

完成後你會

能把既有網頁切成 WordPress 主題可使用的模板結構。

2 節實作
CHAPTER 09進階

WordPress 佈景主題製作實例(下)

延伸主題實作,加入 WP_Query、自訂頁面模板與更完整的內容呈現。

學習重點

  • 使用 WP_Query 建立自訂文章列表
  • 製作分類、單篇文章與頁面模板
  • 處理分頁、查無資料與條件式版面

實作任務

建立一個課程文章列表頁,支援指定分類與分頁顯示。

完成後你會

能完成更接近真實專案需求的 WordPress 主題頁面。

3 節實作
CHAPTER 10高階

佈景主題進階開發工具

認識 Underscores 與 Sage 等開發工具,理解現代主題開發流程。

學習重點

  • 使用 Underscores 快速產生主題起始架構
  • 理解 Sage 的現代化建置與模板概念
  • 比較傳統主題與現代化工具鏈的取捨

實作任務

產生一份 starter theme,檢視其檔案分工並調整基本樣式。

完成後你會

能依專案規模選擇合適的主題開發起點。

2 節工具
CHAPTER 11高階

WordPress 外掛開發基礎

從外掛檔頭、啟用流程、Hooks 機制開始,建立外掛開發的核心模型。

學習重點

  • 建立可啟用的 WordPress 外掛
  • 理解 Action 與 Filter 的差異
  • 使用 Hook 修改文章內容或加入自訂行為

實作任務

製作一個在文章結尾自動加入提示文字的外掛。

完成後你會

能撰寫小型外掛,並知道如何把功能掛到 WordPress 執行流程。

3 節實作
CHAPTER 12高階

外掛選項設定頁設計

學習在後台建立設定頁、保存選項,並用 Shortcode 將外掛功能放到前台。

學習重點

  • 建立管理後台選單與設定頁
  • 使用 Options API 儲存外掛設定
  • 撰寫 Shortcode 輸出前台內容

實作任務

製作一個可在後台設定文字、再用短代碼輸出的提示區塊外掛。

完成後你會

能做出具備後台設定介面的 WordPress 外掛。

2 節實作
CHAPTER 13高階

實用外掛設計與小工具的製作

把外掛功能延伸到 Widget 與實用元件,練習較完整的功能封裝。

學習重點

  • 規劃計數器外掛的資料與流程
  • 建立可重複使用的小工具 Widget
  • 處理前台顯示與後台設定欄位

實作任務

完成一個可放在側邊欄的統計或提示小工具。

完成後你會

能設計可安裝、可設定、可嵌入版面的功能型外掛。

3 節實作
CHAPTER 14高階

Custom Post Type 的應用

學會建立自訂內容類型,讓 WordPress 不只管理文章,也能管理作品、商品或課程。

學習重點

  • 理解 Custom Post Type 適用情境
  • 用 register_post_type 建立自訂內容類型
  • 設定後台欄位、網址與前台顯示

實作任務

建立一個「課程」或「作品」CPT,並在前台列出資料。

完成後你會

能把 WordPress 擴充為符合專案需求的內容管理系統。

2 節實作
CHAPTER 15高階

實用商品列表外掛

以商品列表作為整合專案,串起 CPT、後台欄位、資料儲存與前台輸出。

學習重點

  • 規劃商品資料欄位與管理流程
  • 儲存與讀取自訂欄位資料
  • 建立商品列表與單一商品顯示

實作任務

完成一個可新增商品、填寫價格與描述、並在前台列表呈現的外掛。

完成後你會

能完成一個具備實務雛形的 WordPress 外掛專案。

3 節專案
CHAPTER 16高階

進階主題與活用 AI

收束課程,補充 WordPress 趨勢、備份搬站、安全維護與 ChatGPT 輔助開發方法。

學習重點

  • 理解 WordPress 最新發展與區塊化趨勢
  • 掌握網站備份、搬家與維護注意事項
  • 使用 ChatGPT 協助除錯、產生範例與撰寫文件

實作任務

整理一份網站交付檢查表,並用 AI 協助產生維護說明。

完成後你會

能把開發技能轉化為可維護、可交付的 WordPress 專案流程。

3 節觀念
APPENDIX A附錄

20 大熱門 WordPress 外掛整理

整理常見熱門外掛的用途、適用情境、選用準則與維運注意事項。

學習重點

  • 認識頁面建構、SEO、安全、備份、快取、表單、電商等外掛類型
  • 理解熱門外掛的優點與可能成本
  • 建立外掛選用與更新前檢查流程

實作任務

選擇一個測試站,評估目前安裝外掛是否必要、是否重複、是否仍有維護。

完成後你會

能更有系統地選擇 WordPress 外掛,而不是只依安裝數決定。

5 節選用指南
APPENDIX B附錄

電商外掛 WooCommerce 詳解

深入說明 WooCommerce 的商品、購物車、結帳、金流、物流、訂單與開發模型。

學習重點

  • 理解 WooCommerce 如何把 WordPress 擴充為線上商店
  • 掌握商品類型、訂單狀態、金流物流與稅務設定
  • 認識 WooCommerce hooks、商品物件與維運注意事項

實作任務

在測試站建立一個簡單商品,完成購物車與結帳流程測試。

完成後你會

能判斷網站是否適合使用 WooCommerce,並規劃基本電商建置流程。

8 節電商實務