如何在 WordPress 中從經典主題切換到塊主題
已發表: 2023-09-12如果您是 WordPress 開發人員或網站所有者，您無疑聽到過許多有關網站編輯器的讚揚。 這個強大的工具使用戶能夠使用塊編輯其網站的每個組件 - 從頁眉和頁腳到模板。
但是，要利用站點編輯器，您需要在站點上安裝並激活塊主題。 從經典主題切換到塊主題的過程可能看起來很複雜，但無論您是在自己的網站上工作還是改進客戶的網站，都是值得的。
讓我們探討為什麼您可能想要切換到塊主題以及如何安全有效地做到這一點。
WordPress 有哪些不同的主題選項？
WordPress 中提供了多種不同類型的主題，了解它們之間的差異將幫助您確定適合您情況的最佳解決方案。
1.經典主題
WordPress 經典主題存在時間最長，並且是使用基於 PHP 的模板構建的。 它們通常不像塊主題那麼靈活，網站所有者使用定制器和小部件區域來進行設計更改。 經典主題通常更難以自定義，尤其是對於全局站點元素和模板。
如果您在 WordPress 社區工作了很長時間，您肯定熟悉經典主題。
2. 塊主題
塊主題是使用完全由塊組成的 HTML 模板構建的。 網站所有者不使用小部件和定制器，而是使用網站編輯器進行更改。 這提供了更大的靈活性，使用戶能夠編輯從頁眉和頁腳到帶有塊的模板的所有內容。
WordPress 從 5.9 版本開始就支持塊主題，並且有一些出色的選項可供選擇。
3.混合主題
混合主題正如它聽起來的那樣——經典主題和塊主題的混合。 它們提供了經典主題的一些傳統編輯體驗，以及塊主題的更高級工具。
從本質上講，混合 WordPress 主題是結合了塊主題的一個或多個方面（例如站點編輯器或theme.json文件）的經典主題。
4. 通用主題
通用主題允許用戶充分利用站點編輯器，但也可以設置為使用經典的 WordPress 元素，例如定制器和小部件區域。 這些旨在本質上“彌合區塊主題和經典主題之間的差距”。
為什麼要切換到塊主題？
現在我們已經接觸了不同類型的主題，我們將了解為什麼值得從經典主題切換到塊主題。
1. 性能提升
在構建網站時，性能始終是首要考慮因素，因為它影響從用戶體驗到轉化和搜索引擎排名的一切。 塊主題通常比經典主題更快，因為它們僅加載頁面上呈現的塊的樣式。
在許多情況下，您還可以使用 WordPress 塊編輯器的內置功能來避免沉重的插件給您的網站帶來負擔。
2. 易於更新和更改
當您可以使用塊編輯所有內容時，設計和更新過程就會變得更簡單、更快。 開發人員可以通過拖放塊而不是編輯經典主題模板來構建 WordPress 網站並在更短的時間內為客戶進行更改。 借助可重複使用的塊等功能，您可以更聰明地工作，而不是更辛苦。
網站所有者還可以更改其 WordPress 網站，甚至是博客文章、產品頁面和 404 頁面的模板，而無需使用代碼。 這意味著他們不太可能破壞網站，同時可以避免使用繁重的頁面構建器插件。
3. 跟上 WordPress 未來的能力
塊主題和站點編輯器是 WordPress 發展方向的主要部分。 這些工具為每個人提供了無限的在線可能性，包括那些不認為自己“精通技術”的人。
正如 Matt Mullenweg 所說，“[它]迎接了我們的挑戰和機遇，同時使在 WP 生態系統中謀生的每個人受益。 這不僅僅是區塊。”
因此，這些功能正在不斷發展和改進。 每一次迭代，它們對於網站所有者和開發人員來說都變得更加強大和有效。 隨著 WordPress 繼續朝這個方向發展，請不要落後。
4. 使用塊編輯站點所有部分的能力
到目前為止，我們已經對此進行了一些討論，但靈活性絕對是使用塊主題的最大好處之一。 除了使用塊構建頁面和帖子之外，您還可以自定義網站的幾乎所有部分，包括：
- 頁眉和頁腳
- 頁面和帖子模板
- 購物車和結賬頁面
- 產品和存檔頁面
- 404 和搜索頁面
這為希望為自己和客戶節省時間的開發人員以及網站所有者（無論其經驗水平如何）提供了更好的體驗。 此外，它使您能夠製作真正獨特的 WordPress 網站設計，超越開箱即用的模板，而無需花費大量時間編輯代碼。
5. 內置輔助工具
網站編輯器在構建時考慮到了可訪問性。 跳至內容、鍵盤導航和地標等輔助功能會自動生成，開發人員無需添加任何代碼。 通過將這些責任從主題開發人員手中解放出來，主題可以更輕鬆地供所有人使用。
6. 如果需要，將來能夠更輕鬆地切換主題
對於經典主題，您更加依賴於靜態模板、小部件和頁面構建器等主題組件。 如果您想切換主題，則需要大量工作，通常涉及重新創建網站的大部分（如果不是全部）。
但是，如果您繼續從經典主題切換到塊主題，那麼將來更改主題將會簡單得多。
因為所有內容（甚至模板和全局站點元素（如頁眉和頁腳））都將基於塊，因此您無需在每次切換主題時重新創建它們。
切換之前需要採取哪些實際步驟？
準備好從經典主題切換到塊主題了嗎？ 首先需要採取一些步驟來確保事情順利進行。
1. 備份您的網站
在進行任何重大更改之前，對網站進行備份始終很重要。 如果出現問題，或者您只是想恢復操作，您網站的副本將非常寶貴。
雖然您可以手動執行此操作，但最好的解決方案是使用實時備份插件，例如 Jetpack VaultPress Backup。 每次您進行更改時，此工具都會保存網站的副本，因此您手頭上始終有一個。 即使您的網站完全癱瘓，您也可以輕鬆快速地恢復備份。
2. 在暫存環境中測試
在暫存環境中切換到塊主題至關重要。 這將為您提供一個安全的地方來進行所有更改，並確保一切正常工作，同時您的 WordPress 網站仍然可用。 然後，一旦準備好，您就可以輕鬆地推送帶有新主題的網站。
許多託管提供商在其託管包中包含臨時環境。 或者，您可以使用 WP Staging 等插件。
了解有關創建暫存站點的更多信息。
3.複製您的小部件內容
小部件是經典主題的重要組成部分，但不用於塊主題。 因此，請花點時間保存您想要保留的任何小部件內容。
例如，如果您有一個小部件主頁模板，請複制您想要保留的任何文本並保存以供將來參考。 或者，也許您在側邊欄中有一個強有力的電子郵件通訊號召性用語。 您需要保存所有這些信息，以便可以在塊主題中重新創建它。
4.確保您的插件兼容
確保您使用的任何插件都能與您要切換到的塊主題配合良好。 在許多情況下，這不會成為問題。
但是，例如，如果您的 WordPress 網站是使用特定於主題的頁面構建器構建的，則您將無法將該工具與新的塊主題一起使用。 或者，如果插件使用小部件工作，您需要確認它也有提供相同功能的可用塊。
以下是插件可能無法與您的塊主題一起使用的其他一些情況：
- 設計用於編輯經典菜單而不是導航塊的工具
- 用於管理不適用於評論塊的評論的插件
- 為使用 WordPress 定制器而構建的工具
然而，正如我們之前提到的，大多數已建立的 WordPress 插件正在適應與塊主題、站點編輯器和 WordPress 的未來無縫協作。
5. 保存任何自定義代碼
檢查您可能在當前主題文件中創建的任何自定義代碼。 例如，您可能已將 PHP 添加到functions.php文件或將CSS 添加到style.css文件。
還要復制您添加到 WordPress 定制器的“附加 CSS”部分的所有內容以及您可能使用的任何跟踪代碼，例如 Facebook Pixel。
如何在 WordPress 中從經典主題切換到塊主題
所有內容都保存並備份了嗎？ 那麼我們就開始吧！
此過程將非常依賴於您使用的經典主題以及您切換到的塊主題。 有些轉換需要更多的工作，特別是如果您的網站主要使用小部件和自定義代碼構建的話。
因此，請了解以下步驟是一個框架，您可能需要在其中進行嘗試才能準確實現您想要的目標。
1.選擇並激活您的新塊主題
您的第一步是安裝並激活您的塊主題。 請記住，您應該在臨時環境中執行此操作，以便您的實時站點不受影響。
如果您尚未選擇塊主題，則有很多選項可供選擇，包括 WordPress.org 主題存儲庫中的大量免費主題。
轉到“外觀”→“主題” ，然後單擊頂部的“添加新內容” 。 在那裡，您可以滾動瀏覽各種主題，按名稱搜索主題，甚至可以通過將鼠標懸停在主題上並選擇“預覽”來預覽主題。
做出選擇後，只需單擊“激活”即可。 出於本示例的目的，我們將使用“二十二十三”主題。
2. 設置全站樣式
您的下一個任務是設置主題的樣式。 這允許您選擇 WordPress 網站的某些方面在整個站點級別的外觀。
為此，請轉到外觀 → 編輯器。 這將打開站點編輯器。 然後，單擊左側菜單中的樣式。
讓我們仔細看看您可以使用的選項。 首先，您將看到預構建樣式集合的網格，您可以在頁面右側進行切換和預覽。 如果您願意，您可以實施其中之一，以便您在網站設計方面取得領先。
現在，單擊“樣式”旁邊的鉛筆圖標。 這將在頁面右側打開一個新菜單。 單擊版式可查看字體和文本顏色的所有全局選項。 您可以編輯從段落到標題和按鈕的所有內容的字體系列、外觀、行高和大小等設置。
通過“顏色”面板，您可以為站點設置調色板，並為背景、文本、鏈接、按鈕等做出顏色決策。
在“佈局”部分中，設置內容區域寬度和填充等選項。
單擊“樣式”面板底部的“塊”以獲取適用於特定塊的選項。 請記住，您在此處所做的任何更改都將應用於全局級別的塊。
讓我們以平鋪畫廊塊為例。 當您在塊列表中單擊此選項時，您將看到顏色、佈局和样式變化的設置。 您還可以添加特定於此塊的自定義 CSS。
能夠在全局級別設置塊和站點元素的樣式可以為您節省大量的開發時間，並確保您可以在整個站點上實現一致的外觀。 無論您是要模仿您正在使用的原始經典主題還是要完全轉向新設計，請花一些時間在這裡按照您想要的方式進行樣式設置。
樣式面板最有趣的功能之一是樣式書，您可以通過單擊右上角的眼睛圖標來訪問它。 這使您可以預覽對各種元素和塊（如標題、段落、引言、表格等）所做的所有設計更改。
3. 構建網站框架
現在您已經設置了樣式，是時候構建網站的框架了，包括：
- 頁眉和頁腳
- 站點導航/菜單
- 博客文章、頁面、電子商務內容等的模板。
您可以通過 WordPress 儀表板中的“外觀”→“編輯器”來訪問所有這些內容。 您將看到幾個選項，包括模板和模式。 模板是博客文章、檔案頁面和產品等網站內容的頁面佈局。 在“模式”部分中，您將找到模板部分，其中包括頁眉和頁腳等元素。 這些都會根據您使用的主題而有所不同。
例如，讓我們看一下標題。 單擊“模式”→“標題”，然後選擇您的特定標題。 您現在可以使用塊來編輯它。 在此示例中，標題具有站點標題塊和導航塊。
您將使用導航塊來創建站點導航，而不是像使用經典主題那樣轉到外觀 → 菜單。
當您單擊導航塊時，選項將出現在該塊頂部的菜單中以及頁面右側的“設置”面板中。 在該“設置”面板中，您將看到列出的菜單中的頁面。 單擊+圖標，然後單擊頁面鏈接或自定義鏈接以將頁面添加到菜單。
您可以使用“設置”面板中的其他選項卡來設置菜單樣式並對站點導航進行其他設計和功能更改。
然後，您可以將塊添加到標題，就像使用您已經熟悉的塊編輯器一樣。 例如，您可能想要添加搜索欄或社交媒體圖標。
一旦您對頁眉感到滿意，請瀏覽任何其他模板部分（例如頁腳）並將它們放到您想要的位置。
現在，讓我們看一下模板。 轉到外觀→編輯器→模板。 在我們的示例中，我們將選擇單一模板，這是博客文章的佈局。
打開模板後，您將看到可以編輯它，就像編輯使用塊編輯器的任何其他頁面或帖子一樣。 您將添加一些默認塊，例如特色圖像塊、帖子標題塊和帖子內容塊。 您可以對它們進行更改、移動它們並根據需要設置它們的樣式。
但您也可以添加將出現在您網站上的所有博客文章中的塊。 例如，您可以添加號召性用語，引導讀者訪問電子郵件通訊註冊表單、聯繫頁面或待售產品。
編輯此模板以及您想要的任何其他模板，並隨時保存更改。
如果您的經典主題嚴重依賴於小部件，您還可以使用小部件導入器工具來簡化遷移過程。 您可以從學習 WordPress 博客觀看完整的教程視頻。
在此處了解有關使用塊編輯器和站點編輯器的更多信息。
4. 根據需要重建或調整任何頁面和帖子
如果您的頁面是使用塊編輯器或經典編輯器構建的，則在遷移到塊主題時可能幾乎不需要任何工作。 使用經典編輯器創建的內容將自動顯示在經典塊中。 您可以選擇經典塊，然後單擊轉換為塊將內容分成塊。
您可能需要對各處的塊進行一些調整和更改。 花一些時間瀏覽您的頁面和帖子，確保一切都符合您的喜好。
5.刪除所有未使用的插件
您永遠不想安裝不需要的插件。 如果您不再需要已安裝的某些插件 - 要么是因為您已將功能替換為塊主題的功能，要么是因為它們不兼容 - 請確保停用並刪除它們。
不必要的插件可能會造成安全隱患並降低您的 WordPress 網站的速度。
6. 全面測試網站
一旦您對網站上的內容感到滿意，請仔細檢查並測試所有內容。 在各種屏幕尺寸上查看您的頁面，測試表單和付款等功能，並確保一切都按照您或您的客戶喜歡的方式運行。
7. 推送新網站設計
現在，使用您的暫存環境來推送更改和新主題。 您從經典主題到塊主題的遷移已完成！
有關從經典主題切換到塊主題的常見問題
您還有其他問題嗎？ 以下是一些常見問題的解答。
如果我還沒有準備好完全切換到塊主題怎麼辦？
如果您對轉變感到緊張，可以採取更漸進的方法。 例如，您可以選擇混合或通用主題，將塊主題的某些元素聯繫起來，同時仍然允許經典主題功能。
然而，塊主題是 WordPress 的未來，並且很快就會成為常態。 在大多數情況下，最好繼續採用這些主題並儘快了解它們。
如何將經典編輯器轉換為塊？
切換到塊編輯器時，使用經典編輯器創建的內容將自動轉換為經典塊。 當您選擇此塊時，您將看到一個菜單，其中包含“轉換為塊”選項。 這會自動將內容分成適當的塊。
在某些情況下，您可能需要進行一些調整才能完全按照您想要的方式獲得內容。
如何在不丟失內容的情況下更改主題？
當您切換主題時，您的帖子、頁面、產品和其他帖子類型中的所有內容都將保留。 同樣的情況也適用於您的媒體庫和數據庫中保存的任何信息。 切換主題只會改變網站的佈局和設計。
話雖如此，最好在切換主題之前創建網站的完整備份。 您還應該在臨時環境中工作，以便您的實時站點不受影響。
經典主題和塊主題有什麼區別？
對於經典主題，網站所有者和開發人員可以使用 WordPress 定制器和小部件區域來進行設計和佈局更改。 經典主題是使用 PHP 構建的，不像塊主題那樣靈活和易於使用。
相比之下，塊主題使用由塊組成的基於 HTML 的模板。 為了進行更改，網站所有者使用網站編輯器和全局樣式，這使他們能夠使用塊編輯網站的每個部分。 這意味著他們可以更改從頁眉和頁腳到模板的所有內容，而無需編輯任何代碼。
古騰堡編輯器和網站編輯器有什麼區別？
如果您聽說過“古騰堡”一詞，您可能想知道它與“塊編輯器”和“站點編輯器”等詞有何不同。 一般來說，這些意味著相同的事情——使 WordPress 用戶能夠使用塊編輯其網站的工具。
然而，“Gutenberg”這個名稱用於在 WordPress 中開發和實現塊的特定項目。 隨著項目接近完成，這個名稱將被停用，WordPress 使用“塊編輯器”和“站點編輯器”作為這些工具的永久名稱。
Gutenberg 插件是 WordPress 的一個免費插件，允許網站所有者在功能作為 WordPress 核心的一部分發布之前對其進行測試。
在哪裡可以了解有關塊主題的更多信息？
您可以在幾個地方了解有關塊主題和塊編輯器的更多信息：
- 學習 WordPress，其中充滿了教程和視頻
- WordPress.org 文檔，其中包括詳細指南
- WordPress.tv，可讓您觀看有關 WordPress 多個方面的視頻教程
- 塊編輯器完整指南，來自 Jetpack 的詳細帖子，其中包含您需要了解的有關塊編輯器的所有信息
完成轉換後，您可以使用帶有 Jetpack 等高級選項的免費插件最大限度地提高網站的性能、安全性和營銷潛力。