如何在 WordPress 中調整塊大小

WordPress 5.0 中正式引入的古騰堡塊編輯器讓用戶有機會完全自定義他們的 WordPress 內容和網站。 不再受需要在 TinyMCE Classic Editor 等 WYSIWYG 工具中進行創建的限制，Gutenberg 為帖子或頁面內容的每個元素提供了單獨的塊。 通過控制每個特定塊的設置，用戶可以比以往更輕鬆地設計 WordPress 內容。 讓設計脫穎而出的最簡單方法之一就是讓它們超越默認設置。 因此，我們將研究如何在 WordPress 中調整塊大小，以便您可以開始跳出框框思考（和設計）。

由於塊的響應性質，塊編輯器中的大多數調整大小仍然受限於站點的內容區域。 如果您將頁面的內容區域設置為全角，您將在該空間內工作。 例如，如果您將帖子內容區域設置為 580 像素或 1200 像素，您將在那里工作。 我們用來教您如何在 WordPress 中調整塊大小的方法都是基於這樣的想法，即您將停留在任何特定塊容器的邊界內。

如何在編輯器中調整塊大小

一些（但不是全部）塊具有內置的調整大小選項。 由於顯而易見的原因，這些是最容易調整大小的。 但是，根據塊的不同，調整大小選項將位於不同的位置。

示例 #1：圖像塊

單擊塊會彈出上下文菜單，這裡的調整大小選項實際上是間距選項。 但是，寬寬度和全寬對齊會將圖像塊的大小更改為容器的寬度（寬）或整個頁面的寬度（完整）。

您還可以使用右側邊欄中的塊設置調整圖像塊的大小。 恰當命名的圖像大小部分有許多選項，您可以使用這些選項調整塊的大小。

WordPress 有一個用於快速調整大小的下拉菜單，您可以從縮略圖、中、大和全尺寸中選擇預設。 選擇全尺寸將因您的主題而異，無論它是實際完全顯示還是適合內容區域。

您還可以按像素專門調整寬度和高度。 在此之下，您可以按百分比進行調整。 百分比基於寬度和高度字段中的數值。 不是您從下拉菜單中選擇的預設圖像尺寸。

最後，您可以單擊圖像本身以顯示帶有白色圓形錨點的藍色邊框。 您可以拖動它們來調整塊的大小。

您只需單擊並拖動任何錨點即可縮放圖像。 這樣做將調整塊設置菜單中高度和寬度字段的大小。

示例#2：事件塊

對於事件塊，調整大小設置僅在編輯器本身的上下文菜單中。 （事件塊是您將安裝的 Automattic 的一個單獨插件，它不是古騰堡核心編輯器的一部分。）

像一些圖像塊選項一樣，這裡的調整大小選項在技術上是間距選項。 但是這兩個選項是居中對齊和寬寬度。 您可以選擇一個在容器中居中或在屏幕上的整個寬度。

在編輯器本身中調整塊的高度有點麻煩，但有效。 如果您只是在空塊字段中按Enter/return ，則可以通過插入額外的空段落塊來擴展高度。

這是一個不太理想的解決方案。 但它很快，而且在緊要關頭工作——特別是考慮到事件塊沒有真正的高度調整選項。

示例 3#：在 WordPress 中使用列調整塊大小

如果您需要調整大小的塊在其設置面板或上下文菜單中沒有調整大小選項，則使用塊編輯器的列是您可以調整任何塊大小的另一種方式。 只需按任意+ 按鈕搜索Columns塊即可添加新塊。

在 Column 塊中，您可以添加所需的任何其他塊。 在搜索選項中，還會出現塊編輯器模式。 這些是您可以插入到您的帖子或頁面中的模板，其中內容已經調整大小和放置，等待您的內容替換佔位符。

從一開始，Columns 塊就允許您選擇列本身的大小。 它分為 6 個不同的方向，每個方向都有不同的頁面百分比用於各個列。

這些不是您可以使用的唯一配置。 您可以使用塊內的藍色 + 按鈕隨時添加新列。 每個單獨的列都有自己的設置面板，您可以在其中按百分比單獨調整其寬度。

可能需要進行一些實驗才能使尺寸適合您的設計。 但是，當它完成後，您可以在首頁上放置一些精心設計且間隔適當的內容。 請記住，塊編輯器中的任何空列也將在前端顯示為空。

通過調整不同列的寬度、位置和數量，您的塊幾乎可以以任何方式調整大小和放置。

需要更多尺寸選擇？ 考慮使用更高級的頁面構建器

我們意識到其中一些調整塊大小的方法可能會受到限制。 如果您發現它們對您來說限制太多，那麼可能是時候研究更高級的頁面構建器了。

例如，我們自己的 Divi 為每個模塊（塊）提供了大小調整和變換選項，使您可以比古騰堡更好地控制形狀、大小和間距。 大多數高級頁面構建器也是如此，因此如果您發現 Gutenberg 的選項過於有限，那麼查看 Divi 之類的內容可能是下一步的最佳選擇。

如何使用 CSS 調整 WordPress 中的塊大小

每個塊在Advanced Settings下的設置面板中都有一個 CSS 部分。 除了任何其他特定於塊的高級設置外，每個設置都有一個字段用於Additional CSS Class(es) 。 您可以將您想要的任何選擇器分配給這個單獨的塊，無論它們是否已經存在於您的站點上，或者您是否專門為此塊創建了它。

通常，我們建議對單個塊使用 CSS ID 而不是類，但塊編輯器不支持（至少默認情況下）。 因此，您將只想使用多個類來跟上單個塊而不是 ID。 類實際上是為了涵蓋大類的元素類型，而 ID 是為了單個元素。 在這種情況下，我們建議使用清晰的命名約定來保持代碼中的簡潔。

無論如何，您只需將類輸入到文本字段中即可。 請勿在此字段中的類名稱前包含句點/點。

現在，您應該導航到Appearance – Customize並在最底部找到Additional CSS部分。 編寫或粘貼 CSS 代碼以根據您的喜好調整塊的大小。

我們建議避免使用以像素 (px)為單位的度量，因為它們是絕對的。 最好使用vw （視口寬度） 、vh （視口高度）或% （百分比）來調整塊。 這些都將參考設備和/或它周圍的其他內容進行縮放。

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

請記住， %和vw/vh也不同，儘管它們的功能相似。 它們都按百分比起作用，但它們與不同的錨點有關。

百分比測量與元素所在的容器有關。 因此，如果元素所在的部分或行沒有到達屏幕的邊緣，即使設置width:100%也不會到達邊界。

然而，使用vh/vw將是相對於設備本身的視口，而不是站點的元素。 使用height:80vh ，您可以始終確保此塊佔據屏幕高度的 80%，無論它是顯示在移動設備、台式機還是平板電腦上。

結論

WordPress 中的塊編輯器為用戶提供了大量以前不可用的自定義選項（即在編輯器本身內）。 了解如何在 WordPress 中調整塊大小對於能夠最大程度地利用塊編輯器至關重要。 隨著現在全站點編輯的功能，這是一項隨著時間的推移只會變得更有用的技能。

關於在 WordPress 中調整塊大小，您可以分享哪些提示和技巧？

文章特色圖片由 3rieart/shutterstock.com 提供