タイポグラフィオプションの有効化と無効化

ユーザーインターフェースの要素を有効または無効にするための設定がいくつかあります。これらのプロパティはすべてブール値を受け入れ、trueまたはfalseに設定できます。

すべてのブロックがすべてのタイポグラフィ設定をサポートするわけではありません。一部は特定のブロックに特有です。たとえば、dropCapプロパティは段落ブロックにのみ機能します。他のプロパティは、customFontSizeのように、テキストを含むほぼすべてのブロックで広く使用されます。

これらのsettings.typographyプロパティを使用すると、インターフェースの機能を有効または無効にできます：

  • customFontSize: ユーザーがカスタムフォントサイズを入力できるかどうか。デフォルトはtrueです。
  • dropCap: ユーザーが段落ブロックの最初の文字にドロップキャップを有効にできるかどうか。デフォルトはtrueです。
  • fontStyle: ユーザーがカスタムフォントスタイルを選択できるかどうか。デフォルトはtrueです。
  • fontWeight: ユーザーがカスタムフォントウェイトを選択できるかどうか。ウェイト範囲は標準のThinからBlackフォントウェイトにマッピングされます。デフォルトはtrueです。
  • letterSpacing: ユーザーがカスタムレター間隔値を入力できるかどうか。デフォルトはfalseです。
  • lineHeight: ユーザーがテキストのカスタム行間を入力できるかどうか。行間プリセットを登録する方法はないため、このオプションは完全にカスタム入力を有効にします。デフォルトはfalseです。
  • textColumns: ブロックのテキストに対して列オプションを表示するかどうか。デフォルトはfalseです。
  • textDecoration: ユーザーがブロックのテキストの装飾を設定できるかどうか。利用可能なオプションはNone、Underline、およびStrikethroughです。デフォルトはtrueです。
  • textTransform: ユーザーがブロックのテキストの文字ケースを変更できるかどうか。利用可能なオプションはNone、Uppercase、Lowercase、およびCapitalizeです。デフォルトはtrueです。
  • writingMode: インターフェースでテキストのOrientationを有効にし、ユーザーがHorizontalとVerticalのテキストを選択できるようにするかどうか。デフォルトはfalseです。

これらのタイポグラフィ設定がデフォルトのWordPress theme.jsonでどのように見えるかは次のとおりです： 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "typography": {
  5.             "customFontSize": true,
  6.             "dropCap": true,
  7.             "fontStyle": true,
  8.             "fontWeight": true,
  9.             "letterSpacing": true,
  10.             "lineHeight": false,
  11.             "textColumns": false,
  12.             "textDecoration": true,
  13.             "textTransform": true,
  14.             "writingMode": false
  15.         }
  16.     }
  17. }

このスクリーンショットでは、すべての設定が有効になっている段落ブロックのTypographyパネルに注意してください：

見出しと複数の段落ブロックが挿入されたWordPress投稿エディタ。右のサイドバーには、ほぼすべてのタイポグラフィオプションが表示されています。

テーマのオーディエンスに応じて、ユーザーが必要とする機能のみを有効にすることをお勧めします。たとえば、フォントサイズを設定する必要があるクライアントがいる場合、彼らのワークフローを妨げるようなすべての設定を表示するのは意味がありません。

ドロップキャップに関する注意：現在の実装機能は、異なるフォントファミリー、フォントサイズ、および行間で著しくバグが多いです。この機能を有効にしたままにする場合は、ドロップキャップがテーマのデザイン内で良好に見えることをテストしてください。テーマに合わせるためにカスタムCSSを追加する必要があるかもしれません。

カスタムフォントファミリー

WordPressでは、settings.typography.fontFamiliesプロパティを使用して、任意の数のフォントファミリーを登録できます。システムフォント（訪問者のコンピュータに存在するフォント）やウェブフォント（テーマにバンドルされたカスタムフォント）の両方をサポートすることができます。このセクションでは、これらの両方を登録する方法を学びます。

これらは、フォントを選択できるブロックのインスペクターパネルのTypography > Fontフィールドの下にオプションとして表示されます：

内側にブロックがネストされたカバーブロックを持つWordPress投稿エディタ。サイドバーにはフォントドロップダウンが表示されています。 

  2. - **`````name`````:** (必須) フォントファミリーの人間が読めるタイトルで、翻訳可能です。 
  3. - **`````slug`````:** (必須) サイズのスラッグで、生成されたCSSカスタムプロパティに追加されます：`````--wp--preset--font-family--{slug}`````。 
  4. - **`````fontFamily`````:** (必須) CSS `````font-family`````値にマッピングされる有効な値です。一般的に、これはフォントスタック（ブラウザが順番に使用しようとするファミリーのリスト）になります。 
  5. - **`````fontFace`````:** (オプション) `````@font-face````` CSS at-ruleにマッピングされたフォントフェイスの配列です。これは、テーマにカスタムウェブフォントをバンドルする際にのみ使用する必要があります。
  7. フォントファミリー設定がデフォルトのWordPress `````theme.json`````でどのように見えるかは次のとおりです：  
  10. ``````bash
  11. {
  12.     "version": 2,
  13.     "settings": {
  14.         "typography": {
  15.             "fontFamilies": []
  16.         }
  17.     }
  18. }
  19. `

次のサブセクションでは、最初にシステムフォントを登録する方法を学びます。次に、カスタムウェブフォントを登録する次のステップに進みます。

システムフォントの登録

システムフォントはウェブフォントよりも簡単です。使用したいフォントを知っているだけで済みます。この演習では、テーマで使用する2つのフォントを登録すると仮定しましょう：

  • Primary: 現代のデバイスで見栄えの良いトランジショナルセリフフォントスタック。
  • Secondary: ユーザーのシステムUIフォント。

このコードをtheme.jsonに追加して、各フォントを登録します： 

  1. {
  2.     "$schema": "https://schemas.wp.org/trunk/theme.json",
  3.     "version": 2,
  4.     "settings": {
  5.         "typography": {
  6.             "fontFamilies": [
  7.             {
  8.             "name": "Primary",
  9.             "slug": "primary",
  10.             "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
  11.             },
  12.             {
  13.             "name": "Secondary",
  14.             "slug": "secondary",
  15.             "fontFamily": "system-ui, sans-serif"
  16.             }
  17.             ]
  18.         }
  19.     }
  20. }

これらのオプションは、機能をサポートする任意のブロックのTypography > Fontドロップダウンに表示されます。

WordPressは、エディタとフロントエンドの両方で--wp--preset--font-family--{$slug}形式の2つのCSSカスタムプロパティを生成します： 

  1. body {
  2.     --wp--preset--font-family--primary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  3.     --wp--preset--font-family--secondary: system-ui, sans-serif;
  4. }

これらをvar:preset|font-family|$slugとして参照できます。 Styles in theme.jsonとして使用し始めるときに。CSS内でvar( --wp--preset--font-family--{$slug} )を使用して直接参照することもできます。

フォントファミリースラッグのセマンティック命名スキームを使用することを一般的にお勧めします。これにより、子テーマ、スタイルのバリエーション、さらにはテーマ間で切り替える際に将来にわたってより耐久性があります。これらの例では、primaryとsecondaryを使用しています。これらは広く使用されている用語です。スラッグが現在のフォントファミリーと一致するように命名するのは避けるのが最善です。

ウェブフォント（フォントフェイス）の登録

カスタムウェブフォントの登録は、システムフォントとほぼ同じ方法で機能します。大きな違いは、フォントファミリーオブジェクトにfontFaceプロパティを追加する必要があることです。

fontFaceはフォントフェイスオブジェクトの配列でなければなりません。各オブジェクトは、@font-face CSS at-ruleの記述子にマッピングされるこれらのプロパティを受け入れます：

  • fontFamily: 有効なCSS font-family記述子。
  • fontWeight: CSS font-weight値の範囲。
  • fontStyle: 有効なCSS font-style値。
  • fontStretch: 有効なCSSフォントストレッチ値。
  • src: フォントファイルが格納されているフォントファイルURLの配列（複数のフォーマットをサポートするために使用できますが、1つだけが必要です）。
  2. 例を試してみましょう。前のセクションのコードを基に、システムUIフォントをOpen Sansウェブフォントに置き換えたいとします。  
  4. この例では、Open Sansフォントを最新の`````.woff2`````形式にダウンロードして変換したと仮定します。これはほとんどのブラウザで広くサポートされています。また、これらのファイルをテーマの`````/assets/fonts`````フォルダーに次のように配置しました：  
  6. - `````/assets
    1. - `````/open-sans.woff2
    • /open-sans-italic.woff2

ウェブフォントがテーマにバンドルされ、準備が整ったら、これらを登録するためにtheme.jsonファイルにこのコードを追加します： 

  1. {
  2.     "$schema": "https://schemas.wp.org/trunk/theme.json",
  3.     "version": 2,
  4.     "settings": {
  5.         "typography": {
  6.             "fontFamilies": [
  7.             {
  8.             "name": "Primary",
  9.             "slug": "primary",
  10.             "fontFamily": "Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"
  11.             },
  12.             {
  13.             "name": "Secondary",
  14.             "slug": "secondary",
  15.             "fontFamily": "'Open Sans', sans-serif",
  16.             "fontFace": [
  17.             {
  18.             "fontFamily": "Open Sans",
  19.             "fontWeight": "300 800",
  20.             "fontStyle": "normal",
  21.             "fontStretch": "normal",
  22.             "src": [ "file:./assets/fonts/open-sans.woff2" ]
  23.             },
  24.             {
  25.             "fontFamily": "Open Sans",
  26.             "fontWeight": "300 800",
  27.             "fontStyle": "italic",
  28.             "fontStretch": "normal",
  29.             "src": [ "file:./assets/fonts/open-sans-italic.woff2" ]
  30.             }
  31.             ]
  32.             }
  33.             ]
  34.         }
  35.     }
  36. }

システムフォントと同様に、WordPressはウェブフォントのCSSカスタムプロパティを生成します。CSS出力は次のようになります： 

  1. body {
  2.     --wp--preset--font-family--primary: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  3.     --wp--preset--font-family--secondary: 'Open Sans', sans-serif;
  4. }

カスタムフォントサイズ

WordPressでは、テーマユーザーが選択できる任意の数のプリセットフォントサイズを登録できます。カスタムサイズを登録することで、テーマ全体で一貫したタイポグラフィを維持しやすくなります。

カスタムフォントサイズは、機能をサポートするブロックのインスペクターコントロールのTypography > Sizeパネルにオプションとして表示されます：

異なるフォントサイズの複数の段落を表示するWordPress投稿エディタ。

カスタムサイズが5つを超える場合、UIは上記のスクリーンショットに表示されているボタングループの代わりにドロップダウンセレクトを表示します。

フォントサイズに関連する2つのtheme.json.settings.typographyサブプロパティがあります：

  • fluid: 大きな画面で拡大し、小さな画面で縮小する流動的なフォントサイズを有効にするかどうか。これは個々のカスタムサイズに対してオーバーライドできます。デフォルトはfalseです。
  • fontSizes: ユーザーが選択できる利用可能なプリセットをカスタマイズするために使用できるフォントサイズオブジェクトの配列。WordPressはsmall、medium、large、およびx-largeのデフォルトサイズを登録します。

これらのプロパティがデフォルトのWordPress theme.jsonでどのように見えるかは次のとおりです： 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "typography": {
  5.             "fluid": false,
  6.             "fontSizes": [
  7.             {
  8.             "name": "Small",
  9.             "slug": "small",
  10.             "size": "13px"
  11.             },
  12.             {
  13.             "name": "Medium",
  14.             "slug": "medium",
  15.             "size": "20px"
  16.             },
  17.             {
  18.             "name": "Large",
  19.             "slug": "large",
  20.             "size": "36px"
  21.             },
  22.             {
  23.             "name": "Extra Large",
  24.             "slug": "x-large",
  25.             "size": "42px"
  26.             }
  27.             ]
  28.         }
  29.     }
  30. }

ご覧のとおり、WordPressはデフォルトで流動的なフォントサイズを無効にし、独自の4つの静的サイズを登録します。ほとんどの場合、これらをテーマのデザインに一致するサイズで上書きすることをお勧めします。 

  3. ``````bash
  4. body {
  5.     --wp--preset--font-size--small: 13px;
  6.     --wp--preset--font-size--medium: 20px;
  7.     --wp--preset--font-size--large: 36px;
  8.     --wp--preset--font-size--x-large: 42px;
  9. }
  10. `

WordPressは、.has-{$slug}-font-size命名スキームを使用して、各フォントサイズプリセットのカスタムCSSクラスも生成します。デフォルトサイズはこれらのクラスを生成します： 

  1. .has-small-font-size{
  2.     font-size: var(--wp--preset--font-size--small) !important;
  3. }
  5. .has-medium-font-size{
  6.     font-size: var(--wp--preset--font-size--medium) !important;
  7. }
  9. .has-large-font-size{
  10.     font-size: var(--wp--preset--font-size--large) !important;
  11. }
  13. .has-x-large-font-size{
  14.     font-size: var(--wp--preset--font-size--x-large) !important;
  15. }

流動的なタイポグラフィの有効化

現代のウェブデザインでは、ほぼ常に流動的なタイポグラフィを利用します。これにより、フォントサイズがビューポートやコンテナに応じて拡大または縮小します。

WordPressは流動的なタイポグラフィのためにビューポートベースのシステムを使用します。しかし、異なるものを使用したい場合は、コンテナベースのシステムなどを使用することもでき、無効のままにすることができます。

デフォルトのコアサイズを使用したいが、すべてを静的値ではなく流動的にしたいとします。これを実現するには、settings.typography.fluidをtrueに設定します。theme.jsonファイルで： 

  1. {
  2.     "version": 2,
  3.     "settings": {
  4.         "typography": {
  5.             "fluid": true
  6.         }
  7.     }
  8. }

WordPressは、登録されたフォントサイズの流動的なサイズを生成します： 

  1. body {
  2.     --wp--preset--font-size--small: 13px;
  3.     --wp--preset--font-size--medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.852), 20px);
  4.     --wp--preset--font-size--large: clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.983), 36px);
  5.     --wp--preset--font-size--x-large: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 2.413), 42px);
  6. }
  2.  <a name="registering-custom-font-size-presets"></a>
  4. ### カスタムフォントサイズプリセットの登録
  6. デフォルトに固執するのではなく、テーマのデザインに一致するフォントサイズを登録したいと思うでしょう。これを行うには、`````settings.typography.fontSizes`````プロパティにフォントサイズオブジェクトの配列を渡す必要があります。  
  8. これらのオブジェクトはそれぞれ、いくつかのプロパティを受け入れます：  
  10. - **`````name`````:** 翻訳可能なサイズの人間が読めるタイトル。 
  11. - **`````size`````:** 有効なCSSサイズ。これは数値と単位、`````clamp()`````を使用したカスタム流動サイズ、または他のカスタムCSSプロパティへの参照である可能性があります。 
  12. - **`````slug`````:** 生成されたCSSカスタムプロパティに追加されるサイズのスラッグ：`````--wp--preset--spacing--{slug}`````。 
  13. - **`````fluid`````:** この特定のサイズの流動的なタイポグラフィを有効または無効にするためのブール値で、グローバルプロパティを上書きします。代わりに、次の内容を含むオブジェクトである可能性があります：  
  14.   - **`````min`````:** フォントサイズが縮小できる最小値。有効なCSSサイズでなければなりません。 
  15.   - **`````max`````:** フォントサイズが拡大できる最大値。有効なCSSサイズでなければなりません。
  17. まず、静的値を持つカスタムサイズの簡単なセットを登録しましょう。`````theme.json`````ファイルにこのコードを追加します：  
  20. ``````bash
  21. {
  22.     "$schema": "https://schemas.wp.org/trunk/theme.json",
  23.     "version": 2,
  24.     "settings": {
  25.         "typography": {
  26.             "fontSizes": [
  27.             {
  28.             "name": "Small",
  29.             "size": "1rem",
  30.             "slug": "sm"
  31.             },
  32.             {
  33.             "name": "Medium",
  34.             "size": "1.25rem",
  35.             "slug": "md"
  36.             },
  37.             {
  38.             "name": "Large",
  39.             "size": "1.5rem",
  40.             "slug": "lg"
  41.             }
  42.             ]
  43.         }
  44.     }
  45. }
  46. `

デフォルトのサイズプリセットと同様に、WordPressはエディタとフロントエンドの両方で各サイズのCSSを自動的に生成します： 

  1. body {
  2.     --wp--preset--font-size--sm: 1rem;
  3.     --wp--preset--font-size--md: 1.25rem;
  4.     --wp--preset--font-size--lg: 1.5rem;
  5. }

次に、これを一歩進めましょう。前の例では、Small、Medium、Largeサイズを登録しました。Smallサイズはブラウザのビューポート幅に関係なくその値を維持するようにしたいとします。しかし、MediumとLargeサイズはビューポートに合わせてスケールさせたいです。 

  3. ``````bash
  4. {
  5.     "$schema": "https://schemas.wp.org/trunk/theme.json",
  6.     "version": 2,
  7.     "settings": {
  8.         "typography": {
  9.             "fluid": true,
  10.             "fontSizes": [
  11.             {
  12.             "name": "Small",
  13.             "size": "1rem",
  14.             "slug": "sm",
  15.             "fluid": false
  16.             },
  17.             {
  18.             "name": "Medium",
  19.             "size": "1.25rem",
  20.             "slug": "md",
  21.             "fluid": {
  22.             "min": "1rem",
  23.             "max": "1.5rem"
  24.             }
  25.             },
  26.             {
  27.             "name": "Large",
  28.             "size": "1.5rem",
  29.             "slug": "lg",
  30.             "fluid": {
  31.             "min": "1.25rem",
  32.             "max": "2rem"
  33.             }
  34.             }
  35.             ]
  36.         }
  37.     }
  38. }
  39. `

WordPressはこれらのCSSカスタムプロパティを生成します： 

  1. body {
  2.     --wp--preset--font-size--sm: 1rem;
  3.     --wp--preset--font-size--md: clamp(1rem, 1rem + ((1vw - 0.2rem) * 1.136), 1.5rem);
  4.     --wp--preset--font-size--lg: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.705), 2rem);
  5. }

テーマに合わせてこれをカスタマイズする方法には多くの制限はありません。上記はカスタムフォントサイズを登録するためのイントロですが、テーマに対してどのように機能するかを完全に制御できます。

流動的なフォントサイズについてのより深い理解を得るには、Intrinsic design, theming, and rethinking how to design with WordPressをDeveloper Blogでお読みください。