如何創建 WordPress 子主題 (2021)

已發表: 2021-10-21

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

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

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

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

wordpress 兒童主題

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

製作子主題前的注意事項

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

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

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

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

建立第一個兒童主題

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

現在，我們將開始定制。

使用代碼

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

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

 1 Theme Name: WPB 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 文件夾。

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

使用插件

我們建議您可以使用子主題配置器插件。 由於它不需要編碼，您可以輕鬆進行更改和自定義。

子主題生成器插件

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

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

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

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

WordPress 子主題的自定義

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

從 Firefox/Chrome Inspector 複製代碼

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

要查看帖子或 o 站點的 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)