在本篇文章中，我們將介紹關於 WordPress 區塊的所有知識。如果你和我一樣是一名老派的 WordPress 使用者，那麼你可能仍然認為區塊是 “新” WordPress，因為你一開始使用的是經典編輯器。
WordPress 推出區塊已經有五年多了，但它們仍然是最容易被誤解和利用率最低的 CMS 功能之一。
WordPress的區塊有點像樂高積木–看，我就說會有聯絡吧–它們允許你以一種在短短几年前還需要聘請專業網站設計師和開發人員的方式來構建和定製你的網站。
這也是人們如此喜愛它們的原因之一。一旦他們瞭解了它們，就是如此。
在我解釋了它們的工作原理後，毫無疑問，你也會愛上它們。
什麼是WordPress區塊？
WordPress 區塊，顧名思義，就像可堆疊的積木，您可以將其新增到 WordPress 網站的頁面和帖子中。WordPress5.0在加入古騰堡（Gutenberg）編輯器的同時也加入了積木塊，現在我們大多數人都已經熟悉了古騰堡編輯器。區塊現在是定製 WordPress 網站的標準方式，而且您可以在整個網站中使用區塊，而不僅僅是在帖子中。
想想看，這有點像網站或頁面生成器。您可以點選 “+” 按鈕將區塊新增到頁面或帖子中，然後從各種區塊選項中進行選擇。當前版本的 WordPress 附帶了 90 多個開箱即用的選項。
每個區塊本質上都是一個小部件。它們可以做各種事情，比如嵌入其他網站或服務的內容，為頁面新增日曆或聯絡表單等新功能，甚至新增預定義格式的特定內容。
此外，大多數區塊都有自定義選項，允許您調整它們在網站上的顯示方式或功能。
WordPress 區塊編輯器是經典編輯器的重大升級。在古騰堡之前的時代，WordPress 使用者只能在帖子中新增文字和圖片，然後才能深入到自定義程式碼中。
注：如果出於某種原因，你無法訪問 WordPress 編輯器中的區塊，可能有兩個原因： 其一，你的 WordPress 安裝可能已經嚴重過時（比如好幾年前）。其次，可能是經典編輯器外掛禁用了區塊編輯器。在 WordPress 網站上啟用該外掛後，您將恢復經典編輯器體驗。請在 wp-admin 中檢視外掛頁面，以確定是否存在這種情況。
WordPress已經有哪些區塊？
預設情況下，區塊編輯器提供了大量可用的區塊。您可以使用這些區塊來定製 WordPress 主題，讓作家和博主在文章中新增豐富的內容，拉入社交媒體內容，等等。
讓我們來看看一些最受歡迎和最有用的預設 Gutenberg 區塊。
最常見的區塊
新增任何型別的文字或影象都需要使用塊。這就意味著，最常見的塊通常是你可能新增到頁面中的不同樣式和型別的文字或影象元素。
比如：
- 文字區塊–你在區塊編輯器中編寫的每個段落都有自己的文字區塊，但文字區塊並不侷限於段落。可以寫一點，也可以寫很多。
- 圖片區塊–當你既想展示又想講述時，可以在其中加入一張圖片，增加一些亮點。
- 列表區塊–需要寫提綱嗎？要不要寫一個有序的列表？您都可以使用列表區塊來完成！
- 圖片庫區塊–分享度假照片或產品照片從來沒有這麼好看過。😍
- 表格區塊–輕鬆建立定價表或共享電子表格資料。
- 引文區塊 – 想要引起人們對某一觀察結果的注意？受到與您正在撰寫的文章相關的一句話的啟發？使用引用區塊突出顯示它！
這些元素都可以通過區塊編輯器新增到網站中。然後，您就可以在頁面的內容部分對它們進行定位和樣式設定。
嵌入式內容區塊
區塊可以非常方便地將外部內容和小工具嵌入 WordPress 網站，而無需新增新外掛或第三方附加元件。
以下是一些最常用的嵌入區塊型別，可用於插入外部內容：
- 日曆區塊
- 自定義 HTML 區塊
- 推特區塊
- YouTube 塊
- 客戶評價區塊
- WooCommerce
- 聯絡表單
- 常見問題
使用這些區塊型別，您可以超越基本的文字編輯器，建立具有各種功能和特性的互動式內容。
專用區塊
這裡的內容非常精彩。
除了基本功能和嵌入式內容外，還有大量的高階區塊可供您在特殊情況下使用。比如，你可能想改進網站的導航和使用者體驗，或者把 WordPress 用作一個完整的網站構建工具。
下面是一些值得一看的內容：
- 按鈕區塊
- 欄目區塊
- 組塊
- 帖子旋轉木馬區塊
- 帖子內容區塊
- 查詢迴圈區塊
- 可重複使用區塊
- 短程式碼區塊
- 目錄區塊
通過這些區塊，您可以直接從 WordPress 資料庫中調入自定義內容，或者完全自定義網站上每個頁面或帖子的佈局、間距和流程。
這一切都很不錯。
但如果您需要的塊不是 WordPress 預設自帶的，該怎麼辦呢？
幸運的是，區塊也是可以自定義的。就像部件一樣，您可以新增新的區塊，甚至建立自己的區塊，以滿足網站設計和模板的需要。
如何使用WordPress外掛建立自定義區塊
到目前為止，建立自定義區塊最簡單的方法就是使用外掛。
Genesis Custom Blocks 外掛讓建立和啟動自己的自定義區塊變得非常簡單。您需要對 HTML 和 CSS 有基本的瞭解，才能根據自己的需要建立區塊和樣式。
有了這些基本技能，該外掛就能解決所有困難的設定和配置工作，從而實現一個新的區塊。
第 1 步：安裝Genesis Block外掛
首先做第一件事： 進入 WordPress 外掛目錄，安裝 Genesis Custom Block 外掛。
(別忘了進入外掛選項卡並啟用它）。
第 2 步：新增新區塊
安裝並啟用後，你應該會在 WP 管理面板的左側導航中看到一個新選項。
點選Custom Blocks > Add New。
第 3 步：自定義編輯器欄位
現在，我們可以開始建立自定義區塊了。
第一步是設定欄位和自定義選項，當你在網站上使用該區塊時，這些欄位和選項就會出現。
你可以把它想象成迷你版的區塊編輯器。您將新增自定義欄位和資料，這些欄位和資料將由區塊本身預先填充，或由編輯器或將區塊新增到頁面或文章的使用者收集。
例如，如果您要建立一個自定義的 “行動號召”（CTA）區塊，您可以新增以下欄位
- 標題文字
- 副標題文字
- 按鈕文字
- CTA 按鈕 URL
每個欄位都有標籤、名稱和型別。您甚至可以自定義寬度或新增幫助文字，以方便其他編輯或撰稿人使用。
第 4 步：自定義標記和 CSS
現在我們已經設定好了區塊的後端，我們需要告訴 WordPress 如何實際顯示新增的內容。
在這裡，您所掌握的 HTML 或 CSS 知識將派上用場。
在下一步中，您基本上要編寫程式碼區塊，這些程式碼區塊將從為程式碼區塊編輯器配置的輸入中動態生成。
您可以使用普通的 HTML 和 CSS 來編寫。
您也可以使用雙括號和編輯器中的欄位名稱（slug）從區塊編輯器中提取變數。(例如，”{{button-text}}”）。
第 5 步：新增區塊
使用 Genesis 外掛設定好區塊後，它就會出現在 WordPress Gutenberg 編輯器的可用區塊列表中。
只需點選 “+”，然後根據其名稱找到新區塊。
新增完成後，您應該會看到 Gutenberg 區塊編輯器螢幕，上面有您配置的欄位和選項。
就是這樣！
現在您可以使用自定義區塊，將其新增到頁面、帖子、側邊欄或任何需要的地方。
如何在沒有外掛的情況下建立自定義區塊
如果你想更深入地學習如何從頭開始建立新區塊，你需要掌握更多高階知識。
在本教程中，我們將介紹使用建立區塊工具的基本步驟，讓你無需使用外掛就能建立完全自定義的區塊。
警告：這是一個高階工作流程： 這是一個高階工作流程。它需要你深入研究命令列。
您需要了解 PHP、JavaScript、HTML 和 CSS。
別說我們沒警告過你！
步驟 #1：設定 Node.js、NPM 和本地 WordPress 安裝
在使用 create-block 之前，我們需要正確的設定和訪問許可權。
以下是先決條件：
- 本地 WordPress 安裝
- 終端或命令列設定
- Node.js 和 npm
您可能還想使用 nvm（Node 版本管理器）來安裝或更新相容的 Node.js 版本。
有了這樣的設定，我們將使用 NPM 的命令 “npx”，直接從雲中的託管目錄執行 create-block 軟體包。
步驟 #2：執行建立區塊軟體包
現在，開始簡單的一步。
從終端導航到本地計算機上網站的 /wp-content/plugins 目錄。
然後使用 NPX 執行 create-block 軟體包：
npx @wordpress/create-block {{block-name}}
該軟體包將完成所謂 “block scaffolding” 的設定過程。它將註冊所有相關元素，生成正確的檔案和目錄結構，併為整個程式塊生成可編輯和可用的預設程式碼。
步驟 #3：啟用外掛
新區塊本身將以外掛的形式出現。
建立區塊軟體包完成後，你需要跳轉到 WP 管理頁面。
進入 “外掛” 頁面，啟用新建立的外掛，其名稱應與你在 npx 命令中使用的區塊相同。
步驟 #4：自定義區塊程式碼
您將在外掛目錄內的 /src/ 資料夾中自定義區塊的內容和功能。
您將在 Index.js 中註冊程式塊並編寫主要輸出程式碼：
請注意，registerBlockType 函式被設定為同時處理功能塊編輯器輸入（”編輯”）和前端顯示（”儲存”）。
這只是構建功能區塊的皮毛。
您可能還想了解使用 WordPress Block API 編寫功能塊的完整文件。
一旦掌握了基礎知識，您就可以拉入額外的依賴關係，接入外部資料來源，以及其他任何您想要的東西。
步驟 #5：在古騰堡編輯器中新增區塊
啟用外掛後，您可以在古騰堡編輯器中將區塊新增到任何頁面或文章中。
使用 “+”按鈕或”/”命令訪問它，就像訪問其他區塊一樣。
小結
好了，我們已經從基礎階段進入了高階階段，但好訊息是，現在你已經勢不可擋了。
有了預設的區塊選項、Genesis 外掛，再加上從零開始建立自己的區塊的能力，沒有什麼是你做不到的！
因為區塊的功能如此強大和靈活，所以沒有什麼是你不能建立的。現在，您的 WordPress 網站擁有幾乎無限的功能，您可以建立自己夢想中的網站、應用程式或專案。
評論留言