曜輝工作室的網站設計費用大概多少？

使用 Elementor 的 Post Info（文章資訊）小工具顯示分類或標籤時，常會發現標籤之間帶有 WordPress 預設產生的逗號或多餘空格。這些字元屬於 HTML 中的文字節點，無法單純透過 CSS 的 gap 或 margin 屬性將其完全消除，這在追求極簡標籤設計（例如藥丸狀背景）時，會導致間距看起來不自然且難以精準對齊。

內容導覽

為什麼需要移除預設分隔符？

WordPress 在輸出 Terms（分類法）資料時，預設會插入特定的字元作為分隔線。雖然 Elementor 提供了視覺化的調整面板，但有時底層的 HTML 結構仍會保留這些隱形的分隔符號。當我們想要完全透過 CSS Flexbox 來控制標籤間距時，這些殘留的文字字元會干擾版面。透過 JavaScript 介入，可以在 DOM 載入完成後即時清洗這些字元，讓標籤之間回歸「純淨」狀態，方便後續樣式設定。

實作程式碼

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 鎖定 Elementor 文章資訊小工具中的清單節點
    const lists = document.querySelectorAll('.elementor-post-info__terms-list');

    lists.forEach(function(list) {
        // 透過正規表達式移除 HTML 內部預設產生的分隔字元
        list.innerHTML = list.innerHTML.replace(/\s*/g, ' ');
    });
});
</script>

執行步驟拆解

定位目標類別：使用 querySelectorAll 選取所有帶有 .elementor-post-info__terms-list 類別的元素，確保頁面上所有的文章資訊區塊都能同步處理。
執行 DOM 監聽：將程式碼包裹在 DOMContentLoaded 事件中，確保瀏覽器已經解析完 HTML 結構後才執行，避免抓不到元素的錯誤。
清洗 HTML 內容：透過 replace 方法搭配正規表達式 /\s*/g，將標籤之間可能存在的換行、空格或系統預設產生的分隔符號進行處理。

踩坑提醒與實務建議

在實際套用這段程式碼時，有幾個細節需要注意：

搭配 CSS 設定：當分隔符被移除後，標籤會完全貼在一起。此時必須在自訂 CSS 中針對 .elementor-post-info__terms-list 設定 display: flex; 以及 gap: 10px;（數值依需求調整），才能達到完美的間距控制。
快取問題：若網站有使用 WP Rocket、Autoptimize 或伺服器端的快取，修改完程式碼後務必清除快取，否則前端可能仍會載入舊版的 HTML 結構。
選擇器權重：部分 Elementor 主題可能會自定義類別名稱，若程式碼未生效，請使用 F12 開發者工具確認標籤清單的正確 CSS Class。
替代方案：若不想使用 JavaScript，另一種做法是在 WordPress 的 functions.php 中透過 Filter 修改 get_the_term_list 的輸出參數，但 JS 做法對於非工程背景的維運者來說相對直觀且容易管理。