向WordPress添加流體版式支持

流體版式根據視口尺寸動態調整字體屬性（尺寸，線高），並提高響應能力。 它也稱為響應式排版，靈活的類型或視口大型版式，它提供了卓越的用戶體驗。 本文著重於在WordPress 6.1中實現流體版式，利用其內置塊編輯器功能。

>簡單地將一個

函數添加到

>創建流體文本時，True Block Editor Integration需要一種不同的方法。 clamp() style.cssgutenberg的液體版式支持

>許多WordPress主題開發人員在他們的主題中使用了，其中包括二十二十二和二十三十三個主題。但是，Gutenberg（WordPress的Block Editor）在版本13.8中引入了流體版式支持，從而為塊編輯器內的直接應用程序提供了主題級實現。 此功能成為6.1版WordPress核心的一部分。

Rich Tabor，一個關鍵的貢獻者，突出了該功能的力量和簡單性。 該方法著重於塊級支持，默認情況下動態應用流體字體大小。 好處包括：

clamp()

簡化的主題作者實現。

可維護的，可重複使用的應用於特定元素/塊。

>
• 字體尺寸單元的靈活性（PX，REM，EM，％）。
• WordPress 6.1允許主題作者在沒有自定義代碼的情況下實現一致的流體版式。
帶有排版和間距設置的塊
• Gutenberg 14.1（2022年9月16日）在眾多塊中添加了印刷設置，直接在塊編輯器中提供字體和間距控件。 該擴展的功能已集成到WordPress 6.1。
>在WordPress Block主題中實現流體版式

通過

流體版式通過

，一個塊主題配置文件實現。 考慮使用

和

的大字體。 CSS中的A

函數可能是：

>

WordPress 6.1支持REM，EM和PX單元。 但是，新的流體類型功能提供了一種更簡單的方法。 啟用流體版式：

theme.json然後用contentSize: 768px指定widesize: 1600pxclamp()，為min和max值：

>

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

這將流體類型添加到“大”字體尺寸（2.25REM至3REM）中。 然後可以將“大”字體應用於具有字體設置的任何塊。 >

WordPress將

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

屬性轉換為CSS：

> fontSizes fluidSize應用於

標籤之類的元素。 在線計算器可以協助確定

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

>值。

>示例

相關的github拉請求中可用theme.json詳細的測試說明。

>示例1：設置新的流體字體設置

確保使用Gutenberg（13.8）或WordPress 6.1。 啟用流體類型theme.json：

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "name": "Large",
        "size": "clamp(2.25rem, 6vw, 3rem)",
        "slug": "large"
      }
    ]
  }
}</code>

添加字體大小設置：

<code>"settings": {
  "typography": {
    "fluid": true
  }
}</code>

在塊編輯器中應用“正常”，並驗證前端標記和CSS。

>示例2：排除流體類型的字體設置

>像以前一樣啟用流體類型。 定義字體尺寸，將流體類型禁用一個：

>

<code>"settings": {
  "appearanceTools": true,
  "layout": {
    "contentSize": "768px",
    "wideSize": "1600px"
  },
  "typography": {
    "fontSizes": [
      {
        "size": "2.25rem",
        "fluidSize": {
          "min": "2.25rem",
          "max": "3rem"
        },
        "slug": "large",
        "name": "Large"
      }
    ]
  }
}</code>

WordPress相應地生成CSS，不包括流體類型調整中的“超大”設置。 驗證前端標記和CSS。

用流體版式支持

阻止主題

許多主題用於流體類型。 最近發布的幾個主題支持了新的流體排版功能。 clamp()

>社區反饋

WordPress流體排版功能已獲得開發人員社區的積極反饋，強調了其對開發人員和內容消費者的好處。 一些開發人員建議使某些方面選擇加入而不是默認。

>

結論

WordPress流體排版功能是積極開發的。雖然目前可用，但主題作者應謹慎行事，監視相關的GitHub問題。 大量資源提供了有關流體排版及其在WordPress中實施的更多信息。

>

以上是向WordPress添加流體版式支持的詳細內容。更多資訊請關注PHP中文網其他相關文章！