WORDPRESS / 實作指南
WordPress 區塊編輯器教學：完成一篇有圖片的文章
從新增段落、標題與圖片開始，帶你整理 WordPress 區塊順序、填寫圖片替代文字，並在發布前檢查手機閱讀效果。
適用環境：使用 WordPress 原生區塊編輯器，且具有內容編輯權限。Elementor 等編輯器的畫面不同。小凡造站免費網站目前以專屬內容設定頁修改品牌資料；本篇示範一般 WordPress 文章的編輯方式。
本篇用虛構的「木日咖啡沖煮筆記」示範，做出包含前言、小標題、圖片與清單的文章。開始前準備一張自己拍攝或有使用權的照片，以及三個想告訴讀者的重點。先從草稿操作，完成後再公開。
閱讀導覽：認識編輯區 · 組合內容 · 插入圖片 · 檢查與發布
1. 認識三個主要操作區域
從後台「文章」→「新增文章」進入編輯器。上方工具列負責新增區塊、復原、預覽與儲存；中間是內容區；設定側欄可在文章設定和個別區塊設定之間切換。若找不到側欄，先確認設定按鈕是否關閉。
把每個區塊想成一個可單獨選取的內容單位。點選一段文字，調整的是該段落；點選圖片，會出現圖片的操作選項。若改不到你想改的地方，先確認選中的區塊。
2. 用標題、段落與清單建立文章骨架
- 在文章標題欄輸入「手沖咖啡筆記：記錄三次試沖結果」。文章標題與內文小標題分開填寫。
- 在內容區輸入前言，說明這篇筆記要記錄什麼、適合誰閱讀。按 Enter 可繼續輸入下一段。
- 使用「＋」搜尋並新增「標題」區塊，填入「準備器材」，使用 H2 作為主要章節。
- 在該章節下加入段落與清單，列出濾杯、濾紙、咖啡豆與計時器。這是示範內容，不是器材選購建議。
- 新增另一個 H2「記錄方式」，列出每次試沖要記下的變因與感受。若需要細分，才在該章節下使用 H3。
需要重新排序時，打開「清單檢視」找到對應區塊，再使用移動控制調整位置。把說明放在圖片附近，讀者比較容易知道圖片對應哪個步驟。
3. 插入圖片，補上讀者需要的說明
- 新增「圖片」區塊，從電腦上傳，或從媒體庫選取既有圖片。為了日後可維護，確認圖片已存入網站媒體庫。
- 選取圖片，在圖片／媒體設定中找到替代文字。範例可寫：「濾杯放在玻璃分享壺上，電子秤顯示本次注水重量」。請依實際照片內容修改。
- 圖片下方的圖說可補充「圖：每次試沖使用相同器材，方便比較記錄」。圖說不是替代文字的同義詞，兩者可以承擔不同資訊。
- 用編輯器提供的尺寸與對齊設定調整圖片。若沒有「寬幅」或「全幅」，可能是目前佈景不支援，不代表圖片上傳失敗。
資訊圖片的替代文字應描述圖中與本段相關的重點，避免把所有關鍵字塞進去。純裝飾圖片可以使用空的替代文字；若圖片內有必須知道的步驟或數字，也要在正文中說明，讓看不到圖片的人仍能完成操作。
4. 儲存、預覽，再完成發布
- 先儲存草稿，確認儲存狀態完成；不要只依賴編輯畫面仍然開著。
- 檢查文章設定中的分類、摘要與精選圖片。精選圖片是否自動顯示、顯示位置在哪裡，會依文章模板而不同。
- 使用預覽功能檢視桌面與手機效果，再用實際手機開啟預覽或發布後網址。編輯器內的預覽不能取代所有裝置檢查。
- 確認沒有測試文字、空白章節、錯誤圖片與無效連結，再檢查發布時間和可見度，完成發布。
- 開啟公開文章網址重新閱讀一次。若修改圖片替代文字，記得檢查文章內已插入的圖片區塊，不要只修改媒體庫後就假定每一處都同步更新。
遇到問題時先檢查哪裡？
找不到圖片設定：先點圖片本身，再開設定側欄；目前若選到群組或段落，就會看到不同設定。
預覽沒有剛修改的內容：先儲存，再確認開的是這篇文章的預覽或公開網址；不要為了更新畫面就另外新增一篇一樣的文章。
小標題只有字變大，沒有層級：檢查使用的是「標題」區塊，而不是把段落加粗放大。視覺大小與內容結構是兩件事。
延伸閱讀：先分清楚文章與頁面的用途；排版完成後，使用 SEO 發布檢查表 做最後檢查。
參考資料與查核日期
資料查核：2026-10-23。以下為官方文件；本文圖解為小凡造站自行整理的概念示意，並非後台截圖。