什麼是 WordPress 中的全站編輯 (FSE)?

WordPress 的最新版本就在這裡,它為我們帶來了許多新功能。簡而言之,WordPress 5.9 是通向全站點編輯的下一站。但是,這是什麼意思?什麼是完整的網站編輯,你能用它做什麼?在這篇博文中,我們將準確討論這一點,並為您提供一些使用完整站點編輯的 WordPress 網站示例。

目錄

首先要做的事情:什麼是完整的站點編輯?

您可能已經注意到這個詞在 WordPress 社區中流行,但什麼是完整的站點編輯?為了為您分解,完整的站點編輯是幾個新的 WordPress 功能的統稱:

  • 模板編輯:您可以在其中自定義帖子和頁面的設計。
  • 站點編輯:用於更改您的博客、檔案或 404 頁面的設計,以及您的站點頁眉和頁腳。
  • 新的樣式界面:您可以在其中添加自己的調色板並更改顏色、排版和間距。
  • 一種新的主​​題:完全可編輯,用塊構建。

全站點編輯 (FSE) 的共同點是所有功能都使用塊來創建您的網站。全站點編輯還為開發人員帶來了新工具,包括新的主題配置文件。現在,要充分利用 WordPress 5.9 版中的新功能,您需要激活完整的站點編輯主題。完整站點編輯主題的一個示例是二十二十二。

全站點編輯背後的想法是什麼?

那麼,為什麼 WordPress 社區會在完整的網站編輯上投入如此多的時間呢?好吧,完整站點編輯背後的想法是將用於創建內容的塊的使用擴展到您網站的其餘部分。授權用戶並為您的網站部分帶來新的自定義可能性,這些部分以前只能通過使用代碼或複雜選項進行編輯。因此,讓每個使用 WordPress 的人都可以更輕鬆地更改其網站和頁面的設計。

有什麼優勢?

簡而言之,最顯著的優勢是您可以在編輯器中編輯和預覽整個網站。您可以將塊放置在您喜歡的任何位置,然後從單個界面更改這些塊的樣式。有了這個,全站編輯帶來更完整和一致的編輯體驗。您無需轉到不同的管理頁面來更改站點標題、更新菜單、排列小部件或上傳徽標。相反,您可以在編輯器中完成所有這些操作。

另一個值得一提的優點是,主題可以為頁面(模板)、網站頁眉和頁腳(部分)以及塊模式添加預製設計。您可以簡單地拖放塊圖案來創建獨特的設計並將它們保存在您自己的模板中。

全站編輯的現狀

如前所述,最新的 WordPress 版本是全站點編輯的下一站。但很高興知道 WordPress 5.9 中添加的新站點編輯器處於測試階段。您可以在 WordPress 5.9 中使用新的默認主題二十二十二,您可以期待在未來版本中修復錯誤和改進。很高興知道您可以在有和沒有Gutenberg 插件的情況下使用完整的站點編輯。

全站編輯有很多小部分。包括新的塊和塊設置,不幸的是,這些設置還沒有為 WordPress 5.9 及時準備好。但他們在路線圖上!一些計劃中的改進包括:

  • 一組新的評論塊
  • 改進了對間距和定位塊以及選擇字體系列的控制
  • 新的帖子作者塊
  • 查詢塊的更多設置,用於顯示帖子列表(如您的博客)

仍然缺少的兩個功能是更好的響應控制項和為類別創建新頁面模板的能力。

完整的站點編輯如何工作?

當您激活完整的站點編輯主題時,您可能會驚訝地發現在 WordPress 管理員中找不到菜單屏幕、小部件和定製器。相反,WordPress 啟用了一個新的編輯器,您可以在其中預覽和編輯您的網站。定製器實際上被塊設置和樣式所取代。對於小部件,實際上不再需要這些小部件,因為您可以將塊放置在任何地方。並且菜單系統被導航塊所取代。

what-is-full-site-editing-fse-in-wordpress-1 什麼是 WordPress 中的完整站點編輯 (FSE)?完整站點編輯主題中的新編輯器

網站編輯器

當您轉到新編輯器時,您將看到的第一頁是您當前的主頁。編輯器有幾個可選的側邊欄:設置、樣式和站點編輯器導航。要打開站點編輯器導航,請單擊編輯器左上角的 WordPress 圖標或站點圖標:

what-is-full-site-editing-fse-in-wordpress 什麼是 WordPress 中的全站點編輯 (FSE)?二十二的主頁。從站點編輯器側邊欄中,您還可以訪問 WordPress 儀錶板。

在側邊編輯器導航側邊欄中,您可以找到模板和模板部件選項。通過選擇其中一個,您將打開一個單獨的頁面,您可以在其中查看和管理所有模板和部件:

what-is-full-site-editing-fse-in-wordpress-2 什麼是 WordPress 中的完整站點編輯 (FSE)?二十二中的塊模板列表

編輯您的網站標題和導航

您可能想要嘗試的第一件事就是設置您網站的菜單。這是您通過完整站點編輯執行此操作的方式:

  1. 首先,從 WordPress 管理員的外觀菜單中打開編輯器(測試版)。
  2. 您可以直接在編輯器中選擇導航塊,也可以從列表視圖中選擇塊。列表視圖是頁面上所有塊的列表。要打開列表視圖,請單擊頂部工具欄中帶有三行的符號。
  3. 單擊標題以展開列表。接下來,單擊導航塊將其選中。

what-is-full-site-editing-fse-in-wordpress-3 什麼是 WordPress 中的完整站點編輯 (FSE)?

4. 現在您可以單擊加號圖標添加新的菜單項。您可以搜索帖子或頁面,創建新草稿,甚至添加網站徽標、社交圖標或搜索表單:

what-is-full-site-editing-fse-in-wordpress-4 什麼是 WordPress 中的完整站點編輯 (FSE)?

導航塊有幾個樣式選項。例如,您可以添加顏色、更改對齊方式和字體大小,並決定導航是否應該摺疊在菜單按鈕後面。此外,您可以在「高級」部分為您的菜單指定一個自定義名稱。

完成菜單設置後,不要忘記選擇保存。系統將詢問您是否要保存網站的標題和菜單。保存兩者並查看您網站的全新菜單。

使用樣式更改網站的外觀

繼續我們的二十二十二主題的例子,這個主題在主頁上有一個黑色的標題,其餘的頁面是白色的。讓我們來改變這些頁面的外觀。假設你想給頁面一個深色的背景顏色。

  1. 您的第一步是從 WordPress 管理員的外觀菜單中打開編輯器。
  2. 在頂部欄中,在保存按鈕旁邊,單擊黑白圓圈以打開樣式側邊欄。在樣式下,您可以選擇網站和塊的排版、顏色和間距。
  3. 要更改背景顏色,請選擇顏色。在此視圖中,您將看到主題調色板和背景、文本和鏈接等元素列表。
  4. 選擇背景並將其更改為黑色。您可以在編輯器中實時預覽顏色變化。
  5. 您還需要更改文本和鏈接顏色以使其可讀:返回上一步,對文本和鏈接執行相同操作,但選擇白色。

what-is-full-site-editing-fse-in-wordpress-5 什麼是 WordPress 中的完整站點編輯 (FSE)?

改變特定方塊的外觀

好的,這樣您就可以更改頁面上一些基本內容的外觀。但是,如果您想更改特定塊的外觀,例如您的帖子標題欄,該怎麼辦?

  1. 返回頂部欄,在保存按鈕旁邊,然後單擊黑白圓圈以打開樣式側邊欄。選擇樣式側邊欄底部的塊,在隨附文本下方:自定義整個站點的特定塊的外觀。
  2. 之後,選擇帖子標題欄並打開排版面板。
  3. 通過使用此選項面板,您可以一次更改所有帖子標題欄的外觀:字體系列、大小、行高、外觀(粗體或斜體)和字母間距。嘗試一些設置並在編輯器中實時預覽更改。
  4. 保存您的更改。系統將詢問您是否要保存自定義樣式:繼續並確認。

what-is-full-site-editing-fse-in-wordpress-6 什麼是 WordPress 中的完整站點編輯 (FSE)?
如果您改變主意並想要撤消更改怎麼辦?

沒問題,這在任何時候都是可能的。只需單擊樣式工具欄中的「更多全局樣式操作」省略號菜單,然後選擇「重置為默認值」:

what-is-full-site-editing-fse-in-wordpress-7 什麼是 WordPress 中的完整站點編輯 (FSE)?

在模板編輯器中,您實際上可以為您的帖子和頁面創建新模板。有很多選項,但為了讓您了解其工作原理,讓我們討論如何為帶有側邊欄的頁面創建新模板。

  1. 在塊編輯器中打開要添加側邊欄的頁面。在頁面設置側邊欄中,轉到模板部分:然後單擊新建。為您的新模板選擇一個名稱,例如「側邊欄」。
  2. 之後,WordPress 將在模板編輯器中打開您的新模板。您可以通過它的深灰色邊框識別模板編輯器。
  3. 要添加側邊欄,您需要移動現有塊。藉助列表視圖可能更容易選擇和移動塊。要打開列表視圖,請單擊頂部工具欄中帶有三行的符號。
  4. 在編輯器的頂部,刪除網站標題、標語和分隔符塊。這是因為您將使用主題中的自定義預製標題替換它們。

what-is-full-site-editing-fse-in-wordpress-8 什麼是 WordPress 中的完整站點編輯 (FSE)?

5. 插入一個模板零件塊,然後選擇「Choose existing」。之後,您可以選擇其中一個預製標題:

what-is-full-site-editing-fse-in-wordpress-9 什麼是 WordPress 中的完整站點編輯 (FSE)?

6. 在編輯器的最底部,在內容下方,重複該過程並為您的頁腳插入第二個模板部分:

what-is-full-site-editing-fse-in-wordpress-10 什麼是 WordPress 中的完整站點編輯 (FSE)?

7. 有了新的頁眉和頁腳,您可以添加用於定位內容和側邊欄的列塊。選擇頁眉和頁腳之間的組塊:

what-is-full-site-editing-fse-in-wordpress-11 什麼是 WordPress 中的完整站點編輯 (FSE)?

8. 在組塊內,添加一個列塊。70/30 的組合是您的內容和側邊欄的不錯選擇:

what-is-full-site-editing-fse-in-wordpress-12 什麼是 WordPress 中的完整站點編輯 (FSE)?

9. 之後,在列表視圖中選擇第二個 Group 塊和 Post Content 塊,然後將所有內容拖到寬列中。您的頁面現在應該如下所示:

what-is-full-site-editing-fse-in-wordpress-13 什麼是 WordPress 中的完整站點編輯 (FSE)?

10. 將您想在側邊欄中顯示的塊放在窄欄中。例如,最新帖子塊、最新評論、關於頁面作者的簡短文本或畫廊。隨意嘗試。您還可以測試不同的顏色選項和間距。

最後,您需要保存模板和頁面。如果您願意,您也可以在其他頁面上重複使用新的自定義模板。

what-is-full-site-editing-fse-in-wordpress-14 什麼是 WordPress 中的完整站點編輯 (FSE)?帶有側邊欄的頁面
示例 使用完整站點編輯的網站示例

那麼,您是在尋找靈感還是想知道通過使用完整的站點編輯可以實際實現什麼?我們收集了一些示例網站供您從中汲取靈感!

個人網站

使用完整站點編輯創建的個人網站的一個示例是femkreations.com

what-is-full-site-editing-fse-in-wordpress-1 什麼是 WordPress 中的完整站點編輯 (FSE)?主頁 femkreations.com

使用完整站點編輯的個人網站的其他一些示例:

商業網站

這可能不足為奇,但是使用完整站點編輯創建的商業網站的示例是fullsiteediting.com

what-is-full-site-editing-fse-in-wordpress-2 什麼是 WordPress 中的完整站點編輯 (FSE)?主頁 fullsiteediting.com

使用完整站點編輯的商業網站的其他一些示例:

結論

使用塊來管理和編輯網站的每個部分一開始會讓人覺得有點害怕。但是,當我們說所有新的定製機會都超過了有時會感覺粗糙的部分時,請相信我們。我們在本文中討論的編輯網站的新方法可用於進行多種類型的更改。也許您想更改站點頁腳中的文本或移動站點徽標?完整的站點編輯使這更容易,因為您不需要更改主題的代碼。

話雖如此,請務必對所做的更改進行一些思考。如果您感到不知所措,請記住這些功能是可選的,您不必編輯不需要任何更改的塊。完整站點編輯的重要部分在於這完全取決於您,所以請嘗試一下,讓我們知道您的想法!

閱讀更多:WordPress 5.9 就在這裡,現在可以進行完整的站點編輯!»

卡羅琳娜·尼馬克

Carolina 是 WordPress 核心團隊的成員。她的重點是可訪問性和主題,她喜歡主題開發的各個方面。

what-is-full-site-editing-fse-in-wordpress-15 什麼是 WordPress 中的完整站點編輯 (FSE)?

接下來的是!

來源

相關文章