如何創建 WordPress 子主題（2021）

你知道怎麼做嗎 一個WordPress 兒童主題？

當然，您的主題看起來適合您的網站，但在某些時候，您需要對其進行編輯。 更改子主題是編輯您的網站的首選。 此外，了解子主題是您應該了解的基本 WordPress 內容之一。 您可以從這裡開始學習 WordPress。

讓我們完成創建 WordPress 子主題的過程。

為什麼要為 WordPress 使用子主題？

在 WordPress 中，子主題獲取所有父主題的特性、功能等。 另一方面，可以在不更改父主題的情況下編輯子主題。 它將為您縮短編輯網站的時間和精力。 此外，您的 WordPress 主題更新更安全、更穩定。 當您自定義子項時，父項上的所有更改和自定義都將保持不變。 用戶也可以在其他 WordPress 網站上使用這個子主題。

製作兒童主題前的注意事項

要製作子主題 WordPress ，需要編碼技能，因為您將使用 HTML 和 CSS。 知道要改變什麼是非常重要的。 此外，您將需要 PHP 的基本知識，至少從其他來源複製/粘貼代碼片段。

我們真誠地建議您在開發環境中練習。 這是一個您可以在不害怕弄亂您的主站點的情況下做到這一點的地方。 這就像你用一塊石頭殺死兩隻鳥：一隻將它移到測試場，一隻用作主題開發。

還有一件事，父主題應該適合您的目的的外觀和功能。 事實上，您所做的更改越少，您的網站就會變得越好。

在下面的部分中，我們將使用 LearnPress 主題作為示例，以更好地說明WordPress 創建子主題。

構建第一個兒童主題

製作子主題 WordPress 時，您有 2 個選項。 您可以使用手動方式來熟悉所有文件。 否則，應用插件將處理複雜的文件和文件夾。

現在，我們將開始定制。

使用代碼

首先，您將在 WordPress 安裝中打開 /wp-content/themes/ 並為您的子主題創建一個新文件夾。 隨意命名。

然後，您必須為您的子主題創建前 2 個文件。 打開文本編輯器並將以下代碼粘貼到空文檔中：

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

您可以在計劃時更改信息，並將此文件保存到您最近子主題文件夾中的 style.css 文件中。 好吧，您剛剛製作了子主題的主樣式表。

接下來，您將製作^第二個文件以從父主題導入樣式表。 在文本編輯器中創建一個新文檔並複制以下代碼：

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

當您使用 LearnPress 作為父主題時，此代碼將開始工作。 因此，大多數主題都會像這樣工作。 保存此文件，它將成為您子主題的 functions.php 文件夾。

在這些步驟之後，您將擁有一個基本的子主題。 在“外觀”中，選擇“主題”和“激活”。 因此，您的網站將開始使用子主題。 如果您需要自定義，請移至下一部分。

使用插件

我們建議您可以使用 Child Theme Configurator 插件。 由於它不需要編碼，因此您可以輕鬆地進行更改和自定義。

首先，在您的網站上安裝插件。 有關插件安裝的更多指南，請單擊此處。

激活時，您轉到“工具”->“子主題”，然後在父主題詢問彈出窗口中選擇 LearnPress。 選擇“分析”以檢查作為父主題的兼容性。 接下來，您必須命名子主題的文件夾以保存文件以及保存文件的位置。 在默認設置中，選擇“單擊以編輯子主題屬性”。 然後您將完成子主題的信息。

手動製作子主題時，您的子主題不會從父主題繼承菜單和工具。 要解決它，請使用子主題配置器。 最後，選​​擇“Create New Theme Child”完成。 在這一步中，您的子主題將具有用於進一步開發的 functions.php 和 style.css。 顯然，請記住預覽您的子插件。 之後，您選擇“激活並發布”以發布您的子主題。

現在，我們將開始自定義您的孩子主題。

WordPress子主題的定制

我們將通過向文件“style.css”添加代碼來創建與父主題有點不同的子主題 WordPress 。

從 Firefox/Chrome 檢查器複製代碼

您可以使用 Chrome 和 Firefox 的 Inspector 小部件來發現所需的 CSS 代碼。 此外，您可以使用這些工具訪問所有網站的 CSS 和 HTML 元素。

要查看帖子或網站的 CSS 文件，請右鍵單擊並選擇“檢查”。 您的屏幕將分成兩半，您可以看到頁面的 CSS 和 HTML。 當您將鼠標移到 HTML 行上時，檢查器工具將在頂部窗口中顯示您。 也有 CSS 規則。

背面會有暫時的顏色變化。 要使其永久化，請複制此 CSS 規則行並粘貼到子主題的 style.css 文件中：

 1 body { 2 background-color: #fdf8ef; 3 )

保存更改並預覽網站。 此外，您可以為主題樣式表中的任何元素重新啟動它。 好吧，我們在這里為您提供子主題的完整樣式表：

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

從父主題的 style.css 文件中復制代碼

如您所見，可以從父主題的style.css 文件中復制並將其粘貼到子主題並自定義。

例如，頁面背景顏色的代碼是：

 1 background-color: var(--global--color-background);

'-global-color-background' 是在主題的各個地方使用的變量。 如果您需要同時更改這些位置的顏色，則必須更改變量的值。 移動到 WordPress 安裝文件夾中的 /wp-content/themes/learnpress 並在文本編輯器中打開文件 style.css 以查找 –global–color-background 的位置。 該變量可以用另一個變量更改。 您可以在父主題的 style.css 文件中找到一大堆顏色變量。 選擇合適的顏色選項後，將該代碼行複制並粘貼到子主題的 style.css 文件中，並根據您的顏色趨勢將舊的替換為新的。 然後，顏色將根據計劃的配色方案進行劃分。 此過程將使您的配色方案保持一致并快速編輯。

自定義模板文件

在主題中，網站中的文件處理區域稱為模板。 模板通常以它們處理的部分命名。 因此，一些重要的部分由各種文件或內容模板管理。

要自定義模板，請在父主題中找到該文件並將其複製到子主題中。 然後，在文本編輯器中打開它並開始修改它。

我們將通過文件 footer.php 向您展示此過程的教程。 將其複製到子主題的文件夾並在純文本編輯器中打開它。 例如，讓我們刪除頁腳中的“Proudly powered by WordPress”鏈接並添加版權聲明。 首先，刪除 <div class=”powered-by”> 標記之間的所有內容。

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

然後，您將粘貼在下面示例中的這些標籤下方找到的代碼。

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

選擇“保存更改”，當您返回該站點時，您將看到新的版權聲明。

為您的 WordPress 子主題添加功能

要更改或添加功能到您的站點，您必須查找 functions.php 文件。 該文件使用 PHP 代碼使該進程運行。

通常，系統會引導您將代碼片段複製並粘貼到 function.php 文件中，但是當您更新 PHP 或主題時，它們將被刪除。 因此，我們建議您使用子主題來添加代碼片段。 好吧，讓我們轉到添加小部件的過程。 將代碼片段添加到子主題的functions.php 文件中。

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

保存並導航到“外觀”->“小部件”以查看新工具。 此外，您可以查找有關添加功能區的更多信息。 您可以通過將代碼片段添加到站點的 functions.php 文件來添加許多功能。

這就是如何在 WordPress 中創建子主題的全部內容。 讓我們轉到修復錯誤的部分。

修復錯誤

您可以隨時解決製作兒童主題的任何問題。 因此，你不應該輕易放棄。

語法問題可能是由編碼過程中的一些缺失引起的。 此外，這是所有用戶都能遇到的最常見的錯誤。 此外，如果事情不順利，您可以隨時將其刪除並重新開始。

如何創建 WordPress 子主題：結論

我們希望您可以通過我們的文章獲得有關製作兒童主題的知識。 感謝您的閱讀！

閱讀更多：如何修復 HTTP 錯誤 500 WordPress (2021)