向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中文网其他相关文章！