WordPressブロックテーマに流体タイポグラフィのサポートを追加します

Fluidタイポグラフィは、ビューポートのサイズに基づいてフォントプロパティ（サイズ、ラインの高さ）を動的に調整し、応答性を高めます。 レスポンシブタイポグラフィ、柔軟なタイプ、またはビューポートサイズのタイポグラフィとも呼ばれ、優れたユーザーエクスペリエンスを提供します。 この記事では、WordPress 6.1にFluid Typographyの実装に焦点を当て、組み込みのブロックエディター機能を活用します。

関数を単にclamp()に追加するだけで、fluidテキストが作成されますが、真のブロックエディターの統合には別のアプローチが必要です。 style.cssグーテンバーグの流動的なタイポグラフィサポート

多くのWordPressテーマ開発者は、Twenty22や23のようなブロックテーマを含む、テーマに

clamp()簡略化されたテーマ著者の実装。

特定の要素/ブロックへの保守可能な再利用可能なアプリケーション。

• WordPress 6.1を使用すると、テーマ作成者はカスタムコードなしで一貫した流体タイポグラフィを実装できます。 タイポグラフィと間隔設定でブロック
Gutenberg 14.1（2022年9月16日）は、ブロックエディターに直接フォントと間隔のコントロールを提供し、多数のブロックに誤字設定を追加しました。 この拡張された機能は、WordPress 6.1。
• に統合されています WordPressブロックテーマに流体タイポグラフィを実装する

を介して実装されています。 大きなフォントを考えてみてください。 cssの

次に、minとmax値の

で指定します：theme.json contentSize: 768px widesize: 1600pxこれにより、流体タイプが「大きな」フォントサイズ（2.25レムから3REM）に追加されます。 「大型」フォントは、フォント設定のある任意のブロックに適用できます。 clamp()WordPressは

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

値を決定するのに役立ちます。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>

例1：新しいFluidフォント設定の設定

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を確認します。

からフォント設定を除外します

<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>

流動的なタイポグラフィのサポートを備えたブロックテーマ

多くのテーマは、流体タイプに

コミュニティフィードバックclamp()

結論

WordPress Fluid Typography機能が積極的に開発されています。現在使用可能ですが、テーマの著者は、関連するGitHubの問題を監視して、注意して進める必要があります。 多数のリソースは、流体のタイポグラフィとWordPressでのその実装に関するさらなる情報を提供しています。

以上がWordPressブロックテーマに流体タイポグラフィのサポートを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。