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

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

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

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

を使用しています。ただし、Gutenberg（WordPressのブロックエディター）は、バージョン13.8にFluid Typographyのサポートを導入し、ブロックエディター内で直接アプリケーションのテーマレベルの実装を可能にしました。 この機能は、バージョン6.1のWordPressコアの一部になりました。 重要な貢献者であるリッチタボールは、機能のパワーとシンプルさを強調しています。 このアプローチは、ブロックレベルのサポートに焦点を当て、デフォルトで流体フォントサイズを動的に適用します。 利点は次のとおりです

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

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

フォントサイズユニット（PX、REM、EM、％）の柔軟性

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

Fluid Typographyは、ブロックテーマ構成ファイルである

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

関数は次のとおりです

WordPress 6.1は、REM、EM、およびPXユニットをサポートしています。 ただし、新しいFluidタイプの機能は、より簡単なアプローチを提供します。 流体のタイポグラフィを有効にします：

次に、minとmax値の

を

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

プロパティをCSSに変換します：

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

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code&gt;&quot;settings&quot;: { &quot;typography&quot;: { &quot;fluid&quot;: true } }&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> タグのような要素に適用されます。 オンライン計算機は、

値を決定するのに役立ちます。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プルリクエストで入手できます。

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

例2：fluid型

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

以前と同様に、流体タイプを有効にします。 フォントサイズを定義し、1つの流体タイプを無効にします：

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

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

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

を利用しています。 最近リリースされたいくつかのテーマは、新しいFluidタイポグラフィ機能をサポートしています。

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

WordPress Fluid Typography機能は、開発者コミュニティから肯定的なフィードバックを受けており、開発者とコンテンツ消費者の両方にとって利点を強調しています。 一部の開発者は、特定の側面をデフォルトではなくオプトインすることを提案します。

結論

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

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