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

您是否曾經更新過您的 WordPress 主題，卻發現您對主題本身所做的所有自定義更改都丟失了？ WordPress子主題是避免這個問題的解決方案，在本文中，我們將向您展示如何創建一個。

我們走吧！

什麼是 WordPress 兒童主題

一個 WordPress 子主題不被視為一個完整的主題，就像可以在 WordPress 主題目錄中找到的主題一樣。 相反，它完全依賴於另一個主題（稱為父主題）才能被激活並正常工作。

激活後，它會繼承其父主題的所有功能、特性和代碼，而無需對父主題文件進行任何更改。

WordPress 將提供父主題的代碼，但被子主題覆蓋的部分除外，這些部分將從子主題的文件夾中提供。 這樣做的結果意味著當父主題更新時，在子主題中所做的任何修改/添加等都不會丟失。

創建子主題（逐步）

在繼續之前，請確保：

• 您可以通過 FTP 客戶端（如 WinSCP 或 Filezilla）訪問您網站的文件
• 您有一個可用的文本編輯器（如記事本++）。

首先，我們將激活一個默認主題，也稱為父主題。 在這個例子中，這將是二十二十的主題。 如果我們前往我們網站的前端，我們會看到如下內容：

現在讓我們創建並激活一個“二十二十”子主題。

添加目錄

首先，我們必須在 /wp-content/themes 中創建一個新的“twentytwenty-child”目錄。 請注意，只要您不使用空格或標點符號，您可以隨意命名子文件夾。

添加 style.css 文件

接下來，我們必須創建一個 style.css 文件並添加適當的主題標題。 在繼續之前，讓我們看一下父主題的 style.css。

讓我們看看這些信息反映在管理區域的什麼位置。

首先，在 Appearance > Themes 中打開主題詳情，仔細查看右欄。

如果我們將其與樣式表進行比較，我們將看到這些信息的各種元素是從哪裡提取的。

我們需要開始將其中一些信息添加到我們的子主題樣式表中。 應作為標題插入所需的最少信息是“主題名稱”和“模板”。

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

• 主題名稱：將顯示在 WordPress 後端的子主題的所需名稱。
• 模板：這應該與父主題的目錄名稱相同。 它是子主題最重要的標題，因為它實際上告訴 WordPress 哪個主題是父主題，從而定義了依賴關係。 沒有它，您的子主題將無法工作。

激活子主題後，您將在後端看到如下內容：

您還可以輸入以下可選信息：

• 版本（主題版本）
• 至少需要（主題正常工作所需的最低 WP 版本）
• 需要 PHP（主題才能正常工作的最低 WP PHP 版本）
• 描述（與主題相關的細節）
• 標籤（主題標籤）
• 作者（主題開發者姓名）
• 等等

此時，如果您打開網站的前端，您可能會發現它已損壞，看起來像這樣：

這是完全正常的，因為 WordPress 現在引用的樣式表 (style.css) 現在來自子主題，並且此樣式表是空的，除了您在上面輸入的信息之外。 您可以從頭開始創建自己的樣式，也可以加載父主題的樣式並從那裡開始。 如果要導入父主題樣式表，可以通過以下兩種方式之一進行。

選項一：以經典方式導入父樣式表

您所要做的就是將此行添加到您的子主題的 style.css 文件中：

 @import url('../twentytwenty/style.css');

此命令告訴 WordPress 從何處查找原始 CSS 文件。 現在，如果您刷新主頁，它看起來會恢復正常。 您現在在 style.css 中添加的任何內容都將覆蓋導入的父樣式。 例如，嘗試為 h2 標題“Hello world！”添加不同的字體大小。

刷新頁面並查看開發人員選項卡的元素檢查器。

您會注意到添加的值被計算在內，並且默認（父樣式）“font-size：6.4rem;” 已被覆蓋。

但是，您必須考慮的是，使用此方法會對您的站點速度產生負面影響，因為文件被迫一個接一個地加載，而不是並行加載。 更具體地說，瀏覽器必須在“通知”它需要下載第二個文件之前下載、解析和執行第一個文件。

由於這些原因，不再推薦以這種方式導入父 style.css 文件。

選項二：以正確的方式導入父樣式表

為了以“正確的方式”導入父 style.css 文件，我們首先需要在您的子主題文件夾中添加一個空的functions.php文件。

完成此操作後，使用編輯器打開它並添加一個開始 PHP 標記 (<?php)，然後您可以添加以下 PHP 代碼：

 function twentytwenty_scripts() { wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', twentytwenty_scripts);

如果您現在檢查瀏覽器的開發人員工具，您會注意到結果與上面選項一中概述的“傳統”方式相同，但現在它更快了。

關於 PHP 代碼的一些進一步說明：

• 'parent-theme-style'是句柄名稱並且必須是唯一的
• get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css'告訴 WordPress 父 style.css 位置的源位置
• get_template_directory_uri()檢索父主題的模板目錄 URI。 在我們的例子中，它輸出'http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty'

為您的子主題添加功能

現在您已經創建了一個子主題，您可以開始添加一些額外的功能。 讓我們首先看看您將如何在您的子主題中編輯functions.php文件，以及它在實踐中是如何工作的。

子主題functions.php

與style.css文件不同的是，當您將functions.php放入子主題時，父主題的functions.php代碼仍然會運行。 除了父級的functions.php內容之外，您在子級的functions.php中添加的任何內容都將被執行。

例如，讓我們看看如何更改帖子視圖的“閱讀更多”文本：

第一步：創建一個測試帖子類別：

第二步：在此類別下創建兩個新帖子。 讓我們添加一些示例內容。 此時，如果您訪問類別頁面，您將看到：

在此示例中，我們要更改加載完整帖子的按鈕中顯示的“繼續閱讀”文本。

讓我們退後一步來了解這段文本是如何顯示的。 在WordPress中，為了修改某個功能，我們使用過濾器。

在此示例中，要獲得我們想要的內容，我們必須自定義 'the_content_more_link' 過濾器，該過濾器最初在 wp-includes/post-template.php 核心文件的第 369 行中引入，如下所示：

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

這目前被以下代碼覆蓋在其 function.php 文件（第 571 行）中的 220 個父主題：

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

因此，如果您想更改按鈕中的“繼續閱讀”文本，如果您添加以下代碼，則可以在您的子主題的functions.php中覆蓋它：

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

''the_content_more_link'' 鉤子在這些文件之間是常見的，在這種情況下，孩子的鉤子總是佔上風。

然後刷新頁面，瞧：

如何自定義 PHP 模板

上面的截圖顯示了帖子類別視圖的 220 主題模板的內容。 那麼，我們如何使用子主題更改其設計或添加/刪除信息？

您可以這樣做：

1. 找到相關的php文件
2. 將相應的文件複製到子主題文件夾並編輯
3. 自定義它你認為合適

這裡的第一個也是最常見的問題是我們必須找到哪個 php 文件包含我們要編輯的輸出。 WordPress模板層次結構肯定會幫助您找到解決方法。

簡而言之，WordPress 主題實際需要的唯一文件是 index.php 和 style.css 文件。 額外的文件和文件夾實際上是從index.php內部調用的文件。 它們是您最終將看到的index.php文件輸出的片段。

關於二十二十主題，如果我們查看它的index.php文件，我們可以在第 79 行看到，當內容為一篇或多篇文章時，則使用 template-parts/ 目錄中的 php 文件。

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

在我們的例子中，我們必須從 template-parts 主題的子文件夾中復制content.ph文件。

此外，請確保僅複製您計劃自定義的 PHP 文件。 不要復制父主題中的每個 PHP 文件。

注意：子主題中的文件夾結構應該相同，以便更改反映在前端。

因此，我們首先創建“template-parts”子文件夾並將content.php的副本放入其中。

您現在可以在編輯器中打開文件並對其進行自定義。

首先嘗試更改一些瑣碎的事情以確保一切正常，例如，更改一個 div 類並刷新您的前端以檢查結果。

自定義帖子類別模板

我們已經在“測試類別”類別下有兩個帖子。 您現在可以創建一個“'Post Category”'項目菜單並將其鏈接到'test category'。 如果您單擊新菜單項，您應該會看到帖子類別視圖頁面。

現在您可以進一步修改content.php文件並將帖子類別視圖更改為您自己的樣式。 作為提示，找到額外包含文件的引用，如第 23 行：

 get_template_part( 'template-parts/featured-image' );

這意味著輸出特色圖像的文件是template-parts/featured-image.php

因此，您可以將文件複製到子主題目錄中並進行編輯。 極好的！

結論

子主題允許用戶修改父主題的佈局、樣式和功能，而不會失去更新父主題的能力。 通常，網頁設計師不願意更新他們網站的主題，因為他們知道如果這樣做，他們將丟失直接在父主題中所做的更改。 這是一個嚴重的問題，因為讓您的主題保持最新與您的插件和 WordPress 核心一樣重要。 從一開始就使用子主題消除了這個問題，並允許您根據需要更新父主題，而不必擔心覆蓋您對整個主題所做的所有編輯。