WordPress 常用區塊使用教學:5 種區塊一次學會

打開區塊編輯器寫一篇新文章,不少人從頭到尾只靠「段落」這一種區塊硬撐。內容擠成一整塊,標題只是把字級調大充數,該列清單的重點被塞進同一行、用逗號隔開,圖片傳上去了卻沒填替代文字。

文章發佈之後,讀者滑得辛苦,搜尋引擎和 AI 也解析不出這篇文章的架構在哪裡。

其實區塊編輯器(Block Editor,也就是 Gutenberg)裡的區塊種類不少,但天天用得到的常用區塊大概就五種:段落、標題、清單、引言、圖片。把這五種用對位置、用對設定,一篇文章的排版基本功就到位了,讀者看得順,搜尋引擎與 AI 也能正確解析出段落與段落之間的關係。

這五種區塊各自的操作看起來簡單,卻也各自藏著新手最容易踩的坑。先從最基本、也最容易被忽略的段落區塊講起。

段落區塊:文章的預設起點,排版新手最容易在這裡出錯

新增文章或頁面時,段落區塊就是編輯器自動選好的預設區塊,打字就能直接寫,不必特地去插入。這也是為什麼很多人整篇文章只用到這一種區塊,寫著寫著就忘了其他區塊的存在。

在段落區塊裡按 Enter 鍵,編輯器會直接開一個新的段落區塊。如果你只是想在同一段裡換行、不想產生新的區塊,要改按 Shift+Enter,分不清這兩個按鍵的差別,是很多人排版跑掉的第一個原因。

新增其他區塊的兩個方法:加號按鈕與斜線指令

段落雖然是預設區塊,但一篇文章不會只靠段落撐完。要在段落之間插入其他區塊,有兩種最直接的方法。第一種是點編輯器裡的「+」加號按鈕,叫出區塊清單,再從裡面挑要用的區塊。第二種是在空白段落裡直接打「/」,接著輸入區塊名稱,例如打「/標題」就會跳出標題區塊的選項,按 Enter 插入,這種斜線指令通常比滑鼠點選還快。這兩個方法不只用在段落區塊上,後面要講的標題、清單、引言、圖片,新增方式都是同一套,不會重複再教。

點編輯器左上角的加號叫出區塊插入器面板,裡面列出段落、標題、清單、引文、圖片等常用區塊
點左上角「+」就會叫出這份區塊清單,段落、標題、清單、引言、圖片都從這裡挑;在空段落打「/」也能搜尋同一批區塊。

段落的字級、行高與首字放大設定

選取段落區塊、打開右側的設定面板,可以調整字級、行高、文字顏色與背景顏色這些排版細節,調整範圍只套用在被選取的那個段落。如果你想要的是全站字級統一,更好的做法是到佈景主題的全域樣式設定去改,不要一段一段手動調整,不然日後想換字級,得整篇文章一段一段重新調一次。

設定面板裡還有一個容易被忽略的功能,叫首字放大(Drop Cap)。開啟之後,段落的第一個字會被放大好幾倍、獨立佔據好幾行的高度,常見的用法是放在文章的第一段,讓版面一開始就有個視覺焦點。不是每段都適合用,用太多反而讓版面顯得雜亂,一篇文章用一次就夠。

選取段落區塊後,右側設定面板可調整字型大小、行高、文字與背景色,以及首字放大開關
選取段落、打開右側「區塊」設定面板,就能調字級、行高與顏色,還有一個容易被忽略的「首字放大」開關。

另外,一段控制在三行以內會比較好讀,尤其行動裝置的螢幕窄,一段拖太長,讀者滑到一半容易失去耐心。

標題區塊:H2 到 H6 的階層,決定讀者與 AI 能不能看懂文章結構

標題區塊的作用不是把字放大而已,而是切分內容、替文章建立起一個看得見的大綱結構。少了這層結構,一篇再長的文章讀起來也只是一整塊字,讀者找不到重點在哪一段,搜尋引擎與 AI 也抓不出主題和子主題的關係。

標題階層要從 H2 逐階往下到 H6,不能像 H2 直接跳 H4 那樣略過中間的 H3
內文標題從 H2 一階一階往下細分,H2 後面直接接 H4、跳過 H3,讀者和 AI 都會以為漏看了一段。

這裡有一個階層規則要先記住。文章標題本身就是 H1,交由網站系統自動產生,內文的標題從 H2 開始,不會再重複用一次 H1。H2 之後要往下細分就用 H3,H3 底下還要再細分就用 H4,依序往下推到 H6,中間不能跳過某一階。

這不只是排版好不好看的問題。螢幕報讀軟體的使用者會靠標題階層在頁面裡快速跳轉,只用鍵盤操作的使用者也是靠標題按鈕一段一段跳著找內容,階層一旦跳級,他們會以為中間漏看了一段。搜尋引擎和 AI 同樣是靠標題的層級關係去判斷段落之間誰是誰的子項目,層級標對了,文章結構才讀得出來。

新增標題與切換階層的方法

新增標題最快的方式是打「/」接著輸入階層數字,例如「/h2」「/h3」,按 Enter 就會直接插入對應階層的標題區塊。另一種更快的寫法是在空白行打井字號加空白,一個「#」加空白是 H1,兩個「##」加空白是 H2,井字號的數量對應標題的階層,一路可以加到六個變成 H6。已經寫好的段落或標題,也能透過工具列的「轉換」按鈕、或設定面板裡的 H1 到 H6 按鈕直接切換階層,不必刪掉重打。實務上內文標題最常用到的是 H2 跟 H3,階層切太細反而讓文章讀起來瑣碎。

H2 到 H6 為什麼不能跳著用?

跳級最常見的錯誤是 H2 後面直接接 H4,中間跳過了 H3。對螢幕報讀軟體的使用者來說,他們是照著標題階層一階一階往下聽,H2 之後忽然跳到 H4,會讓人誤以為中間本來有一段內容、只是自己沒聽到,反而更困惑。認知或閱讀障礙的使用者也倚賴這種一致的結構掃視全文,視力不好的使用者則常靠標題字級大小的差異判斷自己讀到頁面的哪個位置,跳級都會打亂這些線索。

實務上比較不容易出錯的做法,是先把整篇文章的主標題(H2)都定出來,確認每一節的範圍之後,再回頭往下細分 H3、H4,而不是邊寫邊隨手挑階層。

用大綱檢視核對標題順序有沒有漏掉

寫完文章,人工從頭讀一遍很難抓出隱藏的跳級問題。編輯器裡有個現成的檢查工具,叫「文件總覽」面板裡的「大綱」分頁,會把整篇文章的標題依階層列成一份清單,一次看完全部的標題順序,如果中間有跳級,系統會直接標示提醒,不用自己一階一階去對。建議你養成習慣,文章發佈前固定用這個功能檢查一次,比事後被讀者或無障礙工具挑出錯誤划算得多。

文件總覽面板的大綱分頁,把整篇文章的標題依 H2、H3 階層列成一份清單供核對
「文件總覽」面板的「大綱」分頁會把所有標題依階層列出來,發佈前掃一眼就能檢查順序有沒有跳級。

清單區塊:有序或無序,取決於項目彼此有沒有先後順序

清單區塊要新增也很簡單,打「/」輸入「清單」或「list」就能叫出來。更快的做法是直接在空白行打一個「-」加空白,編輯器會自動轉成無序清單的黑點;打「1.」加空白,則會自動轉成有序清單的數字,不用先插入區塊再手動切換樣式。

選哪一種清單,關鍵在項目彼此之間有沒有先後順序。操作流程、步驟教學這種一步接一步、順序錯了就做不成的內容,要用有序清單,讓讀者知道先做哪一步、後做哪一步。功能列表、注意事項這種項目彼此並列、誰先誰後都不影響理解的內容,改用無序清單,用項目符號呈現就夠了。

有序清單和無序清單,什麼時候各用哪一種?

判斷標準其實不複雜,你只要想一下,這幾個項目調換順序之後意思會不會變。裝機一定要先開電源再插網路線,順序反了流程就跑不下去,這種內容用有序清單的數字呈現。反過來,一支手機的規格特色列出防水、快充、雙鏡頭,誰放第一項都不影響理解,這種並列內容改用無序清單的項目符號。清單只能同時選一種樣式,黑點或數字擇一,不能在同一個清單裡混用兩種。

項目有先後順序(如裝機步驟)用有序清單的數字,彼此並列(如手機規格)用無序清單的項目符號
把項目調換順序、意思會變的就用有序清單的數字,不會變的就用無序清單的項目符號。

子項目縮排、起始數字與反轉排序

清單也有幾個進階設定,適合更複雜的排版需求。選取某個項目後按 Tab 鍵(或工具列的內縮按鈕),可以把它往內縮排變成上一項的子項目;按 Shift+Tab(或外縮按鈕)則可以縮排復原。有序清單另外可以在設定面板裡指定起始數字,不一定要從 1 開始,例如接續上一段已經編到第 8 項的清單;也可以打開反轉排序,讓數字從大到小往下排,排行榜這類由高到低呈現的內容就適合用這個設定。

想列的項目其實該用表格?

清單適合的是單純的一維資訊,一項一句話帶過。如果每個項目底下還要同時比較好幾個欄位,像是規格、價格、上市日期這種需要對照的多維資訊,硬塞進清單只會讓每一項越寫越長,讀者得在一堆文字裡自己找出數字。這種情況改用表格區塊,把欄位一一對齊,讀者掃一眼就能比較,才不會讓清單塞成一團。

引言區塊:引用他人的話和強調自己的重點,用途不一樣

「引言」(Quote)跟「重要引述」(Pullquote)是兩個很容易被搞混的區塊,乍看都是把一段文字獨立呈現、加上一點特殊樣式,但用途完全不同。引言區塊用在引用外部他人的說法,像是使用者的評價、專家的發言,還附有出處來源可以填;重要引述則是把文章裡自己已經寫過的一句重點抓出來,單獨放大、置中強調,雖然也有出處來源欄位可以填,但設計初衷不是用來引用別人的。

分不清這兩者最常見的後果,是把重要引述當成裝飾在用,一篇文章裡塞了五、六個,版面看起來花俏,卻沒有一句真正被凸顯出來;也可能反過來,把自己講過的重點硬套進引言區塊,讀者看到出處來源留白,反而覺得奇怪。

項目引言(Quote)重要引述(Pullquote)
用途引用外部他人的說法強調文章裡自己已經寫過的重點句
出處來源欄位有,可填寫引用來源也有「新增出處來源」欄位,但屬選填,實務上較少用到
新增指令打「/」加「引言」或「quote」打「/」加「重要引述」或「pullquote」
視覺呈現樣式較內斂,可切換「預設」與「純文字」兩種樣式字級明顯放大,版面更醒目
引言區塊呈現為附出處來源的內斂引用框,重要引述則是放大置中的醒目句子
引言(Quote)呈現得內斂、還帶出處來源,重要引述(Pullquote)則放大置中、一眼就搶到注意力。

引言區塊要記得加上出處來源

引言區塊除了填引用的文字本身,底下還有一個「新增出處來源」的欄位,可以填寫這句話是誰說的、出自哪裡。這個欄位常常被漏填,只貼了引用文字就結束,讀者看不出這句話的可信度從哪裡來。填上出處來源之後,讀者才知道這段話是誰講的,也才有辦法判斷這句話值不值得參考。

重要引述比較搶眼,但不是每段都適合用

重要引述的視覺效果很明顯,字級比正文大上不少,預設樣式會在文字上下加一條裝飾線,也可以切換成整塊變色的樣式,再搭配靠左、置中或靠右對齊,版面上一眼就會被注意到。正因為效果這麼搶眼,它適合用在文章裡真正想讓讀者停下來多看一眼的那一句話,不是每個重點都值得用。同一篇文章塞太多重要引述,版面會顯得雜亂,強調的效果反而被稀釋掉,你只要挑一兩句真正的金句用就好。

圖片區塊:插入方式與替代文字,兩個常被放錯的地方

插入一張圖片,編輯器提供三種方式,上傳裝置裡的檔案、從媒體庫挑選已經上傳過的圖片、或貼上一段圖片網址讓編輯器去抓取,也可以直接把檔案拖曳到編輯器空白處,效果跟上傳一樣。圖片區塊一次只能放一張,要並排放多張得改用圖庫(Gallery)區塊,這裡先點到為止,不展開講。

圖片區塊裡最容易被放錯位置的,一個是替代文字該填在哪裡,一個是圖說文字跟替代文字常被搞混。圖說文字(Caption)顯示在圖片下方,所有讀者都看得到;替代文字(Alt Text)平常看不到,只有輔助工具朗讀頁面、或圖片顯示不出來時才會派上用場,兩者服務的對象和情境不同,不能拿其中一個取代另一個。

三種插入圖片的方法

上傳是最常見的做法,選好本機檔案就會同時完成上傳與插入,圖片也會自動進到媒體庫,方便之後在別篇文章重複使用。從媒體庫選取則是挑一張已經上傳過的既有圖片,不用重複上傳。貼上網址插入的圖片,是先複製圖片網址、貼進插入框,編輯器會直接把外部圖片抓進頁面;如果沒有另外按下工具列的「上傳到媒體庫」把它存進自己的網站,原始檔案哪天被對方網站移除或搬走,圖片就會直接不見,這種做法只建議用在確定圖片來源穩定的情況。

插入圖片區塊時可選擇上傳檔案、從媒體庫選取,或從網址插入媒體三種方式
圖片區塊剛插入時會出現這個空框,上傳、媒體庫、從網址插入媒體三種方式擇一,就能把圖放進來。

替代文字要填在哪裡才對:媒體庫和區塊設定的差別

替代文字有兩個能填的地方,兩者的效力不一樣,很多人搞不清楚。在媒體庫裡替一張圖片填寫替代文字,這會變成這張圖的預設值,之後不管在哪一篇文章裡插入這張圖,替代文字都會自動帶過去。如果是在某一篇文章的區塊設定裡另外修改替代文字,這個修改只套用在那一篇文章,媒體庫裡存的那份原始值不會被更新。

在媒體庫填替代文字是全站預設值、每篇都自動帶,在文章區塊設定改則只套用當前這一篇
在媒體庫填替代文字會跟著圖套用到每一篇,在文章的區塊設定改只影響這一篇;最省事是上傳當下就在媒體庫填好。

這也是為什麼有些人以為自己已經把圖片最佳化完成,實際上媒體庫那份還是空的,下次同一張圖被用在別篇文章,替代文字照樣是空白。最省事的做法是你在上傳的當下就把替代文字填好,不要拖到寫文章時才想起來。

純裝飾用的圖片,該怎麼處理替代文字?

不是每張圖片都承載著需要被讀出來的資訊,像是純粹用來分隔版面的線條圖案、跟內容本身沒有直接關聯的背景裝飾,這類圖片就算替代文字留白也不影響讀者理解。WordPress 官方的無障礙操作手冊建議,這種裝飾用的圖片,替代文字直接留空 alt="" 就好,不需要硬擠出一句「裝飾用圖片」這種沒有意義的描述塞進去。螢幕報讀軟體讀到空白的替代文字時會直接跳過那張圖,不會唸出多餘的雜訊;真正該填的是那些真的承載資訊、讀者少看一眼就會漏掉重點的圖片。

段落給的是內容本身,標題給的是結構,清單給的是條理,引言負責帶進別人的說法,圖片則補上畫面。把這五種常用區塊各自用在對的地方,一篇文章的排版基本功就打底了,讀者讀得順,搜尋引擎和 AI 也解析得出這篇文章在講什麼、怎麼分段。熟悉這五種之後,區塊編輯器裡其他像是欄位、表格、按鈕這些區塊,其實都是在同一套邏輯上疊加出更複雜的版面,不必一次學完,用到的時候再慢慢摸索也不遲。

資料來源
  1. Alternative Text for Images — WordPress