在 WordPress 中創建子主題分步教程

在這篇文章中，您將逐步學習如何在 WordPress 中創建子主題，WordPress 子主題的所有基礎知識。

您將學習如何導入父主題 CSS 樣式、如何覆蓋父主題樣式以及為什麼要創建 WordPress 子主題。

要了解為什麼 WordPress 子主題很重要，您應該閱讀我們的 WordPress 父子主題開發初學者指南

您可以使用 WordPress 子主題做什麼？

使用 WordPress 子主題，您可以非常輕鬆地自定義默認的活動 WordPress 主題。 您無需了解高級 HTML、CSS、PHP 或 JavaScript 即可創建子主題。

對 HTML、CSS 和 PHP 有基本或良好的理解可能會很有幫助。

進一步閱讀：如何選擇完美的免費或高級 WordPress 主題

您可以使用 WordPress 子主題通過 CSS 修改您的網站、添加新的小部件區域、附加導航菜單、編輯自定義文件以創建具有自定義樣式的新頁面。

使用子主題，您還可以重新排序站點元素、添加新內容/元素和更改任何功能。

為什麼你應該創建一個 WordPress 子主題

存在子主題的原因是您可以自定義“父”（您現有的/活動的）主題，而不會在更新父主題時丟失您的更改和修改。

例如，如果您直接修改了 single.php 文件，那麼您的自定義首先會正常工作。

但是，當您將主題更新為修改後主題的較新版本時，您將丟失所有更改，並且無法恢復您的自定義。

你需要什麼

您可以快速創建子主題並將其上傳到您的服務器，但建議您在 PC 上本地安裝 WordPress。

通過本地 WordPress 安裝，您可以快速創建和測試您的主題，您不需要一直連接互聯網。

使用本地 WordPress 站點，您可以在不影響您的實時站點的情況下犯錯誤，而且這種方式更快更好。

有很多方法可以在 Windows、MAC 或 Linux 上本地安裝 WordPress。 閱讀本教程，了解如何使用 Bitnami WordPress 堆棧在本地 PC 上安裝 WordPress。

我們已經為初學者發布了分步教程。

如何在 Windows 8 中的 WAMP 服務器上安裝 WordPress

如何使用 Bitnami Stack 在 Windows 8 上安裝 WordPress

如何在 WordPress 中逐步創建子主題？

對於 WordPress 中的每個子主題，都需要兩個文件。

• 函數.php
• 樣式.css

在 style.css 文件中，我們可以添加關於我們的子主題的信息，例如主題名稱、主題描述、作者姓名、父主題詳細信息、標籤等。

我們還需要一個functions.php 文件來註冊父子主題樣式表。 使用 functions.php 文件，我們還可以添加新功能、註冊新導航菜單、小部件區域等。

因此，讓我們開始創建您的第一個子主題。 在這個子主題中，我們不會添加新的小部件區域、導航菜單等。我們將使用我們的子主題進行一些簡單的 CSS 更改，我們將覆蓋默認的 CSS 樣式。

您可以使用任何 WordPress 主題作為父主題，在本教程中，我將為 TwentySixteen 主題創建一個子主題。

創建一個新文件夾並將其保存為二十六孩子，或者您可以將其命名為任何您想要的名稱，例如設計。

創建兩個新文件並將它們保存為我們的子主題文件夾中的 functions.php 和 style.css 文件。 我的子主題文件夾名稱是 designbomb。

現在在您的子主題的 style.css 文件中添加以下信息並保存您的文件。

 /* Theme Name: Design Child Description: A simple child theme for design blog. Author: Tahir Taous Version: 0.1 Template: twentysixteen */

現在登錄到您的 WordPress 儀表板。 轉到外觀 > 主題 > 添加新的並上傳這個新的子主題。 您將看到一個沒有任何屏幕截圖的新主題。 將鼠標懸停在主題上，然後單擊主題詳細信息按鈕。

您將看到新子主題的以下詳細信息。

在上面的屏幕截圖中，您可以看到有關我們的子主題的所有基本信息。 我們的兒童主題的名稱，誰是這個主題的作者，兒童主題的描述，你也可以看到這是一個二十六歲的兒童主題。 信息。

我們添加了模板：二十六在我們子主題的 style.css 文件中。 這一行告訴 WordPress 二十六是父主題。

如果您使用任何其他主題，請將 TwentySixteen 替換為您的父主題名稱。

現在激活您的新子主題並重新加載您的首頁。 您應該看到所有沒有任何樣式的內容。 別擔心，這很正常。 這是因為我們沒有包含父子主題的 style.css 文件

激活新的子主題後轉到外觀>編輯器並選擇functions.php（主題功能）文件，在functions.php文件中添加以下代碼並單擊更新文件按鈕以保存更改。

 <?php function theme_enqueue_styles() { $parent_; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ) ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

現在訪問您的 WordPress 站點的前端並重新加載您的頁面，您應該會看到具有所有 TwentySixteen 樣式的正常站點。

修改現有樣式

這意味著我們的子主題已經準備好了，是時候用新的 CSS 樣式自定義我們的父主題了。 現在在外觀 > 編輯器下選擇 style.css 文件。 我們將添加一些新樣式。

在您的子主題的 style.css 文件中添加以下樣式並保存您的文件。

 .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { font-weight: 700; background: beige; border-radius: 5px; color: #D2691E; box-shadow: 2px 1px 8px #815317; }

重新加載您網站的前端並打開任何頁面。 我們修改了當前菜單項的默認樣式。 請參閱下面的屏幕截圖。

對於當前菜單項，我添加了新的背景顏色、邊框半徑、顏色和框陰影。 使用 Chrome 開發工具更改樣式非常簡單易行。

就這樣

現在您知道如何創建子主題了。 不是那麼簡單和容易。 使用 WordPress 子主題，您幾乎可以自定義父主題的每個文件，但不建議修改父主題的每個文件。

始終使用子主題來添加必要的功能、特性或自定義頁面。

下載設計兒童主題