自訂 WooCommerce 的最佳實務

WordPress 和 WooCommerce 最大的優勢在於程式碼和內容可以隨意調整 — 完全修改與自訂您的網站。

彈性是使用 WooCommerce 進行線上銷售的最大優勢之一。外掛、擴充功能和佈景主題可用於滿足需求,然後進行調整和編碼以客製化網站的外觀和功能。

然而,在進行網站調整時有一些最佳實務需要遵循,並且這些變更的正確方式並不總是顯而易見。

為何需要最佳實務?

許多使用者會從預設外觀自訂其佈景主題,變更連結顏色以及版面配置和風格。多數人直接修改程式碼,這是最簡單的方式。但這會在未來更新時產生問題,因為所有修改會在檔案被新版本覆寫時遺失。

我們希望在本教學中向您展示自訂佈景主題的最佳方式,讓更新盡可能順利,並讓您掌控自訂內容。

有兩種自訂方式:

• 外掛 — 小幅度變更
• 子佈景主題 — 大幅度修改

使用外掛

如果您只計劃對樣式表或 CSS 進行小幅度修改,那麼最佳選擇是使用允許新增自訂樣式的外掛。

使用 Jetpack 進行 CSS 或 Sass 變更

我們建議使用 Jetpack 進行與 CSS 或 Sass 相關的變更。

安裝 Jetpack。完成後,前往您的網站 > 控制台 > Jetpack > 設定並啟用自訂 CSS。

接下來,您可以前往外觀 > 編輯 CSS。在那裡您可以新增所有自訂 CSS 樣式。

範例

讓我們看一個簡單範例,使用 Chrome Dev Tools 來找到 Storefront 佈景主題中的導覽連結顏色。我們如下檢查元素:右鍵點擊元素 > 檢查,它會顯示導覽元素的樣式名稱。

我們在上方截圖中看到導覽中連結顏色的樣式:

.main-navigation ul li a {
  color: #ffffff;
}
.main-navigation ul li a:hover {
  color: #e6e6e6;
}

然後我們將這段程式碼貼到 custom.css,我們想將顏色改為紅色,滑鼠懸停顏色改為白色。我們也移除其他不會變更的樣式,所以最終如下:

.main-navigation ul li a {
  color: red;
}
.main-navigation ul li a:hover {
  color: white;
}

儲存 custom.css 並重新整理頁面後,您會注意到導覽連結顏色現在是紅色,懸停時會變成白色。

您也可以在樣式表中新增新樣式來補充佈景主題中已存在的樣式。如果佈景主題更新,Jetpack 會保持您的樣式不變。我們始終建議在更新到新版本之前備份您的佈景主題,並查看我們關於如何進行的升級教學。

使用 Code Snippets 處理 PHP

Code Snippets 外掛允許您將程式碼片段新增到網站,而不是將其貼到 functions.php 檔案中,撰寫簡短描述以便您知道它的作用,並根據需要啟用或停用這些片段。

使用子佈景主題

如果您希望修改熱門佈景主題的樣式表或 CSS,那麼最佳選擇是使用子佈景主題來保留自訂內容以防未來更新。

使用付費子佈景主題

許多熱門佈景主題有子佈景主題可以安裝並啟用,以修改父佈景主題的外觀,而無需編碼或樣式調整。購買的子佈景主題不應用於自訂程式碼,而是透過他人設計來改變佈景主題外觀的方式。例如,對於我們的 Storefront 佈景主題,我們有相當豐富的子佈景主題目錄可供選擇。

這樣的子佈景主題不適合新增自訂程式碼,原因與您應該避免在父佈景主題中新增自訂程式碼相同;如果子佈景主題有更新,您的所有自訂程式碼也會被覆寫。

使用自訂子佈景主題

或者,您可以自己建立子佈景主題。這就像在父佈景主題之上新增一層,唯一目的是優先使用您的自訂程式碼,避免在下次更新父佈景主題時程式碼被丟棄。

您可以使用我們的教學建立自己的子佈景主題;設定並使用子佈景主題。更多關於子佈景主題如何運作的資訊也可在 WordPress.org 的子佈景主題找到。

資源

• 子佈景主題
• 如何安全地將自訂程式碼新增到 WordPress