如何在 WordPress 中創建塊子主題

已發表: 2023-07-14

想像一下這種情況：您剛剛找到了一個近乎完美的主題可以在您的網站上使用。 它設計得很好，包括您想要的佈局，但您想要更改調色板並限制客戶修改某些區域。 不幸的是，您使用的主題不允許您刪除默認顏色或鎖定塊。

雖然您可以直接編輯主題的文件，但當您運行主題更新時，所有修改都將丟失。 您可以使用代碼片段插件添加一些自定義 CSS，但這不會改變登錄用戶可用的樣式選項。

所以，你可以做什麼？ 如何更改全局樣式可用選項？ 為此，您需要一個塊子主題。

什麼是 WordPress 子主題？

根據 WordPress 開發者文檔：

子主題繼承父主題的外觀和感覺及其所有功能，但可用於對主題的任何部分進行修改。 通過這種方式，自定義內容與父主題的文件分開。 使用子主題可以讓您升級父主題，而不會影響您對網站所做的自定義。

因此，要在 WordPress 中使用子主題，您還需要安裝父主題。 您的子主題繼承了父主題的所有內容，並添加了一些變體。

如何創建兒童主題

您想要一個代碼選項來自定義您網站上的樣式嗎？ 與覆蓋其他 WordPress 主題一樣，使用子主題是覆蓋代碼的最佳方法。 當您的主題更新時，您的子主題代碼將保留。

在本文中，我們將介紹優秀 WordPress 子主題的關鍵組成部分，並提供深入的閱讀資源。

1. 何時使用塊子主題

兒童主題通常是一個很好的解決方案。 但是，如果您只想添加一點 CSS 代碼，那麼整個子主題可能就有點過頭了。 考慮使用像代碼片段這樣的插件來添加一些自定義功能。

定制客戶站點

當您為客戶構建網站時，您可能需要提供一些額外的自定義功能。

如果您想控制用戶插入新塊、移動現有塊或刪除塊的能力，您可能需要實現塊鎖定。 您可以在本介紹性教程中了解如何鎖定塊等。

創建主題變體

除了定義主題佈局客戶端可以修改的區域之外，您可能還想更改其調色板選項，省略主題或 WordPress 的默認設置並添加獨特的選項。 您還可以定義主題中也應提供的漸變和雙色調選項。

2.選擇一個好的WordPress主題

並非所有主題的創建方式都是相似的。 除了您在主題設計中看到的內容之外，選擇父主題還涉及其他因素，例如更新頻率、支持質量、文檔和主題開發人員的聲譽。 了解更多信息如何使用 WordPress 主題構建網站。

3.創建測試環境

到目前為止，您已經選擇了父主題，收集了品牌資產，並決定了要覆蓋的設置。 接下來，您需要設置測試環境。

如果您使用的是託管 WordPress 託管提供商（例如 GoDaddy 的託管 WordPress 託管），則可以使用一鍵暫存站點作為開發環境。 如果您使用 cPanel 或 VPS 之類的東西進行託管，則可以設置單獨的 WordPress 安裝並將現有網站克隆或複製到新安裝。

如果您不將子主題應用到現有站點，或者您希望從頭開始構建，則可以使用 ServerPress 中的 MAMP 或 DesktopServer 等工具在計算機上創建本地 WordPress 開發環境。

4. 創建主題目錄

首先，您需要安裝父主題。 然後，使用 FTP 客戶端連接到您的開發環境並導航到您的 WordPress 文件所在的位置。

您正在尋找以下文件夾：

 /wp-內容/主題/

您可以在其中找到所有已安裝的 WordPress 主題。 每個主題都有自己的文件夾或目錄，其中包含該主題的所有文件。 您將向列表添加一個新目錄，該目錄將保存您的子主題。 你最終會得到類似的結果：

 /可濕性粉劑內容/主題/您的孩子主題/

5. 創建主題文件

對於我們的示例，我們假設我們使用的是“二十二十二”主題。 您需要安裝該主題，子主題才能引用它。

在新的子主題目錄文件夾中，您將創建兩個新文件：

 樣式.css
主題.json

這兩個文件都有特定的用途。 style.css文件用於向 WordPress 提供有關主題的信息，例如名稱、作者、標籤和父主題 ID。

theme.json文件用於定義全局樣式等中的許多設置。 從開發人員手冊中了解有關 theme.json 的更多信息。

在以前的經典主題中， functions.php文件在子主題中是必需的。 塊子主題不需要這些步驟。

樣式.css

style.css文件中包含哪些內容？ 開發者文檔說：

您的樣式表必須在文件的最頂部包含以下必需的標題註釋。 這告訴 WordPress 有關主題的基本信息，包括它是具有特定父主題的子主題這一事實。

您需要將樣板文件包含在包含標頭信息的style.css文件中。 模板名稱：對應於您正在構建的父主題的文件夾（目錄）名稱。 文本域：名稱對於您的 WordPress 子主題是唯一的。

下面是使用“二十二十二”的子主題示例：

 /*
主題名稱：二十二十二個孩子
主題 URI：https://example.com/
作者：你的名字
作者 URI：https://example.com/
描述：二十二十二兒童主題
至少需要：5.8
測試高達：5.9
需要 PHP：5.6
版本：0.1
許可證：GNU 通用公共許可證 v2 或更高版本
許可證 URI：http://www.gnu.org/licenses/gpl-2.0.html
文本域：thwentytwo-child
模板： 二十二
標籤：自定義顏色、自定義菜單、自定義徽標、編輯器風格、特色圖像、全站點編輯、塊圖案

二十二十二兒童 WordPress 主題，(C) 2021 WordPress.org
《二十二十二兒童》是根據 GNU GPL 條款發行的。
*/

主題.json

請參閱開發人員文檔以更深入地了解 theme.json。 我們來看看二十二十二的 theme.json 文件：

 {
 “版本”：2，
 “設置”：{}，
 “樣式”：{}，
 “自定義模板”：{}，
 “模板部分”：{}
}

其中每一個都有更多可供您選擇的樣式。 例如，在樣式區域中，二十二十二使用：

 {
 “設置”：{
 “外觀工具”：true，
 “顏色”： {
 “雙色調”：[
 {
 “顏色”： [
 “＃000000”，
 “#ffffff”
 ],
 "slug": "前景和背景",
 "name": "前景和背景"
}

需要幫助製作 theme.json 文件嗎？ 查看 themegen.app 以獲取為 theme.json 文件創建許多選項的指南。

6. 自定義您的塊子主題

雖然您可以輕鬆創建 theme.json 文件並將其附加到主題中，但還需要做出一些其他選擇。 子主題甚至塊主題是 WordPress 的一個新領域。 在這篇文章發表時，網站編輯器上顯然有一個測試版標籤。 您需要回顧一下子主題（例如模板部分）中哪些功能有效，哪些無效。

此外，您可能會發現全局樣式和 theme.json 尚不支持的設置。 如果您要添加其他 CSS，例如帶有框陰影的組塊邊框，您可能需要將其添加到style.css文件中。

 .has-primary-border-color {
 盒子陰影：.1rem .1rem .05rem #647BAF ；
}

7.測試你的孩子主題

一旦您覺得您的網站在當前的開發環境中看起來不錯，就可以在上傳到實際網站之前對其進行測試。

  • 在各種瀏覽器尺寸（例如移動視口）中進行測試
  • 在不同的瀏覽器中進行測試或使用像BrowserStack這樣的工具
  • 審查無障礙標準。 開始使用 WebAim

8. 準備上傳您的塊子主題

如果您一直在臨時站點上進行開發，那麼您的文件就位於它們需要的位置。 您可以訪問您的託管選項來推動暫存站點上線。 如果您一直在本地開發人員環境中創建文件，則需要將style.css和theme.json文件一起壓縮為一個 zip 文件並上傳到您的網站。

回顧創建塊子主題

  1. 決定您需要一個塊子主題
  2. 選擇父主題
  3. 配置您的測試環境
  4. 創建您的主題目錄
  5. 創建您的主題文件
  6. 自定義您的塊子主題
  7. 測試您的孩子主題
  8. 將它們上傳到實時網站

與 WordPress 中的經典主題一樣，塊主題仍然需要一個位置來存儲自定義設置，當父主題收到更新時，這些自定義設置不會被覆蓋。 創建塊子主題使您能夠添加、鎖定和省略網站上其他用戶可用的選項。