[2024 更新] WordPress 排版教學：分散對齊 (Text Justify)

這篇文章最後更新日期：2024 年 8 月 25 日
作者： Mack Chan

由於 WordPress 官方慢慢將分散對齊 (Text Justify) 功能移除，我們嚴謹測試過後，發現在 2024 年已經無法在 WordPress 區塊編輯器 和 WordPress 傳統編輯器 套用這個文章排版功能，是近來初學者查詢度很高的問題，如果你也遇到相同煩惱，建議參考我們下方這個簡單教學。

備注：
市場上數款標示可以提供分散對齊 (Text Justify) 功能的外掛，我們實測之後，發現並未能有效在前端介面正確顯示效果，所以不建議使用這些舊方法。

我們以盡量減少 [安裝外掛] 的方式來解決這個對齊的問題，減少初學者除錯的時間和流程。

快速進入自訂 CSS 的捷徑：
1. 請前往 [上方黑色管理列] → [自訂] → [附加的 CSS]
2. 請前往 [網站後台] → [外觀] → [自訂] → [附加的 CSS]

探討東西方文明早期對完美對齊的看法

在過去的人類歷史，對「完美對稱」的事物有一份執著，這影響繪畫藝術、書籍排版和平面設計等等的領域。但隨著近代不少研究發現，例如像人們開發了 UI/UX 使用者經驗設計 學科，現在大家認為像分散對齊 (Text Justify) 這類觀念，可能存在錯誤的可能性？

在近代的報章雜誌裡可以發現，分成兩個流派，有主張必須設定分散對齊，也有主要順其自然，由於當不同語言混雜在內容，導致不自然的字距和空白，強制對齊的缺點會明顯曝露出來。

分散對齊 (Text Justify) 在 WordPress 上的呈現效果

分散對齊 (Text Justify) 排版的優點是讓人有一種兩邊整齊的感覺，傳統上人們喜歡這種絕對對齊的表現方式，也是現代文書工具必備的功能。

首先要了解 WordPress 佈景主題文章的 CSS 名稱

我們以最受歡迎的 Astra 佈景主題 為例子，透過 Google Chrome 的 F12 功能，找出文章內容的 CSS Class Name，然後將分散對齊 (Text Justify) 的 CSS 語法貼上。

備注：
如果不熟悉 F12 尋找目標 CSS 名稱的操作，請重溫以下教學一遍。

步驟一：
點擊目標的網頁元素，例如標題、段落或圖片。

步驟二：
在彈出視窗裡的可以發現 CSS Class Name (名稱) 字串。

步驟三：
把 CSS Class Name (名稱) 複制起來備用。