【WordPress】wp_enqueue_styleでGoogleFontsが1種類しか読み込めないときの解決方法

WordPressでスタイルシートを読み込むには、wp_enqueue_style()関数を使用します。

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
 $handleスタイルシートのハンドルとして使われる一意の名称
 $srcスタイルシートの URL
 $depsこのスタイルシートが依存する他のスタイルシートのハンドル配列
 $verスタイルシートのバージョン番号を指定する文字列 (初期値はWPのバージョン)
 $mediaスタイルシートが定義されているメディアを指定する文字列(例: ‘all’、’screen’、’print’)

引数はたくさんありますが、通常は$handle$srcがあれば問題なく利用できます。

例えばGoogle fontsのNoto Sans JPRobotoを利用する場合は下記になります。

Google fonts

wp_enqueue_style(
  'googlefonts',
  'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap'
);

ところが出力されたソースコードを確認してみると、最後のfamilyパラメータ、この場合Noto Sans JPのみが残り、Robotoが読み込まれていません。

<link rel='stylesheet' id='googlefonts-css'  href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP%3Awght%40400%3B700%3B900&display=swap&ver=6.0' type='text/css' media='all' />

wp_enqueue_style関数では、$verを指定しない(falseの)場合、現在インストールされているWordPressバージョンと同じバージョン番号が自動的に追加されます。その際、URLに複数のfamilyがあると最後のfamilyだけに書き換えられます。これは$vernullを指定することで回避できます。

wp_enqueue_style(
  'googlefonts',
  'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap',
  array(),
  null //バージョンを追加しない(調整を防ぐ)
);

ソースコードを確認するとNoto Sans JPRoboto、両方が読み込まれているのを確認できました。

<link rel='stylesheet' id='googlefonts-css'  href='https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap' type='text/css' media='all' />
目次

WordPress・Webサイトのカスタマイズ・トラブルを解決します

  • WordPress・Webサイトの新規開設・お引越し
  • WordPress・Webサイトの表示崩れ・エラー修正
  • WordPress・Webサイトのテキストや画像、デザインの差し替え
  • WordPress・Webサイトのテーマ・追加機能の開発
  • WordPress・Webサイトのアクセス解析タグ(GA・GTM)設置・設計
  • WordPress・Webサイトの改善アドバイス・コンサルティング

など、WordPress・Webサイトに関する事ならお手伝いできます!

ココナラでご依頼を承っておりますので、ぜひお気軽にご相談ください!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次