dark

如何創建 WordPress 子主題 – 分步指南

2023年1月23日

您是否想體驗 WordPress 主題的設計和功能，但又擔心它會破壞您的原始主題？

不用擔心！

使用子主題是修改、更改和測試主題的好方法，無需擔心所涉及的風險。由於您要修改的是子主題而不是父主題，因此在更新父主題時不會丟失任何自定義設置。

如果您在進行更改後遇到任何問題，您始終可以通過刪除您創建的子主題來恢復到原始主題。

在本教程中，我將演示如何創建 WordPress 子主題及其自定義項。

讓我們開始吧！

什麼是 WordPress 子主題？

顧名思義，子主題是從父主題派生功能的主題。編輯您的 WordPress 主題可能存在風險，因為任何自定義都可能改變核心主題。因此，子主題可以是更改 WordPress 主題的無風險替代方案。

WordPress 子主題與父主題存在於不同的文件夾中，除非修改，否則子主題取決於父主題的功能。在 WordPress 儀錶板中安裝子主題時，您會注意到它已連接到父主題。

如果您在網站上使用子主題，那麼 WordPress 核心將首先檢查子主題文件。如果沒有更改，WordPress 將執行父主題文件。

重要的是要記住子主題不能獨立運行。它必須與父主題相鄰安裝。

父子 WordPress 主題有什麼區別？

父主題是一個完整的 WordPress 主題，包括模板文件、樣式表、CSS、JavaScript 文件和運行 WordPress 網站所需的其他資產。另一方面，子主題從父主題繼承其功能。

下表可幫助您了解兩者之間的差異。

父主題 兒童主題
最初出現在 WordPress 中 是後來開發的
父主題獨立於其他主題 子主題依賴父主題，繼承父主題的功能
包含所有文件和資產 子主題一般只有兩個文件：style.css 和 functions.php
父主題是強制性的 兒童主題最適合定製

何時在 WordPress 中使用子主題？

您可以在以下情況下使用子主題：

  • 您希望在不更改父主題代碼的情況下自定義主題的模板或樣式。
  • 您希望無風險地測試新功能或定製。
  • 您正在開發一個新主題並希望使用現有主題作為起點。
  • 您想要為特定客戶或項目創建自定義主題並使用現有主題作為起點

創建 WordPress 父主題之前的先決條件

創建子主題之前要做的第一件也是最重要的事情是創建網站的備份。萬一發生任何事故，您應該有一個備份來在運行點上恢復您的站點。有多種創建備份的方法。您可以使用 Updraft 等插件，也可以從您的託管平台創建備份。

如果您從未備份過 WordPress 網站，您可以按照我們關於如何備份 WordPress 網站的簡單指南進行操作。

第二種建議的方法是創建一個暫存環境，在暫存環境中進行更改，然後在完成更改後將更改推送到實時環境。創建 WordPress 暫存網站可讓您在不影響實際網站的情況下測試更改。

嘗試使用即用即付定價和 24/7 專家支持的最快託管平台！

通過靈活且經濟實惠的託管來託管您製作精美的傑作。

今天開始如何手動創建子主題

在 WordPress 中創建子主題只需幾個步驟。為了完全理解 WordPress 中子主題的概念，我們將創建一個 25 個默認 WordPress 主題的子主題，並進行某些修改以了解子主題背後的想法。

要創建 WordPress 子主題，我們將遵循以下 5 個簡單步驟：

  1. 創建子主題文件夾
  2. 為您的子主題創建樣式表
  3. 排隊父子主題的樣式表
  4. 編輯子主題的 style.css 文件
  5. 編輯 single.php 模板文件

讓我們詳細討論每一步。

第 1 步：創建子主題文件夾

首先，創建一個單獨的文件夾，將您的子主題的所有基本文件放在本地系統中。

為什麼在本地系統？

那麼，完成所有文件後，您可以使用 FTP（文件傳輸協議）技術將文件夾上傳到您的網站。

其次，將這個新創建的文件夾命名為類似於您的父主題，並在名稱後添加「子」一詞。例如，我在我的 WordPress 網站上使用了一個二十二十二主題。

如果我想為 Twenty-Twenty-Two 創建一個子主題，我會將文件夾命名為 Twenty-Twenty-Two-child。表示該文件夾是二十二主題的子主題文件夾。

Twenty-Twenty-Two-Child-theme-folder

第 2 步：為您的子主題創建樣式表

接下來，您需要在子主題文件夾中創建「style.cs」文件。CSS 文件將包含您的子主題的所有樣式規則和聲明。

要創建 CSS 文件，您可以使用文本編輯器（如記事本）或任何代碼編輯器（如 Sublime Text）。

為了使樣式表正常工作，您需要在 CSS 文件的最頂部添加標題注釋。標題注釋包含有關子主題的基本信息，包括它是特定父主題的子主題。

評論中最重要的兩個元素是主題名稱和模板目錄。主題通常位於wp-content/theme文件夾中。

打開記事本，將以下代碼複製並粘貼到您的文件中，並使用 .css 文件擴展名保存該文件。

  1. /*
  2. Theme Name: Twenty Twenty Two Child
  3. Theme URI: https://wordpress.org/themes/twentytwentytwo/
  4. Author: the WordPress team
  5. Author URI: https://wordpress.org/
  6. Template: twentytwentytwo
  7. Description: Child Theme of Twenty Twenty-Two
  8. Version: 1.1
  9. License: GNU General Public License v2 or later
  10. License URI: http://www.gnu.org/licenses/gpl-2.0.html
  11. Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
  12. Text Domain: twentytwentytwo-child
  13. This theme, like WordPress, is licensed under the GPL.
  14. Use it to make something cool, have fun, and share what you’ve learned with others.
  15. */

現在，如果我們導航到我們的WordPress 管理儀錶板 → 外觀 → 主題，我們將看到 Twenty Fifteen Child 已經出現。我們現在可以在我們的網站上應用該主題。

由於 style.css 存在於 WordPress 子主題目錄中，因此 WordPress 將載入該 style.css 而不是父主題的 style.css。每個其他文件，如index.php、page.php和functions.php將從父主題載入。

由於我們沒有在子主題的style.css 中定義任何樣式，因此我們必須導入樣式。在 WordPress codex 上推薦的最佳實踐是使用 functions.php 文件對樣式表進行排隊。

第 3 步：排隊父主題和子主題的樣式表

與其他文件不同，WordPress 子主題中的 functions.php 文件背後的理論是：WordPress 首先載入子主題的 functions.php 並初始化其中的函數。稍後，它將執行父主題的 functions.php。

正如我提到的，導入樣式表是通過functions.php文件將它們排入隊列的最佳方式。

在您的子主題目錄中創建functions.php文件並添加以下代碼。

  1. <?php
  2. add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );
  3. function enqueue_parent_styles() {
  4. wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
  5. }

這將從父主題文件中調用樣式表「style.css」 。如果您想編輯樣式表中的任何內容，您可以在子主題的 style.css 中添加這些規則。

第四步：編輯子主題的style.css文件

在 WordPress 子主題中，您可以通過在子主題文件夾中的 style.css 中定義規則來輕鬆編輯樣式表。例如，如果我們想改變錨點顏色，我們需要做的就是在子主題的 style.css 中添加以下代碼

  1. a {
  2. color: #D54E21;
  3. text-decoration: none;
  4. }

這裡發生的是子主題的 style.css 規則「a」覆蓋了父主題的 style.css，其餘部分保持不變。

第五步：編輯single.php模板文件

我們可以輕鬆地在子主題中編輯單個模板文件。例如，如果我們要編輯 single.php，我們必須從父主題文件夾中複製該文件並將其粘貼到 WordPress 子主題的文件夾中。

假設我們要從單個帖子頁面中刪除評論部分。將文件複製到我們的子主題文件夾後，我們可以對其進行編輯並刪除以下評論部分。

  1. // If comments are open or we have at least one comment, load up the comment template.
  2. if ( comments_open() || get_comments_number() ) :
  3. comments_template();
  4. endif;

這裡發生的是 WordPress 檢查 single.php 的子主題文件夾。如果它存在於目錄中，它將從那裡載入它。否則，它將回退到父主題文件夾。

就像那樣，我們可以在我們的主題中編輯任何單獨的模板文件。這種方法通常是好的，因為它保持我們的父主題完好無損並更新父主題而不會丟失我們的定製。

如何使用插件創建子主題

如果您不是開發人員並且沒有技術背景或不想使用手動方法，那麼您可以使用插件創建子主題。WordPress 存儲庫中有幾個插件可用於創建子主題。

以下是 3 個最受歡迎的免費兒童主題插件：

  1. 兒童主題嚮導
  2. WPS 兒童主題生成器
  3. WP 兒童主題生成器

對於本教程，我將使用Child theme Wizard 插件來生成 Child Theme。

開始：

  • 轉到WordPress 儀錶板 > 插件 > 添加新插件。
  • 在右側搜索欄中搜索Child Theme Wizard 插件。
  • 單擊「安裝」按鈕。
  • 安裝後，單擊「激活」按鈕以激活插件。

Child-Theme-Wizard-plugin

  • 成功激活插件後，您將在左側 WP 管理欄的「工具」選項下看到「子主題嚮導」選項

Child-Theme-Wizard-option-under-tools

  • 現在，您必須選擇父 主題。為此，您需要添加Title、Description和Child Theme URL並單擊Create Child Theme。

Child-theme-created-successfully

  • 現在轉到外觀 > 主題並查看您新創建的子主題。

To-see-newly-created-child-theme

這就是您可以使用插件 – Child Theme Wizard 簡單地創建子主題的方法。

安裝後如何檢查子主題

您可以手動或通過插件創建子主題，您可以通過導航到外觀 > 主題來查看您的子主題。從這裡，您可以查看已安裝的子主題。您也可以激活和刪除主題。

您可能有一個設計精美的網站，但速度快嗎？

以可承受的成本為您的網站提供一個居住和展示的好地方。起價為 10 美元/月。

今天開始概括

就是這樣。我希望您現在知道什麼是 WordPress 子主題以及它與父主題的區別。

在這篇博客中，我試圖解釋使用子主題的好處以及在實施它們之前需要考慮的先決條件。

我還詳細介紹了手動創建子主題和使用插件的步驟。如果您仍有任何疑問，請隨時與我們聯繫。

經常問的問題

問：如何在 WordPress 中創建子主題？？

有兩種方法可以創建子主題。您可以手動或使用像 Child Theme Wizard 這樣的插件來完成。手動方法需要技術知識，與插件相比也是一個漫長的過程。

Q：創建WP子主題有什麼好處？

使用子主題的主要優點是它允許您在不修改父主題代碼的情況下對站點進行更改。這很重要，因為當主題更新時，您對父主題所做的任何自定義都將丟失。

問：如何手動創建子主題？

您可以按照 5 個步驟手動製作子主題。

  1. 創建子主題文件夾
  2. 為您的子主題創建樣式表
  3. 排隊父子主題的樣式表
  4. 編輯子主題的 style.css 文件
  5. 編輯 single.php 模板文件
相關文章