在 WordPress 5.9 中引入的全站編輯改變了用戶使用 WordPress 構建網站的方式。它的設計靈活且易于初學者使用。在本文中,我們將向您展示如何使用 WordPress 全站編輯器。在本指南結束時,您可以立即使用 WordPress 輕松創建一個美觀的網站。

什么是 WordPress 中的全站編輯 (FSE)?
WordPress 全站編輯 (FSE) 本質上是項目的延續。這是一項使用 WordPress.org 內置網站和主題自定義工具的塊內容編輯器界面的功能。
這意味著您不僅可以使用塊內容編輯器來創建內容,還可以使用頁眉、頁腳、側邊欄等。

全站編輯的目標是簡化 。雖然 WordPress 非常人性化,但對于初學者來說,它并不總是最容易使用的。
對于初學者來說,以前的是相當準系統的。創建新頁面時,您無法立即看到它的外觀。相反,您必須在預覽頁面和編輯界面之間來回切換才能在前端查看頁面的外觀。

有些人還發現 有局限性,因為它沒有拖放功能。
換句話說,您無法完全按照自己的意愿移動和編輯元素。這就是為什么許多人安裝 以在設計中獲得更大的靈活性。

Gutenberg 項目旨在通過引入更新、更用戶友好的網站構建工具(包括全站編輯)來解決這些問題。
借助 FSE,初學者可以使用簡單的拖放塊編輯器,并在進行更改時查看實時預覽。
在使用 WordPress 全站編輯之前您應該了解的內容
在使用 WordPress 全站編輯器之前,您應該知道此功能僅適用于 WordPress 塊主題用戶。
如果您使用非阻止(經典)主題,則您將無法訪問完整站點編輯器。相反,您必須使用 WordPress 主題定制器或器進行自定義。
要記住的另一件事是,WordPress 全站編輯的工作方式與 Gutenberg 塊內容編輯器相同。
在本指南中,我們將重點介紹如何使用 WordPress 全站編輯功能來編輯您的網頁設計、內容和布局。您可以使用以下快速鏈接跳到特定主題:
如何訪問 WordPress 全站編輯功能
要訪問 WordPress 全站編輯器,您需要轉到 并前往外觀 ? 編輯器。

之后,您將登陸 WordPress 全站編輯器。
界面如下所示:

在左側,您會找到一個包含主要設置的面板。同時,右側可以預覽您的網站的外觀。如果您想立即編輯您的網站,您可以單擊該側。
有 5 個主要設置:導航、樣式、頁面、模板和圖案。讓我們一一介紹一下。
如何使用 FSE 編輯導航菜單
頂部的第一個設置是導航,它允許您編輯塊主題的菜單。繼續并單擊它。

您可以在此頁面上執行幾項操作。
當您單擊“導航”旁邊的三點按鈕時,您可以重命名、復制或刪除菜單。

您還可以重新排列或刪除菜單中列出的頁面。
為此,請單擊其中一個頁面旁邊的三點按鈕。您將看到“上移”、“下移”和“刪除頁面”選項。如果要編輯該特定頁面,則可以選擇“轉到...”按鈕。

您可以做的另一件事是自定義菜單設計和鏈接。
為此,只需單擊鉛筆“編輯”圖標即可打開塊編輯器。

現在,將出現導航菜單的編輯界面,它看起來像常規的塊編輯器。
添加、編輯、刪除和重新排列菜單元素
在我們繼續之前,請注意,的位置將取決于您的主題。它可能位于頂部、側面或隱藏狀態,僅在您單擊某個按鈕時才會出現。
要添加新的頁面鏈接,您可以單擊菜單中的“+”添加塊按鈕。現在,只需在導航菜單中輸入要插入的頁面名稱、帖子標題或外部 URL 并選擇它。

如果要鏈接到的頁面尚未創建,則仍可以向導航菜單添加鏈接。
只需在搜索欄中輸入草稿頁面的名稱,然后單擊“創建草稿頁面”。然后,WordPress 將使用該名稱創建一個頁面,您可以稍后對其進行編輯。

如果要編輯頁面的鏈接、名稱和選項卡設置,只需選擇頁面并單擊塊工具欄中的鏈接圖標即可。
完成此操作后,選擇鉛筆按鈕。

現在,您將能夠更改頁面的鏈接并使鏈接在新選項卡中打開。
完成后,只需點擊“保存”。

除了頁面鏈接之外,您還可以在此處添加新的導航菜單元素。
您需要做的就是單擊“+”添加塊按鈕。之后,您將找到一些可供您使用的導航塊選項,例如網站標語。
有時,您可能需要向下滾動才能找到這些塊。您還可以選擇“瀏覽全部”以查看塊選項的完整列表。

在某一時刻,您可能還想重新排列菜單元素。
為此,請選擇一個塊,然后選擇一個箭頭圖標以將塊向左或向右移動。

現在,如果要刪除頁面鏈接或其他菜單元素,則可以選擇要刪除的元素。
然后,單擊塊工具欄上的三點菜單,然后選擇“刪除”。

創建子菜單
如果您有很多網頁,例如您經營在線商店,那么您可能需要創建一個。這樣,您的導航菜單就不會被許多鏈接弄得雜亂無章,并且看起來更有條理。
創建子菜單的第一步是單擊“+”添加塊按鈕并選擇“子菜單”塊。

接下來,您將選擇用作子菜單父菜單的頁面或 URL。
例如,如果您運行博客,則可以使用作為父菜單。在子菜單中,將有指向博客內容的各個類別頁面的鏈接。
在此示例中,我們將選擇“博客”。

完成后,只需單擊“+”添加塊按鈕即可。
它應該位于父菜單下方。

此時,您可以輸入要插入的頁面鏈接的名稱并選擇該鏈接。請隨意重復此步驟,根據需要添加任意數量的子菜單鏈接。
完成導航菜單后,不要忘記通過單擊右上角的“保存”按鈕來保存更改。

如何使用 FSE 更改您網站的全局樣式
“導航”下方的下一個設置是“樣式”。此功能可讓您更改整個網站的設計。
進入“樣式”頁面后,您將看到一些預定義的樣式選項,每個選項都有不同的顏色、排版和布局選擇。請注意,這些預定義選項從一個塊主題到另一個塊主題看起來會有所不同。

您也可以單擊“樣式”旁邊的眼睛圖標,該圖標代表樣式書。
有了這個,您將能夠看到樣式選項的排版以及使用此樣式的文本塊的外觀,例如標題、段落、列表等。

與上一節類似,此頁面上的鉛筆按鈕將帶您進入編輯界面。
在這里,您將主要使用右側面板來更改排版、顏色和布局以滿足您的確切需求。

通常,您會在編輯器中看到您的。但是,您在此處所做的更改也將反映在其他網頁中。
編輯您網站的排版
要,請導航到右側的“樣式”側邊欄,然后選擇“排版”。
現在,您將看到幾個可以編輯的文本元素:文本、鏈接、標題、標題和按鈕。

Text 元素中的設置決定了整個網站的字體外觀。這意味著,如果您對此元素進行更改,它們將反映在您網站上所有使用文本的塊中。
也就是說,您可以單擊“鏈接”、“標題”、“標題”或“按鈕”元素來編輯這些特定塊的樣式,使它們看起來與文本的其余部分不同。
例如,如果您希望具有與段落塊不同的字體以更加突出,則可以在 Headings 元素中配置設置。
通常,您可以修改每個元素的字體、大小、外觀和行高。
字體選擇取決于您使用的主題。同時,“外觀”控制您是要使用字體的常規、粗體還是斜體版本。

某些元素可能具有特定的設置,因此請務必逐個探索它們。
例如,Headings 元素具有自定義字母間距和字母大小寫的選項。

自定義您網站的調色板
讓我們繼續。為此,只需單擊“樣式”面板中的“顏色”。您將看到兩個部分:“調色板”和“顏色”。
在“調色板”中選擇顏色。

在調色板的“實心”選項卡中,您將看到“主題”、“默認”和“自定義”部分。
主題包括可用于自定義整個網站調色板的顏色。

同時,默認顏色可以使用顏色設置修改塊。請注意,某些主題可能不包含此功能,因此您可能不會在編輯器中看到此功能。
最后,自定義顏色是您可以添加到主題中的顏色。如果“主題”或“默認顏色”選項都不適合您,則可以使用此設置。
要添加新的自定義顏色,只需單擊“+ 添加顏色”按鈕并使用顏色選擇器工具。

如果要更改“主題”、“默認”或“自定義”顏色,只需選擇一種顏色,然后使用顏色選取器工具切換到其他選項即可。
請記住,使用這些顏色的塊也會受到影響。

讓我們切換到“漸變”選項卡。它類似于“純色”選項卡,但顏色選項采用漸變形式,即兩種或多種顏色的混合。
“主題”選項包括一些使用主題純色的漸變選項。另一方面,默認設置是可用于自定義塊的顏色漸變。
雙色調顏色是可以添加到帶有圖像的塊的濾鏡。您只能查看哪些雙色調可用,但無法在此處編輯它們。

如果需要,您還可以創建自定義漸變。
為此,只需單擊“+ 添加顏色”按鈕。然后,您可以選擇“線性”或“徑向”漸變類型,并通過更改“角度”來自定義漸變的方向。
此外,通過單擊滑塊中的點,隨意在漸變混合中選擇更多顏色。將顯示一個顏色選擇器,供您選擇顏色。

返回“顏色”選項卡,您可以自定義“文本”、“”、“鏈接”、“標題”、“按鈕”和“標題”的特定顏色設置。
只需單擊一個元素并選擇“純色”或“漸變”顏色即可更改元素的顏色。您還可以選擇預覽部分以訪問顏色選取器。

調整網站布局
“樣式”選項卡中的最后一個選項是“布局”。您可以在此處修改網頁元素之間的空間。

在“布局”面板的頂部,您將找到用于更改頁面內容和寬度的設置。當塊工具欄中的對齊設置為“無”時,內容寬度決定了單個塊的默認寬度。
另一方面,當塊設置為寬寬度對齊時,“寬”(Wide width) 決定塊的默認寬度。
下面是 ,它控制網頁內容周圍的外部空間。
使用可用的滑塊,您可以設置頂部、底部、左側和右側填充。如果您想更具體地使用填充大小,則可以單擊滑塊圖標以插入像素大小,如下面的屏幕截圖所示。

在底部,您將看到“塊間距”設置。此選項確定各個塊之間的間距,使它們彼此之間不會太近或太遠。您可以像編輯填充一樣編輯它。
請記住單擊右上角的“保存”按鈕以正式進行更改。

如何使用 FSE 自定義 WordPress 頁面
到目前為止,我們已經介紹了導航和樣式。現在讓我們繼續討論頁面。在此選項卡中,您將看到現有頁面的列表。我們稍后將詳細討論如何編輯它們。

如果您想一次管理多個頁面,則可以單擊底部的“管理所有頁面”按鈕。
這將帶您進入 WordPress 儀表板中的“所有頁面”部分。

您也可以直接在完整站點編輯器中創建新頁面。
為此,只需單擊左側面板中的“+”草稿新頁面按鈕。之后,為您的新頁面命名并點擊“創建草稿”。

從那里,您可以開始自定義頁面。
若要編輯現有頁面,請選擇要修改的頁面。在本例中,它是

之后,單擊鉛筆“編輯”按鈕。
然后,您將看到該特定頁面的編輯界面。

使用完整站點編輯器編輯頁面與使用塊編輯器基本相同。
有關這方面的更多信息,我們有幾個指南供您閱讀。您可以從以下幾個開始:
如何使用 FSE 編輯 WordPress 模板
在 WordPress 全站編輯器的模板頁面上,您將看到模板提供的模板列表。

在 WordPress 全站編輯中,模板是預定義的結構,可用于設計網站上特定類型的頁面。
例如,許多 WordPress 塊主題將附帶一個 模板。此頁面模板定義博客文章頁面的布局,這意味著該網站上的每篇博客文章都將使用該模板。
如果您的 上有多個頁面,并且其中許多頁面使用相同的布局,此功能會很有幫助。
如果您需要更改這些頁面上的相同元素,但又不想單獨編輯每個元素,則只需修改模板即可。然后,更改將應用于使用該模板的所有頁面。
要編輯模板,您可以單擊它。之后,您將看到有關特定模板、其模式以及上次修改時間的詳細信息。我們將在下一節中詳細討論模式。
現在,只需單擊鉛筆“編輯”按鈕。

現在,您可以像使用塊編輯器編輯其他元素一樣編輯頁面模板。您可以添加新塊并自定義塊或頁面設置。
如果要創建自定義模板,請選擇左側面板中的“+ 添加新模板”按鈕。

從這里,只需選擇新模板應應用于哪個頁面。
或者,您可以向下滾動到底部并選擇“自定義模板”。

在此階段,您將看到帶有空白頁面的編輯界面,您可以開始向其添加塊。
要一次管理所有模板,您可以返回“模板”頁面,然后單擊“管理所有模板”按鈕。

在此頁面上,您可以查看所有模板說明、添加新模板或清除對模板所做的自定義以恢復其默認設置。
下面是它的樣子:

如果您正在使用塊編輯器編輯頁面或帖子,并希望在不進入全站編輯模式的情況下更改其模板,那么您也可以這樣做。
只需轉到頁面或帖子,然后打開“頁面或帖子設置”側邊欄即可。然后,在“摘要”中找到“模板”部分并單擊它。

您可以使用下拉菜單更改頁面模板,或單擊“編輯模板”立即訪問模板編輯器。或者,隨意單擊“添加模板”按鈕從頭開始創建新的自定義模板。
如何使用 FSE 修改 WordPress 模式
在 WordPress 全站編輯中,模式是可以插入到頁面或帖子中的即用型塊集。當您創建模式時,它將被添加到您的阻止目錄中,您可以輕松地將其添加到您網站上的任何帖子或頁面中。

當您需要對多個頁面或帖子使用同一組塊時,模式非常有用。許多人用它來設計他們的博客文章中的自定義號召性用語橫幅或。
此外,您還可以選擇使這些模式“同步”。這意味著,如果在多個帖子或頁面中使用了某個模式,則您所做的任何修改都將自動應用于使用該模式的所有實例。
在 WordPress 全站編輯器的“模式”頁面上,您將看到一組模式。

標有文件夾圖標的菜單包含所選主題提供的默認模式列表。這些內容已鎖定,無法編輯。
在此下方,您會找到“模板部分”,這是網站結構中使用的一種特殊類型的模式,不一定是頁面內容的一部分。示例包括您網站的頁眉、頁腳、評論部分等。這些都是可定制的。
要添加新圖案,請單擊左側面板中的“+ 創建圖案”按鈕,然后選擇創建新圖案或模板零件。

如果您對應該選擇哪一個感到困惑,那么模式類似于您可以添加到頁面或發布內容的。同時,模板部分更像是一組塊,它們是模板結構的一部分,如頁眉、頁腳或側邊欄。
模板部件將自動具有同步功能,因此對其所做的所有更改都將應用于整個網站。另一方面,模式可以是同步的,也可以是不同步的。
之后,您必須命名模板部件或圖案,并選擇是否使其同步。完成此操作后,只需點擊“創建”,您將被重定向到編輯界面。

編輯頁面或模板時,您可能還需要調整塊圖案或模板部分。您可以直接在編輯器中執行此操作,而無需轉到“模式”菜單。
只需將鼠標懸停在圖案或模板部分上即可。之后,單擊“編輯”。 然后,您將被重定向到該元素的完整站點編輯器。

充分利用 WordPress 全站編輯的技巧
現在您已經熟悉了全站編輯的基礎知識,讓我們討論一些技巧和竅門,以充分利用它。
使用命令搜索欄
使用命令搜索欄,您可以快速導航到網站的某個部分或執行操作來。
如果您想立即在“完整站點編輯器”中查找特定設置,而不是瀏覽不同的按鈕和菜單,此功能會很有幫助。
如果您在完整站點編輯器的主菜單中,則可以單擊放大鏡圖標來使用它。

或者,您可以在編輯界面中按鍵盤上的 Ctrl/Command+K。
然后,只需輸入您要查找或執行的操作即可。例如,您可以在不返回 WordPress 儀表板的情況下添加新帖子或頁面。

使用列表視圖管理塊
當您編輯頁面、模板或模式時,您可能會發現自己添加了如此多的塊,以至于很難跟蹤它們。
這就是列表視圖可以派上用場的地方。使用此功能,您可以查看添加到頁面、模板或模式的每個塊,包括。
要激活列表視圖功能,您所要做的就是點擊編輯器菜單欄左上角的三行按鈕。然后,您將看到該頁面、帖子、模板或模式中使用的所有塊。
如果要配置組、行、列或類似內容中的特定塊,只需從列表視圖中單擊該塊即可。從那里,將選擇該塊,并出現工具欄。

熟悉鍵盤快捷鍵
如果您想更快地編輯網站,請考慮學習鍵盤快捷鍵。使用快捷鍵,您可以使用鍵盤瀏覽不同的按鈕和設置,而不是通過移動鼠標來回切換。
塊內容編輯器中使用的快捷方式也適用于全站編輯。您可以查看我們的 列表以獲取更多信息。
WordPress全站編輯的局限性
WordPress 全站編輯無疑使新的 WordPress 用戶更容易自定義他們的網站。不過,此功能仍存在一些缺點。
首先,您需要一個塊主題才能使用它。有許多新的塊主題可用,但沒有常規的 WordPress 主題那么多。如果您使用 ,那么您的主題選擇可能會更加有限。
另外,主題可能很麻煩,因為您必須再次設置主題并檢查您的 WordPress 插件是否存在兼容性問題。
此外,您的許多自定義都依賴于您的 提供的選項。這可能會限制您在構建網站時的創造力。
如何使用完整的網站編輯替代方案
如果您正在尋找 WordPress 全站編輯替代方案,那么您可以查看 。它是一個功能強大的頁面構建器插件和主題構建器,具有 300+ 適合移動設備的模板,可創建任何類型的網站。
拖放構建器易于使用,并且有 90+ 頁面塊可用于內容元素。還有數十個預先構建的部分,例如,針對轉化進行了優化,因此您無需從頭開始設計這些元素。







