WordPressブロックテーマに流体タイポグラフィのサポートを追加します-CSSチュートリアル-php.cn

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

Jennifer Aniston

リリース： 2025-03-10 10:59:08

オリジナル

534 人が閲覧しました

Adding Fluid Typography Support to WordPress Block Themes

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を使用すると、テーマ作成者はカスタムコードなしで一貫した流体タイポグラフィを実装できます。タイポグラフィと間隔設定でブロック
に統合されています 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を確認します

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