Gutenberg 編輯器可以通過“塊”（block）來創(chuàng)建網(wǎng)頁內(nèi)容和布局，提供了更高的靈活性和可定制性。不管是創(chuàng)建簡單的博客文章，還是設(shè)計復(fù)雜的頁面布局，Gutenberg（古騰堡）編輯器都能幫助用戶輕松實現(xiàn)目標。本文將詳細介紹如何在 Gutenberg 編輯器中添加、使用和自定義各種區(qū)塊，以及有哪些類型的塊可供使用。

1. 在 Gutenberg 編輯器中添加區(qū)塊

在 Gutenberg 編輯器中，區(qū)塊（Block）是創(chuàng)建頁面和帖子內(nèi)容的基本元素。每個區(qū)塊都代表一個內(nèi)容元素，如段落、圖片、按鈕等。以下是如何在 Gutenberg 中添加區(qū)塊的步驟：

打開帖子/頁面編輯器

• 登錄到 WordPress 后臺。
• 在左側(cè)菜單中選擇“帖子”或“頁面”。
• 點擊“添加新帖子”或“編輯”現(xiàn)有帖子/頁面。

添加塊

• 使用加號圖標：在編輯器界面中，點擊頁面或帖子內(nèi)容區(qū)域頂部的“+”圖標，這會彈出塊插入器面板，可以瀏覽和選擇不同類型的區(qū)塊。

• 使用斜線命令：直接在內(nèi)容區(qū)域中輸入正斜杠（“/”），然后輸入?yún)^(qū)塊的名稱，編輯器會顯示一個可用區(qū)塊的快速列表。只需要按下回車鍵即可快速插入所選區(qū)塊。

選擇和插入?yún)^(qū)塊

• 區(qū)塊插入器：可以通過瀏覽塊插入器中的類別來選擇所需的塊，或通過頂部的搜索欄直接查找特定的區(qū)塊。點擊區(qū)塊后，它將自動插入到內(nèi)容區(qū)域。

2. 如何自定義 Gutenberg 塊

在 Gutenberg 編輯器中，不僅可以插入塊，還可以根據(jù)需求自定義它們。自定義設(shè)置和選項因塊的類型而異，但大多數(shù)塊都可以調(diào)整以下內(nèi)容：

區(qū)塊工具欄

每個塊都會在選擇后顯示一個上下文工具欄。該工具欄位于區(qū)塊上方，提供快速訪問常見設(shè)置選項：

• 對齊選項：設(shè)置塊的對齊方式（左對齊、居中、右對齊、全寬）。
• 格式設(shè)置：例如，加粗、斜體、插入鏈接等。
• 插入選項：可以插入塊之間的其他內(nèi)容，如嵌入、短代碼等。

區(qū)塊設(shè)置面板

在編輯器右側(cè)，你會找到更多的塊自定義選項。這些選項通過兩個主要標簽進行區(qū)分：

• 區(qū)塊選項卡：顯示與所選區(qū)塊相關(guān)的自定義選項。例如，段落塊中你可以更改文本顏色、背景色、字體、行間距等。

• 文檔選項卡：適用于整個文檔（例如頁面或帖子），包括類別、標簽、特色圖片等設(shè)置。

可重復(fù)使用的塊

如果你需要多次使用相同的塊，可以保存為可重復(fù)使用的塊。這樣，可以在不同的帖子或頁面中輕松插入相同的內(nèi)容塊：

• 選擇所需的塊，點擊區(qū)塊工具欄中的三點菜單（更多選項）。
• 選擇“添加到可重復(fù)使用的塊”選項。

• 給塊命名并保存，以便于將來識別和使用。

3. Gutenberg 編輯器中的區(qū)塊類型

Gutenberg 編輯器提供了多種類型的塊，你可以根據(jù)需求選擇使用。以下是常見的區(qū)塊類型及其功能：

常見區(qū)塊

• 段落：用于添加文本內(nèi)容，支持基本的文本編輯功能，如加粗、斜體、添加鏈接等。
• 標題：用于添加頁面或文章的標題，支持多級標題（H1、H2、H3 等）。
• 圖像：用于插入圖像并進行對齊、大小和標題設(shè)置。
• 列表：用于創(chuàng)建有序或無序列表。
• 引用：用于添加引用內(nèi)容，通常用于引用某個句子或段落。

格式化塊

• 代碼：用于顯示代碼片段，通常保持代碼格式并應(yīng)用等寬字體。
• 預(yù)格式化：用于插入預(yù)格式化的文本，保持文本的空格和換行。
• 引文：用于以風(fēng)格化的方式顯示引用或重要內(nèi)容。
• 表格：用于創(chuàng)建表格，可以自定義行和列的數(shù)量。

布局元素

• 按鈕：用于創(chuàng)建帶有鏈接的可自定義按鈕，通常用于引導(dǎo)用戶進行操作（如“立即購買”、“聯(lián)系我們”等）。
• 列：用于創(chuàng)建多列布局，可以將多個塊放入不同的列中。
• 組：用于將多個塊組合在一起，方便管理和排列。
• 間隔：用于在塊之間添加間距，確保內(nèi)容有足夠的視覺分隔。

小部件

• 短代碼：用于插入短代碼，以嵌入動態(tài)內(nèi)容或功能。
• 檔案：顯示網(wǎng)站的帖子檔案，可以按月、年等方式歸檔。
• 類別：顯示網(wǎng)站的帖子類別列表，便于訪問者瀏覽特定主題內(nèi)容。
• 最新帖子：用于顯示網(wǎng)站上最近發(fā)布的帖子。

嵌入塊

Gutenberg 編輯器還提供了多種嵌入塊，可以將外部內(nèi)容嵌入到帖子或頁面中：

• YouTube：嵌入 YouTube 視頻，用戶可以直接在頁面中播放視頻。
• Twitter：嵌入 Twitter 推文，顯示推文的內(nèi)容和互動。
• Instagram：嵌入 Instagram 帖子，顯示圖像或視頻內(nèi)容。
• Spotify：嵌入 Spotify 曲目或播放列表，方便聽音樂的用戶。

4. 高級自定義和擴展

對于有更高自定義需求的用戶，Gutenberg 編輯器支持更多的自定義功能，包括自定義塊、區(qū)塊模式和第三方插件的使用。

自定義塊

開發(fā)人員可以使用 WordPress 塊 API 創(chuàng)建自定義塊。這涉及到使用 JavaScript（React）來定義塊的功能和樣式。自定義塊可以打包為插件并與其他用戶共享，進一步增強 Gutenberg 編輯器的功能。

區(qū)塊模式

區(qū)塊模式是預(yù)定義的區(qū)塊布局，可以快速插入復(fù)雜的設(shè)計。你可以自定義這些模式并保存，以便在其他頁面或帖子中重復(fù)使用。

第三方插件

許多第三方插件提供了新的區(qū)塊和功能，進一步擴展了 Gutenberg 編輯器的能力。流行的插件包括：

• Advanced Gutenberg Blocks：添加了如推薦、定價表等常用區(qū)塊。
• CoBlocks：提供一套豐富的區(qū)塊，用于創(chuàng)建高度自定義的內(nèi)容布局。
• Kadence Blocks：提供了多個高級區(qū)塊，幫助你輕松創(chuàng)建復(fù)雜的布局和設(shè)計。

自定義 CSS

對于熟悉 CSS 的用戶，Gutenberg 編輯器可以在塊設(shè)置中添加自定義 CSS 類。這讓用戶能夠根據(jù)需要微調(diào)塊的樣式，使其更符合頁面設(shè)計。

5. 總結(jié)

Gutenberg 編輯器是一個強大且靈活的工具，適用于從簡單的博客文章到復(fù)雜的網(wǎng)頁設(shè)計。通過各種內(nèi)置區(qū)塊和自定義選項，你可以輕松創(chuàng)建、調(diào)整和優(yōu)化網(wǎng)頁內(nèi)容。對于開發(fā)人員而言，Gutenberg 還提供了創(chuàng)建自定義塊的能力，進一步擴展了其功能。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M解答！免費助力個人，小企站點！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息