WordPress 的發展需要時間才能成熟，但它已經從一個簡單的部落格平臺發展成為一個強大的內容管理系統（CMS），幾乎可以執行整個網路。最大的進步是在建立網站設計方面。WordPress 全站編輯（FSE）是一種雄心勃勃的方式，可以讓每個人都掌握複雜的工具。
本綜合指南將探討 WordPress 全站編輯的歷史和功能。最終目標是向您展示 FSE 的工作原理，讓您像專業人士一樣開發自己的網站設計。
WordPress 設計和佈局建立簡史
瞭解在 WordPress 中設計網站和佈局的演變過程，是理解 FSE 意義的重要部分。經典編輯器（Classic Editor）就是我們現在所使用的核心工具。
WordPress 經典編輯器。
當然，它並不總是 “經典” 的。它一直是 TinyMCE 編輯器–從 WordPress 的第一個版本到 2018 年左右的預設編輯器。這是一個簡單的所見即所得（WYSIWYG）文字編輯器，可以輸入內容和基本 HTML 以及一些格式樣式。事實上，你仍然可以獲得 TinyMCE 編輯器，因為它是一款商業工具：
TinyMCE 編輯器主頁。
TinyMCE 編輯器的主要缺點是缺乏前端預覽選項，靈活性也不如人意。主題框架成為一種可行且強大的替代方案。當然，StudioPress 的 Genesis Framework 仍在我們身邊，但也有一些其他的框架，如 Thesis。
預設的 Genesis Framework 主題。
在這裡，你可以看到我們是如何從文字編輯轉向視覺化網頁設計的。該框架為你提供了 WordPress 後端選項，讓你可以改變前端的各個方面。此外，您還可以獲得更多 “基礎” 功能，如鉤子和過濾器、模板支援等，以進行進一步更改。
不過，對於普通使用者來說，這仍然不是很方便，這就是頁面生成器外掛流行的原因。你可以將它們與 TinyMCE/經典編輯器一起使用，為設計網站提供拖放系統。這些外掛與 2011 年前後的版本基本相同。Divi 和 Beaver Builder 仍是主流，儘管 Elementor 也是一個龐然大物：
Elementor 主頁。
請閱讀下一節，瞭解為什麼我們有 TinyMCE 編輯器和頁面生成器外掛的替代品。
區塊編輯器和 WordPress 全站編輯
WordPress 的受歡迎程度位居第一，但要達到這一地位，它必須捍衛自己的頭銜。多年來，許多其他平臺已經佔據了市場。
Squarespace、Wix、Medium 和其他許多平臺都希望獲得與 WordPress 相同的受眾和使用者群，而在 Block Editor 之前，它們都擁有更好的編輯體驗。
用 Wix 編輯網站。
這是 WordPress 管理層非常擔心的問題，因為當時其他平臺正在獲得更多的關注。競爭對手也擁有現代化、視覺化、高效能的介面，即使是簡單的佈局控制也不例外。
區塊編輯器是一種模組化的網站文章和頁面構建方式，但也有缺點。首先，它的使用範圍有限，這意味著如果要進行任何 “更深層次” 的更改，可能需要使用頁面生成器外掛。此外，您仍然需要開發知識來構建一個完整的網站，而 WordPress 團隊已經找到了解決這一創意障礙的方法。
什麼是 WordPress 全站編輯（FSE）
WordPress 全站編輯是開發網站的最新和最前沿的技術。它建立在使用 “區塊”（Blocks）來拼湊設計的基礎上，涵蓋的內容比單個帖子和頁面更多。FSE 的核心是讓您使用統一直觀的介面來管理 WordPress 網站設計的方方面面。
在 WordPress 站點編輯器中編輯模板。
這是目前編輯網站的 “官方” 方式。它將網站的方方面面都納入了自己的羽翼之下：
- 導航編輯。過去使用 “外觀 > 選單” 構建器螢幕的方法現在納入了站點編輯器。
- 全域性樣式。您可以更好地控制整個網站的外觀和感覺。這包括顏色、排版、間距等。
- 模板編輯。以前這需要開發和編碼知識，如PHP、HTML 和 CSS。現在，您可以使用網站編輯器為網站的不同部分建立和修改模板，而無需程式碼。
- 區塊樣板。這是可重複使用的設計元素，您可以使用區塊集合將其插入佈局中。
隨著編輯器的發展，一些功能也在逐漸消失。例如，你不再需要小工具區域，儘管 WordPress 仍將其作為非塊主題的遺留功能。
我們稍後再討論 WordPress 全站編輯能幫你實現什麼。在此之前，我們先來了解一下為什麼我們需要 FSE。
為什麼在 WordPress 中引入 FSE
WordPress 團隊引入 FSE 有幾個原因。其中一些是技術上的考慮。例如，區塊編輯器不允許我們編輯網站的所有方面，而這些功能本來就應該存在。
很難理解為什麼讓我們在不需要程式碼的情況下處理模板樣式需要這麼長時間。在經典編輯器、框架、頁面生成器外掛和塊編輯器之間，我們從未有過這樣的機會。FSE 以 WordPress 原生的方式解決了這個問題。
站點編輯器中的模板管理螢幕。
這種簡化統一了編輯體驗，並將其置於 WordPress 核心團隊而非第三方開發人員的控制之下。這也意味著學習曲線是一致的。在內容、佈局和設計之間，您從一個螢幕到下一個螢幕都能獲得熟悉的體驗。
這種體驗也帶來了長久性。WordPress 全站編輯功能不會消失，它只會隨著時間的推移而發展。這為平臺提供了一個基礎，以適應核心開發團隊希望為 WordPress 帶來的一切。
總之，這種授權從開發人員延伸到終端使用者。WordPress的全站編輯功能讓每個人都能更好地控制他們希望做出的設計變更，而無需依賴開發人員、複雜的定製或編碼知識。
FSE 的替代方案
對於 WordPress 團隊來說，FSE 不僅是現在，也是平臺的未來。不過，您需要一個相容的主題才能使用它（稍後詳述）。而且，其他 WordPress 企業可能不會同意，尤其是那些擁有競爭產品的企業。
例如，WordPress 網站開發人員會認為，將主題設計交給專業人士是個不錯的主意。我們在很多情況下都會同意這種觀點，尤其是當您有複雜的需求、合適的預算和時間時。
顯示部分 PHP 程式碼的程式碼編輯器。
當然，對於大部分內容建立和定製來說，塊編輯器仍然是可行的。從這個編輯器到完整的網站編輯只需短短的一跳，而且您很可能已經在使用它了：
WordPress 區塊編輯器。
很多使用者在大部分情況下都會使用塊編輯器，然後再引入另一種解決方案。新增頁面生成器外掛可以提供塊編輯器所缺乏的部分功能。Divi、Elementor、Beaver Builder、Brizy 等都擁有強大的功能集，可以進行更深入的定製和開發：
WordPress 中的 Elementor 頁面生成器螢幕。
如果想獲得與 WordPress 全站編輯截然相反的體驗，回到一切開始的地方，您可以選擇全新的內容管理系統：ClassicPress。
ClassicPress 主頁。
該專案的理念是，WordPress 的進化是一個偉大的想法，除了區塊編輯器和 FSE。因此，ClassicPress 分支並不包含它。相反，你將使用經典或 TinyMCE 編輯器建立網站，就像過去一樣。
從本質上講，這是針對塊編輯器首次釋出時的不成熟而提出的單一解決方案。當時，這個概念在理論上是合理的。不過考慮到 WordPress 目前的編輯體驗，選擇 ClassicPress 的理由並不充分。
WordPress 全站編輯的工作原理
簡而言之，WordPress 全站編輯將塊編輯器的功能擴充套件到整個網站。要使用全站編輯功能，您需要一個支援它的 “區塊主題” 或 “全站編輯主題”。稍後我們將詳細介紹。
FSE 工作原理的高階概述非常簡單：
- FSE 使用區塊。就像當前迭代的 WordPress 編輯器一樣，整個網站的每個元件都使用 Blocks。在這裡，單個內容元素和較大的結構元件（如頁首和頁尾）都將使用 Blocks。
- 您可以在 WordPress 中編輯頁面模板。在修改模板檔案時，不再需要 PHP 知識。相反，您可以在網站編輯器中建立和編輯它們。
- 可以使用全站設計工具。我們稍後會介紹全域性樣式面板，但它可以讓你控制影響整個網站的設計元素。在很多情況下，你並不需要自定義 CSS 來實現你的設想。
- 區塊樣板讓你快速構建。與區塊編輯器一樣，常用網站部分也有佈局，你可以不受限制地插入和自定義。
- theme.json 檔案是 FSE 的核心。該配置檔案將定義主題的基本樣式和設定。它是進一步自定義網站的起點，也是開發的 “樞紐”。
大多數使用者執行的 WordPress 版本都不會早於 5.9，但如果你執行的是 5.9，就需要更新以利用 FSE。正如我們所概述的，您還需要一個輔助主題。讓我們快速討論一下。
選擇合適的 FSE 主題
幸運的是，選擇區塊主題和選擇其他型別的主題一樣需要謹慎。您需要關注幾個客觀方面，以確保您下載的是一個強大的解決方案：
- 檢視主題程式碼庫是否定期更新。
- 通過評分和評論瞭解其他使用者對主題的看法。
- 確保開發商能提供滿足您需求的支援。
由於 WordPress 的全站編輯功能剛剛進入平臺，因此可供您選擇的主題較少。但這並不意味著很難找到高質量的主題。許多大型開發商都有自己的 FSE/Block 主題。ThemeIsle 的 FSE 版 Neve 就是其中之一：
Neve FSE 主題主頁。
該主題的 “傳統” 或 “經典” 版本使用了 “外觀” 螢幕中的舊版 “自定義器”。該版本完全整合了網站編輯器，主觀效能更好。
還有其他一些 Block 主題值得關注，如 Portfolio WP 和 Mugistore。不過，Ollie 可以說是其中的佼佼者：
Ollie 主題主頁。
它可以毫不動搖地使用 WordPress 進行全站編輯。它有一個貼心的入門嚮導，甚至還有一個包含大量圖案庫元素和模板的高階版本。
即使是預設的 Twenty Twenty-Four 主題，現在也是您網站的可行選擇：
Twenty Twenty-Four 主題首頁介面。
網站編輯器的功能和深度使我們能夠在通常需要大量程式碼和資源的主題之上進行構建（和擴充套件）。它使構建和開發主題的能力民主化，而主介面則是這方面的第一接觸點。
探索 FSE 主介面
要找到站點編輯器，請導航至 WordPress 的外觀 > 編輯器 ：
WordPress 儀表板中的外觀 > 編輯器連結。
該介面非常簡單。在右側，您將看到佈局預覽。您可以點選它來開啟主頁的網站編輯器介面。左側是一組指向其他編輯頁面的連結，用於完成特定任務。稍後我們將深入瞭解這些介面。
在瞭解 FSE 的五個介面之前，請注意可以使用螢幕左上角的 WordPress 徽標退出站點編輯器。或者，你也可以點選主設計頁面上的 “返回” 箭頭：
站點編輯器設計主頁面。
說完這些，讓我們開始使用 FSE。
WordPress 全站編輯的 5 大支柱
現在，我們將按照網站編輯器導航中出現的先後順序來檢查網站編輯器的每個螢幕。事實上，這將引導我們討論該螢幕！
1. 導航
導航頁面取代了外觀 > 選單頁面。進入後，你會看到網站上的文章和頁面列表：
站點編輯導航頁面。
如果這是一個新網站，您將在這裡看到所有的文章和頁面。這可能會讓人感到困惑，因為它代表了你的主導航選單。在導航標題附近，開啟操作選單。這將提供編輯選單、更改名稱、刪除或複製選單的選項：
在導航頁面中開啟操作選單。
如果點選 “編輯“，則會開啟一個包含導航區塊選單的區塊編輯器版本：
在站點編輯器中使用導航區塊。
在側邊欄中，你可以選擇向上或向下移動每個條目，將其從選單中移除，或從中建立一個子選單：
導航區塊側邊欄
選單中的每個條目都使用頁面連結區塊，該區塊有自己的選項。你可以對內聯格式進行調整，也可以對側邊欄樣式進行設定：
站點編輯器中頁面連結區塊的格式選項。
注意，你可以在這裡新增內嵌圖片、子選單等。這比建立導航的傳統方式更加靈活。要在選單中新增專案，只需點選加號圖示，然後選擇文章或頁面：
將新頁面新增為導航項的選項。
儲存更改後，導航就會反映出你的調整。要建立更多選單，可以使用導航頁面上的 “操作”>”複製” 連結。
2. 樣式
通過 “樣式” 介面，您可以控制網站的整體外觀。側邊欄為不同的設計提供了一些不同的調色盤和排版設定：
站點編輯器的 “樣式” 螢幕。
點選其中任何一個，都會顯示網站上的設計。不過，側邊欄頂部有一個編輯鉛筆圖示，可以在網站編輯器中做進一步更改：
站點編輯器樣式側邊欄中的可用選項。
側邊欄中的每個選項都涵蓋了顏色、佈局、排版甚至陰影設定。例如，你可以選擇整個網站的字型，並將它們應用到設計的各種元素中：
站點編輯器側邊欄中的排版設定。
深入選單通常還能獲得更多選項，如間距、顏色等。佈局部分可以讓你自定義主要內容區域的尺寸，以及填充和塊間距：
WordPress 站點編輯器中的佈局選項。
如果你想在不瀏覽網站的情況下檢視這些更改的效果，可以使用 “眼睛” 圖示開啟 “樣式手冊”。這是一個方便的視覺化工具，設計師們一定會喜歡：
WordPress 站點編輯器的樣式手冊。
最後，雖然我們不會在這裡重點介紹，但您也可以為網站自定義每個區塊的外觀。例如，您可以在段落塊的全域性樣式基礎上進行設計。同樣，完成後，你可以儲存更改，這些更改將應用於你的網站。
在 WordPress 全站編輯中使用 theme.json 檔案
在進入下一個 FSE 螢幕之前，你應該瞭解一下 theme.json 檔案。它本質上是開發人員版本的 “樣式” 介面。
一個程式碼編輯器中的 theme.json 檔案。
通過它，你可以為網站及其區塊定義預設樣式，並將其作為配置檔案使用。此外，它還使用 JSON 格式，因此與過去相比，它提供了一種程式碼較少的體驗。
總之，無論你在 theme.json 中做什麼，你都可以在站點編輯器中做。
3. 頁面
頁面螢幕複製了 WordPress 面板中經典的 “文章”和 “頁面” 螢幕的功能。例如，你會看到一個狀態列表，可將頁面過濾為已釋出、已計劃、草稿和其他狀態：
站點編輯器中的 “頁面” 介面。
每個頁面都有額外的操作，如編輯、檢視、重新命名和刪除。你還可以使用 “鉛筆 “圖示編輯頁面。在列表頂部，有一個新增新頁面按鈕，它的作用顯而易見。
如果你已經使用過區塊編輯器，那麼這些介面會讓你感覺很熟悉。不過，雖然這裡的功能和平時一樣，但站點編輯器還提供了一些額外的主題區塊來幫助你建立網站。它們涵蓋了典型的使用情況，如新增網站徽標、導航、作者、評論等：
從 WordPress 站點編輯器中選擇主題區塊。
其中一個主題塊–查詢迴圈區塊–可以幫助你完成通常需要 PHP 才能完成的任務。例如，由於它可以讓你根據特定引數顯示文章，因此你可以顯示最新的文章，甚至建立一個投資組合。但是，如果沒有站點編輯器中的最後兩個螢幕，這些都無法實現。
4. 模板
模板是 WordPress 開發的主要部分。它們是可重複使用的佈局，可幫助您定義網站各部分的結構。這通常需要具備 PHP 方面的專業知識，但你可以在網站編輯器中自定義所有模板（並建立新模板），而無需編寫程式碼。
站點編輯器中的模板介面。
處理模板的方法與處理文章和頁面的方法相同：使用站點編輯器為模板新增區塊，然後儲存更改。當然，這些更改將適用於使用相關模板的每個頁面。
要建立新模板，請單擊 “新增新模板” 按鈕：
在站點編輯器中新增新模板。
這將通過一個快速嚮導來選擇要建立的模板型別和合適的區塊模式來開始設計。這些模式是上一節的重點。
5. 樣板
區塊樣板是區塊的相關集合，可在網站上發揮特定作用。例如，您可以在標題模式中加入徽標、導航和網站標題：
在站點編輯器中製作Header區塊樣板。
建立這些模式非常簡單，不過如果沒有站點編輯器，您需要使用 PHP 註冊這些樣板。不過現在可以使用樣板頁面：
站點編輯器中的區塊樣板庫。
在左側，你會看到所有可用的樣板都被分成了名為 “型別” 的資料夾。這些都是快速構建網站設計的好方法，而且通常看起來非常漂亮。
新增新樣板按鈕會開啟編輯器，讓你自己建立這些部分。這樣你就可以為自己的網站建立可重複使用的元素，為自己和其他合作者開發網站提供了一種可持續和自我服務的方式。
使用 WordPress 全站編輯建立設計的技巧
說到 WordPress 全站編輯，有很多東西需要深入研究，我們無法涵蓋您可以用它做的所有事情。不過，我們可以傳授一些充分利用 FSE 的技巧。
例如，您可以匯出模板和樣式，以便在其他網站上重複使用。要做到這一點，請進入任何文章或頁面的網站編輯器，然後點選頂部工具欄上的選項選單。在下拉選單中選擇匯出：
從站點編輯器的選項側邊欄中匯出主題。
這樣就會得到一個主題的 ZIP 檔案，如果需要匯入，可以使用 WordPress Importer 外掛。
通過網站編輯器螢幕上的搜尋圖示和區塊編輯器工具欄上的搜尋欄，可以訪問 WordPress 編輯器命令面板或命令中心。如果你使用編碼編輯器，你就會明白它是如何工作的。通過上下文搜尋查詢，您幾乎可以訪問網站編輯器中的任何地方，甚至可以執行命令：
從站點編輯器的設計螢幕開啟並使用命令面板。
使用它可以加快開發速度，減少鍵盤和滑鼠操作次數。您可以在這裡新增、刪除和編輯各種網站元素，還可以切換不同的檢視和使用模式。
小結
WordPress 全站編輯功能代表了目前無需程式碼即可設計網站的方式。與之前的內容編輯迭代相比，它有了長足的進步，為您提供了一整套可供選擇的選項。
我們喜歡它的靈活性：一般的網站所有者無需接觸任何程式碼，只需在網站編輯器螢幕上操作即可。開發人員可以訪問 theme.json 檔案，我們將在以後的文章中介紹。無論如何，現在我們已經達到了按照您的具體要求建立 WordPress 網站的巔峰。
你想開始在你的 WordPress 專案中使用 WordPress 全站編輯功能嗎？請在下面的評論區告訴我們您的想法！
評論留言