比方說，你有一個WooCommerce商店並正在執行。
如果你使用官方的Storefront主題，它甚至可能看起來相當專業。然而，你可能仍然想定製你的WooCommerce商店的外觀，以符合你的願景。
最好的解決方案通常是建立一個WooCommerce子主題。這是因為子主題可以讓你在不直接編輯原始主題的情況下對其進行修改。它簡化了定製商店外觀的過程，消除了對你的主題和商店的潛在風險。
在這篇文章中，我們將看看你如何使用主題來設計你的WooCommerce商店。然後，我們將告訴你如何在短短的五個步驟中建立你自己的子主題。
快速瞭解WooCommerce主題
隨著2011年WooCommerce外掛的推出，WordPress成為最受歡迎的電子商務平臺。目前，WooCommerce被用於支援25%的線上商店，使其比最接近的競爭對手多出6%。
使WooCommerce如此成功的要素之一是，它是多麼容易以最小的努力建立一個獨特的商店。然而，這本身並不能解釋該平臺的受歡迎程度。
WooCommerce成功的另一個巨大因素是它提供了幾乎無限的定製可能性。當與正確的主題相結合時，你可以獲得大量的設計靈活性。
WooCommerce與幾乎所有的WordPress主題相容。然而，它們中的大多數不會被優化以處理該外掛的獨特功能。
幸運的是，Storefront主題是一個很好的選擇。這是官方的WooCommerce主題，專門為整合該外掛而打造。它看起來很有吸引力，開箱即用，設計簡單明瞭，把重點放在你的產品上：
這種赤裸裸的設計也使得Storefront成為一個理想的定製基礎。這就是子主題的用武之地，我們接下來會看一下。
為什麼建立WooCommerce子主題？
如果你花了很多時間閱讀WordPress，你可能曾經遇到過子主題。
簡而言之，一個子主題開始時是另一個主題的副本，它被稱為 “父主題”。然後，你可以對子主題進行修改，並在不直接編輯父主題的情況下測試它們。這一點很重要，因為改變原始主題可能會導致不可逆轉的錯誤，甚至對你的網站造成損害。
你可能會建立一個子主題，因為你想使用另一個主題作為基礎，而不是完全從頭建立一個新的主題。或者，你可能只想對一個主題的品牌或整體美學做一些小的改變。天空真的是無限的，這取決於你願意為這個專案投入多少時間。
當涉及到WooCommerce時，大多數子主題都是基於Storefront的：
你可以從WooCommerce官方商店或其他網站如ThemeForest下載幾個子主題選項。然而，有可能提供的現有子主題中，沒有一個符合你的需求，或者你可能只是想創造一個獨特的外觀。更重要的是，如果你覺得你自己可以做得更好，你可能不想花錢買一個高階主題。
在WooCommerce官方部落格的一篇文章中，該外掛的開發者討論了為你的網店使用子主題背後最常見的動機。
“我們自己的Storefront子主題的目的是為你自己的利基市場提供一個完美的商店體驗。在安裝Galleria後，不需要動用任何設定，你就能立即擁有一個適合銷售高階時尚產品的商店。通過ProShop，你可以迅速建立一個時尚的運動商店”。
無論你是為WooCommerce專門製作一個子主題，還是為一個更普通的WordPress網站製作一個子主題，其實際過程都是一樣的。然而，你需要在定製子主題時牢記你的商店的目的。畢竟，一個電子商務網站需要一個不同於部落格的設計理念。讓我們看看這個過程在實踐中是什麼樣子的!
如何建立WooCommerce子主題
現在，我們將指導你如何建立一個WooCommerce子主題。在這個例子中，我們將建立一個基本的主題，使用Storefront作為它的父主題，儘管你可以使用任何主題作為基礎。
我們將向你展示從頭開始時的過程。然而，如果你想跳過其中的一些步驟，直接定製你的網站，你也可以下載並安裝一個Storefront子主題樣本。
最後，我們強烈建議在你進一步進行之前建立一個網站的備份。如果在開發過程中出現問題，這將保證你的商店安全。
使用一個暫存環境來建立和調整你的子主題也是明智的。一旦你採取了這些安全預防措施，你就可以繼續進行第一步了！
Step 1: 為WooCommerce子主題建立資料夾
你需要做的第一件事是建立一個包含你的主題的資料夾。如果你直接將子主題新增到一個現有的網站，最好的方法是通過SFTP。你可以使用像FileZilla這樣的免費應用程式來完成。
一旦你有了這個程式並執行，用你的主機憑證登入到你的網站。然後，你將需要導航到wp-content/themes/資料夾。這是你網站的主題安裝的地方。
你所需要做的就是在這個資料夾中建立一個新的資料夾：
當建立一個子主題時，最好給它一個反映父主題的名字。例如，我們要為Storefront製作一個子主題，所以我們將資料夾命名為 “storefront-child”。
你需要建立並放置在這個資料夾中的第一件事是一個簡單的文字檔案，叫做 functions.php。這是一個重要的核心檔案，有助於決定你的網站的外觀和行為。然而，大多數子主題可以使用父主題檔案中的函式，不需要自己的函式。
出於這個原因，這個檔案可以暫時留空。簡單地建立一個名為function.php的文字檔案，並將其儲存在子主題的資料夾中。
你的主題現在幾乎可以被啟用和使用了。然而，首先，它需要一個樣式表。
Step 2: 建立子主題的樣式表
你需要建立的下一個檔案是你的主題的層疊樣式表（CSS）。這個檔案定義了將應用於你的網站的頁面和內容的樣式。換句話說，它使你能夠指定你網站上各個元素的外觀。當人們談論更新樣式時，他們通常是指更新網站的CSS檔案。
你的父主題已經包含一個樣式表，但子主題的CSS可以用來覆蓋這些樣式。我們將在後面看一下這到底是如何工作的。
現在，你只需要建立這個CSS檔案。要做到這一點，再次在你的wp-content/themes/storefront-child資料夾（或你為自己的子主題使用的任何名稱）中新增一個文字檔案。這個檔案應該叫做style.css：
你還需要新增一些基本資訊。複製並貼上以下片段到你的新style.css檔案中：
/* Theme Name: Storefront Child Theme URI: http://example.com/storefront-child/ Description: My first WooCommerce child theme Author: Your Name Author URI: http://example.com Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
這些是關於你的主題的細節，當你在主題目錄或WordPress儀表板中檢視它時，你會看到這些細節。請隨意用更適合你和你的主題的資訊來替換這些佔位符資料。
Step 3: 配置子主題以繼承父主題的樣式
正如我們已經提到的，你會希望你的子主題使用父主題的預設樣式。然而，你也需要覆蓋你想改變的樣式。這聽起來可能很複雜–而且CSS確實可以變得很棘手–但在其核心部分，子主題將始終使用父主題的樣式，除非它特別包含一個替換。
例如，假設你的父主題將h1標題元素的樣式定義為20px和紅色。如果孩子的style.css檔案不包含H1標題的條目，那麼父主題的樣式將被應用到所有H1內容上。然而，如果我們在子主題的樣式表中新增一個H1樣式，將這些標題定義為18px和藍色，它將覆蓋父主題的方向。
在你的子主題中新增這個功能實際上是非常簡單的。你所需要做的就是在你孩子的樣式表中引用你的父主題。
只需在你先前貼上到style.css檔案中的資訊後新增以下片段：
Template: storefront
這段程式碼定義了父主題，並將確保你的子主題在你沒有指定替換的地方使用Storefront的樣式。如果你為一個不同的主題建立一個子主題，你可以簡單地使用其資料夾的名稱來代替。
Step 4: 啟用子主題
在這一點上，你的子主題在技術上已經準備好了。它已經配置好在你的網站上工作，所以讓我們啟用它，看看它看起來如何。
在你的WordPress儀表板上進入外觀>主題，你會看到你的子主題已經安裝好了：
選擇 “啟用”，使其成為你的網站的當前主題。你現在可以從前端預覽它：
正如你所看到的，它現在看起來和原始主題完全一樣。當子主題處於活動狀態時，它所做的只是從你的父主題中提取樣式。要定製它的外觀，你需要創造性地使用你的子主題的樣式表。
Step 5: 向子主題新增樣式
最後，是時候開始為你的子主題做造型了。具體怎麼做取決於你，你的創造力，以及你希望你的商店看起來像什麼。然而，讓我們通過一個例子來說明你可以做什麼。
為了說明編輯你的子主題是如何工作的，我們將改變我們商店的按鈕的外觀。目前，它們是灰色的，有黑色的文字，但我們可以更新這種風格，使它們更加突出：
再次開啟你的子主題的style.css檔案，在檔案頭的最後一個*/後新增以下程式碼：
a.button,
button.button,
input.button,
#review_form #submit {
background: pink;
color: red;
}
如果你現在儲存你的檔案並在前端檢視，你會看到這個變化。這些按鈕現在將是鮮豔的粉紅色和紅色的文字：
你也可以對你的主題的模板檔案進行修改。你只需要把你想改變的模板檔案，如header.php，從你的父主題資料夾複製到你的子主題資料夾。
然而，你也需要做一些改變，以指定WordPress使用哪個函式來引用模板檔案。這需要使用get_stylesheet_directory(); 函式而不是get_template_directory()來引用你的模板。
要了解更多關於如何做到這一點，你可以閱讀關於WooCommerce使用的所有模板。
在這一點上，你已經建立了一個WooCommerce子主題 當然，你還有很多事情可以做，但你現在知道如何開始修補了。我們建議你學習一下CSS，以便最大限度地發揮你的造型效果！
小結
WooCommerce使建立一個網上商店變得很容易，你甚至可以使用Storefront主題或許多自定義主題之一來改變其外觀。
然而，你不必依賴他人的創造力。建立你自己的WooCommerce子主題並不像你想象的那麼困難，它讓你幾乎可以完全控制你商店的外觀和功能。
評論留言