WordPress子主題的終極指南

WordPress 生態系統充滿了漂亮的免費和高級主題，但要找到一個適合您需求的完美主題，即能滿足所有要求的主題非常困難。 幸運的是，WordPress 有一個解決這個問題的方法，稱為子主題。 所以，不用擔心，您可以使用子主題應用更改來創建幾乎完美的主題。

WordPress 子主題可以像一些自定義 CSS 代碼一樣簡單，也可以覆蓋現有的父主題模板並修改或添加額外的主題功能。 我將在本文中解釋您需要了解的有關兒童主題的所有信息，所以讓我們直接開始吧。

什麼是兒童主題？

子主題是一個主題，它繼承了另一個主題（稱為父主題）的功能和样式。 子主題是修改現有主題的推薦方式。

上面的官方 WordPress 定義很棒，但讓我們更仔細地看看這意味著什麼。 入門（準系統）子主題的外觀和功能與父主題完全相同。 我將很快向您展示如何創建入門子主題，但目前，入門主題是最小的子主題，它將繼承父主題的所有內容。 然後，您可以向子主題添加文件和代碼，這將修改或增強父主題的外觀和功能，使其成為一個單獨的獨特主題。

使用子主題有很多好處，沒有真正的缺點，所以讓我們看看為什麼應該使用子主題。

為什麼要使用兒童主題？

更好的問題：你為什麼不使用兒童主題？ 我實際上想不出一個不使用它的好理由，但我知道你應該使用兒童主題的幾個重要理由。

主題更新——如果您直接修改主題代碼並在將來更新該主題，所有這些修改都將丟失。 我認為僅憑這個理由就足夠了，可以開始使用子主題了。 我們有幾個客戶，他們直接編輯主題文件，然後打開支持票，說我們的主題更新破壞了他們的工作。 如果他們使用兒童主題，一切都會好起來的。 你甚至需要主題更新嗎？ 是的！ 例如：如果主題更新包含安全修復程序並且不更新主題，您的 WP 網站可能成為黑客的潛在目標怎麼辦？

代碼組織- 由於所有更改都放在子主題文件夾中，因此您可以清楚地看到已進行哪些更改以及如何進行更改。 如果您將來需要更改任何內容，您將確切知道在哪裡可以找到這些更改，這將為您節省大量時間。

更快的開發——在子主題中擴展或覆蓋父主題樣式和功能，是一個更好的選擇，而不是維護一個修改過的主題代碼庫，它可以被主題更新覆蓋（我們已經確定，更新很重要:)） .

正如我之前提到的，我想不出為什麼不使用子主題的單一原因，所以我建議您盡快設置一個入門子主題。 安裝新主題時，您還應該創建一個初始子主題並使用它，即使您沒有立即計劃自定義父主題。 相信我，在路上，當您需要進行一些更改時，您會很高興您使用的是兒童主題。

附帶說明：WordPress 4.7 在定制器中引入了附加 CSS 編輯器，您可以在其中添加自定義 CSS 代碼。 因此，如果您確定您唯一的主題修改將是一些自定義 CSS 代碼，那麼您不需要子主題。 您可以使用 Additional CSS 編輯器來添加您的 CSS 代碼，僅此而已。 但是您確定以後不會對主題進行任何額外的更改嗎？ 你是？

如何創建入門兒童主題？

現在我們知道了什麼和為什麼，讓我們看看如何。 正如我們已經提到的，入門子主題是一個非常小的子主題。 它的外觀和功能與父主題完全相同，但它將是您修改和改進的起點。

對於我們的示例，我們將為 Adrenaline 父主題創建一個起始子主題：

1. 創建一個文件夾並將其命名為 adrenaline-pt-child。 最佳實踐是使用父主題文件夾名稱 (adrenaline-pt) 並在其末尾附加“-child”，因此哪個主題是子主題和哪個父主題是顯而易見的。
2. 在子主題文件夾中創建一個style.css文件。 打開style.css文件並將此代碼粘貼到其中（此代碼必須位於文件頂部）：
   

    /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ /* Write your custom CSS code below */

3. 在子主題文件夾中創建一個functions.php文件。 打開functions.php文件並將此代碼粘貼到其中：
   

    <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }

4. 或者，您可以將 screenshot.png（或 .jpg）添加到您的子主題文件夾，它將作為預覽圖像顯示在外觀 -> 主題部分（屏幕截圖圖像應為 1200x900 像素大）。

這是基本的初學者兒童主題。 要安裝它，您應該將此文件夾放在 wp-content/themes/ 目錄中，靠近父主題文件夾。 或者，您也可以從此子主題文件夾創建一個 zip 文件，並通過外觀 - > 主題中的 WP 管理儀表板將其安裝為常規 WP 主題。

讓我們解釋一下上面片段中的代碼。

style.css – “必填”的唯一字段是主題名稱（您的子主題的名稱）和模板（您的父主題的文件夾名稱）。 其他字段是可選的，子主題將在沒有它們的情況下工作。 但是，這些元字段：主題 URI、描述、作者……“很高興擁有”，它們將顯示在WP 管理 -> 外觀 -> 主題中，這將使子主題更加“完整”。

functions.php - 為了使子主題與父主題具有相同的樣式，我們需要將父主題 CSS 文件排入隊列。 推薦的方法是使用wp_enqueue_scripts動作掛鉤。 在回調函數中，我們使用wp_enqueue_style函數將父主題 CSS 文件排入隊列。 如果父主題使用多個 CSS 文件（不僅僅是style.css ），那麼您可能還需要將它們加入隊列，這取決於父主題的入隊技術。

在我們的 Adrenaline 主題中，我們還使用了自定義的 WooCommerce CSS 文件，因此最好將它也加入到子主題中。 我們必須在這裡小心，因為我們需要將wp_enqueue_style函數的句柄參數命名為與父主題中相同的名稱（在我們的示例中： adrenaline-woocommerce ）。 這樣，我們的子主題 CSS 文件將排在最後，我們將能夠毫無問題地覆蓋任何父主題樣式。 這是我們的 Adrenaline 主題更新後的functions.php文件：

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); /** * Enqueue additional parent theme CSS files. * Watch out to name the "handle" parameter the same as it is named * in the parent theme, otherwise the file might be enqueued twice. * In this example the parent handle name for this CSS file was * "adrenaline-woocommerce" */ wp_enqueue_style( 'adrenaline-woocommerce', get_template_directory_uri() . '/woocommerce.css' ); }

在這一點上，我想提一下，將父樣式添加到子主題的舊方法是使用 CSS @import規則。 如果您使用的是子主題，它使用style.css中的@import規則來導入父主題 CSS 文件，那麼我建議您切換到上面的示例，其中父主題 CSS 文件在functions.php中排隊文件（並從style.css中刪除@import規則）。 @import規則的問題在於，它比通過wp_enqueue_scripts掛鉤將父 CSS 文件排隊要慢得多。 您可以在此處閱讀有關此問題的更多信息。

您可能會想：“必須有一個用於創建子主題的插件……”是的，有。 我們將在名為“在已配置的父主題上切換到子主題”的部分中查看此插件。

父子主題模板文件如何工作？

在繼續介紹如何自定義子主題的示例之前，我們將快速了解 WordPress 模板層次結構的工作原理。

WordPress 使用模板文件來構建您的網站訪問者看到的實際 HTML 頁面。 一些比較知名的 WordPress 模板文件有： header.php 、 footer.php 、 index.php 、 single.php 、 page.php ……例如，如果訪問博客頁面，則使用index.php模板文件顯示博客文章列表。 一些模板文件是模塊化和可重用的。 例如header.php ，通常用於每個 WordPress 頁面。

一些模板文件比其他模板文件更具體，被 WordPress 視為更高的優先級。 例如，如果一個主題有一個singular.php和一個page.php模板，並且訪問者查看一個常規的WordPress 頁面， page.php模板將用於生成頁面。 這是因為page.php模板文件比 WordPress 模板層次結構中的singular.php模板更具體。 如果我們從主題中刪除page.php文件，那麼將使用singular.php模板。 您應該查看 WordPress 模板層次結構文檔，其中對該主題進行了更詳細的描述並提供了一些示例。

您應該查看的另一個資源是 WordPress 模板層次結構的交互式可視化。

因此，根據訪問的頁麵類型，使用不同的模板文件來生成訪問者看到的頁面。 這很重要，因為這可以幫助您確定需要更改或添加到子主題中的模板文件以自定義您的站點。

WordPress 將始終使用它可以找到的最相關的模板文件，具體取決於模板層次結構。 如果我們使用子主題，它會先在子主題中查找這些模板文件，如果子主題中不存在模板文件，則返回到父主題。 此外，如果子主題使用比父主題更具體的模板文件（在 WordPress 模板層次結構中），它將使用該文件。

如何自定義您的孩子主題？

讓我們繼續我們的 Adrenaline 子主題示例，看看我們如何自定義它。 我們將介紹這些用例：

• 添加自定義樣式並覆蓋父樣式，
• 添加自定義功能並覆蓋父功能，
  • 添加新功能，
  • 覆蓋父功能，
  • 添加新的模板文件，
  • 覆蓋父模板文件

添加自定義樣式並覆蓋父樣式

所有自定義 CSS 代碼都應添加到子主題的style.css文件中。

假設我們想在我們的子主題中添加一些文本的警告樣式。 我們在 WordPress 頁面上有一個帶有warning類的 div HTML 元素以及一些文本，我們希望為這個元素添加適當的樣式。 我們為此示例編寫的自定義 CSS 代碼必須放在style.css文件中，位於子主題標題註釋下方（始終位於文件頂部）。 帶有自定義 CSS 代碼的style.css文件如下所示：

 /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ .warning { margin: 1rem 0; background-color: #fcf8e3; border-color: #faf2cc; color: #8a6d3b; padding: 0.75rem 1.25rem; border: 1px solid transparent; border-radius: 0.25rem; }

比添加自定義 CSS 代碼到您的子主題更重要的是覆蓋父主題樣式。 也許你喜歡父主題的整體外觀，但你想改變一些東西，比如圖標的顏色。 我們將以覆蓋 Adrenaline 主頁標題中的購物車圖標顏色為例。 此圖標顏色隨原色的定制器設置而變化，但假設我們要為其賦予獨特的顏色。

為了覆蓋這個父主題樣式，你必須在父主題中找到 CSS 選擇器，也就是設置這個圖標的顏色。 您可以使用 Chrome 開發工具找到 CSS 選擇器。 這是一個關於如何做到這一點的簡單視頻教程。 一旦你有了正確的 CSS 選擇器，在我們的例子中它是.header-info__link .fa ，你必須將代碼放在子主題的style.css文件中。 具有此覆蓋的子主題style.css文件如下所示：

 /* Theme Name: Adrenaline Child Theme Theme URI: https://www.proteusthemes.com/wordpress-themes/adrenaline Description: Child theme for the Adrenaline theme Author: ProteusThemes Author URI: https://www.proteusthemes.com Template: adrenaline-pt Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: grid-layout, custom-background, custom-colors, custom-menu, featured-images, footer-widgets, full-width-template, microformats, sticky-post, theme-options, blog, e-commerce, entertainment, holiday Text Domain: adrenaline-pt-child */ .header-info__link .fa { color: #2ebd61; }

最難的部分是找到正確的 CSS 選擇器作為目標，一旦完成，只需應用正確的 CSS 規則即可。

偉大的！ 我們只是將一些自定義樣式應用於我們的子主題。 您可以根據需要將盡可能多的自定義 CSS 代碼添加到子主題style.css文件中。

現在讓我們看看如何為子主題添加一些功能。

添加自定義功能並覆蓋父功能

這是事情變得有趣的部分，您可以在其中使用附加功能改進您的子主題或覆蓋您想要更改的父主題功能。

有幾種方法可以實現您的自定義，讓我們來看看它們：

• 添加新功能，
• 覆蓋父功能，
• 添加新的模板文件，
• 覆蓋父模板文件

添加新功能

您可能希望添加到子主題中的任何 PHP 代碼形式的新功能都必須放入functions.php文件中。 如果要添加大量 PHP 代碼，則應將代碼提取到多個 PHP 文件中，然後將這些文件放入functions.php文件中，以便更好地組織代碼。

例如，如果您向子主題添加簡碼，您可能會創建一個名為shortcodes.php的文件並將適當的代碼添加到該文件中。 然後你需要functions.php中的文件，如下所示： require_once get_stylesheet_directory() . '/shortcodes.php' require_once get_stylesheet_directory() . '/shortcodes.php'

覆蓋父功能

您可能需要修改一些父主題功能，但由於我們不允許直接編輯父主題代碼，我們需要以某種方式在子主題中實現這一點。 不用擔心，WordPress 有一個專門用於此的系統。

有兩種修改父功能的方法，第一種是使用WordPress 操作和過濾鉤子，第二種是使用可插入函數。

WordPress 操作和過濾器掛鉤- 如果您使用的是編碼良好的父主題，那麼您應該能夠在整個主題中找到自定義的 WP 操作和過濾器，您可以掛鉤並更改主題的行為。 您應該在您的父主題中搜索 do_action 和 apply_filters 函數。 例如，在 Twenty Seventeen 主題中，您可以找到這個自定義過濾器： twentyseventeen_front_page_sections ，其默認值為4 。 該值表示在該主題的首頁上定義了多少個部分。 如果我們要創建一個 27 個子主題並且希望只有 2 個部分，那麼我們將這段代碼放在子主題的functions.php文件中：

 <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } // Custom Twenty Seventeen front page sections filter example. add_filter( 'twentyseventeen_front_page_sections', 'twentyseventeen_child_front_page_sections' ); function twentyseventeen_child_front_page_sections() { return 2; }

可插拔函數——什麼是可插拔函數？ 它們是普通的 PHP 函數，但包裝在 if 語句中，以檢查具有此名稱的函數是否已存在。 它們看起來像這樣：

 <?php if ( ! function_exists( 'some_function_name' ) ) { function some_function_name() { // Function code goes here. } }

如果您的主題正在使用這些可插入函數，那麼您可以通過在子function.php文件中定義具有相同名稱和更改代碼的函數來覆蓋它們在子主題中的代碼。 在 WordPress 引導過程中，子主題functions.php文件在父主題functions.php文件之前加載，這就是為什麼這種可插入函數方法是可能的。 此外，如果父主題函數不可插入，則不能覆蓋它，因為兩個具有相同名稱的函數會引發嚴重的 PHP 錯誤。

可插拔功能在早期的 WordPress 核心中使用，並被過濾器所取代。

添加新模板文件

將新的 WordPress 模板文件（父主題沒有）添加到子主題很容易。 您需要做的就是將模板文件放在子主題的根目錄中。

例如，如果您的父主題沒有category.php模板文件，該模板文件負責顯示特定類別的帖子，那麼您可以將category.php模板文件添加到子主題文件夾的根目錄（在functions.php ). WordPress 現在將使用這個category.php文件來顯示您的類別頁面。

您還可以在子主題中添加更具體的模板文件，以接管相應頁面的一小部分。

例如，如果您的父主題有一個archive.php模板，這是一個父模板文件，用於顯示作者、類別、分類、日期和標籤頁面，但沒有author.php模板，這是一個更具體的模板WordPress 模板層次結構，然後您可以將此author.php模板添加到您的子主題並更改作者頁面的佈局。 這樣，您就可以保持類別、分類、日期和標籤頁面的佈局和顯示相同，而只更改作者頁面。

覆蓋父模板文件

覆蓋父主題功能的最後一個也是最常見的用途是覆蓋父主題模板文件。

如果我們想在我們之前創建的 Adrenaline 子主題中更改頁面模板上的某些內容，我們需要將page.php文件從父主題複製到我們的子主題文件夾並進行所需的更改。

如果我們想更改單個帖子上顯示的作者和日期，我們會將single.php文件複製到子主題並在該文件中進行更改。

覆蓋父主題模板非常強大，因為您可以通過對現有父主題模板文件的一些修改來更改您想要的任何內容，但保持父主題完整且安全更新。

在已配置的父主題上切換到子主題

如果您有一個沒有子主題的現有 WordPress 網站並想開始使用子主題，那麼需要注意一些事項。

您可以使用插件自動創建子主題，也可以手動創建。 現在，您可能在想：“是的，一個插件！ 如果可以自動完成，谁愿意手動做任何事情？” 好吧，你沒有看錯，但是因為你想了解更多關於子主題的知識，我們將首先看手動步驟

手動切換到子主題

首先，為您的父主題創建一個子主題，並將您直接在父主題代碼中所做的任何修改或添加提取到子主題中。 這將使您的父主題可以安全更新，並且您的自定義代碼將整齊地隱藏在子主題中。

現在，在您激活子主題後，如果您查看首頁，有些事情可能看起來很奇怪甚至損壞。 這種混亂背後的原因是，WordPress 將子主題視為一個新的單獨主題，因此所有主題設置都重置為默認值。 這會導緻小部件切換側邊欄位置（來自頁腳側邊欄的小部件可能最終出現在頁眉部分等），並且定制器設置被重置為主題默認值。

小部件– 要修復小部件問題，請轉到外觀 -> 小部件並在正確的側邊欄中重新定位（拖放）小部件。

定制器設置- 有一種簡單的方法可以遷移您已經在父主題中設置的定制器設置。 定制器導出/導入插件非常易於使用，它會導入父主題定制器設置，因此您無需手動設置它們。 按照這些說明將定制器設置遷移到您的子主題。

如果您的主題正在使用任何其他主題選項框架，那麼您可能還需要重新配置它們。

完成這些操作後，子主題應該看起來就像您的父主題一樣，但您已準備好進行進一步修改和定期父主題更新。

現在，我們了解了問題是什麼，切換到子主題時以及如何解決這些問題，讓我們看看在插件的幫助下切換到子主題的更簡單方法。

自動切換到子主題（使用插件）

“自動”這個詞在這裡可能有點過分，因為我們仍然需要做一些事情才能切換到子主題，但它比手動操作更容易和更快。

我測試過的最好的子主題生成器插件是 Child Theme Configurator 插件。 它將允許我們創建一個子主題並一次性從父​​主題遷移所有主題設置。 棒極了！

這是有關如何使用此插件切換到子主題的快速教程：

1. 在您的 WP 網站上安裝並激活 Child Theme Configurator 插件，
2. 轉到工具 - >子主題，
3. 第一步，選擇“創建一個新的子主題”選項，確保您選擇了正確的父主題，然後單擊分析按鈕，
4. 插件完成分析後，您可以查看所有出現的附加選項並進行調整，具體取決於您的父主題，但默認設置通常沒問題，
5. 您可以單擊“顯示/隱藏子主題屬性”按鈕並更改子主題名稱和其他元數據，
6. 在將菜單、小部件和其他定制器設置從父主題複製到子主題選項中，您應該啟用該複選框，以便小部件和定制器設置將從您現有的父主題遷移到這個新創建的子主題，
7. 單擊創建新的子主題按鈕。

而已！

有關此插件的子主題創建和示例的完整教程，我建議您查看發佈在子主題配置器插件頁面上的視頻。

我在我們的 Adrenaline 主題上測試了這個插件，效果很好。 子主題創建成功，小部件和定制器設置也遷移到它，所以我絕對推薦這個插件。

概括

子主題是修改 WordPress 主題的推薦方式。 它們允許用戶製作自己的主題，只需進行輕微或重大修改，但同時保持父主題不變。

我們查看了兒童主題必須提供的所有內容，如果您認為我遺漏了一些內容，請在下面的評論部分與我們分享，我會將其添加到本指南中。

我希望你以後的每一個 WordPress 項目都使用一個子主題，因為基本上沒有缺點，只有好處； 如果不出意外，您的父主題可以收到定期更新。