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

フォントは、あらゆるサイトのデザインの決定的な特徴です。 これには、テーマ開発者が次のようなサービスを統合するのが一般的な WordPress テーマが含まれます。 Googleのフォント 「クラシック」PHPベースのテーマのWordPressカスタマイザー設定に。 WordPress のブロックテーマでは、そうではありませんでした。 Google Fonts をクラシック テーマに統合することは十分に文書化されていますが、現時点ではブロック テーマで使用できるものはありません。 WordPressテーマハンドブック.

それが、この記事で見ていくことです。 ブロック テーマは確かに Google フォントを使用できますが、それらを登録するプロセスは、以前のクラシック テーマで行っていたプロセスとは大きく異なります。

私たちがすでに知っていること

私が言ったように、私たちが始めることまではほとんど何もありません。 Twenty Twenty-Two テーマは、最初のブロックベースのデフォルトの WordPress テーマであり、ダウンロードしたフォント ファイルをテーマのアセットとして使用する方法を示しています。 ただし、いくつかの手順が必要なため、かなり扱いにくいです: (1) にファイルを登録します。 functions.php file (2) バンドルされているフォントを定義する セクションに theme.json file.

ただし、Twenty Twenty-Two がリリースされてから、プロセスはよりシンプルになりました。 に示すように、バンドルされたフォントを登録せずに定義できるようになりました。 二十三のテーマ. ただし、このプロセスでは、フォント ファイルを手動でダウンロードしてテーマにバンドルする必要があります。 これは、迅速な CDN で提供される単純なドロップインのホストされたフォントの目的を無効にする障害です.

新着情報

あなたがまだ知らなかったなら、 グーテンベルクプロジェクト は実験的なプラグインで、WordPress ブロックとサイト エディター用に開発中の機能を初期の使用とテストに利用できます。 最近では テーマシェイパーの記事、Gutenberg プロジェクトのリード アーキテクト マティアスベンチュラ を使用して Google フォント (またはその他のダウンロードされたフォント) をブロック テーマに追加する方法について説明します。 ブロックテーマを作成 プラグイン。

このショート Learn WordPress のビデオ Create Block Theme プラグインとその仕組みの概要を説明しています。 しかし、肝心なのは、それがブリキに書かれていることをするということです：それはブロックテーマを作成します. ただし、WordPress UI にコントロールを提供することで、コードを記述したり、テンプレート ファイルに触れたりすることなく、テーマ全体、子テーマ、またはテーマ スタイルのバリエーションを作成できます。

やってみた！ Create Block Theme は WordPress.org によって作成および管理されています Google フォントをテーマに統合するための最善の方向性だと思います。 とはいえ、プラグインが活発に開発されていることは注目に値します。 つまり、物事はすぐに変わる可能性があります。

すべてがどのように機能するかを説明する前に、まず、従来の WordPress テーマに Google フォントを追加する「従来の」プロセスについて簡単に復習しましょう。

以前はどのように行われていたか

2014年のこのThemeShaperの記事 従来の PHP テーマでこれを行っていた方法の優れた例を提供します。 Ibad Ur Rehmanによるこの新しいCloudwaysの記事.

記憶をリフレッシュするために、デフォルトの例を次に示します トゥエンティ・セブンティーンのテーマ Google フォントがどのようにエンキューされるかを示します functions.php ファイルにソフトウェアを指定する必要があります。

function twentyseventeen_fonts_url() { $fonts_url = ''; /** * Translators: If there are characters in your language that are not * supported by Libre Franklin, translate this to 'off'. Do not translate * into your own language. */ $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 Fonts は次のようにテーマに事前に接続されています。

function twentyseventeen_resource_hints( $urls, $relation_type ) { if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) { $urls[] = array( 'href' => 'https://fonts.gstatic.com', 'crossorigin', ); } return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

従来の方法の何が問題なのか

いいですよね？ ただし、問題があります。 2022 年 XNUMX 月、 ドイツの地方裁判所が罰金を科した ヨーロッパの GDPRの要件. 問題？ サイトで Google フォントをエンキューすると、訪問者の IP アドレスが公開され、ユーザーのプライバシーが危険にさらされました。 CSS-Tricks では、これについて少し前に説明しました。

　 ブロックテーマを作成 プラグインは、Google Fonts API を活用してローカル ベンダーのプロキシとしてのみ機能するため、GDPR のプライバシー要件を満たしています。 フォントは、Google のサーバーではなく同じ Web サイトでユーザーに提供されるため、プライバシーが保護されます。 WP Tavern ドイツの裁判所の判決について説明し、Google フォントのセルフホスティングに関するガイドへのリンクが含まれています。

ブロックテーマでGoogleフォントを使用する方法

これにより、WordPress のブロック テーマで Google フォントを使用する今日の「現代的な」方法が実現します。 まず、ローカル テスト サイトをセットアップしましょう。 フライホイールを使っています ローカル ローカル開発用アプリ。 それまたは好きなものを使用してから、 テーマ テスト データ プラグイン ダミーコンテンツを扱うためのWordPressテーマチームによる。 そしてもちろん、あなたは ブロックテーマを作成 そこにもプラグイン。

それらのプラグインをインストールして有効にしましたか? その場合は、に移動します 外観 → テーマ フォントの管理 ワードプレスの管理メニューから。

「テーマフォントの管理」画面には、テーマのフォントですでに定義されているフォントのリストが表示されます。 theme.json ファイル。 画面の上部にも XNUMX つのオプションがあります。

• Google フォントを追加します。 このオプションは、Google フォント API から直接 Google フォントをテーマに追加します。
• ローカル フォントを追加します。 このオプションは、ダウンロードしたフォント ファイルをテーマに追加します。

WordPressの完全に空白のテーマを使用しています 空のテーマ. 独自のテーマを自由に作成できますが、Emptytheme の名前を「EMPTY-BLANK」に変更して変更したことを強調しておきたいと思います。そのため、定義済みのフォントやスタイルはまったくありません。

テーマのファイル構造のスクリーンショットを共有すると思いました。 theme.json ファイルを調べて、文字通りスタイルや構成が行われていないことを示します。

「Google Fontsを追加」ボタンをクリックしてみましょう。 現在のフォントから使用可能なフォントを選択するオプションを含む新しいページに移動します でログイン Fオント API.

このデモでは、 インター オプションのメニューから、プレビュー画面から 300、レギュラー、および 900 のウェイトを選択します。

選択内容を保存すると、選択した Inter フォント スタイルが自動的にダウンロードされ、テーマの assets/fonts フォルダ：

これらの選択がどのように自動的に theme.json そのスクリーンショットのファイル。 Create Block Theme プラグインは、フォント ファイルへのパスも追加します。

{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fontFamilies": [ { "fontFamily": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "300", "src": [ "file:./assets/fonts/inter_300.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "900", "src": [ "file:./assets/fonts/inter_900.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/inter_regular.ttf" ] } ] } ] } }
}

Create Block Theme のメイン画面に移動し、 テーマ フォントの管理 ボタンを再度クリックすると、インテルの 300、400 (レギュラー)、および 900 の重量バリエーションがプレビュー パネルに表示されます。

A デモ テキスト プレビュー ボックス 上部のフォント サイズ選択スライダーを使用して、文、ヘッダー、および段落内で選択したフォントをプレビューすることもできます。 この新機能の動作を確認するには、 この GitHub ビデオ.

選択したフォントは、サイト エディターでも使用できます グローバルスタイル (外観 → エディター)、具体的には [デザイン] パネルで。

ここから、に移動します テンプレート → インデックス そして青色をクリック 編集 を編集するボタン index.html レンプレート。 を開きたい グローバルスタイル 画面の右上にあるコントラスト アイコンとして表されます。 をクリックすると テキスト 設定を開き、 フォント のメニュー タイポグラフィ セクション…インテルが見えます！

同じことですが、ローカルフォントを使用します

Create Block Theme プラグインがそのオプションを提供しているので、ローカル フォントをテーマに追加することも検討する必要があります。 利点は、好みのフォント サービスから任意のフォント ファイルを使用できることです。

プラグインがなければ、フォント ファイルを取得し、それらをテーマ フォルダのどこかにドロップしてから、従来の PHP ルートに頼る必要があります。 functions.php ファイル。 しかし、Web サイトにフォントファイルをアップロードすることで、WordPress にその負担を負わせることができます。 ローカル フォントを追加する ブロック テーマの作成インターフェイスを使用した画面。 アップロードするファイルを選択すると、フォント フェース定義ボックスが自動的に入力されます。

どれでも使えるのに .ttf, .woffまたは .woff2 ファイル、私は単にダウンロードしました Google Fonts から Sans フォント ファイルを開く この演習のために。 レギュラーと800のXNUMXつのウェイトバリエーションを手に入れました。

同じ自動魔法のファイル管理と theme.json Google フォント オプションで見た更新は、フォント ファイルをアップロードするときにもう一度行われます (一度に XNUMX つずつ行われます)。 フォントがテーマ フォルダーのどこに配置され、どのように追加されるかを確認してください theme.json:

フォントの削除

このプラグインを使用すると、WordPress 管理者からブロック テーマからフォント ファイルを削除することもできます。 前のセクションでインストールした Open Sans の亜種の XNUMX つを削除して、それがどのように機能するかを見てみましょう。

クリック 削除します リンクをクリックすると、削除を確認する警告が表示されます。 クリックします OK 続行します。

テーマフォルダを開いて確認しましょう theme.json ファイル。 案の定、プラグイン画面で削除した Open Sans 800 ファイルにより、テーマ フォルダーからフォント ファイルが削除され、それへの参照は長い間失われています。 theme.json.

進行中の作業があります

この「フォントマネージャー」機能をWordPressコアに追加するという話があります 別のプラグインを必要とするのではなく。

機能の最初の繰り返し レポで利用可能ですであり、この記事で使用したのとまったく同じアプローチを使用します。 そのはず GDPR準拠、 それも。 特徴は WordPress 6.3 で上陸予定 今年後半にリリース。

包み込む

Create Block Theme プラグインは、WordPress のブロック テーマでフォントを処理する際のユーザー エクスペリエンスを大幅に向上させます。 プラグインを使用すると、GDPR 要件を尊重しながら、フォントを追加または削除できます。

Google フォントを選択するか、ローカル フォント ファイルをアップロードすると、自動的にフォントがテーマ フォルダーに配置され、 theme.json ファイル。 また、サイト エディターのグローバル スタイル設定で、フォントが利用可能なオプションであることも確認しました。 フォントを削除する必要がある場合は？ プラグインは、テーマファイルやコードに触れることなく、それも完全に処理します.

読んでくれてありがとう！ コメントや提案がある場合は、コメントで共有してください。 WordPress でのフォント管理の方向性について、あなたの考えを知りたいです。

その他のリソース

私はこの記事を書くために多くの調査に依存しており、追加のコンテキストを提供するために使用した記事とリソースを共有すると考えました.

WordPress フォント管理

GitHubの問題

ヨーロッパの GDPR 要件

• SEO を活用したコンテンツと PR 配信。 今日増幅されます。
• Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
• 情報源： https://css-tricks.com/managing-fonts-in-wordpress-block-themes/