WordPressブロックテーマのフォントの管理-CSSチュートリアル-php.cn

WordPressブロックテーマのフォントの管理

Jennifer Aniston

リリース： 2025-03-09 11:23:09

オリジナル

750 人が閲覧しました

Managing Fonts in WordPress Block Themes

ウェブサイトのデザインはタイポグラフィにかかっています。 WordPressテーマは、多くの場合、Google Fontsなどのサービスを統合します。これは、カスタマイザー内でクラシックなPHPテーマのために簡単に管理できます。ただし、これはブロックテーマにとって簡単ではありません。古典的なテーマの統合は十分に文書化されていますが、ブロックテーマフォント管理には同様のガイダンスがありません。この記事では、そのギャップについて説明します。ブロックのテーマ

Googleフォントを使用できますが、登録プロセスは従来の方法とは大きく異なります。

既存の知識

フォントをブロックテーマに統合するためのリソースは、最初は不足していました。最初のデフォルトのブロックベースのテーマである222個は、ダウンロードされたフォントファイルをテーマ資産として使用して実証されています。これには、ファイルを

に登録し、バンドルされたフォントの定義functions.php - 面倒な2段階のプロセス。 theme.json 23番のように、その後のテーマは、明示的な登録なしでバンドルされたフォントを定義することにより、これを簡素化しました。ただし、手動のフォントのダウンロードとバンドリングは残り、CDNを介して提供されるホストされたフォントの利便性を無効にします。

学習WordPressは、このプラグインのビデオ概要を提供します。これにより、WordPress UIコントロールを提供することでテーマ作成が簡素化されます。テンプレートファイルをコーディングまたは変更せずに、テーマ、子のテーマ、またはスタイルのバリエーション全体を作成できます。 Wordpress.orgチームによって執筆および維持されているため、現在、ブロックテーマにGoogleフォント統合に最適なアプローチです。ただし、アクティブな開発中であるため、変更を期待してください。

この新しい方法を探索する前に、古典的なテーマの従来のアプローチをレビューしましょう。

従来の方法

Themeshaper（2014）やCloudwaysのような記事は、古典的な方法を示しています。 27のテーマは、

：

でGoogleフォントをenqueingしている例を例示しています。

Googleフォントの事前接続：

従来の方法の欠点

functions.php

この方法には重要な欠点があります。 2022年のドイツの裁判所の判決は、Googleフォントを排除する際の訪問者IPアドレスの暴露によるGDPR違反を強調しました。この問題は、Create Blockテーマプラグインによって対処されています。

function twentyseventeen_fonts_url() {
  $fonts_url = '';
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  }
  return esc_url_raw( $fonts_url );
}

ログイン後にコピー

ブロックテーマを備えたGoogleフォントを使用して（最新の方法）

最新のアプローチは、Create Blockテーマプラグインを使用しています。ローカル開発環境を設定し（たとえば、フライホイールローカルを使用）、テーマテストデータをインストールしてブロックテーマプラグインを作成します。

外観に移動します→テーマフォントを管理。この画面には、定義されたフォントがリストされており、オプションは次のものです

Googleフォントの追加： Google Fonts APIから直接フォントを追加します。
アップロードされたフォントファイルを追加します。

フォルダーに自動的にダウンロードして保存し、

：assets/fonts：theme.json

theme.jsonコードを表示

function twentyseventeen_fonts_url() {
  $fonts_url = '';
  $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
  if ( 'off' !== $libre_franklin ) {
    $font_families = array();
    $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i';
    $query_args = array(
      'family' => urlencode( implode( '|', $font_families ) ),
      'subset' => urlencode( 'latin,latin-ext' ),
    );
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
  }
  return esc_url_raw( $fonts_url );
}

ログイン後にコピー

フォントは、サイトエディターのグローバルスタイルで使用できます。

ローカルフォントの追加も同様に機能し、手動の変更と比較してプロセスを簡素化します。フォントの削除は、プラグインのインターフェイス内でも処理されます。

将来の開発functions.php

「Font Manager」機能は、WordPress Coreのために計画されており、同様の機能を提供します。