指南/編輯網站/新增自訂 CSS

新增自訂 CSS

雖然大部分變更都可以透過 WordPress 編輯器中的設定來完成,但如果你有編寫 CSS 程式碼的經驗,可能會偏好使用 CSS 自訂網站。本指引將說明如何運用 CSS 編輯網站。

此功能適用於使用 WordPress.com 進階版、商用版和電子商務版方案,以及舊版專業版方案的網站。若是採用免費和個人版方案的網站,只要升級方案,即可存取此功能。

關於 CSS

CSS 全稱是「階層式樣式表」 (Cascading Style Sheets),是一種控制網頁 HTML 元素外觀的標記語言。WordPress 包括 CSS 編輯器,供你新增自己的 CSS 樣式,藉此覆蓋佈景主題的預設樣式。

若你知道如何用 CSS 修改網站設計,便可享有近乎無窮的潛力。不過,前提是你需要了解 CSS 和 HTML 的運作方式 (或至少具備學習意願)。你可從 MDN 網頁檔案的 CSS 指引,獲得不錯的 CSS 入門學習資源。

若你對學習 CSS 不感興趣,可直接為網站選擇區塊佈景主題。這些佈景主題提供最具彈性的選項,讓你無須任何電腦程式碼知識,也能自訂網站設計的任何層面。

視你的佈景主題而定,有兩種方法可存取網站的 CSS 編輯器。各項方法說明如下。

透過「樣式」存取 CSS 編輯器

如果網站的佈景主題支援網站編輯器,你就可以使用此方法透過 CSS 自訂網站。若想確定網站是否使用網站編輯器,請查看儀表板中的「外觀」區段。如果你在此處看到「編輯器」,可以依照下列步驟存取 CSS 編輯器:

透過「樣式」存取 CSS 編輯器 (此影片沒有聲音)
  1. 前往網站的儀表板。
  2. 前往「外觀」→「編輯器」
  3. 按一下左側「設計」選單中的「樣式 」。
    • 如果佈景主題包含「樣式變化」,則請按一下鉛筆圖示開啟「樣式」選項:
箭頭指向網站編輯器「設計」面板中「樣式」頁首右側的鉛筆圖示。
  1. 按一下「樣式」標題右側的三點圖示,然後選擇「其他 CSS」:
第一個箭頭指向「樣式」按鈕、第二個箭頭指向三點圖示按鈕,第三個箭頭指向「其他 CSS 」。
  1. 在顯示的文字方塊中輸入或貼上 CSS。
  2. 在畫面右上角按一下「儲存」按鈕,將 CSS 儲存到你的網站。

只要載入「樣式手冊」,就能預覽 CSS 變更對任何區塊類型的影響。按一下眼睛圖示,開啟樣式手冊。

「樣式手冊」的眼睛圖示加上醒目顯示。

將 CSS 新增至特定的區塊類型

你可以在「網站編輯器」佈景主題中,按照下列步驟將 CSS 程式碼套用至整個網站的特定區塊。

透過「樣式」逐區塊新增 CSS 編輯器 (此影片沒有聲音)
  1. 前往網站的儀表板。
  2. 前往「外觀」→「編輯器」
  3. 按一下左側「設計」選單中的「樣式」。
    • 如果佈景主題包含「樣式變化」,則請按一下鉛筆圖示開啟「樣式」選項:
  4. 此時請選取「區塊」區段,存取設定以便在整個網站自訂特定區塊的外觀。
  5. 按一下要新增 CSS 的區塊名稱。你也可以使用搜尋方塊找出想要的區塊類型。
  6. 向下捲動到底,按一下「進階」。
  7. 在標示為「其他 CSS」的方塊中,輸入會套用至該區塊類型所有執行個體的 CSS。當你逐區塊新增 CSS 時,無須包含 CSS 選取工具,只要新增屬性和值即可。上方影片已提供範例。
  8. 在畫面右上角按一下「儲存」按鈕,將 CSS 儲存到你的網站。

透過「自訂」存取 CSS 編輯器

對於未使用「網站編輯器」的佈景主題 (包括傳統佈景主題及許多第三方佈景主題),你可以按照下列步驟新增 CSS:

  1. 前往網站的儀表板。
  2. 前往「外觀」→「自訂」→「其他 CSS」
  3. 在顯示的文字方塊中輸入或貼上 CSS。右側的預覽視窗會反映你的變更。
  4. 按一下「儲存變更」按鈕,即可將 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 擴充功能 (例如變數和函式) 的使用者。如需詳細資料,請參閱 LESSSass 網站。

常見問題

頁尾版權宣告不應使用 CSS 修改。你可透過設定移除或修改頁尾版權宣告,但需視網站使用的佈景主題類型而定:

我可以使用 @import 和 @font-face 等 CSS 規則嗎?

可以,僅限支援外掛程式的網站

可以在 CSS 中使用網頁字型嗎?

你可以使用佈景主題的選項來選擇網站字型。當你使用 CSS 時,只能在前端使用這兩種網路字型。不過,你可以使用第三方的字型外掛程式新增其他字型。

我可以上傳圖片供自己的 CSS 使用嗎?

可以。你可以將圖片上傳到「媒體庫」,並從 CSS 樣式表中透過直接 URL 加以參考。以下範例說明如何在樣式表中使用背景圖片:

div# 內容{
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

我可以直接編輯 CSS 樣式表嗎?

我們建議使用 CSS 編輯器進行 CSS 編輯,如前述指引所述。當你使用此方法新增 CSS 時,系統會覆蓋佈景主題樣式表的 CSS 規則。這個方法很安全,可讓你更輕鬆地偵錯 CSS 衝突,並還原你新增的舊版 CSS。

若你精通如何直接編輯佈景主題檔案,則可透過 SFTP建立子佈景主題加以編輯。建議先在預備網站上測試變更,再套用至你已上線的網站。

如果取消 WordPress.com 方案會怎樣?

WordPress.com 上所有的升級項目都會每年進行續訂。如果你取消訂閱,系統仍會儲存你的自訂 CSS,但不會再套用到你的網站供其他人查看。如果你希望將自訂 CSS 重新套用到網站,可以重新購買方案,只要你並未變更佈景主題,系統就會自動重新套用樣式。如果你已變更佈景主題,則可以在「CSS 修訂」中找到過去的 CSS。

Copied to clipboard!