WordPress 全站編輯：深入指南 (2024)

WordPress 5.8 首先使用範本編輯器進行完整的網站編輯。 而現在，最新版本讓您全面體驗本次重大更新的各個面向。

FSE 的視覺化編輯功能和使用者友好的功能可讓您更輕鬆地處理網站的不同部分。 但需要多長時間才能熟悉這些新變化並享受無縫的編輯體驗呢？ 繼續閱讀此博客，了解您需要了解的有關 WordPress 完整網站編輯的所有資訊。

在我們開始學習完整網站編輯引入的新變更之前，讓我們先了解 WordPress 完整網站編輯。

什麼是 WordPress 全站編輯？

完整的站點編輯基本上圍繞著區塊的概念運行。 以前，網站的內容區域可以透過區塊進行編輯。 透過完整的網站編輯，您網站的每個部分都將被視為一個區塊。

這項重大更新允許使用者在單一介面上使用全域和頁面元素。 此外，它還引入了新的開發工具和新的主題設定檔。

將 WordPress 版本升級到 5.9 後，您將需要啟動完整的網站編輯主題，例如「二十二十二」。 之後，您可以僅使用古騰堡區塊建立整個網站。

全站編輯對您有什麼好處？

完整的網站編輯使建立和設計 WordPress 網站比以往任何時候都更容易。 您可以使用相同編輯器來定義全域元素並在頁面上進行任何變更。

什麼是全域元素？

全域元素是分配後可以部署在整個網站上的元素、容器和列。

這種新方法可讓您在網站或任何單一頁面上進行更改，從而節省時間。 您在編輯時可以看到所有即時更改，因此您不必在編輯器之間切換來追蹤這些更改。

因此，當您同時在全局和頁面層級上工作時，您的網站設計會得到改善。

如何在 WordPress 6.4 上啟動完整網站編輯

預設情況下，WordPress 6.4 版本上未啟動完整網站編輯。 但是，您可以按照以下簡單步驟啟動該功能：

注意：如果您使用的 WordPress 版本早於 5.9，則必須先更新 WordPress 版本，然後啟動 FSE 主題才能使用完整的網站編輯功能。

• 前往您網站的儀表板。
• 您將看到目前的 WordPress 版本和主題。

• 如上圖所示，我們使用的是「二十二十一」主題，因此我們必須更新它。
• 點選外觀>主題。

• 找到「 Twenty Twenty-Two 」主題或任何其他 FSE 主題，然後按一下「啟動」 。

• 啟動後，點擊“外觀”以看到“編輯器”的新選項。
• 單擊編輯器。

• 好了，完整的網站編輯功能已被啟動。 現在開始嘗試並設計您的網站。

WordPress 完整網站編輯：有什麼新功能？

完整的網站編輯簡化了 WordPress 網站的建置和設計，讓使用者無需編碼即可從頭開始建立網站。

它的網站編輯器可讓您建立、預覽和編輯範本。 您可以透過樣式介面選擇預設樣式，並使用這些區塊來建立整個網站。 還有更多，讓我們了解完整網站編輯器引入的新變化。

網站創建

如前所述，透過完整的網站編輯，頁面或範本的每個部分都被視為一個區塊。 您可以透過模板部分建立頁面或使用單一模板。

此外，您可以在新的網站編輯器中建立、編輯和預覽模板和模板部分。 此外，您還可以找到模板清單：

定制器和小部件菜單鏈接

當您啟動完整的網站編輯主題時，自訂器和小工具將從 WordPress 儀表板的「外觀」標籤中消失。

發生這種情況是因為完整的網站編輯主題僅基於區塊，因此定制器和小工具標籤被隱藏。 但是，如果您啟動任何使用定制器的插件，則可以使它們重新出現。

預設版式和顏色

網站編輯器引入了一個名為「樣式」的新側邊欄面板，位於螢幕的右上角。 點擊它可以選擇排版、顏色和佈局。

「樣式」標籤中的區塊選項可讓您自訂特定區塊和整個網站的外觀。 您會在區塊中找到段落、圖像、標題、按鈕、清單等選項。

主題作者的新功能

在 FSE 之前，開發人員使用 PHP 為 WordPress 主題編寫程式碼。 現在，他們可以更專注於 HTML 和區塊標記。

在設計中，塊模式和全局樣式比定制器更重要。

塊狀圖案

區塊模式是一組構成可重複使用佈局的元件/區塊。 此外，FSE 還提供了一個模式瀏覽器來預覽模式並透過區塊插入器在您的內容中使用它們。 這使您可以將圖案的多個副本添加到任何頁面並對其進行編輯。

此外，模式資源管理器不會將您限制在網站上的主題模式，但您可以從 WordPress 儲存庫模式庫中選擇任何模式。

區塊模式對於主題開發人員非常有用，因為字體和顏色選項是透過「樣式」管理的，從而可以更輕鬆地創建模式，而無需在自訂器中進行編碼。

如何建立和註冊區塊模式

在建立區塊模式之前，您應該確定區塊的用途。 它是表單、功能部分還是英雄部分？ 一旦決定，就可以在編輯器中組合塊來製作圖案。 最後，使用區塊標記作為值來註冊區塊模式。

您可以使用 PHP 函數 register_block_pattern 和 init 掛鉤來註冊區塊模式。 請依照以下步驟操作：

• 在主題中建立一個資料夾並命名其模式。
• 建立 PHP 文件，其中包含以下程式碼：

 函數 prefix_block_pattern() {
register_block_pattern( ... );
}

add_action( 'init', 'prefix_block_pattern' );

• 將此檔案包含在您的functions.php 中。

您應該在區塊模式中使用預設內容嗎？

用戶更喜歡用一些演示內容來替換它，從而使過程更容易。 添加演示圖像以“通知用戶”來替換它們。 由於圖像儲存在主題本地，因此如果使用者更改主題，演示圖像將會遺失。

要了解有關製作圖案的更多信息，請閱讀 WordPress 培訓團隊的詳細文件。

主題區塊

在 FSE 之前，元素放置是透過區塊編輯器中的範本完成的。 但是，您可以使用完整的網站編輯器來新增所有這些元素並透過主題區塊設定它們的位置。

您可以透過主題塊控制頁面佈局，這使您擺脫了主題及其模板設定的邊界。 FSE 甚至更進一步，讓您在不同頁面上使用不同的主題元素。

此外，您還可以透過建立自訂範本並完全控制網站訪客存取您的內容的方式來組合區塊編輯器和主題區塊。

重新啟用和更新插件

插件增強了用戶體驗，並使開發人員可以輕鬆地進行快速更改。 幾乎每個響應式且用戶友好的 WordPress 網站都支援一些外掛程式。 但是，這些外掛程式必須隨著 WordPress 的每次更新而更新，因為某些版本可能不支援它們。

最佳實踐是定期檢查您的插件清單並查看哪些插件需要更新。 使用 FSE，您將需要重新訪問您的插件列表，看看其中是否有任何不相容或需要更新。

您可能還需要重新啟用一些先前停用的插件才能獲得無故障的體驗。

範本

模板是包含區塊模式、屬性等的佈局，是 WordPress 主題檔案的一部分。 通常，它們是早期 WordPress 版本中包含一些 HTML 的 PHP 檔案。

但是，對於 FSE，這些模板檔案不是包含區塊標記的 HTML 檔案。 它們現在包括內容區域和模板部分，也可以在其他模板中重複使用。

如何使用完整網站編輯器建立主題

使用完整的網站編輯器建立主題變得比以往更容易。 在網站編輯器中使用不同的區塊和模式，您可以建立自己選擇的佈局。

完成設計後，您可以將其匯出為 .zip 檔案。

請按照以下步驟編輯您的主題並將其匯出。

• 前往您的WordPress 儀表板
• 點擊外觀>編輯器
• 根據您的需求編輯主題
• 點擊螢幕右上角的三個垂直點
• 點擊“匯出”將主題匯出為壓縮文件

注意：壓縮檔案包含一個名為 theme 的資料夾以及兩個名為 templates 和 parts 的子資料夾。

Theme.json — 主題配置文件

theme.json 是一個新的主題配置文件，對區塊主題和經典主題都有幫助。 該文件可以幫助您啟用和停用不同的功能、為「樣式」介面指派值以及建立自訂 CSS 屬性。

主題開發人員使用 JSON 來設定預設屬性，例如顏色、字體、填滿、內容寬度等。

WordPress 社群對 FSE 有何看法？

如您所見，此主要更新包含一些重大變更。 我們聯繫了多位 WordPress 專家，了解他們對完整網站編輯的看法，以下是他們的看法：

Robert Jacobi – Cloudways WordPress 總監

自 Gutenberg 推出以來，在抽象 Web 開發的複雜性方面取得了穩步的進展。 現在，越來越多的用戶可以輕鬆進入 WordPress 來創建和發布令人驚嘆的內容。 對使用者體驗的關注達到了頂峰，即全站編輯 (FSE)。 不久前，FSE 已作為 WordPress 核心的一部分推出。

我在測試版、候選版本以及現在的「最終版」FSE 期間一直在嘗試 FSE。 為什麼要在引號中加上“最終”，因為這只是允許主題提供者和其他外掛程式發展全新 FSE 生態系統的第一步。

就我最初的體驗而言，總的來說，FSE 是對我們過去幾年所習慣的模組的驚人的升級。 無需典型的頁面建立器即可管理主題的元件是一種解放的體驗。 在大多數情況下，切換主題可以按預期工作，並且您與其中一個主題的工作可以令人驚訝地很好地交叉。

但並非總是如此，正如許多首次發布的功能一樣，偶爾會出現拉扯頭髮和打嗝的情況。 塊空間並不總是清晰的，並且可能使編輯體驗變得混亂，即使前端的一切都按預期工作。 當然，這些問題將會穩定減少，更強大的功能也會隨之而來。

雖然有人可能擔心這種易用性將如何影響開發人員，但我認為這種擔憂被誇大了。 科技必須努力與大多數人的工作方式和理解科技的方式更加緊密地連結在一起。 這種基本功能的抽像是我們所期望和需要的。 第三方提供者絕對會找到方法來擁抱和擴展這第一步。

Milana Cap – XWP 專家

不確定我是否應該被稱為專家，但我總是有自己的觀點。

我認為現在是更廣泛的社區認識到古騰堡和 FSE 將會繼續存在的時候了。 世界上所有的氣喘吁籲都不會改變這個事實或幫助你實現你的目標。

我們已經過了「誰問我是否同意這個，誰來決定採用什麼核心內容以及為什麼」的問題。 現在只關乎您自己在 WordPress 商業世界中的生存。

另一方面，如果我們所有人都嘗試弄清楚如何使用古騰堡（還不算太晚，它仍處於測試階段）並學習如何在適當的設定下實現它提供的優勢（因為它仍然不是強制在所有環境中使用）有時，至少現在還沒有）會有多種好處：

• 一些錯誤和缺陷會更快地暴露出來並修復
• 所需功能清單將盡快編制
• 文件處理過程將會變得更快
• 優質課程和其他內容將盡快推出
• 我們所有人都將準時為 FSE 過渡做好準備
• 我們不會重蹈古騰堡的覆轍，因為對發布沒有做好準備

而且，回想起來，Gutenberg 是開源歷史上第一個將 PHP 和 React 捆綁在一個 CMS 的案例。 準確地說，CMS 運行著整個互聯網的 40%。

如果有人期望如此艱鉅的任務能夠順利完成，我想提醒您，您上次嘗試將 PHP 和 Javascript 結合起來是多麼順利。

Aleksandar Predic – 技術顧問：Blexr | WordPress 專家

過去，我被要求重寫一個大型網站的整個程式碼。 在做任務的過程中，我體會到以下幾點：

• 古騰堡足夠穩定，可以在沒有任何重大挑戰的情況下使用
• 我在文件中找到了完成任務所需的幾乎所有內容（對文件團隊來說太棒了）或挖掘古騰堡程式碼
• 網站效能結果是頂級的，古騰堡透過使用更少的腳本來實現這一結果

塊狀圖案非常棒。 真的很有用。 我沒有從內容團隊編制的清單中開發出血腥的黑色，而是將這些圖案保存在一個文件中，以便使用。 這為我節省了大量的開發時間和維護時間。 塊模式是核心團隊維護的，而不是開發人員維護的。

此外，這些模式可讓您在模組中開發複雜的設計，稍後您可以將其與區塊模式組合在一起。 這一點特別重要，因為它簡化了模組（單個區塊）並減少了潛在錯誤的數量，從而使模組更易於測試和維護。

我還致力於評論模板頁面的混合設計。 要求的設定是需要在後端有 4 個不同的部分來新增計劃的內容。 版麵包括 4 個不同的內容選項卡，內容類型完全不同。

我研究了在執行任務時實施 FSE 的潛在方法。 然而，我無法執行我的想法，因為當時基礎設施還沒有為 FSE 做好準備，文件也沒有完成。

FSE 將是針對該特定情況的理想解決方案。 如果沒有 FSE，我必須使用一個管理內容部分中的區塊來建立混合解決方案。 古騰堡幫了我很大的忙，因為最終我設法獲得了一個工作流程，用戶可以使用 REST API 收集的數據填寫整個頁面，只需單擊一下即可。

作為一名開發人員，我看到 FSE 並不理想的情況。 許多公司對一個用戶（例如內容編輯者）可以點擊網站並編輯每個組件這一事實並不感到興奮，從而否定了設計和開發團隊所做的大量工作。

擁有虛擬助理但沒有接受過技術教育的公司尤其容易面臨「災難發生之前只有少數客戶」的問題。 這些公司更喜歡對網站的最大部分進行編碼，而不是在網站的資料庫中。

快速總結： FSE 非常棒。 它使工作變得更容易。 目前的wp主題概念正在我們眼前發生變化。 客戶獲得了更多的自由。 但對老式開發的需求始終存在，因為 FSE 並不適合所有人。

最後有一點免責聲明：這只是我目前的觀點，基於我玩 FSE 的幾次。

Nikola Štulic – Codeable 認證 WordPress 專家開發人員

期待已久的全站編輯功能終於來了。 這帶來了許多新的機會，因為現在我們將能夠為那些喜歡在沒有我們幫助的情況下發布新內容或編輯現有內容的網站所有者提供更好的編輯體驗。

許多開發人員（包括我）總是對「徹底」的改變持懷疑態度，主要是當客戶可能破壞我們幾天、幾週甚至幾個月建造的東西時。

FSE 允許編輯者控制樣式、頁首、頁尾或側邊欄。 我們仍然需要看到最終結果，但目前，FSE 不僅僅是一個好的功能。

它開闢了一條全新的前進之路。 我堅信 WordPress 會透過這個新功能變得更大，因為新用戶將會到來，那些喜歡 DIY 方法的用戶。

Nick Diego – 開發者倡議者 | WP引擎

誠然，我有偏見，但除了塊編輯器本身之外，全站編輯 (FSE) 是過去十年 WordPress 中最令人興奮的功能。 FSE 承諾提供幾乎無程式碼的解決方案，並具有 WordPress 的強大功能和靈活性。 經過一些培訓，不具備 Web 開發知識的使用者就可以選擇基於區塊的主題，並從單一介面設定整個網站。 簡直就是魔法！

現在重要的是要記住，FSE 是功能的集合，包括網站編輯器、主題區塊、模板編輯、全域樣式等等。 WordPress 5.9 只是該功能套件的首次亮相。 計劃進行許多迭代，並進行額外的增強和微調。

目前，我鼓勵每個 WordPress 開發人員開始探索基於區塊的主題和區塊開發（如果您還沒有這樣做的話）。 將 Gutenberg 外掛程式與任何新專案一起使用，因為它包含所有最新的 FSE 功能，並且是 WordPress 6.0 的預覽版。 您可能會發現問題和錯誤。 您甚至可能會發現您不同意的開發決策。 沒關係！

WordPress 的優點之一是它的彈性。 許多 FSE 功能都是可選的，但不是全部。 這一直是一個癥結所在，特別是對於各機構而言，並且計劃在未來採取更多控制措施。 社群也對可訪問性、使用者權限等方面存在擔憂。 這些擔憂是有道理的，需要解決。 我們必須坦誠地指出缺點，以便改進。

如果您確實發現問題，我懇請您在 GitHub 上提出問題，或聯絡我和 WordPress 領域的其他開發者倡導者。 我們熱衷於讓 WordPress 成為所有用戶的最佳選擇。

我堅信 FSE 是 WordPress 的未來，但我們才剛開始這個令人興奮的旅程。 如果您想了解更多信息，請查看 WordPress 社交學習每週的教育課程，其中許多課程都圍繞著 FSE 主題。 我希望能夠見到你。

最後的想法

FSE 代表了頁面建立體驗的革命，為最終用戶提供了比以往更多的控制權。 完整的網站編輯使您免於處理編碼複雜性，因為一切都是透過區塊進行管理的。 然而，仍然存在巨大的空白，可能會在未來的 WordPress 版本發布中填補。

有些人擔心 FSE 會搶走設計師和開發人員的工作。 雖然 FSE 確實為使用者提供了完全控制權，但網站設計者和開發人員仍然可以對其進行自訂以使其充分發揮作用。

引用 Milana Cap 的話說：“FSE 將繼續存在。” 現在是我們擁抱新變化並充分利用它來為我們謀取利益的時候了。