WordPress 5.0引入了Gutenberg作為其預設編輯器。它為使用區塊建立內容提供了新的介面和體驗。
WP開發人員通過在WordPress 5.9中引入完整的站點編輯，將區塊編輯概念提升到了一個新的水平。本質上，區塊編輯器現在取代了WordPress定製器作為編輯主題和網站外觀的主要工具。
本文將向您展示如何使用新的WordPress區塊編輯器（古騰堡編輯器）進行完整的站點編輯。
什麼是古騰堡編輯器？
古騰堡（Gutenberg）編輯器是預裝在WordPress 5.0及更高版本中的新WordPress編輯器。它為內容建立過程引入了一種新方法，讓您可以更好地控制內容的視覺方面。
古騰堡編輯器如何工作？
Gutenberg編輯器使用內容區塊的概念來新增和編輯文章和頁面中的各種元素，例如文字、影象、檔案和連結。以前的預設WordPress編輯器TinyMCE專注於文字編輯。
提示：雖然新的區塊編輯器預裝在WordPress 5.0及更高版本中，但使用舊版本WordPress的使用者也可以通過安裝Gutenberg外掛來使用區塊編輯器。但是，我們強烈建議將核心WordPress軟體更新到最新版本。
在WordPress 5.9更新之後，Gutenberg編輯器不僅僅是一個內容編輯器。它包括網站定製的所有方面，包括主題編輯和頁面或文章建立。
新編輯器還提供了更好的頁面視覺表示，使其比以前的WordPress編輯器更像一個頁面構建器。
它將標題、文字和影象等網站元素分解為區塊，使它們更易於管理和定製。
選擇任何區塊，您可以單獨對其進行自定義，例如設定不同的背景顏色或排版而不影響其他區塊或元素。這為站點編輯提供了更多自定義選項和靈活性。
新介面使用者友好，讓新使用者可以快速學習如何使用WordPress。所有的區塊都根據它們的結構列在一個可摺疊的列表中。調整他們在網站上的位置很容易，因為使用者只需在列表檢視中拖放各個區塊。
使用者可以通過單擊頂部欄或頁面預覽上的加號 (+)按鈕來新增區塊。
每個區塊都有不同的配置和設計工具。例如，段落區塊帶有更改顏色和排版的工具。另一方面，影象區塊具有新增替代文字和調整影象尺寸的工具。
新的全站點編輯方法還減少了對編碼和自定義CSS的需求。新的區塊編輯器引入了控制theme.json檔案的全域性樣式面板。這使使用者可以更改整個站點的樣式，例如直接在預設編輯器上新增自定義顏色和更改排版。
使用古騰堡區塊編輯器
Gutenberg編輯器介面可能會讓初次使用的使用者或任何習慣使用經典編輯器的人感到困惑。以下是一些關於通過Gutenberg編輯器構建網站和管理內容的指南。
1. 新增新的部落格文章或頁面
為您的網站建立內容首先使用Gutenberg區塊編輯器新增新文章或頁面。
部落格文章有一個釋出日期，並且通常按時間倒序出現在網站上。同時，頁面是靜態的並提供永恆的資訊，例如About、Privacy Policy和Contact頁面。
如果您打算建立一個新文章，請在您的WordPress儀表盤上訪問文章->新增新內容。
進入預設內容編輯器後，您會看到一個空白草稿，其中包含文章標題和第一段區塊的佔位符。新增文章標題和新區塊以建立內容。
在右側邊欄中找到文章設定。您可以在此處設定文章作者、文章模板、固定連結和文章類別。
建立新頁面是一個類似的過程。導航到Pages -> Add New，您將看到與建立文章的介面相同的介面。唯一的區別是右側邊欄中的頁面屬性設定，它指定了父頁面和頁面順序。頁面也沒有類別或標籤設定。
2. 全域性樣式介面
當前的WordPress編輯器具有全域性樣式介面，無需編碼即可自定義整個站點的顏色、排版和佈局。
但是，該功能僅在WordPress 5.9中使用基於區塊的主題時可用，包括基於區塊的子主題。通過導航到外觀->站點編輯器進入站點編輯器，然後單擊螢幕右上角的黑白圖示。全域性樣式介面將出現在右側。
將有四個方面需要修改——排版、顏色、佈局和區塊。
在排版設定中管理文字和連結的字型系列、大小、行高和字型外觀。
在顏色設定中，您會發現兩個主要專案——調色盤和元素。調色盤顯示可用於網站元素的顏色——主題調色盤和預設顏色可用於整個網站。自定義顏色選擇器可讓您向調色盤新增更多顏色。
顏色自定義的元素部分包括三個方面——背景、文字和連結。單擊其中任何一個以自定義其顏色。
全域性樣式的下一項是佈局。本質上，這使您可以為每個網站元素指定填充。
全域性樣式介面中的最後一項是區塊選項卡，可讓您自定義特定區塊。選擇此選項，您將看到可用區塊的列表。選擇其中任何一個開始定製。根據區塊，您可以修改其佈局、顏色、排版或所有這些。
3.模板編輯模式
新的WordPress區塊編輯器包括模板編輯模式。大多數基於區塊的主題都與此功能相容，因此您可以使用區塊編輯器編輯文章、頁面或404頁面的主題模板。它甚至允許您建立一個新模板。
導航到Appearance -> Site Editor轉到站點編輯器。通過單擊螢幕左上角的WordPress徽標並選擇Templates開啟可摺疊導航側邊欄。您應該會在右上角看到可用模板列表和新增新按鈕。
4.插入區塊樣板
如果您沒有時間自定義每個區塊，則可以使用內建區塊樣板。單擊編輯器螢幕頂部的加號( + ) 按鈕，然後選擇Patterns選項卡以找到幾個不同樣式的預構建區塊樣板。
單擊下拉選單以瀏覽按鈕、列、畫廊和標題的區塊樣板。
5.新增一個新區塊
區塊是古騰堡編輯器的核心功能。每個區塊都承載一個元素，因此為您的文章和頁面建立自定義內容佈局更容易訪問。
如果您新增新文章或頁面，WordPress區塊編輯器會將段落區塊設定為預設內容塊。它使開始內容建立過程變得更加容易。
為內容新增更多區塊，按回車，編輯器會自動新增另一個段落區塊，方便您在輸入長文字時使用。
但是，您可能希望將其他區塊元素新增到文字中。為此，請單擊螢幕左上角的加號( + ) 按鈕，然後選擇或搜尋所需的區塊。
單擊內容區域上的加號按鈕將顯示一個彈出視窗，其中包含六個最近使用的區塊，從而更容易插入常用區塊。或者，使用搜尋欄查詢特定區塊。
6. 插入小工具
小工具現在已整合到古騰堡編輯器中，因此新增小工具與新增其他區塊相同。
在舊的WordPress核心版本上，需要使用特定於小工具的頁面和主題定製器來管理它們。
單擊編輯器螢幕頂部的加號( + ) 按鈕，然後選擇Blocks選項卡。向下滾動到小工具部分以查詢小工具的所有可用區塊。
7. 使用區塊
瞭解如何使用Gutenberg區塊將改善您的部落格體驗並加快您的工作流程。
新編輯器像經典編輯器一樣為元素格式化和對齊提供了一個工具欄。它出現在當前活動區塊的頂部，並由不同的工具組成，具體取決於區塊型別。
例如，段落區塊將具有粗體、斜體和調整文字對齊方式的選項。
同時，影象區塊可讓您更改影象對齊並切換到不同的區塊型別。
向上和向下箭頭可讓您移動區塊以重新排列區塊順序。或者，單擊螢幕頂部的列表檢視圖示。它將按照它們在頁面上出現的順序顯示所有內容區塊。
拖放任何區塊以將其移動到列表中的新位置。此功能可以更輕鬆地處理複雜的內容結構，尤其是在有多個巢狀區塊的情況下。
每個區塊還具有不同的設計工具，具體取決於區塊型別。點選螢幕右上角的設定按鈕，右側會出現一個側邊欄。
例如，影象區塊具有輸入替代文字的欄位，而導航區塊具有佈局和顯示設定。
也可以在區塊內新增區塊以建立獨特的內容結構。這適用於group、row和columns等區塊，因為它們充當多個區塊的容器。
8. 封面文字選項
Gutenberg在樣式標題和段落區塊方面提供了更多自由。您可以為文字和區塊的背景建立首字下沉並設定自定義顏色。但是，請記住，封面文字選項僅適用於基於文字的區塊。
這個Gutenberg功能可以通過選項->顯示活動區塊中的更多設定來訪問。附加設定將出現在螢幕右側。
您會在“區塊”部分找到幾個自定義區塊的選項。排版控制字型大小和行高，而顏色設定決定文字和背景顏色。啟用首字下沉選項將在段落開頭顯示一個大寫字母。
另一種自定義文字區塊的方法是使用全域性樣式面板。此方法可方便地為站點上的所有標題和段落區塊設定特定的排版和顏色配置。
9. 內容詳情
要在WordPress區塊編輯器中檢視文章和頁面的內容詳細資訊，只需單擊詳細資訊按鈕。
您將看到有關內容上的字數、字元、標題和區塊數的資訊，幫助您建立最佳內容長度。
將出現的另一條資訊是文件大綱。此部分僅在您使用多個標題時可用。它將顯示標題結構，幫助您組織內容並改進SEO。
10. 錨支援
錨點是讓讀者跳轉到WordPress內容中特定區塊的連結。此功能有助於突出顯示內容的特定部分，併為網站訪問者提供更好的上下文。
它也可用作長內容的快速導航工具。您可以在連結到特定標題的文章開頭新增導航文字。在共享指向特定標題的URL時，錨點支援也有效。
以下步驟將向您展示如何在Gutenberg中建立HTML錨點。
- 建立一個新區塊或選擇一個現有區塊。
- 從區塊的工具欄中，單擊選項->顯示更多設定。
- 在“區塊”選項卡中，展開“高階”選單。
- 將唯一的HTML錨點新增到HTML錨點文字框。
建立錨點後，您只需要將其連結到所需的元素。
- 突出顯示要插入錨點的內容。它可以是文字、影象或按鈕。
- 單擊區塊工具欄中的連結按鈕。
- 插入主題標籤( # )，後跟所需的HTML錨點，然後按Enter或單擊提交。
錨連結僅適用於已釋出的頁面或文章。
在新編輯器中建立錨點時，請記住：
- 它必須是獨一無二的。
- 它區分大小寫。
- 它不能包含空格，但可以包含連字元 (-)、下劃線 (_)、冒號 (:) 和句點 (.) 等符號。
- 它必須以字母開頭。
11. 使用影象區塊
在內容上插入影象區塊時，WordPress區塊編輯器將提供從您的計算機上傳影象、從媒體庫中選擇影象或連結到影象URL的選項。
新編輯器還允許您將影象拖放到內容的任何位置，而無需先建立新區塊。
您只需要開啟檔案管理器並將所選影象拖放到Gutenberg工作區即可。區塊編輯器將自動建立一個影象區塊來託管檔案，您可以根據需要對其進行自定義。
開啟區塊設定，您會發現影象的替代文字和影象大小選項的欄位。
Gutenberg還在影象下方提供了標題空間。單擊以啟用它並新增文字。
您可以在影象區塊的工具欄中設定影象連結和對齊方式。還有一個雙色調功能，可以使用任何可用的雙色調預設來轉換影象顏色。
另一種處理影象的方法是使用影象庫區塊。這是用於新增一組影象的容器區塊型別。您可以設定相簿的列號以建立漂亮的網格樣式顯示。
相簿內的所有影象區塊都將被計為單個區塊。這樣，您可以使用唯一的邊框和替代文字自定義每個影象。
12. 可重用的區塊
Gutenberg區塊編輯器可以更輕鬆地在其他頁面和文章中儲存和重用區塊。如果您重複使用相同的區塊型別，它將節省您一次又一次地自定義它的時間。
以下是如何儲存和重複使用古騰堡區塊：
- 選擇要儲存的區塊，然後單擊選項->新增到可重複使用的區塊。
- 輸入區塊的名稱，然後單擊儲存。
- 要重用一個區塊，請在 Gutenberg 編輯器中建立一個新區塊。
- 單擊加號( + ) 圖示，然後瀏覽全部。開啟Reusable選項卡，您將在其中找到所有可重複使用的區塊。
- 插入您之前儲存的區塊。
您可以通過區塊管理器刪除或編輯任何可重複使用的區塊。為此，請在可重用區塊選項卡中選擇管理可重用區塊。
刪除您建立可重用區塊的頁面或文章將導致使用該區塊的其他專案出錯。
13. 表區塊
Gutenberg通過引入表格區塊改進了WordPress表格功能，從而消除了安裝表格外掛或使用自定義HTML程式碼的需要。
以下是使用Gutenberg區塊編輯器建立表的方法。
- 將表區塊從區塊目錄拖放到您的古騰堡工作區。
- 設定列數和行數，然後單擊Create Table。
- Gutenberg將建立一個帶有響應列區塊的新表。
區塊工具欄有幾個自定義選項，包括文字 格式、行、列插入和文字對齊。
區塊設定面板中提供了兩種預先設計的樣式。此外，該區塊帶有設計工具來自定義顏色和邊框樣式。
預設情況下，使用此區塊建立的表格將具有響應式列寬。但是，您可以在表格設定中更改它。向下滾動區塊設定面板，展開表格設定部分，然後開啟固定寬度表格單元格選項。
14. 欄目區塊
欄目區塊提供了一種將內容拆分為最多三列的簡單方法。該功能通過在文字旁邊新增視覺元素來幫助提高內容的可讀性。
或者，使用這個新區塊來提高您網站的空間效率，顯示多種內容型別，而無需訪問者向下滾動太多。
以下步驟將向您展示如何向您的站點新增新的欄目區塊。
- 單擊加號( + ) 圖示 並選擇欄目區塊。
- 選擇一種可用的欄目模式。
- Gutenberg編輯器將根據所選樣式生成新區塊。單擊加號( + ) 圖示以向這些區塊新增新元素。
欄目區塊的一個很好的用途是建立一個側邊欄。選擇30/70或70/30欄目變體，並在較大的列中插入查詢迴圈區塊。使用較小的組區塊來包含側邊欄的小工具區塊。
15. 實時HTML區塊
新的WordPress區塊編輯器具有用於程式碼預覽的實時HTML區塊。此功能可讓您檢查程式碼是否在WordPress網站上正常執行，而無需在視覺化編輯器和文字編輯器之間來回切換。
以下是如何使用Gutenberg編輯器實時HTML區塊插入自定義程式碼：
- 單擊加號( + ) 圖示並找到自定義HTML區塊。
- 在將出現的區塊中插入自定義HTML。
- 單擊預覽以檢視程式碼在您的WordPress網站上的外觀。
16. 嵌入元素
從您的WordPress媒體庫或其他網站（如 YouTube、Reddit 和 Twitter）新增音訊或視覺元素將有助於使您的內容更具吸引力。
區塊編輯器使將此類元素嵌入到內容中變得更加容易，因為有大量的媒體和嵌入區塊可用。
嵌入媒體檔案
媒體區塊可讓您在網站上上傳和顯示各種檔案，根據媒體提供不同的區塊設定。根據您要上傳的檔案型別選擇正確的區塊。
按照以下步驟插入媒體區塊：
- 通過單擊加號( + ) 圖示開啟區塊插入器。
- 向下滾動到媒體部分並選擇適當的區塊。
我們已經討論了使用影象和相簿區塊嵌入影象。現在讓我們看看其他媒體區塊。
- 視訊-將視訊播放器嵌入到您的內容中，並具有可配置的設定，例如播放控制元件、自動播放和視訊迴圈。它還允許您在未播放視訊時顯示海報影象。
- 音訊– 新增一個具有簡單配置的音訊播放器，用於自動播放和迴圈播放。
- 封面– 新增帶有文字覆蓋的影象或視訊。此區塊對於建立帶有影象或視訊背景的標題或橫幅很有用。
- 檔案– 新增媒體檔案的連結，並可選擇包含下載按鈕。此區塊還支援PDF檢視器，因此您不需要PDF檢視器外掛來嵌入PDF檔案。
嵌入外部內容
下一組區塊，即嵌入區塊，可讓您整合來自外部網站（如YouTube、Twitter和Spotify）的內容。使用嵌入區塊非常簡單，因為您只需要複製並貼上所需的URL。
- 單擊加號( + ) 圖示並向下滾動到嵌入部分。
- 如果網站未列出，請使用嵌入區塊。對於此示例，我們將使用YouTube區塊。
- 複製您要嵌入的媒體的URL並將其貼上到提供的文字框中。
- 單擊嵌入，媒體將出現在WordPress頁面或文章上。
17. 按鈕
按鈕讓訪問者與網站互動，無論是導航還是完成特定操作。它們還通過使用號召性用語按鈕註冊或購買商品來幫助提高您的轉化率。
按鈕區塊可幫助您在網站的任何位置插入按鈕，包括文章。以下是使用WordPress區塊編輯器插入按鈕的方法：
- 通過單擊加號( + ) 圖示並選擇按鈕區塊來開啟區塊插入器。
- 在按鈕區塊中鍵入標籤。例如，我們將建立一個訂閱按鈕。
- 單擊連結圖示可向按鈕新增連結。區塊編輯器還提供了在新選項卡中開啟連結的選項。
- 單擊提交以儲存更改。
- 要向組中新增更多按鈕，請單擊區塊組右下角的加號圖示。
18. 引文與引用區塊
使用Gutenberg，可以更輕鬆地為來自外部來源的引文建立區塊引用。此外，新的引文區塊有助於強調WordPress頁面或文章中的重要資訊。
以下是使用WordPress Gutenberg建立引文區塊的方法：
- 導航到Block Directory -> Pullquote。
- 在區塊中寫下引文。
- 更改引文的對齊方式，使其適合文字的其餘部分。除了標準設定，Gutenberg還提供全寬和寬幅對齊。
新增引用的步驟類似於引文區塊。唯一的區別是它使用引用區塊。
如何看待古騰堡編輯器？
古騰堡編輯器是一項在自定義和靈活性方面超越WordPress經典編輯器的開發。但是，古騰堡編輯器仍然有其優點和缺點。
優點
- 最少的編碼。 使用全域性樣式介面，無需編寫程式碼來自定義主題的外觀。古騰堡編輯器中的各種區塊也使內容建立和編輯更容易。
- 移動友好。 Gutenberg提供比WordPress經典編輯器更好的響應能力。能夠隨時隨地釋出內容可以改善您的工作流程，尤其是在您經常出差的情況下。
- 更少的外掛。 一些區塊提供了取代額外外掛需求的功能。如果您認為預設區塊不夠用，您可以安裝區塊外掛以新增更多選項。
- 靈活的自定義塊。 Gutenberg允許開發人員為主題和外掛建立自定義區塊，為附加元件增加價值並開啟更多自定義可能性。
- 元框支援。Gutenberg編輯器與大多數用於建立自定義欄位和向文章新增後設資料的元框相容。
缺點
- 學習曲線。 沒有頁面構建器經驗或更習慣於舊版WordPress編輯器的WordPress使用者可能需要時間來適應新的佈局和工具放置。
- 相容性問題。區塊編輯器僅在使用基於區塊的主題時可用。
雖然Gutenberg提供了更多自定義專案的自由，但它不是頁面構建器。可以理解的是，WordPress區塊缺少大多數頁面構建器提供的一些設計選項。
幸運的是，可以使用區塊外掛來擴充套件Gutenberg的功能。以下是一些值得考慮的最受歡迎的區塊外掛。
- Stackable：一個免費增值頁面構建器外掛，提供區塊設計和使用者介面工具包。它允許您建立懸停動畫和更改區塊排版設定。
- Gutenberg Blocks：另一個免費的區塊外掛，提供方便的區塊來幫助您構建表格、分類法和時間線。
- Orbit Fox：它提供了各種工具來提高轉化率，例如正常執行時間監控、Google Analytics整合和共享圖示。
- PublishPress Blocks：一個免費的多功能外掛，提供20個新區塊和對區塊的訪問控制。
為WordPress區塊安裝外掛將為您帶來更好的使用者體驗和更快的工作流程。
小結
古騰堡編輯器引入了一種使用區塊編輯內容的新方法。這是WordPress實現完整站點編輯和改善使用者體驗目標的一部分。
新的區塊編輯器與WordPress 5.0或更高版本的核心軟體整合。如果您仍在使用舊版本的WordPress，請安裝Gutenberg外掛以使用該編輯器。
使用區塊將使網站定製更容易，因為您可以通過移動區塊輕鬆地重組網站。可用的區塊樣板還可以讓您立即更改佈局。
區塊還通過可重複使用的區塊等功能幫助簡化您的專案，以避免重複工作。此外，全域性樣式面板讓您無需任何CSS程式碼即可更改整個網站的設計。
最後，不要猶豫安裝WordPress區塊外掛。通過引入許多新的WordPress區塊來改進您的工作流程，它將為您的編輯器新增更多設計選項。
評論留言