WordPress 和全站編輯:如何創建子主題和塊主題

已發表: 2022-12-09

什麼時候應該為 WordPress 使用子主題? 如果您打算對代碼進行任何自定義更改,那麼創建子主題很重要。

這樣,當主題更新時,對代碼的任何自定義更改都不會被覆蓋。

傳統上,在使用 WordPress 時,這需要復制 functions.php 和 style.css 來創建子主題並將子主題排入父主題。

由於Full Site Editing中的文件結構不同,需要進行一些調整才能找到所有合適的文件。

幸運的是,隨著 WordPress.org 創建的Create Block Theme 插件的創建,不僅創建子主題而且創建完全自定義的主題或樣式變​​體比以往任何時候都容易。

創建塊主題插件 WordPress.org 插件存儲庫的屏幕截圖,2022 年 12 月

在 WordPress 上設置創建塊主題插件

首先,您需要安裝並激活要為其創建新主題或子主題的 WordPress 塊主題——在本例中,我使用的是 Twenty-Twenty-Two。

二十二主題 WordPress 儀表板的屏幕截圖,2022 年 12 月

接下來,執行以下步驟:

轉到插件>添加新插件

在搜索窗口中,找到“創建塊主題”。

單擊安裝並激活

插件頁面 WordPress 儀表板的屏幕截圖,2022 年 12 月安裝插件後,您將在Appearance 下看到一些新選項,包括Create Block ThemeManage theme fonts

外觀選項 WordPress 儀表板的屏幕截圖,2022 年 12 月

創建一個 WordPress 子主題

Create Block Theme 插件是為塊創建子主題的極其簡單的方法,包括完整站點編輯主題。 該插件將自動創建 parts 文件夾、templates 文件夾、theme.json 和 style.css。

安裝插件後,您就可以創建子主題了:

  • 外觀下,選擇創建塊主題
  • 接下來選擇Create child of Twenty-Twenty-Two (如果您選擇了不同的主題,它將列出該主題)。
  • 在右側填寫主題名稱、主題描述、主題URI、作者、作者URI。
  • 單擊藍色的生成按鈕創建子主題。
兒童主題信息 WordPress 儀表板的屏幕截圖,2022 年 12 月

您的子主題將導出為 zip 文件。

兒童主題 zip 文件 生成的子主題文件的屏幕截圖,2022 年 12 月

Appearance > Themes下,單擊Add ThemeUpload Theme,然後選擇生成的 zip 文件。

轉到主題並確保您看到新的子主題。

為 WordPress 子主題創建自定義圖像

該插件的一個缺點是它不允許您為子主題添加 screenshot.png ,也不能使用父主題提供的截圖。

這可以很容易地修復,並為您的子主題提供一個很好的自定義觸摸。

使用您最喜歡的圖像編輯器,創建一個大小為 1200 像素 x 900 像素的新圖像,並將其命名為 screenshot.png。

將新的 screenshot.png 放在您創建的子主題的文件夾中。

子主題中的文件 WordPress 子主題的主題文件截圖,2022 年 12 月

導航回主題,您的新圖像應該與您的子主題一起出現。

活躍的兒童主題形象 WordPress 儀表板的屏幕截圖,2022 年 12 月

既然在塊主題上設置了子主題,就可以在不覆蓋父主題文件的情況下theme.json和 style.css 模板文件進行更改。

這樣,可以毫無問題地更新父主題。

您還可以導出具有所做更改(例如圖像)的新子主題,以用作新安裝的父主題的子主題。

在 WordPress 上創建自定義塊主題

Create Block Theme 插件提供了許多選項來創建您自己的主題。 您可以克隆當前主題並使用該主題作為模板進行您自己的自定義更改。

完成更改並對它們感到滿意後,您就可以使用該插件導出包含您所做的所有更改的主題,以便在其他網站上使用您的新主題。

此外,您可以創建一個完全空白的新主題,將當前主題用作樣板。 這是製作完全定制的東西的好方法。

要製作一個全新的主題,請執行以下步驟:

創建塊主題下,選擇創建空白主題

填寫右側的所有信息,為其命名並添加您的名字作為創建者,然後點擊生成

創建空白主題 WordPress 儀表板的屏幕截圖,2022 年 12 月

您的新主題將作為 zip 文件下載。

Appearance > Themes下,您可以上傳並激活您的新主題。

如果要為 screenshot.png 添加自定義圖像,請執行與子主題相同的步驟。

激活新主題並將其用作新主題的起點。

新的空白主題 WordPress 儀表板的屏幕截圖,2022 年 12 月

使用圖案、塊、模板部件和样式編輯器來構建您想要的外觀的新主題。

完成新主題的工作後,返回外觀>創建塊主題並導出新主題,其中包含您對其所做的所有更改。

它將導出為 zip 文件,並可以上傳到任何新的 WordPress 安裝。

管理 WordPress 主題字體

Create Block Theme 插件的另一個很棒的功能是能夠輕鬆地為主題添加和刪除字體。

通常,要向主題添加新字體,需要下載字體,將其添加到 fonts 文件夾中,然後在 functions.php文件中排隊,或者需要將Google 鏈接添加到代碼中。

添加多種字體會使過程更加複雜。

使用該插件,可以從您的自定義主題或您已安裝和激活的主題中輕鬆添加或刪除計算機中的Google 字體本地字體

對於 Google 字體,單擊添加 Google 字體,下拉窗口將為您提供可用的 Google 字體列表。

選擇字體,選中復選框並單擊按鈕將 Google 字體添加到您的主題中。

管理主題字體 WordPress 儀表板的屏幕截圖,2022 年 12 月
添加谷歌字體 WordPress 儀表板的屏幕截圖,2022 年 12 月

添加您下載的本地字體是一個類似的過程。

點擊添加本地字體,上傳字體文件,填寫字體名稱、樣式和粗細,點擊按鈕將本地字體上傳到您的主題。

本地字體 WordPress 儀表板的屏幕截圖,2022 年 12 月

輕鬆製作 WordPress 兒童主題

使用完整站點編輯創建塊主題插件,創建您自己的主題和样式變體比以往任何時候都容易。

使用插件而不是手動排隊文件和更改代碼使子主題創建和添加新字體成為一個簡單的過程。

與插件一起使用時,模式樣式變化可重用塊是創建您自己的自定義主題的非常簡單的方法,您可以導出並再次使用。

所有這些都無需觸摸任何主題代碼。

更多資源:

  • 如何在 WordPress 中創建自定義 404 頁面
  • 如何為 SEO 選擇最佳 WordPress 主題
  • 高級技術 SEO:完整指南

特色圖片:Kaspars Grinvalds/Shutterstock