如何建立WordPress子佈景主題（初學者指南）

最後更新：2024年5月9日，由編輯部撰寫 | 評審：Syed Balkhi

你想在WordPress中創建一個子佈景主題嗎？子佈景主題是一種從另一個WordPress佈景主題繼承功能的佈景主題。許多用戶會為其當前的佈景主題創建一個子佈景主題，以便在佈景主題開發者釋出更新時能夠安全地自訂網站設計而不會丟失更改。在這篇文章中，我們將向你展示如何為你的WordPress網站創建一個子佈景主題。

子佈景主題如何運作，為什麼你需要它？

子佈景主題繼承了另一個WordPress佈景主題的所有功能、特性和樣式。當你創建一個子佈景主題時，原始佈景主題被稱為父佈景主題。繼承包括父佈景主題的style.css檔案，該檔案定義了佈景主題的主要樣式。子佈景主題可以通過添加自己的檔案或修改現有的檔案來覆蓋或擴展其繼承的屬性。

雖然可以在不安裝子佈景主題的情況下自訂你的WordPress佈景主題，但你可能仍然需要子佈景主題的幾個原因：

子佈景主題保護你的自訂設計免受佈景主題更新的影響，保持自訂設計安全，不會被覆寫。如果你直接修改父佈景主題，那麼這些調整可能會在更新時消失。
子佈景主題允許你安全地嘗試新的設計或功能，而不會破壞網站的原佈景主題，類似於一個測試環境。
如果你知道如何編碼，那麼子佈景主題可以使開發過程更加高效。子佈景主題的檔案比父佈景主題的檔案簡單得多。你可以專注於只修改你想改變或擴展的那部分父佈景主題。

在創建WordPress子佈景主題之前要做什麼？

我們見過很多WordPress用戶在進入技術細節時感到興奮，只有在錯誤出現時才變得沮喪。我們明白，這就是為什麼在創建子佈景主題之前了解你即將進入的事情是很重要的。以下是我們建議你在繼續這份逐步指南之前首先要做的一些事情：

注意你將與代碼打交道。至少，你需要對HTML、CSS、PHP，以及可選的JavaScript有基本的了解，以理解你需要進行的更改。你可以在WordPress佈景主題手冊中閱讀更多關於這方面的信息。
選擇一個具有你所需網站設計和功能的父佈景主題。如果可能的話，找到一個只需要進行少數更改的佈景主題。
使用本地站點或測試站點進行佈景主題開發。你不希望在你的線上站點上創建無意的錯誤。
首先備份你的網站。

有幾種方法可以從你的現有佈景主題中創建一個子佈景主題。一種是手動代碼，而另一種需要使用插件，這種方法對初學者而言更加友好。如果你缺乏技術經驗，第一種方法可能會看起來很令人生畏。也就是說，即使你選擇了一種插件方法，我們仍然建議你閱讀手動方法，以便熟悉過程和涉及的檔案。

方法一：手動創建子WordPress佈景主題

首先，你需要打開你WordPress安裝目錄中的/wp-content/themes/。你可以通過使用你的WordPress主機提供的文件管理器或FTP客戶端來做到這一點。我們發現第一種選項要容易得多，所以我們將使用它。如果你是Bluehost客戶，那麼你可以登入你的主機帳號儀表板並導航到「網站」標籤。之後，點擊「設置」。在概覽標籤中，向下滾動到「快速鏈接」部分。然後，選擇「文件管理器」。

在這個階段，你需要進入你網站的public_html文件夾並打開/wp-content/themes/路徑。在這裡，只需點擊左上角的「+文件夾」按鈕，為你的子佈景主題創建一個新的文件夾。你可以隨意命名這個文件夾。在這個教程中，我們將使用twentytwentyone-child作為文件夾名稱，因為我們將使用Twenty Twenty-One作為我們的父佈景主題。完成後，只需點擊「創建新文件夾」。

接下來，你必須打開你剛創建的文件夾並點擊「+文件」來創建你的子佈景主題的第一個檔案。如果你使用FTP客戶端，那麼你可以使用類似Notepad的文字編輯器來編輯文件並稍後上傳檔案。

請為此文件命名為style.css，因為它是你的子佈景主題的主要樣式表，並將包含有關子佈景主題的信息。然後，點擊「創建新文件」。現在，只需右鍵單擊style.css文件。之後，點擊「編輯」以打開一個新標籤，如以下截圖所示。在此新標籤中，你可以貼上以下文本並根據你的需求進行調整：

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

完成後，只需點擊「保存更改」。