第 1 步:在需要說明的位置加入圖片區塊

打開文章草稿,把游標放到要出現圖片的段落附近。按左上角的「+」加入區塊,搜尋「圖片」,點選圖片區塊。也可以在新的一行輸入 /image 再按 Enter。這樣圖片會出現在你指定的位置,而不是全堆在文章開頭。

教學文章最好在說完操作後緊接著放對應畫面,圖說寫出「讀者要看哪個按鈕」。不要用與步驟無關的裝飾圖當作操作截圖。

完成後應看到:正文中出現一個圖片區塊,裡面有「上傳」和「媒體庫」等選項。

第 2 步:上傳自己的圖片,或從媒體庫選

如果圖片在電腦或手機,按「上傳」選取檔案;若已經傳過,按「媒體庫」。下方 WordPress 官方畫面顯示圖片區塊初始的三種入口。選好後等圖片真的出現在文章內,再繼續下一步。

截圖先裁到看得清楚的畫面,並遮掉帳號、電子郵件或金鑰等不該公開的資料。若原圖非常大,先縮成閱讀所需大小再上傳;太大的圖片可能讓手機載入變慢。想知道是否真的變慢,可用 網站速度測試檢查該篇文章。

完成後應看到:圖片已顯示在正確段落,不再是「正在上傳」。

WordPress 圖片區塊有上傳、媒體庫與插入網址三個選項。
WordPress 官方畫面|點圖片區塊後,選上傳或媒體庫。 點圖可看原尺寸。 查看官方原始文件 ↗

第 3 步:填「替代文字」,說明圖片提供什麼資訊

點選文章中的圖片。右側若沒看到設定欄,按右上角的設定圖示;在圖片區塊的「內容」分頁找「替代文字」。寫一句能代替圖片傳達重點的描述,例如「WordPress 編輯器右上角的發佈按鈕」,不要只填「截圖1」,也不要堆關鍵字。下方官方截圖示範欄位位置。

替代文字是給無法看到圖片的讀者理解內容。若圖片只是在做裝飾、沒有新資訊,可依 WordPress 選項標成裝飾性圖片;真正的操作截圖通常應描述畫面重點。正文附近仍要寫清楚步驟,不能只讓讀者自己猜圖。

完成後應看到:右側替代文字欄位有具體描述;文章中也有對應的圖說或步驟。

WordPress 圖片區塊右側設定欄中的替代文字欄位。
WordPress 官方畫面|替代文字要描述畫面傳達的資訊。 點圖可看原尺寸。 查看官方原始文件 ↗

第 4 步:預覽手機版,確認沒有裁掉重要位置

按「預覽」看手機版。檢查文字是否能閱讀、圖片是不是完整顯示、按鈕或欄位是否被截斷。若畫面太小,讀者可以點圖看原尺寸,但你仍應把關鍵步驟寫在正文。

發佈後再用未登入的手機開一次文章。如果顯示破圖,先回媒體庫確認檔案是否存在;若只是很慢,檢查原圖檔案大小。要讓圖片成為文章列表封面,還要另設「精選圖片」;把圖片插入正文不一定會自動設成封面。

完成標準:公開文章裡能看到圖片,手機不會裁掉關鍵畫面,替代文字也已填好。

常見問題

替代文字要放很多關鍵字嗎?

不需要。它應描述圖片傳達的內容,例如按鈕位置;讀者看不到圖時仍應理解步驟。

截圖太小看不清楚怎麼辦?

優先截取正在操作的區域,讓重要欄位在手機也能辨識;保留原圖放大入口,正文也寫出按鈕名稱。

官方參考資料

本文依下列官方文件整理。實際操作前,請打開來源核對最新版指令與需求。

本文由 Cloud Atlas 編輯整理;操作來源與圖片出處列於文中。查看編輯原則