如何實作正圓形 WordPress 頁碼？CSS 排版關鍵與踩坑紀錄

處理 WordPress 頁碼變形與對齊問題

在調整 WordPress 頁碼樣式時，最常遇到的挫折是設定了 border-radius: 50% 後，頁碼卻呈現扁橢圓形，或是當頁數來到雙位數（如 10、11）時，圓形被數字撐開變形。這種情況通常是因為預設樣式過度依賴 padding 來撐開空間，而非固定寬高，導致元素無法維持完美的 1:1 比例。

核心實作原理

要達成正圓形，必須滿足三個 CSS 核心條件：首先是將元素從 inline 改為 inline-block，使其能夠正確解析 width 與 height 屬性；其次是強制寬高一致，並將 padding 歸零避免干擾幾何計算；最後則是利用 line-height 達成垂直置中，這比使用 padding 更容易精確控制數字位置，避免數字在圓圈內上下偏移。

範例程式碼

span.page-numbers.current {
    background-color: #A48472;
    padding: 0;               /* 歸零內距，交由寬高統一控制 */
    border-radius: 50%;       /* 製作正圓形的必要設定 */
    width: 36px !important;    /* 強制固定寬度 */
    height: 36px !important;   /* 強制固定高度 */
    display: inline-block;    /* 關鍵：讓 span 元素能接受寬高設定 */
    line-height: 36px;        /* 讓數字在圓圈內垂直置中 */
    text-align: center;       /* 水平置中 */
    color: #fff;              /* 文字顏色 */
}

步驟拆解與說明

1. 切換顯示模式：WordPress 預設頁碼多使用 span 或 a 標籤，這些是 inline 元素，無法直接設定寬高。使用 display: inline-block 是所有排版效果的起點。
2. 鎖定幾何比例：為了確保在任何頁數（無論是 1 還是 99）下都能維持正圓，必須指定明確且相等的 width 與 height。使用 !important 是為了確保樣式不會被主題內建的動態計算規則覆蓋。
3. 移除內距干擾：傳統做法常會設定 padding，但在固定寬高的情況下，額外的 padding 會導致圓形溢出或數字偏離中心，因此建議將 padding 歸零。
4. 精準校正文字位置：將 line-height 設定為與高度相同的值，這是最穩定的垂直置中方案，能確保數字精準落在圓心。

踩坑提醒與實務建議

實作懶人包，照作就能用

操作步驟

1. 進入 WordPress 後台，安裝並啟用 FluentSnippets 外掛
2. 點擊「Add New Snippet」，選擇「CSS」類型並自訂名稱（如：正圓形頁碼樣式）
3. 將文章中的 CSS 程式碼完整複製，貼入程式碼編輯框中
4. 本程式碼針對 .page-numbers 與 .current 類別進行優化，若你是使用 Elementor 的分頁元件且樣式未變更，請到該元件的「進階」>「CSS Classes」欄位填入 page-numbers 以確保樣式正確套用
5. 點擊儲存並啟用（Enable）
6. 清除網站所有快取，回到前台確認頁碼是否已成功變為正圓形