如何創建 WooCommerce 店面子主題

已發表: 2021-03-04

最後更新 - 2021 年 3 月 5 日

子主題是對現有主題的修改，保留其基本風格和功能。原始主題稱為父主題，新修改的主題稱為子主題。當您想在不購買新主題的情況下個性化您的商店時，創建您自己的WooCommerce Storefront子主題是一個不錯的選擇。

獲取 WooCommerce 店面！

兒童主題 - 概述

如介紹中所述，子主題將使用父主題作為其基礎，並將賦予主題附加功能。當您想為一個主題做出變化時，這通常是一個不錯的選擇。在 Storefront 子主題目錄中，您可以找到適合不同行業和產品類型的一系列優質子主題。這樣您就可以輕鬆地為 Storefront 創建自己的子主題。

使用子主題的優點

直接修改主題存在在更新期間丟失修改的風險。子主題確保修改完好無損。總體而言，開發子主題比創建新主題更快。此外，對於那些對WordPress 主題開發感興趣的人來說，創建一個子主題是一個很好的實驗和學習方式。

以下是創建子主題的一些優點：

有助於為同一主題創建不同的變體以適應不同的領域。
可以單獨保存設計自定義而不修改父主題。
即使在更新父主題或 WordPress 或 WooCommerce 的核心文件後，自定義項也可以保留。

創建 WooCommerce 店面子主題

在您嘗試自定義主題之前，建議對您的網站進行適當的備份。您需要通過 FTP 訪問您的主機才能上傳新的子主題。

要開始該過程，請使用 WooCommerce 文檔中給出的以下示例代碼為子主題創建一個 style.css 文件。

接下來，將模板字段更改為指向 Storefront。

您可能在這裡註意到的一個區別是，使用 Storefront，您不需要在為 25 個主題創建子主題時遵循的入隊步驟。使用 Storefront 創建子主題時，您只需要一個空白的 function.php 文件和一個 style.css 文件即可啟動該過程。

您可以簡單地將文件傳輸到子主題文件夾，創建 zip 文件並上傳。完成後，從Appearance > Themes激活新的子主題。

如果您有權訪問託管服務，您也可以通過 FTP 上傳子主題。您可以使用像 FileZilla 這樣的 FTP 程序。

適用於 Mac 和 Windows 的頂級 FTP 客戶端。

現在您可以通過向子主題樣式表和模板文件添加代碼來進行自定義。例如，您可以將任何模板文件從 Storefront 主題文件夾複製到子主題文件夾。子主題文件夾中的這個文件可以通過根據您的要求修改代碼來自定義。

如何自定義子主題的設計和功能？

通過上述設置，您已經為 Storefront 創建了一個子主題。但是，您的主題還沒有自定義屬性。您可以在不修改父主題的情況下向子主題添加功能和設計自定義。

設計變更

例如，在您為子主題創建的上述樣式表中，您可以使用以下代碼自定義站點標題的顏色：
.site-branding h1 a { color: red; }

模板修改

您還可以修改主題文件夾中的模板文件 (*.php)。例如，您可以通過將 header.php 從父主題文件夾wp-content/themes/storefront/header.php複製到子主題文件夾wp-content/themes/storefront-child/header.php 來修改特定代碼。

複製完成後，您可以編輯 header.php 並根據需要自定義任何代碼。子主題中的 header.php 將用於代替父主題的 header.php。

您也可以通過這種方式對 WooCommerce 模板進行修改。只需在您的子主題中創建一個新文件夾並將其命名為“WooCommerce”。在這裡，您可以對 WooCommerce 模板進行更改，以使它們與您的網站設計保持一致。

此 WooCommerce 文檔將幫助您了解有關 WooCommerce 模板結構的更多信息。

自定義功能

當您創建子主題時，您會希望它也具有自定義功能。為此，您需要首先確保您的functions.php 文件為空並且不包含來自父functions.php 文件的任何信息。現在，如果父主題函數中的特定函數是可插入的（包裝在條件 if 語句中），那麼您將能夠將其複製到子主題 functions.php。複製可插入函數後，您可以根據需要進行更改。下面是一個可插入函數的示例：
if (!function_exists("parent_function_name")) { parent_function_name() { ... } }

創建一個通用的子主題

與其他主題相比，使用 Storefront 創建子主題的過程不同且更簡單。在本文中，我們還將了解通用方法的基本細節。

第一步是創建一個主題目錄。接下來，為子主題創建一個樣式表（style.css 文件）。 WooCommerce 建議創建一個 functions.php 文件，該文件對於正確地將樣式排入隊列很有用。

創建一個通用的子主題

與其他主題相比，店面中創建子主題的過程不同且更簡單。在本文中，我們還將了解通用方法的基本細節。

創建子主題目錄

創建子主題目錄並將其放置在 wp-content/themes 中。建議在子主題目錄的名稱後面加上“-child”，但這不是強制性的。應注意不要在子主題目錄名稱中留下空格，以免出現任何問題。

創建子主題的樣式表

創建樣式表標題以啟動該過程。下面是為基於二十五主題的子主題創建的樣式表標題的 WordPress Codex 示例。

在創建子主題時，您可以將此示例文本用作參考點，並可以將其替換為與您的主題相關的詳細信息。 Template 行給出了父主題的目錄名稱。您必鬚根據您正在使用的主題對其進行調整。

將父主題和子主題排入隊列

在子主題目錄中創建一個functions.php 文件以將父主題和子主題排入隊列。通過添加 wp_enqueue_scripts 操作和在子主題的 function.php 中使用 wp_enqueue_style() 將父主題樣式表排入隊列。使用 PHP 標記 (<?php) 打開您的子主題的 function.php。接下來，將父主題樣式表和子主題樣式表排入隊列。下面的屏幕截圖是一個示例，僅當您的父主題使用一個 .css 文件來保存 CSS 時才有效。如果有多個.css 文件，如style.css、main.css、ie.css，則確保維護所有父主題依賴項。良好的編碼知識水平顯然是第一次做到這一點的重要因素。