WordPress
101
從網域與主機開始，走進前台、後台與 CSS，做出真正屬於你的網站。
今天結束時，你會完成什麼？
OUTCOME看懂網站
知道網域、主機、DNS 與 WordPress 如何連在一起。
會用後台
建立頁面、管理媒體、選擇佈景主題並設定選單。
能改樣式
用 DevTools 找到元素、修改 CSS，再貼回 WordPress。
先理解
網站住在哪裡
網站不是漂在雲端的一張圖片，而是一組被找到、被傳送、被瀏覽的檔案。
瀏覽器打開網站的瞬間
MENTAL MODEL你在瀏覽器輸入 domain.com。
DNS 將網域指向伺服器 IP。
主機送出 WordPress 產生的 HTML、CSS 與圖片。
記憶法：網域是地址，主機是房子，WordPress 是房子裡的管理系統。
網域、主機、WordPress
THREE LAYERS網站地址
例如：yourname.com。需要註冊，並設定 DNS。
網站空間
存放檔案、資料庫與電子郵件的伺服器資源。
內容系統
讓你不用寫程式，就能管理頁面、文章與設計。
HTTPS 與基本安全
DO THIS FIRSTSSL / HTTPS
讓瀏覽器與主機之間的資料加密傳輸。網址列看到鎖頭，訪客更放心。
新手的 3 個習慣
- 使用強密碼與雙重驗證
- 定期備份網站與資料庫
- 更新 WordPress、主題與外掛
.com 與 .org
不是同一件事
先選對環境，後面的自由度、成本與維護方式都會不同。
一句話分辨
THE SHORT VERSION租用一間已經準備好的店面
平台提供主機、管理介面與維護服務；你用帳號登入即可開始。
下載軟體，自己擁有整棟房子
WordPress 軟體免費開源；你自行選主機、網域與所有客製化方式。
核心差異比較
DECISION TABLE| 比較項目 | WordPress.com | WordPress.org 自架 |
|---|---|---|
| 主機 | 平台代為提供 | 自己購買與管理 |
| 網域 | 平台子網域或綁定自訂網域 | 自己購買與設定 |
| 安裝與維護 | 開通帳號即可使用，平台維護較多 | 需安裝，自己負責更新、備份與安全 |
| 佈景主題／外掛 | 依方案限制 | 可自由安裝與修改 |
| 成本 | 依方案訂閱 | 主機、網域與維護成本 |
| 適合對象 | 想快速開始、不想管理主機 | 想完整控制網站的人 |
本工作坊選哪一個？
WHY .ORG因為今天的目標不是「做出一個能看的頁面」，而是讓你知道每一層在哪裡，未來真的能掌控它。
完整控制
主題、外掛、CSS、資料與搬家自由度最高。
可擴充
從作品集到商店、會員與內容平台都能逐步升級。
要負責任
自由也代表要學會備份、更新與基本安全。
先學會
後台的語言
核心、內容、佈景主題、外掛：四種東西，組成一個可以長大的網站。
WordPress 的四個零件
THE STACK核心
WordPress 本體，提供登入、內容管理與網站運作。
佈景主題
控制網站外觀、版型、字體與色彩。
外掛
替網站增加表單、SEO、商店等功能。
內容
頁面、文章、圖片與影片，是訪客真正閱讀的東西。
前台 vs. 後台
TWO VIEWS訪客看到的網站
首頁、文章、選單、按鈕與所有公開內容。
網址：yourdomain.com你管理網站的地方
建立內容、改設計、裝外掛、更新與維護。
網址：yourdomain.com/wp-admin後台導覽：先找這 6 個地方
DASHBOARD TOUR頁面
首頁、關於、聯絡方式等固定內容。
文章
部落格、新聞與持續發布的內容。
媒體庫
集中管理圖片、PDF 與影片。
外觀
佈景主題、編輯器、選單與額外 CSS。
外掛
增加功能，但不要為了小功能裝太多。
設定
網站標題、時區、固定網址與閱讀設定。
建立內容的最小單位
GUTENBERG適合不常變動的核心資訊。
標題、段落、圖片、按鈕與欄位。
圖片先壓縮，再上傳與加上替代文字。
練習：建立「首頁、關於我、聯絡方式」三頁，並讓選單連得起來。
休息一下，
回來就開始做
回來後：挑一套佈景主題，讓你的內容有一個家。
先讓網站
看起來像你
佈景主題決定起跑點，CSS 讓你微調最後 20%。
佈景主題怎麼選？
THEME CHECKLIST先看結構
- 首頁是否接近你的內容需求？
- 手機版是否好閱讀？
- 選單與頁尾是否容易調整？
再看長期
- 最近是否仍有更新？
- 文件與支援是否清楚？
- 不要只因為 Demo 很華麗就選它。
CSS：用規則描述外觀
READ THISCSS 的基本句型：
選取器 {
屬性: 值;
}
讀法：找到誰，改哪一個外觀，改成什麼。
.hero-title {
color: #c53b2c;
font-size: 56px;
margin-bottom: 24px;
}
先認得這 6 個屬性
CSS STARTER KITcolor
文字顏色
color: #c53b2c;background
背景顏色或圖片
background: #f2eee6;font-size
文字大小
font-size: 32px;margin
元素外部距離
margin: 24px;padding
元素內部距離
padding: 16px;border
邊框
border: 2px solid;DevTools：暫時試穿 CSS
INSPECT → EDIT → COPY右鍵 → 檢查
找到畫面上對應的元素，先在 Styles 面板直接改值。
確認選取器
看懂 class 名稱，知道這條規則會影響誰。
把修改貼回 WordPress
MAKE IT STICK額外 CSS
把確認過的規則貼到「額外 CSS」，預覽、儲存、重新整理前台。
注意 3 件事
- 選取器要夠精準，避免誤傷其他區塊。
- 必要時用
!important，但不要濫用。 - 佈景主題更新後，重新檢查自訂樣式。
/* 你的品牌按鈕 */
.wp-block-button__link { background: #c53b2c; border-radius: 999px; }
現在換你，
做一個網站
選一個你真的想完成的主題：個人、作品集、品牌、活動或服務。
你的首頁，先回答 3 個問題
CONTENT FIRST你是誰？
一句話說明個人、品牌或組織。
你提供什麼？
列出服務、作品或訪客能得到的價值。
下一步是什麼？
讓訪客知道要聯絡、預約、購買或繼續閱讀。
35 分鐘實作路線
WORKSHOP SPRINT選主題與首頁版型
填入標題、介紹與圖片
加入按鈕、選單與頁尾
用 DevTools 微調 CSS
手機版與連結檢查
卡住時的順序
先確認內容 → 再確認區塊 → 再確認佈景主題 → 最後才改 CSS。
發布前檢查清單
SHIP IT- 首頁標題與介紹清楚
- 桌面版與手機版都能閱讀
- 圖片有替代文字且載入不過大
- 選單、按鈕與外部連結可用
- 網站已開啟 HTTPS
- 已做一次備份
- WordPress、主題、外掛已更新
- 請朋友用手機實際點一次
網站上線後，
學習才開始
下一步可以是 SEO、表單、速度最佳化、分析工具與更完整的內容策略。
你已經知道
下一步
持續更新內容，保護你的網站，讓它慢慢長成真正屬於你的數位空間。