18 個 WordPress 區塊編輯器功能,讓你的文章排版更有可看性

20230811

使用 WordPress 的人應該都會猶豫要使用傳統編輯器或新的區塊編輯器來撰寫文章,畢竟傳統編輯器的操作比較接近我們熟悉的 Word 寫文操作介面,區塊編輯器雖然比較多功能,但就是另一種操作的方式了,需要一段時間適應,這篇文章就和大家分享區塊編輯器的功能,讓你可以更快上手並編排出更漂亮的文章內容。

影片教學

撰寫文章基本的功能

區塊編輯器有非常多的功能可以選用,如果想要快速上手,那只要認識這幾個功能就可以完成一篇文章了,也不用擔心太多的功能讓自己不知道該怎麼操作使用。

標題

主要是輸入 H2 或 H3 的功能,為什麼要輸入 H2 或 H3 可以參考標題元素,更可以搭配目錄外掛讓文章排版更好看。

如果你想要設計每篇文章標題字型的尺寸跟顏色,建議從 CSS 做更改(有的版型會提供修改標題字型的功能)。

千萬不要從編輯器右邊的「設定 / 區塊」自己去修改每一個標題的顏色、字型等等設定,這樣以後你要統一調整整個網站的標題字型,會改到哭喔!

20230811 3

圖片

插入圖片的功能,但是區塊編輯器比較不方便的是一次只能插入一張圖片,不像傳統編輯器可以一次插入多照圖片(很不好用)。

可以從編輯器右邊的「設定 / 區塊」去更改圖片的尺寸、替代文字(alt)。

如果你有安裝 Rank Math SEO,就無須手動輸入替代文字,外掛會自動幫你完成。

20230811 4

段落

打字輸入內容的功能,要改字體大小等等可以在編輯器右邊的「設定 / 區塊」設定,但如果要有更多的細節設定請到段落上方的全域設定做設定(上面工具列的小箭頭)。

區塊編輯器我使用最不習慣的就是「段落」功能,我習慣使用傳統段落工具(傳統編輯器)來編輯文章內容。

 

20230811 5

傳統段落

如果你是舊版編輯器的愛用者,建議可以從使用傳統段落來熟悉區塊編輯器,在操作上就是舊版編輯器的介面,這樣會更快上手。

也可以先用傳統段落都先打好內文跟插入圖片,再一次轉換成區塊,就可以把所有剛剛打好的內容都轉換成相對應的區塊了。

聽說傳統段落的功能之後會被移除,所以大家還是要要盡早熟悉使用段落工具。

 

20230811 6

閱讀全文

很多部落客都不會使用的功能,因為也不知道用途是什麼。

你可以把他當作是「文章摘要」的功能,在閱讀全文之前的內容會變成文章摘要。另一個功能是我們在文章中插入廣告時設定可以設定閱讀全文的地方可以自動出現廣告。

如果你的部落格有使用 JetPack 的「訂閱新文章」的功能,閱讀全文就會派上用場了。

 

20230811 7

清單

我習慣稱他為「項目符號」或「編號清單」,可以讓你的每一行文字前有一個小黑點或是數字。

預設是小黑點,可以透過清單的選項更改為數字。

許多部落客編輯項目清單的時候喜歡自己在文字前手動加上 1. 2. 3. 的編號,建議使用清單來完成。

20230811 8

引文

應該是許多人都熟悉的功能,主要就是引用他人文字時明顯標註的功能。

有些部落客會將他當作是為了強調某段子的功能。

一樣可以透過編輯器右邊的「設定 / 區塊」或上方的全域設定做設定(上面工具列的小箭頭)自己去修改細節。

20230811 9

重要引述

可以視為是加強版的引文工具,整體視覺效果更醒目且吸睛,但也可能讓圖文太豐富的內容變得太花俏。

該使用引文或重要引述就看個人的整體文章排版跟習慣了,

20230811 10

表格

如果你只是要繪製一個很簡單的表格,使用他就對了。

如果是要複雜的表格功能,建議使用 TablePress 或 WP Table Builder 外掛,擇一使用即可,不建議安裝太多類似功能的外掛。

20230811 11

增加排版效果的功能

以下的功能不一定都會使用到,如果你想要至做出更漂亮的排版就可以使用這些輔助的工具,對於讀者的閱讀體驗有不少的加分。

多重欄位

如果你正用電腦版觀看這篇文章,會發現目前的排版是左文右圖,可以製作出像是雜誌般的排版效果,就是使用多重欄位工具排版的。

如果使用手機版則會自動幫我們將左右的排版調整為上下排版。

欄位之間的間距等細節設定也可以使用編輯器右邊的「設定 / 區塊」做調整。

20230811 12

空白間隔

許多人在書寫文章時如果希望段落與段落之間可以多一點間距,多習慣使用 Enter 來控制間格,

空白間格就是為了這個排版效果而誕生的功能,很簡單,沒有其他多餘的效果與設定,頂多就是可以自己設定間格的距離。

20230811 13

分隔符號

區塊與區塊之間的一條線,讓讀者可以更明確知道上下文的區隔。

可以選擇短線、長線、虛線,只是能做的設定較少。

跟「空白間隔」的效果類似,只是一個是透明的效果,一個是有顏色可以被看見的效果。

20230811 14

外掛輔助的功能

WordPress 有許多外掛可以增加區塊編輯器的功能,讓文章的排版有更多的變化效果,這裡僅列入幾個我比較常用的功能,畢竟外掛有太多種了,再者是我不太喜歡用外掛來排版文章。

幻燈片

可以把一堆圖片變成幻燈片(輪播),圖片太多時可以使用的功具,可以設定的細節不少。

需要安裝 JetPack 外掛才能使用。

20230811 23

並排圖庫

如果你想要圖片左右並排,或是一堆圖片可以有相簿的排版效果(範例點這裡),可以使用這個工具即可達成。

需要安裝 JetPack 外掛並要開啟 JetPack 的 CDN(啟用網站加速 / 加速影像載入時間),圖片才能顯示出來,不然會破圖。

我不喜歡 JetPack 的 CDN,因為會壓縮圖片的品質,所以就無法使用這個功能了。

20230811 24

圖片比較

JetPack 外掛的功能,適合美妝部落客使用,可以做使用前與使用後的比較圖。

這功能用到的機率很低,但之前有些部落客為了這功能特地安裝外掛,現在有了 JetPack 內建就方便許多了。

20230811 25

Gallery(Adv)

需要安裝 Kadence Block 外掛才能使用的工具,可以取代「並排圖庫」功能,可以調整的細節與呈現的效果更多,絕對可以滿足排版控的需求。

Kadence Block 有免費與付費兩個版本,免費版的功能就非常夠用了。

20230811 19

Google Maps

需要安裝 Kadence Block 外掛才能使用的工具,可以針對 Google Maps 做較多的細節設定,這個功能可以減少一個地圖外掛的安裝,除非你還需要其他更多的功能。
JetPack 也有內建地圖工具,但需要另外綁定帳號與設定,所以就直接放棄改用這一個工具。

20230811 20

偶爾會使用到的功能

以下的區塊編輯器工具功能我比較少使用,但也都非常實用,可以讓文章編排的呈現有更多的變化或便利性。

嵌入內容

可以嵌入 YouTube、Twitter、Facebook、Instagram 等社群內容。

遷入後還可以做一些細節設定,但是很弱,想要更進階的設定效果可能得藉助外掛了。

20230811 18

短代碼

插入 Shortcode 這一類短代碼十分常好用的功能。

也許有人會問:把短代碼直接插入到段落內也可以,為什麼還要使用區塊?主要是方便日後的管理吧(我猜)。

20230811 21

參考資料

  1. Use the editor | WordPress.com Support
  2. 如何在 WordPress.com 編輯器中調整區塊設定
  3. WordPress 編輯器
  4. 12 項 WordPress 常用區塊編輯器元素全面解析,全面提升你的 WordPress 文章排版技巧!

部落格文章排版的觀念相關文章

  1. 5 個部落格文章排版的細節
  2. 正確的文章分類選單設計
  3. 文章分類的設計和排版
  4. 部落格排版外掛使用,先從正確的 WordPress 後台操作習慣養成