雖然大部分變更都可以透過 WordPress 編輯器中的設定來完成,但如果你有編寫 CSS 程式碼的經驗,可能會偏好使用 CSS 自訂網站。本指引將說明如何運用 CSS 編輯網站。
此功能適用於使用 WordPress.com 進階版、商用版和電子商務版方案,以及舊版專業版方案的網站。若是採用免費和個人版方案的網站,只要升級方案,即可存取此功能。
CSS 全稱是「階層式樣式表」 (Cascading Style Sheets),是一種控制網頁 HTML 元素外觀的標記語言。WordPress 包括 CSS 編輯器,供你新增自己的 CSS 樣式,藉此覆蓋佈景主題的預設樣式。
若你知道如何用 CSS 修改網站設計,便可享有近乎無窮的潛力。不過,前提是你需要了解 CSS 和 HTML 的運作方式 (或至少具備學習意願)。你可從 MDN 網頁檔案的 CSS 指引,獲得不錯的 CSS 入門學習資源。
若你對學習 CSS 不感興趣,可直接為網站選擇區塊佈景主題。這些佈景主題提供最具彈性的選項,讓你無須任何電腦程式碼知識,也能自訂網站設計的任何層面。
視你的佈景主題而定,有兩種方法可存取網站的 CSS 編輯器。各項方法說明如下。
如果網站的佈景主題支援網站編輯器,你就可以使用此方法透過 CSS 自訂網站。若想確定網站是否使用網站編輯器,請查看儀表板中的「外觀」區段。如果你在此處看到「編輯器」,可以依照下列步驟存取 CSS 編輯器:

- 按一下「樣式」標題右側的三點圖示,然後選擇「其他 CSS」:

- 在顯示的文字方塊中輸入或貼上 CSS。
- 在畫面右上角按一下「儲存」按鈕,將 CSS 儲存到你的網站。
只要載入「樣式手冊」,就能預覽 CSS 變更對任何區塊類型的影響。按一下眼睛圖示,開啟樣式手冊。

你可以在「網站編輯器」佈景主題中,按照下列步驟將 CSS 程式碼套用至整個網站的特定區塊。
- 前往網站的儀表板。
- 前往「外觀」→「編輯器」。
- 按一下左側「設計」選單中的「樣式」。
- 如果佈景主題包含「樣式變化」,則請按一下鉛筆圖示開啟「樣式」選項:
- 此時請選取「區塊」區段,存取設定以便在整個網站自訂特定區塊的外觀。
- 按一下要新增 CSS 的區塊名稱。你也可以使用搜尋方塊找出想要的區塊類型。
- 向下捲動到底,按一下「進階」。
- 在標示為「其他 CSS」的方塊中,輸入會套用至該區塊類型所有執行個體的 CSS。當你逐區塊新增 CSS 時,無須包含 CSS 選取工具,只要新增屬性和值即可。上方影片已提供範例。
- 在畫面右上角按一下「儲存」按鈕,將 CSS 儲存到你的網站。
對於未使用「網站編輯器」的佈景主題 (包括傳統佈景主題及許多第三方佈景主題),你可以按照下列步驟新增 CSS:
- 前往網站的儀表板。
- 前往「外觀」→「自訂」→「其他 CSS」。
- 在顯示的文字方塊中輸入或貼上 CSS。右側的預覽視窗會反映你的變更。
- 按一下「儲存變更」按鈕,即可將 CSS 儲存至你的網站。

系統會保留 CSS 編輯的最近 25 項修訂,按一下 CSS 編輯器底端的「查看完整記錄」即可查看修訂內容。你可將此處的 CSS 還原為先前的版本。
若未顯示該選項,即表示沒有可還原的 CSS 記錄。

如果你已透過自訂 CSS 修改主要內容區域的寬度,則應使用「媒體寬度」選項。當你將原始尺寸圖片插入網站時,「媒體寬度」設定可作為原始尺寸圖片的預設尺寸。
請注意,這項設定不會影響變更設定前新增的某些圖片尺寸 (視插入方式而定),你可能得在變更設定後重新插入其中的某些圖片。
預設情況下,當你將自訂 CSS 新增至 CSS 編輯器後,自訂 CSS 會在佈景主題原本的 CSS 後接續載入,也就是說你的規則會優先執行並覆蓋佈景主題的樣式。
只要你按一下「不使用佈景主題原本的 CSS」複選框,即可完全關閉佈景主題原本的 CSS。你可透過這項動作,使用任何 WordPress.com 佈景主題作為 CSS 設計的空白畫布。這是進階選項,只有在你希望為佈景主題重頭設計 CSS 的情況下才能使用。
如果你想以現有的 CSS 規則為基礎進行設計 (最常見也是建議的作法),可停用此選項。
WordPress.com 支援 CSS 前置處理器 LESS 和 Sass (SCSS 語法)。這是進階選項,適用於希望使用 CSS 擴充功能 (例如變數和函式) 的使用者。如需詳細資料,請參閱 LESS 和 Sass 網站。
頁尾版權宣告不應使用 CSS 修改。你可透過設定移除或修改頁尾版權宣告,但需視網站使用的佈景主題類型而定:
- 如果你的網站使用區塊佈景主題,便能使用網站編輯器來編輯或移除頁尾版權宣告,無須透過 CSS。
- 如果你的網站使用傳統佈景主題,你可以將頁尾版權宣告變更為極簡的 WordPress 標誌。如果網站使用商用版或電子商務方案訂閱,你可以隱藏版權宣告。
可以,僅限支援外掛程式的網站。
你可以使用佈景主題的選項來選擇網站字型。當你使用 CSS 時,只能在前端使用這兩種網路字型。不過,你可以使用第三方的字型外掛程式新增其他字型。
可以。你可以將圖片上傳到「媒體庫」,並從 CSS 樣式表中透過直接 URL 加以參考。以下範例說明如何在樣式表中使用背景圖片:
div# 內容{
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}
我們建議使用 CSS 編輯器進行 CSS 編輯,如前述指引所述。當你使用此方法新增 CSS 時,系統會覆蓋佈景主題樣式表的 CSS 規則。這個方法很安全,可讓你更輕鬆地偵錯 CSS 衝突,並還原你新增的舊版 CSS。
若你精通如何直接編輯佈景主題檔案,則可透過 SFTP 或建立子佈景主題加以編輯。建議先在預備網站上測試變更,再套用至你已上線的網站。
WordPress.com 上所有的升級項目都會每年進行續訂。如果你取消訂閱,系統仍會儲存你的自訂 CSS,但不會再套用到你的網站供其他人查看。如果你希望將自訂 CSS 重新套用到網站,可以重新購買方案,只要你並未變更佈景主題,系統就會自動重新套用樣式。如果你已變更佈景主題,則可以在「CSS 修訂」中找到過去的 CSS。