如何在 WordPress 中選擇和使用巢狀區塊

更新日期：2024年6月25日 | 編輯部

您是否想了解如何在 WordPress 中選擇和使用巢狀區塊？ WordPress 的 Gutenberg 巢狀區塊功能允許您在父區塊內添加多個區塊。這樣您可以同時定制不同的區塊元素，讓文章內容組織更加高效，設計上有更多靈活性。在本文中，我們將展示如何輕鬆選擇和使用 WordPress 的巢狀區塊功能。

什麼是 WordPress 巢狀區塊？

WordPress 的 Gutenberg 巢狀區塊功能允許您在一個區塊內插入（或“巢”）一個或多個區塊。巢狀區塊能幫助您在 WordPress 網站上創建更複雜的佈局，通過在每個區塊內添加多個區塊，從而在設計和格式化頁面和文章內容時提供更多靈活性。例如，您可以在一個組區塊內巢入多個圖片區塊，以顯示某特定活動的照片集或使用特定技術創作的藝術作品。

此外，巢狀區塊功能允許您分別編輯每個區塊，這意味著您可以根據需要自定義每個區塊而不影響其他區塊。這樣一來，可以更好地組織內容，使您的內容更具吸引力，並簡化創作過程。

如何使用 WordPress 巢狀區塊

您可以使用 Gutenberg 區塊編輯器中的組或列區塊輕鬆地將多個區塊巢在一起。首先，您需要從 WordPress 管理側邊欄中打開一篇已存在或新的文章。在這裡，簡單地點擊屏幕左上角的添加區塊 ‘+’ 按鈕，找到組區塊。點擊並添加到頁面後，您必須為將要巢在一起的區塊選擇佈局。在本教程中，我們將選擇‘組’佈局。

接下來，只需點擊屏幕上的 ‘+’ 按鈕即可開始在父區塊內添加內容。這次教程中，我們將添加一個圖片區塊。添加區塊後，只需在上方區塊工具欄中的點擊‘組’按鈕來選擇父區塊。接下來，您需要再次點擊 ‘+’ 按鈕打開區塊菜單，從中選擇要添加的其他區塊。

如何配置 WordPress 巢狀區塊設置

當您巢入多個區塊後，可以通過點擊每個區塊來配置它們的個別設置。這將打開右側列中的區塊設置。在這裡，您可以調整背景顏色、文字顏色和個別區塊的大小，而不影響巢在一起的其他區塊。

要配置所有巢狀區塊的設置，您需要點擊上方區塊工具欄中的‘組’按鈕。這將打開右側列中的父區塊設置。您現在可以配置所有巢狀區塊的對齊方式、方向、背景顏色、文字顏色和排版。請注意，這些設置將影響巢在父區塊內的所有區塊。

您還可以通過點擊任何區塊的頂部工具欄中的‘選項’按鈕來將現有的單個區塊轉換為巢狀區塊。這將打開一個菜單提示，您需要選擇‘創建模式’選項。一旦完成，會彈出一個提示要求您為您的新可重複使用區塊命名和選擇一個類別。然後，點擊‘創建’按鈕以存儲設置。滿意後，別忘了點擊‘發布’或‘更新’按鈕來保存更改。在我們的示例中，我們在一個組區塊內巢入了標題、圖片和段落區塊。這是巢狀區塊在我們的演示網站上的外觀。

附加：使用 Wayfinder 插件輕鬆選擇巢狀區塊

有時，當多個區塊巢在一起時，可能難以選擇和配置單個區塊。幸運的是，Wayfinder 插件讓您可以非常輕鬆地從父區塊中選擇巢狀區塊，並告訴您區塊的類型和類別。首先，您需要安裝並啟用 Wayfinder 插件。更多安裝說明，請參見我們的初學者指南：如何安裝 WordPress 插件。啟用後，從 WordPress 管理側邊欄進入設置 » Wayfinder 頁面。

進入後，所有設置已經啟用。您只需取消勾選不想使用的設置旁的框。例如，若您希望 Wayfinder 為編輯器中所有區塊顯示區塊類型，則保持‘顯示區塊類型’選項旁的框勾選。如果不希望插件顯示區塊類別，則只需取消勾選該選項旁的框。配置設置後，別忘了點擊‘保存更改’按鈕。接下來，您需要從儀表板中打開一篇已存在或新的文章：

進入後，將鼠標懸停在任何內部區塊上將顯示其名稱的輪廓。您還可以看到父區塊中任何巢狀區塊的輪廓和名稱。這將幫助您識別巢在組或列區塊中的所有不同區塊。您可以從父區塊中輕鬆選擇單個區塊來配置其設置。您還可以同時選擇所有巢狀區塊，只需單擊‘列’或‘組’標題。這將打開右側列中的父區塊設置。一旦完成區塊設置，簡單的點擊‘更新’或‘發布’按鈕來保存更改。

希望本文幫助您學會如何選擇和使用 WordPress 巢狀區塊。您還可以查看我們的逐步教程：如何在 WordPress 中更改區塊高度和寬度，以及我們推薦的必備 WordPress 插件來幫助您提升網站。如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取更多 WordPress 教程視頻。您也可以在 Twitter 和 Facebook 上找到我們。