如何通過 4 個簡單的步驟創建 WordPress 子主題

已發表: 2015-11-25

關注@Cloudways

子主題——顧名思義——是從父主題派生功能的主題。在某些情況下不建議直接編輯 WordPress 主題，例如主題可能會更新的地方。如果應用了主題的新更新，您可能會丟失已完成的自定義。

為了保持自定義並繼續接收主題的更新，建議為您要使用的父主題創建一個 WordPress 子主題。創建子主題還有另一個優勢，即您的父主題保持完整且無需任何編輯。

子主題與父主題位於不同的文件夾中，除非修改，否則子主題取決於父主題的功能。如果您在網站上使用子主題，那麼 WordPress 核心將首先檢查子主題的文件。如果不修改，WordPress 將執行父主題的文件。

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

要創建 WordPress 子主題，我們將按照以下步驟操作：

創建一個文件夾並將其命名為二十五個孩子。附加 -child 被認為是一種很好的做法。
使用子主題信息和functions.php文件創建style.css
在 style.css 中導入二十十五模板
通過functions.php文件入隊樣式表
編輯模板文件，如 single.php

第 1 步：創建子主題文件夾並添加 style.css

第一步是為我們的子主題創建一個新文件夾。將其稱為 25-child，以便輕鬆記住我們的兒童主題所在的位置。

為此，請使用 FileZilla 等 FTP 客戶端連接到您的服務器並導航到 /public_html/wp_content/themes 並創建一個名為二十五歲兒童的新文件夾

在這個新目錄中創建一個 style.css 文件並將以下信息粘貼到其中。

 /*
主題名稱：二十十五歲的孩子
主題 URI：https://wordpress.org/themes/twentyfifteen/
作者：WordPress 團隊
作者 URI：https://wordpress.org/
模板：二十五
描述：二十五歲的兒童主題
版本：1.3
許可證：GNU 通用公共許可證 v2 或更高版本
許可證 URI：http://www.gnu.org/licenses/gpl-2.0.html
標籤：黑色、藍色、灰色、粉色、紫色、白色、黃色、深色、淺色、兩列、左側邊欄、固定佈局、響應式佈局、可訪問性就緒、自定義背景、自定義顏色、自定義-標題、自定義菜單、編輯器風格、特色圖像、微格式、後格式、rtl 語言支持、置頂帖、線程評論、翻譯就緒
文本域：二十五個孩子
這個主題和 WordPress 一樣，是在 GPL 下獲得許可的。
用它來製作一些很酷的東西，玩得開心，並與他人分享你學到的東西。
*/

您應該編輯的最重要的行是“主題名稱” 、 “文本域”和“模板” 。由於主題名稱不能與二十十五相同，並且在模板中我們告訴WordPress該主題是二十十五的子主題，如果二十十五文件夾中的文件不存在於二十十五子中，我們應該調用它們文件夾。此外，文本域對於您安裝 WordPress 的每個主題都應該是不同且唯一的。

現在，如果我們導航到我們的WordPress 管理儀表板 → 外觀 → 主題，我們將看到二十五個孩子已經出現。我們可以在我們的網站上應用該主題。

因為 style.css 存在於子主題目錄中。 WordPress 將加載該 style.css 而不是父主題的 style.css。其他所有文件，如index.php 、 page.php 、 functions.php 都將從父主題加載。

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

第 2 步：使用functions.php 將樣式表排入隊列

與其他文件不同，WordPress子主題的functions.php文件背後的原理是：WordPress首先加載子主題的functions.php並初始化其中的函數，之後還會執行父主題的functions.php。

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

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

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

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

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

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

一種 {
顏色：#D54E21；
文字裝飾：無；
}

這裡發生的事情是“a”的子主題的 style.css 規則覆蓋了父主題的style.css ，其餘保持不變。

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

我們可以輕鬆編輯子主題中的單個模板文件。例如，如果我們想編輯 single.php，那麼我們需要從父主題文件夾中復制該文件並將其粘貼到子主題的文件夾中。

假設我們要從單個帖子頁面中刪除評論部分。在我們的子主題文件夾中復製文件後，我們可以編輯它並刪除以下評論部分。

 // 如果評論已打開或我們至少有一條評論，請加載評論模板。
if ( comments_open() || get_comments_number() ) ：
評論模板（）；
萬一;

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

就像那樣，我們可以在我們的主題中編輯任何單獨的模板文件。這種方法通常很好，因為它使我們的父主題保持完整，並在不丟失自定義的情況下更新父主題。