web-dev-qa-db-ja.com

WordPressカスタマイザタイポグラフィ：ユニークなGoogleフォントだけを読み込む方法は？

私はシステムフォントやグーグルフォントを含む何百ものフォントフェースの10の大きなドロップダウン選択コンボボックスを持っています。すべてのコンボボックスは同じ値を持ちます。

上記の各ボックスには、言語とフォントの太さのセットをロードするためのコンボボックスが2つあります。選択されたフォントがGoogleのフォントである場合にのみ、これらは表示/アクティブになります。

私はjson_decodeを通してJSONファイルを通して選択リストのすべてのフォントフェースを得ています。以前は、System FontsとGoogle Fontsに別々のコンボボックスを使用していましたが、その作業は今よりも少し簡単になりました。

JSONファイルは以下のようなものです（ほんの一例）。

{
   "fonts":[
      "Arial",
      "Helvetica",
      "Georgia",
      "Aclonica",
      "Acme",
      "Actor",
      "Adamina",
      "Advent Pro",
      "Aguafina Script"
   ]
}

それから、JSONファイルからこれらすべての値を配列として取得するために関数（JSON_fontsと呼びます）を使用します。

$wp_customize->add_control( 'font_1',
    array(
        'label' => esc_html( 'Body Font', 'my_theme' ),
        'section' => 'typography',
        'type' => 'select',
        'choices' => JSON_fonts()
    )
);

（私はシステムフォントとグーグルフォントには別々のJSONファイルを使うべきだと思います）。

私がやりたいことは、選択ボックスのフォントにキーを割り当ててその種類を検出することです（システムフォントかGoogleか）。

選択した値がGoogleフォントの場合は、次のようになります。

  1. それを変数に集めて、さらにキューに入れるために使用します。
  2. それぞれのフォントフェースの言語とフォントウェイト選択ボックスを有効にします。

キューに入れても問題ありませんが、フォントの種類と固有の値を取得するのは私にとって非常に問題があります。

  • 複雑度1：フォントタイプの取得
  • 複雑さ2：フォントが一致する場合は、それぞれの言語とフォントの太さのリストをマージします（1対1の一致ではコードが多すぎます）。
  • 複雑さ3：カスタマイザを更新せずにフォントをリロードするようにwp-ajaxに依頼する。

任意の助けは大歓迎です。また、複雑さレベルを下げるためにあなたの考えを自由に共有してください。

theme-developmenttheme-customizertheme-optionsjson
3
Rahul Arora

この質問は、Q＆Aフォーマットで完全に答えるには広すぎますが、ここではおおまかに言っておきます。

  1. すべてのシステムフォントを$sys_fonts配列にまとめます
  2. すべてのGoogleフォントを$ggl_fontsという配列で集める
  3. 多次元配列で Googleフォントに関する完全な情報 を集める$ggl_fontinfo
  4. $sys_fontsと$ggl_fontsを配列$total_fontsにマージする
  5. ドロップダウンに$total_fontsを使う
  6. Jqueryを使って、ドロップダウンからどの項目が選択されているかを検出する
  7. 項目がsys_fonts通常の手順を使用 にある場合は、ページを再ロードせずにCSSを変更します。
  8. 項目がggl_fontsにある場合は、ggl_fontinfoでバリアント（太字、斜体など）およびサブセット（言語）を検索するためのキーとして使用します。次に、フォームに フィールドを動的に追加 を入力します。すべて設定したら、必要なフォントファイルをggl_fontinfoと 動的に読み込む でページに探します。

スキルによっては、実装に数日かかることがあるので注意してください（これがカットアンドペースト対応の回答を無料で入手できない理由です）。

2
cjbj

あなたができることはあなたの選択がこのようなものになるように、それぞれの選択keyにそれぞれのグーグルフォントのために接頭辞を加えることです：

$choices = array(
     '_google_open_sans' => 'Open Sans',
     '_google_titillium' => 'Titillium Web',
     'arial' => 'Arial',
);

次に、選択したフォントのリストを調べていくと、キーの_google_プレフィックスを確認するだけで済みます。 Web Font Loader を使用すると、更新せずにカスタマイザを更新できます。 選択的リフレッシュ に差し込むだけです。

ちょっと複雑すぎる？

私は実際に私がクライアントのために作ったテーマのために上記のアプローチを試みました。私はGoogle Fonts APIを使ってフォントのリストを取得し、それをキャッシュに入れ、それから事前に生成されたシステムフォントのリストと混ぜ合わせました。

しかし、最終的なシステムは少し面倒でした。各ドロップダウンを2つのテキストボックスに置き換えました。最初のものは（Titillium+Web:400,400i,600,600iのように）実行するGoogleフォントのインポート文を指定し、2番目のものは（"Titillium Web", Arial, sans-serifのように）font-familyを指定しました。

これは私のクライアントにとっては本当に簡単でした。粗いドロップダウンをスキャンする代わりに、必要なものをコピー＆ペーストするだけでした。これにより、フォントリストをキャッシュする必要もなくなりました。

0
ricotheque